Use mkdocs for documentation

.github/workflows/docs.yml

@@ -0,0 +1,52 @@
+name: Deploy docs
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - 'master'
+  pull_request:
+permissions:
+  contents: write
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+
+      - name: Configure Git Credentials
+        run: |
+          git config user.name github-actions[bot]
+          git config user.email 41898282+github-actions[bot]@users.noreply.github.com
+        if: (github.event_name != 'pull_request')
+
+      - name: Set up Python 3.9
+        uses: actions/setup-python@v5
+        with:
+          python-version: '3.9'
+          cache: 'pip'
+          cache-dependency-path: |
+            setup.py
+            requirements-docs.txt
+
+      - name: Save time for cache for mkdocs
+        run: echo "cache_id=$(date --utc '+%V')" >> $GITHUB_ENV
+
+      - name: Caching
+        uses: actions/cache@v4
+        with:
+          key: mkdocs-material-${{ env.cache_id }}
+          path: .cache
+          restore-keys: |
+            mkdocs-material-
+
+      - name: Install Dependencies
+        run: pip install -r requirements-docs.txt
+
+      - name: Deploy to GitHub Pages
+        run: mkdocs gh-deploy --force
+        if: (github.event_name != 'pull_request')
+
+      - name: Build docs to check for errors
+        run: mkdocs build
+        if: (github.event_name == 'pull_request')

g3doc/guide/guidance.md → docs/guide/guidance.md

@@ -21,7 +21,7 @@ sociolinguists, and cultural anthropologists, as well as with members of the
 populations on which technology will be deployed.
 
 A single model, for example, the toxicity model that we leverage in the
