Support markdown in component descriptions.

PiperOrigin-RevId: 479065711

Author: iftenney

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 {

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}

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.
   """