Training vs Inference Workflow¶
Specification¶
The full specification below is extracted from Chapter 16: The AI HAT+ and Neural Network Fundamentals.
Type: interactive-infographic
**sim-id:** training-vs-inference-workflow<br/>
**Library:** p5.js<br/>
**Template:** https://github.com/dmccreary/linear-algebra/tree/main/docs/sims/ml-pipeline<br/>
**Status:** Specified
Learning objective: Students will *compare* (Bloom L4: Analyze) the training and inference phases of a neural network pipeline in terms of hardware, frequency, and output.
Canvas: 700x420px, responsive — two horizontal swim lanes ("Training" and "Inference") recomputed as fractions of `width`/`height` inside `windowResized()`, stacked with reduced label text below 480px wide.
Layout: the "Training" lane shows a sequence of three boxes — "Huge Labeled Dataset" → "Powerful Training Computer (days of work)" → "Trained Model File" — connected by arrows. The "Inference" lane shows "Trained Model File" (shared visually with the training lane's output) → "Raspberry Pi 5 + AI HAT+" → "One Prediction, in Milliseconds."
Interaction: clicking any box in either lane opens an infobox beneath the diagram with a one-sentence description drawn from the surrounding chapter comparison table. A `createButton()` labeled "Highlight Shared Model" pulses a highlight around the "Trained Model File" box to emphasize that it is the single link between the two otherwise very different processes.
Implementation: p5.js. Store both lanes as arrays of box objects with fixed relative x positions per lane. Draw connecting arrows between sequential boxes within a lane. Hit-testing via rectangular bounds. Use a `frameCount`-based sine pulse for the "Highlight Shared Model" animation, toggled on by the button and off by clicking elsewhere on the canvas.