AI Components / Detection Canvas
Detection Canvas
Object detection overlay with labeled bounding boxes, confidence scores, and selection.
ai-vizv0.6.0
Playground
Examples
Detections
<ai-detection-canvas src="https://picsum.photos/seed/detect/500/350" showLabels showConfidence style="max-width:500px;"></ai-detection-canvas>Import
import { AiDetectionCanvas } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/ai-detection-canvas';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | — | Image URL |
detections | {id, label, confidence, bbox, color?}[] | — | Detection results |
showLabels | boolean | true | Show label tags |
showConfidence | boolean | true | Show confidence % |
selectedId | string | — | Selected detection ID |
interactive | boolean | true | Enable click/hover |
Events
| Event | Detail | Description |
|---|---|---|
ai-detection-select | {id, label} | Detection clicked |
ai-detection-hover | {id, label} | Detection hovered |