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` +