diff --git a/lit_nlp/api/dtypes.py b/lit_nlp/api/dtypes.py index efd8504a..2e036763 100644 --- a/lit_nlp/api/dtypes.py +++ b/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. diff --git a/lit_nlp/client/elements/frames_window.css b/lit_nlp/client/elements/frames_window.css new file mode 100644 index 00000000..1eebaef1 --- /dev/null +++ b/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; +} diff --git a/lit_nlp/client/elements/frames_window.ts b/lit_nlp/client/elements/frames_window.ts new file mode 100644 index 00000000..e7b169c8 --- /dev/null +++ b/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` +
+ +
`; + } + + + override render() { + const framesDOM = + this.frames.map((imageSrc: string) => this.renderImage(imageSrc)); + + return html` +
+ ${framesDOM} +
`; + } +} + + +declare global { + interface HTMLElementTagNameMap { + 'lit-frames-window': FramesWindow; + } +} diff --git a/lit_nlp/client/elements/table_types.ts b/lit_nlp/client/elements/table_types.ts index dd6d16ad..11d7e5fc 100644 --- a/lit_nlp/client/elements/table_types.ts +++ b/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}; diff --git a/lit_nlp/client/lib/dtypes.ts b/lit_nlp/client/lib/dtypes.ts index bc8f7a6a..4a18a1dd 100644 --- a/lit_nlp/client/lib/dtypes.ts +++ b/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.