Support markdown in component descriptions.

PiperOrigin-RevId: 479065711
PAIR-code · Oct 5, 2022 · 0eaa00c · 0eaa00c
1 parent 5f20e0c
commit 0eaa00c
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 3 deletions.
diff --git a/lit_nlp/client/elements/interpreter_controls.css b/lit_nlp/client/elements/interpreter_controls.css
@@ -1,7 +1,11 @@
 .description {
   font-size: 8pt;
   color: rgb(60, 64, 67);
-  padding-top: 10px;
+}
+
+/* Reduce excess whitespace after markdown-formatted descriptions */
+.description > p:last-child {
+  margin-block-end: 0.25em;
 }
 
 .header {

diff --git a/lit_nlp/client/elements/interpreter_controls.ts b/lit_nlp/client/elements/interpreter_controls.ts
@@ -26,6 +26,7 @@ import {observable} from 'mobx';
 import {ReactiveElement} from '../lib/elements';
 import {BooleanLitType, CategoryLabel, SingleFieldMatcher, LitType, LitTypeWithVocab, MultiFieldMatcher, Scalar, SparseMultilabel, Tokens} from '../lib/lit_types';
 import {styles as sharedStyles} from '../lib/shared_styles.css';
+import {getTemplateStringFromMarkdown} from '../lib/utils';
 import {Spec} from '../lib/types';
 
 import {styles} from './interpreter_controls.css';
@@ -73,10 +74,12 @@ export class InterpreterControls extends ReactiveElement {
     const expandable =
         Object.keys(this.spec).length > 0 || this.description.length > 0;
 
+    const descriptionHTML = getTemplateStringFromMarkdown(this.description);
+
     // clang-format off
     const content = html`
         <div class="content">
-          <div class="description">${this.description}</div>
+          <div class="description">${descriptionHTML}</div>
           ${this.renderControls()}
           <div class="buttons-holder">
             <button class="filled-button" @click=${apply}

diff --git a/lit_nlp/components/ablation_flip.py b/lit_nlp/components/ablation_flip.py
@@ -72,7 +72,7 @@ class AblationFlip(lit_components.Generator):
   prediction flip.
 
   The number of model predictions made by this generator is upper-bounded by
-  <number of tokens> + 2**MAX_ABLATABLE_TOKENS. Since MAX_ABLATABLE_TOKENS is a
+  number of tokens + 2^MAX_ABLATABLE_TOKENS. Since MAX_ABLATABLE_TOKENS is a
   constant, effectively this generator makes O(n) model predictions, where n is
   the total number of tokens across all input fields.
   """