av-blocks

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.

Why

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.

Quickstart (30 seconds)

# 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.

Available blocks

| 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)

Philosophy

• 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.

License

MIT