Model Compression Tradeoff Explorer¶
Specification¶
The full specification below is extracted from Chapter 17: Building a Real-Time Object Detection Pipeline.
Type: chart
**sim-id:** model-compression-tradeoff-explorer<br/>
**Library:** Chart.js<br/>
**Status:** Specified
Learning objective: Students will *analyze* (Bloom L4: Analyze) the tradeoff between model size, inference speed, and accuracy as a model is progressively quantized and compressed.
Chart type: dual-axis line chart, responsive Chart.js canvas.
Purpose: show how model size (shrinking) and inference speed (increasing) move in opposite directions from accuracy (slightly decreasing) as a slider moves a model from full precision toward heavier quantization.
X-axis: a single interactive slider (HTML `<input type="range">`, not a chart axis) labeled "Quantization Level," from "None (32-bit)" to "Heavy (8-bit)" in four steps.
Y-axis: left axis shows model size in megabytes and relative inference speed (normalized 0-100); right axis shows model accuracy as a percentage, using Chart.js's dual y-axis support.
Data series: three lines — "Model Size (MB)" (indigo `#3F51B5`, decreasing), "Inference Speed" (circuit green `#2E7D32`, increasing), "Accuracy (%)" (raspberry `#C2185B`, very slightly decreasing) — re-plotted as the slider moves between the four quantization levels.
Interaction (required): moving the slider re-renders all three lines' current-position markers and updates a text readout beneath the chart summarizing the tradeoff in one sentence (e.g., "Heavy quantization: 4x smaller, 3x faster, accuracy down 2 points"). Hovering any line's marker shows its exact value in a tooltip.
Implementation: Chart.js line chart with two y-axes (`yAxisID` set per dataset) and `responsive: true`. Store four preset data points per series keyed by quantization level, and update `chart.data.datasets[i].data` plus call `chart.update()` on the slider's `input` event.