Detection Canvas

Object detection overlay with labeled bounding boxes, confidence scores, and selection.

ai-viz v0.6.0

Playground

Detections

<ai-detection-canvas src="https://picsum.photos/seed/detect/500/350" showLabels showConfidence style="max-width:500px;"></ai-detection-canvas>

import { AiDetectionCanvas } from '@cognivo/components';

// Or tree-shake: import '@cognivo/components/ai-detection-canvas';

Per-component imports ship only that component (~8 kB gzip).

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

Event	Detail	Description
`ai-detection-select`	{id, label}	Detection clicked
`ai-detection-hover`	{id, label}	Detection hovered