Camera-to-Model Pipeline¶
Specification¶
The full specification below is extracted from Chapter 17: Building a Real-Time Object Detection Pipeline.
Type: workflow
**sim-id:** camera-to-model-pipeline<br/>
**Library:** vis-network<br/>
**Status:** Specified
Learning objective: Students will *decompose* (Bloom L4: Analyze) a real-time object detection pipeline into its component stages and identify which stage is responsible for a given delay or error.
Canvas: 700x420px, responsive vis-network canvas with `autoResize: true`, laid out left-to-right with `layout: { hierarchical: { direction: "LR" } }` so the pipeline reads as a clear left-to-right sequence, switching to top-to-bottom below 560px wide.
Layout: five connected nodes in sequence — "1. Capture" (camera reads a frame from the image sensor) → "2. Preprocess" (resize, normalize, optionally crop to a region of interest) → "3. Inference" (Hailo accelerator runs the neural network) → "4. Postprocess" (apply detection threshold and non-maximum suppression, covered next in this chapter) → "5. Action" (draw boxes, trigger an event, or log a result) — colored in a left-to-right gradient from raspberry `#C2185B` through copper gold `#D4AF37` to circuit green `#2E7D32`.
Interaction: clicking any node opens an infobox beneath the diagram with a one-sentence description of that stage (matching the chapter's definitions) and a representative timing contribution (e.g., "Capture: ~2 ms · Preprocess: ~3 ms · Inference: ~15 ms · Postprocess: ~4 ms · Action: ~1 ms"), so students can see which stage dominates total pipeline time. A `createButton()`-style HTML button labeled "Simulate a Slow Frame" temporarily colors the "Inference" node red and updates its infobox timing to a much larger value, illustrating how a single slow stage becomes the bottleneck for the whole pipeline regardless of how fast the other four stages run.
Implementation: vis-network with a `nodes` DataSet (five nodes with `id`, `label`, `color`) and an `edges` DataSet connecting them in sequence with arrows (`arrows: "to"`). Attach a `network.on("click", ...)` handler to open the infobox based on the clicked node's `id`. Implement the "Simulate a Slow Frame" behavior by updating the Inference node's `color` and a separate timing-data object, then calling `nodes.update()`.