## Summary Add an optional visualization mode to the **Object Detection** explorer in the **AI API Explorer** submodule that overlays the detected bounding boxes directly on top of the uploaded image using JavaScript. Today the explorer only renders the raw detection results; a visual overlay would make the output far easier to interpret. ## Problem `ObjectDetectionGenerator` (`web/modules/custom/ai/modules/ai_api_explorer/src/Plugin/AiApiExplorer/ObjectDetectionGenerator.php`) currently presents detection results as a plain table of **Label**, **Score**, and **Box** (the raw bounding-box coordinates returned by the provider). This means a site builder evaluating a provider has to mentally map coordinate arrays back onto the image to understand what was detected and how accurate the boxes are. There is no way to *see* the detection result on the image itself. Who benefits: site builders and evaluators using the AI API Explorer to test and compare object-detection providers/models. ## Proposed solution 1. Keep the existing raw/table output as-is (it is useful for copying coordinates and debugging). 2. Add a mode — e.g. a checkbox/toggle, or a second rendered view — that draws the detected bounding boxes over the uploaded image client-side with JavaScript. 3. For each detected object, render a box at its coordinates and a label (and optionally the confidence score) so the user can visually verify the detection. 4. The overlay is computed in the browser from the detection data already returned to the page (no extra provider calls). Box coordinates should be scaled to the displayed image dimensions so the overlay stays aligned regardless of render size. ### Implementation notes (non-binding) - The detection data (label, confidence score, box) is already available where the results table is built. It can be passed to `drupalSettings` and consumed by a small library attached via `#attached['library']`. - An overlay (absolutely-positioned `<div>`s or a `<canvas>`) layered over the `<img>` is sufficient; no heavy dependency is required. - Box coordinate format is provider-dependent (`$row->getBox()`); normalize/scale relative to natural vs. displayed image size. ## Acceptance criteria * The Object Detection explorer can display detected objects as boxes overlaid on the uploaded image. * Each box shows at least its label; confidence score is shown where practical. * Boxes stay correctly aligned to the image at its displayed size. * The existing raw/table output remains available. * No additional provider/API calls are made to render the overlay. ## Affected modules / components * AI API Explorer (`ai_api_explorer`) — Object Detection explorer (`ObjectDetectionGenerator`) plus a new JS library.