Copy-paste UI blocks for audio-visual model inspection — built for ML researchers and AI agents.
No npm install. No build step. Each block is a single self-contained HTML file you copy into your report/dashboard/notebook.
Every AV/multimodal experiment ends up needing the same visualizations:
- Per-second video frame strips with active/background overlays
- Per-class metric comparison tables
- Raw cosine similarity heatmaps
- Prediction-vs-GT badges
Stop re-implementing them. Copy the block, plug your data, ship.
# Browse blocks at the docs site, or directly:
curl -O https://raw.githubusercontent.com/<you>/av-blocks/main/blocks/frame-strip-player/component.html
# That's it. Open in a browser, edit the embedded data, you're done.| Block | What it does | Copy command |
|---|---|---|
| frame-strip-player | Video + per-second frame grid with active/background coloring | npx av-blocks add frame-strip-player |
| per-class-table | Sortable per-class metrics table with macro/micro avg footers | npx av-blocks add per-class-table |
| similarity-heatmap | Per-(class × second) raw cosine grid with threshold highlight | npx av-blocks add similarity-heatmap |
| prediction-chips | GT vs prediction badges (hit/miss/wrong/lower) | npx av-blocks add prediction-chips |
| gt-modality-badges | Visual / audio GT separated chips | npx av-blocks add gt-modality-badges |
(CLI ships with v0.1.0; until then, manual copy from blocks/<name>/component.html)
- No dependencies. Single .html file. No React, no npm, no bundler.
- Copy, don't import. You own the code, modify freely.
- Agent-friendly. Plain HTML/CSS/JS that any LLM can adapt.
- Researcher-friendly. Drop into Jupyter, Streamlit, GitHub Pages, FastHTML, anything.
MIT