-[example colab](https://www.tensorflow.org/responsible_ai/fairness_indicators/tutorials/Fairness_Indicators_Example_Colab),
+[example colab](../../tutorials/Fairness_Indicators_Example_Colab),
 can be used in many different contexts. A toxicity model deployed on a website
 to filter offensive comments, for example, is a very different use case than the
 model being deployed in an example web UI where users can type in a sentence and
@@ -315,7 +315,7 @@ Prediction Flip Count** *
 **Don’t see the metrics you’re looking for?**
 
 Follow the documentation
-[here](https://github.com/tensorflow/model-analysis/blob/master/g3doc/post_export_metrics.md)
+[here](https://tensorflow.github.io/model-analysis/post_export_metrics/)
 to add you own custom metric.
 
 ## Final notes

docs/index.md

@@ -0,0 +1,94 @@
+# Fairness Indicators
+
+/// html | div[style='float: left; width: 50%;']
+Fairness Indicators is a library that enables easy computation of commonly-identified fairness metrics for binary and multiclass classifiers. With the Fairness Indicators tool suite, you can:
+
+- Compute commonly-identified fairness metrics for classification models
+- Compare model performance across subgroups to a baseline, or to other models
+- Use confidence intervals to surface statistically significant disparities
+- Perform evaluation over multiple thresholds
+
+Use Fairness Indicators via the:
+
+- [Evaluator component](https://tensorflow.github.io/tfx/guide/evaluator/) in a [TFX pipeline](https://tensorflow.github.io/tfx/)
+- [TensorBoard plugin](https://github.com/tensorflow/tensorboard/blob/master/docs/fairness-indicators.md)
+- [TensorFlow Model Analysis library](https://tensorflow.github.io/tfx/guide/fairness_indicators/)
+- [Model Agnostic TFMA library](https://tensorflow.github.io/tfx/guide/fairness_indicators/#using-fairness-indicators-with-non-tensorflow-models)
+<!-- TODO: Change the TFMA link when the new docs are deployed -->
+///
+
+/// html | div[style='float: right;width: 50%;']
+```python
+eval_config_pbtxt = """
+
+model_specs {
+    label_key: "%s"
+}
+
+metrics_specs {
+    metrics {
+        class_name: "FairnessIndicators"
+        config: '{ "thresholds": [0.25, 0.5, 0.75] }'
+    }
+    metrics {
+        class_name: "ExampleCount"
+    }
+}
+
+slicing_specs {}
+slicing_specs {
+    feature_keys: "%s"
+}
+
+options {
+    compute_confidence_intervals { value: False }
+    disabled_outputs{values: "analysis"}
+}
+""" % (LABEL_KEY, GROUP_KEY)
+```
+///
+
+/// html | div[style='clear: both;']
+///
+
+<div class="grid cards" markdown>
+
+-   ![ML Practicum: Fairness in Perspective API using Fairness Indicators](https://www.tensorflow.org/static/responsible_ai/fairness_indicators/images/mlpracticum_480.png)
+
+    ### [ML Practicum: Fairness in Perspective API using Fairness Indicators](https://developers.google.com/machine-learning/practica/fairness-indicators?utm_source=github&utm_medium=github&utm_campaign=fi-practicum&utm_term=&utm_content=repo-body)
+
+    ---
+
+    [Try the Case Study](https://developers.google.com/machine-learning/practica/fairness-indicators?utm_source=github&utm_medium=github&utm_campaign=fi-practicum&utm_term=&utm_content=repo-body)
+
+-   ![Fairness Indicators on the TensorFlow blog](images/tf_full_color_primary_icon.svg)
+
+    ### [Fairness Indicators on the TensorFlow blog](https://blog.tensorflow.org/2019/12/fairness-indicators-fair-ML-systems.html)
+
+    ---
+
+    [Read on the TensorFlow blog](https://blog.tensorflow.org/2019/12/fairness-indicators-fair-ML-systems.html)
+
+-   ![Fairness Indicators on GitHub](https://www.tensorflow.org/static/resources/images/github-card-16x9_480.png)
+
+    ### [Fairness Indicators on GitHub](https://github.com/tensorflow/fairness-indicators)
+    ---
+
+    [View on GitHub](https://github.com/tensorflow/fairness-indicators)
+
+-   ![Fairness Indicators on the Google AI Blog](https://www.tensorflow.org/static/responsible_ai/fairness_indicators/images/googleai_720.png)
+
+    ### [Fairness Indicators on the Google AI Blog](https://ai.googleblog.com/2019/12/fairness-indicators-scalable.html)
+    ---
+
+    [Read on Google AI blog](https://ai.googleblog.com/2019/12/fairness-indicators-scalable.html)
+
+-   <iframe width="560" height="315" src="https://www.youtube.com/embed/6CwzDoE8J4M?si=gIL2KHdj96_SxdVH" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
+    ### [Fairness Indicators at Google I/O](https://www.youtube.com/watch?v=6CwzDoE8J4M)
+
+    ---
+
+    [Watch the video](https://www.youtube.com/watch?v=6CwzDoE8J4M)
+
+</div>

docs/javascripts/mathjax.js

@@ -0,0 +1,19 @@
+window.MathJax = {
+  tex: {
+    inlineMath: [["\\(", "\\)"]],
+    displayMath: [["\\[", "\\]"]],
+    processEscapes: true,
+    processEnvironments: true
+  },
+  options: {
+    ignoreHtmlClass: ".*|",
+    processHtmlClass: "arithmatex"
+  }
+};
+
+document$.subscribe(() => { 
+  MathJax.startup.output.clearCache()
+  MathJax.typesetClear()
+  MathJax.texReset()
+  MathJax.typesetPromise()
+})

docs/stylesheets/extra.css

@@ -0,0 +1,42 @@
+:root {
+  --md-primary-fg-color:        #FFA800;
+  --md-primary-fg-color--light: #CCCCCC;
+  --md-primary-fg-color--dark:  #425066;
+}
+
+.video-wrapper {
+  max-width: 240px;
+  display: flex;
+  flex-direction: row;
+}
+.video-wrapper > iframe {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+}
+
+.buttons-wrapper {
+    flex-wrap: wrap;
+    gap: 1em;
+    display: flex;
+    /* flex-grow: 1; */
+    /* justify-content: center; */
+    /* align-content: center; */
+}
+
+.buttons-wrapper > a {
+    justify-content: center;
+    align-content: center;
+    flex-wrap: nowrap;
+    /* gap: 1em; */
+    align-items: center;
+    text-align: center;
+    flex: 1 1 30%;
+    display: flex;
+}
+
+.md-button > .buttons-content {
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    gap: 1em;
+}