Sequence salience for a decoder-only LM. Demo using GPT-2.

PiperOrigin-RevId: 606773805

lit_nlp/api/layout.py

@@ -21,7 +21,6 @@
 from lit_nlp.api import dtypes
 
 
-# LINT.IfChange
 # pylint: disable=invalid-name
 @enum.unique
 class LitModuleName(dtypes.EnumSerializableAsValues, enum.Enum):
@@ -48,6 +47,7 @@ class LitModuleName(dtypes.EnumSerializableAsValues, enum.Enum):
   GeneratedTextModule = 'generated-text-module'
   GeneratorModule = 'generator-module'
   LanguageModelPredictionModule = 'lm-prediction-module'
+  LMSalienceModule = 'lm-salience-module'
   MetricsModule = 'metrics-module'
   MultilabelModule = 'multilabel-module'
   PdpModule = 'pdp-module'
@@ -68,6 +68,7 @@ def __call__(self, **kw):
     return ModuleConfig(self.value, **kw)
 
 
+# LINT.IfChange
 # TODO(lit-dev): consider making modules subclass this instead of LitModuleName.
 @attr.s(auto_attribs=True)
 class ModuleConfig(dtypes.DataTuple):

lit_nlp/client/modules/lm_salience_module.css

@@ -0,0 +1,98 @@
+.flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+.chip-container {
+  padding: 8px;
+}
+
+.chip-container-dense {
+  padding: 8px;
+}
+
+.pre-wrap {
+  white-space: pre-wrap;
+}
+
+.gray-text {
+  color: var(--lit-neutral-400);
+}
+
+.target-info-line {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow-x: hidden;
+}
+
+lit-switch .icon-button {
+  vertical-align: middle;
+}
+
+/**
+ * Module controls
+ */
+.module-toolbar {
+  border-bottom: 1px solid #dadce0;
+  box-sizing: border-box;
+  justify-content: space-between;
+}
+
+.module-footer {
+  justify-content: space-between;
+}
+
+.controls-group {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin: 0 4px;
+  gap: 4px;
+}
+
+.controls-group[disabled] {
+  color: rgb(60, 64, 67);
+  opacity: 0.38;
+  pointer-events: none;
+}
+
+/* Allow contents to consume available space, but not to cause line wrapping. */
+.controls-group-variable {
+  flex: 1;
+  overflow-x: clip;
+  margin-right: 8px;
+}
+
+.controls-group-variable > label {
+  min-width: 45px;
+}
+
+.controls-group-variable .dropdown {
+  max-width: calc(100% - 45px);
+}
+
+.vertical-separator {
+  background: #dadce0;
+  width: 2px;
+  height: 1.2rem;
+  padding: 0;
+  margin: 0 8px;
+}
+
+/* Allow wrap. TODO move this to shared_styles as an option? */
+.module-footer-wrappable {
+  flex-wrap: wrap;
+  /* line-height: 30px; */  /* causes alignment issues */
+  height: unset;
+  min-height: 36px;
+}
+
+.module-footer > * { min-width: 0; }
+
+.controls-group > * { min-width: 0; }
+
+color-legend {
+  /* extra space to keep other controls from jumping when legend changes */
+  /* width: 400px; */
+  margin-right: 16px;
+}