Inference Latency and Frames Per Second Benchmark Chart¶
Specification¶
The full specification below is extracted from Chapter 17: Building a Real-Time Object Detection Pipeline.
Type: chart
**sim-id:** fps-latency-benchmark-chart<br/>
**Library:** Chart.js<br/>
**Status:** Specified
Learning objective: Students will *interpret* (Bloom L4: Analyze) a benchmark comparing inference latency and frame rate across CPU-only inference and two AI HAT+ hardware accelerator variants.
Chart type: grouped bar chart, responsive Chart.js canvas.
Purpose: compare representative inference latency (lower is better) and resulting frames per second (higher is better) across three hardware configurations, showing why a hardware accelerator matters for a real-time pipeline.
X-axis: three hardware configurations — "CPU Only," "AI HAT+ (13 TOPS Hailo-8L)," "AI HAT+ (26 TOPS Hailo-8)."
Y-axis: dual-axis — left axis shows inference latency in milliseconds, right axis shows frames per second, using Chart.js's dual y-axis support.
Data series: two bars per configuration — "Inference Latency (ms)" (raspberry `#C2185B`, showing CPU Only far higher than either accelerator) and "Frames Per Second" (circuit green `#2E7D32`, showing the inverse pattern, CPU Only far lower than either accelerator).
Interaction (required): a `<select>` control lets students choose a model size ("Small," "Medium," "Large") which re-renders all six bars with representative values showing that the gap between CPU-only and accelerated inference widens as model size increases. Hovering any bar shows its exact value in a tooltip.
Implementation: Chart.js grouped bar chart with two y-axes (`yAxisID` set per dataset) and `responsive: true`. Store three preset datasets keyed by model size and swap `chart.data.datasets` on the `<select>`'s `change` event, then call `chart.update()`.