Merge pull request #1530 from PAIR-code/dev

Updating website

Author: bdu91

docs/demos/coref.html

@@ -98,17 +98,6 @@
   <div class="demo-card-copy">Analyze a tabular data model with LIT, including exploring partial dependence plots and automatically finding counterfactuals.</div>
   <div class="demo-card-cta-button"><a href="/lit/demos/penguins.html"></a></div>
 </div>
-<div class="demo-card mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-cell--4-col-phone">
-  <div class="demo-card-title"><a href="/lit/demos/images.html" target="_blank">Image classification</a></div>
-  <div class="demo-card-tags"> <span class="demo-tag"> images </span>  <span class="demo-tag"> multiclass classification </span> 
-  </div>
-  <div class="demo-card-data-source-title">DATA SOURCES</div>
-  <div class="demo-card-data-source">
-    Imagenette
-  </div>
-  <div class="demo-card-copy">Analyze an image classification model with LIT, including multiple image salience techniques.</div>
-  <div class="demo-card-cta-button"><a href="/lit/demos/images.html"></a></div>
-</div>
 <div class="demo-card mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-cell--4-col-phone">
   <div class="demo-card-title"><a href="/lit/demos/glue.html" target="_blank">Classification and regression models</a></div>
   <div class="demo-card-tags"> <span class="demo-tag"> BERT </span>  <span class="demo-tag"> binary classification </span>  <span class="demo-tag"> multi-class classification </span>  <span class="demo-tag"> regression </span> 
@@ -130,50 +119,6 @@
   </div>
   <div class="demo-card-copy">Use LIT directly inside a Colab notebook. Explore binary classification for sentiment analysis using SST2 from the General Language Understanding Evaluation (GLUE) benchmark suite.</div>
   <div class="demo-card-cta-button"><a href="https://colab.research.google.com/github/PAIR-code/lit/blob/main/lit_nlp/examples/notebooks/LIT_sentiment_classifier.ipynb"></a></div>
-</div>
-<div class="demo-card mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-cell--4-col-phone">
-  <div class="demo-card-title"><a href="/lit/demos/coref.html" target="_blank">Gender bias in coreference systems</a></div>
-  <div class="demo-card-tags"> <span class="demo-tag"> BERT </span>  <span class="demo-tag"> coreference </span>  <span class="demo-tag"> fairness </span>  <span class="demo-tag"> Winogender </span> 
-  </div>
-  <div class="demo-card-data-source-title">DATA SOURCES</div>
-  <div class="demo-card-data-source">
-    Winogender schemas
-  </div>
-  <div class="demo-card-copy">Use LIT to explore gendered associations in a coreference system, which matches pronouns to their antecedents. This demo highlights how LIT can work with structured prediction models (edge classification), and its capability for disaggregated analysis.</div>
-  <div class="demo-card-cta-button"><a href="/lit/demos/coref.html"></a></div>
-</div>
-<div class="demo-card mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-cell--4-col-phone">
-  <div class="demo-card-title"><a href="/lit/demos/lm.html" target="_blank">Fill in the blanks</a></div>
-  <div class="demo-card-tags"> <span class="demo-tag"> BERT </span>  <span class="demo-tag"> masked language model </span> 
-  </div>
-  <div class="demo-card-data-source-title">DATA SOURCES</div>
-  <div class="demo-card-data-source">
-    Stanford Sentiment Treebank, Movie Reviews
-  </div>
-  <div class="demo-card-copy">Explore a BERT-based masked-language model. See what tokens the model predicts should fill in the blank when any token from an example sentence is masked out.</div>
-  <div class="demo-card-cta-button"><a href="/lit/demos/lm.html"></a></div>
-</div>
-<div class="demo-card mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-cell--4-col-phone">
-  <div class="demo-card-title"><a href="/lit/demos/t5.html" target="_blank">Text generation</a></div>
-  <div class="demo-card-tags"> <span class="demo-tag"> T5 </span>  <span class="demo-tag"> generation </span> 
-  </div>
-  <div class="demo-card-data-source-title">DATA SOURCES</div>
-  <div class="demo-card-data-source">
-    CNN / Daily Mail
-  </div>
-  <div class="demo-card-copy">Use a T5 model to summarize text. For any example of interest, quickly find similar examples from the training set, using an approximate nearest-neighbors index.</div>
-  <div class="demo-card-cta-button"><a href="/lit/demos/t5.html"></a></div>
-</div>
-<div class="demo-card mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-cell--4-col-phone">
-  <div class="demo-card-title"><a href="/lit/demos/is_eval.html" target="_blank">Evaluating input salience methods</a></div>
-  <div class="demo-card-tags"> <span class="demo-tag"> BERT </span>  <span class="demo-tag"> salience </span>  <span class="demo-tag"> evaluation </span> 
-  </div>
-  <div class="demo-card-data-source-title">DATA SOURCES</div>
-  <div class="demo-card-data-source">
-    Stanford Sentiment Treebank, Toxicity
-  </div>
-  <div class="demo-card-copy">Explore the faithfulness of input salience methods on a BERT-base model across different datasets and artificial shortcuts.</div>
-  <div class="demo-card-cta-button"><a href="/lit/demos/is_eval.html"></a></div>
 </div>
   </div>
 </div>

