Internal Change

lit_nlp/api/dtypes.py

@@ -116,8 +116,8 @@ class FeatureSalience(DataTuple):
 class FrameSalience(DataTuple):
   """Dataclass for a salience map over image frames in a video."""
 
-  # A map of salience score and image string by frame number
-  salience: dict[str, tuple[float, str]]
+  # A map of salience score and image bytes string by frame number
+  salience: dict[str, tuple[float, Sequence[str]]]
 
 
 # TODO(b/196886684): document API for salience interpreters.

lit_nlp/client/elements/frames_window.css

@@ -0,0 +1,13 @@
+.frames-window-image {
+  flex: 16.5%;
+  padding: 5px;
+}
+
+#frame {
+  max-width: 202px;
+  max-height: 360px;
+}
+
+.frames-window {
+  display: flex;
+}

lit_nlp/client/elements/frames_window.ts

@@ -0,0 +1,52 @@
+/**
+ * LIT module for displaying a variable size window of image frames.
+ */
+
+
+
+import {html, LitElement} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import {styles as sharedStyles} from '../lib/shared_styles.css';
+
+import {styles} from './frames_window.css';
+
+/**
+ * A LIT module to display variable size list of image frames within a window.
+ */
+@customElement('lit-frames-window')
+export class FramesWindow extends LitElement {
+  @property({type: Array}) frames: string[] = [];
+
+  static override get styles() {
+    return [
+      sharedStyles,
+      styles,
+    ];
+  }
+
+
+  private renderImage(imgSrc: string) {
+    return html`
+     <div class="frames-window-image table-image">
+       <img id='frame' src="${imgSrc}"></img>
+     </div>`;
+  }
+
+
+  override render() {
+    const framesDOM =
+        this.frames.map((imageSrc: string) => this.renderImage(imageSrc));
+
+    return html`
+     <div class="frames-window">
+       ${framesDOM}
+     </div>`;
+  }
+}
+
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'lit-frames-window': FramesWindow;
+  }
+}

lit_nlp/client/elements/table_types.ts

@@ -36,7 +36,7 @@ export interface SortableTemplateResult {
   value: SortableTableEntry;
 }
 /** Wrapper types for the data supplied to the data table */
-export type TableEntry = string|number|TemplateResult|SortableTemplateResult;
+export type TableEntry = string|number|string[]|TemplateResult|SortableTemplateResult;
 
 /** Wrapper types for the rows of data supplied to the data table */
 export type TableData = TableEntry[]|{[key: string]: TableEntry};

lit_nlp/client/lib/dtypes.ts

@@ -62,7 +62,7 @@ export interface FeatureSalience extends DataTuple {
 
 /** Dataclass for a salience map over image frames in a video. */
 export interface FrameSalience extends DataTuple {
-  salience: {[key: string]: [number, string]};
+  salience: {[key: string]: [number, string[]]};
 }
 
 // TODO(b/196886684): document API for salience interpreters.