Website update for v1.1.1 release

docs/assets/css/new.css

@@ -3,7 +3,9 @@ body {
   font-family: "Open Sans", sans-serif;
 }
 
-.mdl-layout__title a, .mdl-navigation__link, .hero-container {
+.mdl-layout__title a,
+.mdl-navigation__link,
+.hero-container {
   font-family: "Manrope";
 }
 
@@ -28,15 +30,19 @@ a:hover {
   text-decoration: underline;
 }
 
-a, a:visited, a:hover, a:active {
+a,
+a:visited,
+a:hover,
+a:active {
   color: #07a3ba;
 }
 
 .spacer {
   width: 100%;
 }
 
-.link-out, .resource-card-cta-button a {
+.link-out,
+.resource-card-cta-button a {
   font-family: "Manrope";
   font-weight: 600;
   font-size: 20px;
@@ -134,11 +140,13 @@ h5 {
   color: black;
 }
 
-.mdl-layout__title a:visited, .mdl-layout__title a:active {
+.mdl-layout__title a:visited,
+.mdl-layout__title a:active {
   color: inherit;
 }
 
-.sub-hero-container, .tutorial-hero-container {
+.sub-hero-container,
+.tutorial-hero-container {
   width: 100%;
   height:225px;
   background-size: cover;
@@ -180,7 +188,11 @@ h5 {
   margin-left: 5px;
 }
 
-.hero-container, .main-page-container, .sub-page-container, .tutorial-page-container, .footer-container {
+.hero-container,
+.main-page-container,
+.sub-page-container,
+.tutorial-page-container,
+.footer-container {
   margin: 0 auto;
   max-width:950px;
 }
@@ -209,7 +221,8 @@ h5 {
   border-radius: 8px;
 }
 
-.home-card-action, .section-action {
+.home-card-action,
+.section-action {
   font-weight: 600;
   font-size: 16px;
   line-height: 22px;
@@ -250,11 +263,15 @@ h5 {
   margin-bottom: 50px;
 }
 
-.home-card-cta-button a:link, .link-out a:link {
+.home-card-cta-button a:link,
+.link-out a:link {
   text-decoration: none;
 }
 
-.home-card-cta-button a:visited, .home-card-cta-button a:active, .link-out a:visited, .link-out a:active {
+.home-card-cta-button a:visited,
+.home-card-cta-button a:active,
+.link-out a:visited,
+.link-out a:active {
   color: #07a3ba;
 }
 
@@ -270,7 +287,9 @@ h5 {
 	overflow:hidden;
 }
 
-.video-container iframe, .video-container object, .video-container embed {
+.video-container iframe,
+.video-container object,
+.video-container embed {
 	position:absolute;
 	top:0;
 	left:0;
@@ -315,8 +334,8 @@ h5 {
   color: #3C4043;
 }
 
-
-.sub-title, .tutorial-title {
+.sub-title,
+.tutorial-title {
   color: white;
   font-size: 32px;
   line-height: 40px;
@@ -330,22 +349,27 @@ h5 {
   line-height: 28px;
 }
 
-
-.capability-element, .tutorial-link-element {
+.capability-element,
+.tutorial-link-element {
   margin-top:48px;
   border-bottom: 1px solid #A4B7C8;
 }
 
-.capability-title a, .tutorial-link-title a {
+.capability-title a,
+.tutorial-link-title a {
   text-decoration: none;
   color: inherit;
 }
 
-.capability-title a:hover, .tutorial-link-title a:hover {
+.capability-title a:hover,
+.tutorial-link-title a:hover {
   text-decoration: underline;
 }
 
-.capability-title a:visited, .tutorial-link-title a:visited, .capability-title a:active, .tutorial-link-title a:active {
+.capability-title a:visited,
+.tutorial-link-title a:visited,
+.capability-title a:active,
+.tutorial-link-title a:active {
   color: inherit;
 }
 
@@ -365,7 +389,8 @@ h5 {
   margin: 25px 0px;
 }
 
-.capability-copy, .tutorial-link-copy {
+.capability-copy,
+.tutorial-link-copy {
   margin-bottom: 15px;
 }
 
@@ -375,7 +400,8 @@ h5 {
   padding: 12px;
 }
 
-.resource-card-title, .demo-card-title {
+.resource-card-title,
+.demo-card-title {
   font-size: 22px;
   line-height: 28px;
   color: #8230cd;
@@ -391,7 +417,8 @@ h5 {
   text-decoration: underline;
 }
 
-.demo-card-title a:visited, .demo-card-title a:active {
+.demo-card-title a:visited,
+.demo-card-title a:active {
   color: inherit;
 }
 
@@ -417,7 +444,8 @@ h5 {
   margin-bottom: 25px;
 }
 
-.resource-card-copy, .demo-card-copy {
+.resource-card-copy,
+.demo-card-copy {
   font-size: 16px;
   line-height: 20px;
   letter-spacing: 0.2px;
@@ -455,19 +483,47 @@ h5 {
   display: inline-block;
 }
 
-
 .tutorial-image {
   width: 100%;
+  cursor: zoom-in;
+}
+
+.tutorial-image-popover {
+  border: 0;
+  padding: 0;
+  background: transparent;
+  pointer-events: none; /* click to close image */
+}
+
+.tutorial-image-popover .tutorial-image {
+  max-width: calc(100vw - 80px);
+  max-height: calc(100vh - 80px);
+
+  cursor: zoom-out;
+  /* block the default popover close; we'll use js instead */
+  pointer-events: all;
+  /* in case image itself has transparency */
+  background: white;
 }
 
-.tutorial-page-container p, .tutorial-page-container ul, .tutorial-page-container ol {
+.tutorial-image-popover::backdrop {
+  background: rgba(0, 0, 0, 0.60);
+}
+
+.tutorial-page-container p,
+.tutorial-page-container ul,
+.tutorial-page-container ol {
   font-family: "Open Sans";
   font-size: 18px;
   line-height: 24px;
   letter-spacing: 0.1px;
   color: #0E0F12;
 }
 
+.tutorial-page-container p > code {
+  color: #c26412;
+}
+
 .tutorial-breadcrumbs {
   margin: 72px 0 24px 0;
   font-family: "Manrope";
@@ -488,7 +544,8 @@ h5 {
   text-decoration: underline;
 }
 
-.tutorial-breadcrumbs a:active, .tutorial-breadcrumbs a:visited {
+.tutorial-breadcrumbs a:active,
+.tutorial-breadcrumbs a:visited {
   color: inherit;
 }
 
@@ -544,6 +601,18 @@ h5 {
   margin-bottom: 20px;
 }
 
+details:not([open]) .info-box-title {
+  margin-bottom: 0;
+}
+
+summary {
+  cursor: pointer;
+}
+
+summary::marker {
+  color: #0B6F7A;
+}
+
 .info-box-text,
 .info-box-text p,
 .info-box-text ul {
@@ -627,7 +696,11 @@ h5 {
     display: none;
   }
 
-  .hero-container, .main-page-container, .sub-page-container, .tutorial-page-container, .footer-container {
+  .hero-container,
+  .main-page-container,
+  .sub-page-container,
+  .tutorial-page-container,
+  .footer-container {
     margin: 0 16px;
   }
 

docs/assets/css/prism-material-light.css

@@ -5,7 +5,7 @@ pre[class*="language-"] {
 	word-spacing: normal;
 	word-break: normal;
 	word-wrap: normal;
-	color: #90a4ae;
+	color: #5f6368;
 	background: #fafafa;
 	font-family: Roboto Mono, monospace;
 	font-size: 1em;
@@ -21,6 +21,10 @@ pre[class*="language-"] {
 	hyphens: none;
 }
 
+code[class*="language-text"] {
+	text-wrap: wrap;
+}
+
 code[class*="language-"]::-moz-selection,
 pre[class*="language-"]::-moz-selection,
 code[class*="language-"] ::-moz-selection,
@@ -204,4 +208,4 @@ pre[class*="language-"] {
 
 .token.variable {
 	color: #e53935;
-}
+}

docs/documentation/_sources/components.md.txt

@@ -433,35 +433,47 @@ You don't have to call the field "label", and it's okay if this field isn't
 present in the *dataset* - as long as it's something that the model will
 recognize and use as the target to derive gradients.
 
-### Sequence salience
+## Sequence Salience
 
-Sequence salience generalizes the salience methods mentioned above to
-text-to-text generative models and explains the impact of the preceding tokens
-on the generated tokens. Currently, we support sequence salience computation for
-various OSS modeling frameworks, including KerasNLP and Hugging Face
-Transformers.
+Sequence salience generalizes token-based salience to text-to-text models,
+allowing you to explain the impact of the prompt tokens on parts of the model
+output.
 
-Sequence salience in the LIT UI provides multiple options for analysis,
-including:
+LIT has a general-purpose sequence salience visualization designed for
+left-to-right ("causal") language models:
 
-*   running the salience methods on the text from the dataset (target) or from
-    the model (response).
-*   computing the sequence salience through [Gradient Norm](#gradient-norm) or
-    [Gradient-dot-Input](#gradient-dot-input).
-*   selecting different granularity levels for salience analysis, from the
-    smallest possible level of tokens, to more interpretable larger spans, such
-    as words, sentences, lines, or paragraphs.
+![Sequence salience - sequence selection](./images/components/sequence-salience-1.png){w=650px align=center}
+
+![Sequence salience - visualization](./images/components/sequence-salience-2.png){w=650px align=center}
 
-(a) Options for sequence salience.                                                                 | (b) Sequence salience visualization.
--------------------------------------------------------------------------------------------------- | ------------------------------------
-![Sequence salience selections](./images/components/sequence-salience-selections.png){w=650px align=center} | ![Sequence salience vis](./images/components/sequence-salience-vis.png){w=650px align=center}
+The UI supports multiple options for analysis, including:
 
+*   Select from pre-defined target sequences, or explain generations from the
+    model.
+*   Different salience methods, including [Gradient Norm](#gradient-norm) and
+    [Gradient-dot-Input](#gradient-dot-input).
+*   Multiple granularity levels for analysis, from individual sub-word tokens up
+    to words, sentences, lines, or paragraphs. Quickly switch between different
+    views to refine your analysis to different parts of a prompt.
+*   Display density options to enable working with longer sequences, such as
+    document text, few-shot eaxmples, or chain-of-thought prompts.
+
+For a walkthrough of how to use sequence salience to debug LLMs, check out the
+Responsible Generative AI Toolkit at
+https://ai.google.dev/responsible/model_behavior.
 
 **Code:**
 
-* Demo: [`lm_salience_demo.py`](https://github.com/PAIR-code/lit/blob/main/lit_nlp/examples/lm_salience_demo.py)
-* KerasNLP model wrappers: [`instrumented_keras_lms.py`](https://github.com/PAIR-code/lit/blob/main/lit_nlp/examples/models/instrumented_keras_lms.py)
-* Transformers model wrappers: [`pretrained_lms.py`](https://github.com/PAIR-code/lit/blob/main/lit_nlp/examples/models/pretrained_lms.py)
+*   LIT-for-Gemma Colab: [`lit_gemma.ipynb`](https://colab.research.google.com/github/google/generative-ai-docs/blob/main/site/en/gemma/docs/lit_gemma.ipynb)
+*   Demo binary:
+    [`lm_salience_demo.py`](https://github.com/PAIR-code/lit/blob/main/lit_nlp/examples/lm_salience_demo.py)
+*   KerasNLP model wrappers:
+    [`instrumented_keras_lms.py`](https://github.com/PAIR-code/lit/blob/main/lit_nlp/examples/models/instrumented_keras_lms.py)
+*   Transformers model wrappers:
+    [`pretrained_lms.py`](https://github.com/PAIR-code/lit/blob/main/lit_nlp/examples/models/pretrained_lms.py)
+
+Currently, this works out-of-the-box
+with Gemma models (using Keras) as well as with GPT-2.
 
 
 ## Salience Clustering

docs/documentation/_sources/demos.md.txt

@@ -80,6 +80,20 @@ https://pair-code.github.io/lit/tutorials/sentiment
 
 ## Sequence-to-Sequence <!-- DO NOT REMOVE {#seq2seq .demo-section-header} -->
 
+### Gemma <!-- DO NOT REMOVE {#gemma .demo-header} -->
+
+**Code:** [examples/lm_salience_demo.py](https://github.com/PAIR-code/lit/blob/main/lit_nlp/examples/lm_salience_demo.py)
+
+*   Supports Gemma 2B and 7B models using KerasNLP and TensorFlow.
+*   Interactively debug LLM prompts using
+    [sequence salience](./components.md#sequence-salience).
+*   Multiple salience methods (grad-l2 and grad-dot-input), at multiple
+    granularities: token-, word-, sentence-, and paragraph-level.
+
+Tip: check out the in-depth walkthrough at
+https://ai.google.dev/responsible/model_behavior, part of the Responsible
+Generative AI Toolkit.
+
 ### T5 <!-- DO NOT REMOVE {#t5 .demo-header} -->
 
 **Hosted instance:** https://pair-code.github.io/lit/demos/t5.html \