docs/demos/images.html

@@ -1,6 +1,6 @@
 # LIT Python API
 
-<!--* freshness: { owner: 'lit-dev' reviewed: '2023-08-23' } *-->
+<!--* freshness: { owner: 'lit-dev' reviewed: '2024-06-24' } *-->
 
 <!-- [TOC] placeholder - DO NOT REMOVE -->
 
@@ -349,7 +349,7 @@ list of scores for each token. The Integrated Gradients saliency method
 additionally requires a `TokenEmbeddings` input and corresponding output, as
 well as a label field `Target` to pin the gradient target to the same class as
 an input and corresponding output. See the
-[GLUE models class](https://github.com/PAIR-code/lit/blob/main/lit_nlp/examples/models/glue_models.py)
+[GLUE models class](https://github.com/PAIR-code/lit/blob/main/lit_nlp/examples/glue/models.py)
 for an example of these spec requirements.
 
 The core API involves implementing the `run()` method:
@@ -675,7 +675,7 @@ Each `LitType` subclass encapsulates its own semantics (see
 *   A field that appears in _both_ the model's input and output specs is assumed
     to represent the same value. This pattern is used for model-based input
     manipulation. For example, a
-    [language model](https://github.com/PAIR-code/lit/blob/main/lit_nlp/examples/models/pretrained_lms.py)
+    [language model](https://github.com/PAIR-code/lit/blob/main/lit_nlp/examples/glue/models.py)
     might output `'tokens': lit_types.Tokens(...)`, and accept as (optional)
     input `'tokens': lit_types.Tokens(required=False, ...)`. An interpretability
     component could take output from the former, swap one or more tokens (e.g.
@@ -712,11 +712,9 @@ this can cause jitter (UI modules appearing, disappearing, reordering, resizing,
 etc.) when switching between models or datasets with heterogeneous `Spec`s.
 
 When implementing your own LIT components and modules, you can use
-[`utils.find_spec_keys()`][utils-lib]
-(Python) and
-[`findSpecKeys()`][utils-lib]
-(TypeScript) to identify fields of interest in a `Spec`. These methods recognize
-and respect subclasses. For example,
+[`utils.find_spec_keys()`][utils-lib-py] (Python) and
+[`findSpecKeys()`][utils-lib] (TypeScript) to identify fields of interest in a
+`Spec`. These methods recognize and respect subclasses. For example,
 `utils.find_spec_keys(spec, Scalar)` will also match any `RegressionScore`
 fields, but `utils.find_spec_keys(spec, RegressionScore)` will not return all
 `Scalar` fields in the `Spec`.
@@ -807,8 +805,13 @@ _See the [examples](https://github.com/PAIR-code/lit/blob/main/lit_nlp/examples)
 
 ### Available types
 
-The full set of `LitType`s is defined in [types.py](https://github.com/PAIR-code/lit/blob/main/lit_nlp/api/types.py). Numeric types such as `Integer` and `Scalar` have predefined ranges that can be overridden using corresponding `min_val` and `max_val` attributes as seen [here](https://github.com/PAIR-code/lit/blob/main/lit_nlp/examples/datasets/penguin_data.py;l=19-22;rcl=574999438). The different types available in LIT are summarized
-in the table below.
+The full set of `LitType`s is defined in
+[types.py](https://github.com/PAIR-code/lit/blob/main/lit_nlp/api/types.py). Numeric types
+such as `Integer` and `Scalar` have predefined ranges that can be overridden
+using corresponding `min_val` and `max_val` attributes as seen in
+[penguin data](https://github.com/PAIR-code/lit/blob/main/lit_nlp/examples/penguin/data.py)
+`INPUT_SPEC`. The different types available in LIT are summarized in the table
+below.
 
 Note: Bracket syntax, such as `<float>[num_tokens]`, refers to the shapes of
 NumPy arrays where each element inside the brackets is an integer.
@@ -859,7 +862,7 @@ naming collisions with protected TypeScript keywords.*
 Some properties of the LIT frontend can be configured from Python as
 **arguments to `dev_server.Server()`**. These include:
 
-*   `page_title`: set a custom page title, such as "Coreference Demo".
+*   `page_title`: set a custom page title.
 *   `canonical_url`: set a "canonical" URL (such as a shortlink) that will be
     used as the base when copying links from the LIT UI.
 *   `default_layout`: set the default UI layout, by name. See `layout.ts` and
@@ -886,22 +889,16 @@ You can specify custom web app layouts from Python via the `layouts=` attribute.
 The value should be a `Mapping[str, LitCanonicalLayout]`, such as:
 
 ```python
-LM_LAYOUT = layout.LitCanonicalLayout(
+PENGUIN_LAYOUT = layout.LitCanonicalLayout(
     upper={
-        "Main": [
-            modules.EmbeddingsModule,
+        'Main': [
+            modules.DiveModule,
             modules.DataTableModule,
             modules.DatapointEditorModule,
         ]
     },
-    lower={
-        "Predictions": [
-            modules.LanguageModelPredictionModule,
-            modules.ConfusionMatrixModule,
-        ],
-        "Counterfactuals": [modules.GeneratorModule],
-    },
-    description="Custom layout for language models.",
+    lower=layout.STANDARD_LAYOUT.lower,
+    description='Custom layout for the Palmer Penguins demo.',
 )
 ```
 
@@ -912,14 +909,12 @@ lit_demo = dev_server.Server(
     models,
     datasets,
     # other args...
-    layouts={"lm": LM_LAYOUT},
+    layouts=layout.DEFAULT_LAYOUTS | {'penguins': PENGUIN_LAYOUT},
+    default_layout='penguins',
     **server_flags.get_flags())
 return lit_demo.serve()
 ```
 
-For a full example, see
-[`lm_demo.py`](https://github.com/PAIR-code/lit/blob/main/lit_nlp/examples/lm_demo.py).
-
 You can see the pre-configured layouts provided by LIT, as well as the list of
 modules that can be included in your custom layout in
 [`layout.py`](https://github.com/PAIR-code/lit/blob/main/lit_nlp/api/layout.py). A
@@ -989,15 +984,15 @@ needing to reload the server or click the UI.
 For example, to view examples in a dataset:
 
 ```python
-from lit_nlp.examples.datasets import glue
-dataset = glue.SST2Data('validation')
+from lit_nlp.examples.glue import data as glue_data
+dataset = glue_data.SST2Data('validation')
 print(dataset.examples)  # list of records {"sentence": ..., "label": ...}
 ```
 
 And to run inference on a few of them:
 
 ```python
-from lit_nlp.examples.models import glue_models
+from lit_nlp.examples.glue import models as glue_models
 
 model = glue_models.SST2Model("/path/to/model/files")
 preds = list(model.predict(dataset.examples[:5]))
@@ -1021,16 +1016,19 @@ For a full working example in Colab, see [LIT_components_example.ipynb](https://
 <!-- Links -->
 
 [build-metadata]: https://github.com/PAIR-code/lit/blob/main/lit_nlp/app.py
-[components-py]: https://github.com/PAIR-code/lit/blob/main/lit_nlp/api/dataset.py
+[components-py]: https://github.com/PAIR-code/lit/blob/main/lit_nlp/api/components.py
 [curves-interp]: https://github.com/PAIR-code/lit/blob/main/lit_nlp/components/curves.py
 [dataset-py]: https://github.com/PAIR-code/lit/blob/main/lit_nlp/api/dataset.py
 [grad-maps]: https://github.com/PAIR-code/lit/blob/main/lit_nlp/components/gradient_maps.py
 [json]: https://www.json.org
 [mnli-dataset]: https://cims.nyu.edu/~sbowman/multinli/
+
 [mnli-demo]: https://pair-code.github.io/lit/demos/glue.html
-[model-py]: https://github.com/PAIR-code/lit/blob/main/lit_nlp/api/dataset.py
+
+[model-py]: https://github.com/PAIR-code/lit/blob/main/lit_nlp/api/model.py
 [should_display_module]: https://github.com/PAIR-code/lit/blob/main/lit_nlp/client/core/lit_module.ts
 [types_py]: https://github.com/PAIR-code/lit/blob/main/lit_nlp/api/types.py
 [types_ts]: https://github.com/PAIR-code/lit/blob/main/lit_nlp/client/lib/lit_types.ts
 [utils-lib]: https://github.com/PAIR-code/lit/blob/main/lit_nlp/client/lib/utils.ts
+[utils-lib-py]: https://github.com/PAIR-code/lit/blob/main/lit_nlp/lib/utils.py
 [word-replacer]: https://github.com/PAIR-code/lit/blob/main/lit_nlp/components/word_replacer.py