Bounding Box and Confidence Threshold Explorer¶
Specification¶
The full specification below is extracted from Chapter 16: The AI HAT+ and Neural Network Fundamentals.
Type: microsim
**sim-id:** bounding-box-confidence-explorer<br/>
**Library:** p5.js<br/>
**Status:** Specified
Learning objective: Students will *apply* (Bloom L3: Apply) a confidence threshold to decide which of a model's candidate detections should be kept or discarded.
Canvas: 700x460px, responsive — a single image-panel canvas recomputed as a fraction of `width`/`height` inside `windowResized()`, scaling all bounding boxes proportionally with the panel.
Layout: a simple illustrated scene (drawn with basic p5.js shapes representing a few objects — a rectangle "car," an oval "dog," a rounded rectangle "person") with six candidate bounding boxes overlaid, several deliberately overlapping and low-confidence, each labeled with its class label and confidence score (e.g., "dog: 0.87," "dog: 0.22").
Controls: a `createSlider()` labeled "Confidence Threshold" (range 0.0-1.0, step 0.05, default 0.5).
Interaction: as the threshold slider moves, any bounding box with a confidence score below the current threshold visibly fades out and its border switches to a dashed gray outline labeled "below threshold — discarded," while boxes at or above the threshold remain solid and fully colored. A live count beneath the canvas reads "Detections kept: X of 6" and updates as the slider moves. Hovering any bounding box (kept or discarded) shows its exact class label and confidence score in a tooltip.
Implementation: p5.js. Store the six candidate detections as objects `{label, confidence, x, y, w, h}`. On every frame, compare each detection's confidence to the current slider value to decide its rendered opacity and border style. Draw class label and confidence score as text above each box using `textAlign(LEFT, BOTTOM)`.