AI Components / Segmentation Viewer
Segmentation Viewer
Image segmentation viewer with colored mask overlays, legend, visibility toggles, and opacity control.
ai-viz v0.6.0
Playground
Examples
Segmentation
<ai-segmentation-viewer src="https://picsum.photos/seed/segment/500/300" showLegend showLabels opacity="0.4" style="max-width:500px;"></ai-segmentation-viewer>Import
import { AiSegmentationViewer } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/ai-segmentation-viewer';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | — | Image URL |
masks | {id, label, color, visible?}[] | — | Segment masks |
selectedMask | string | — | Selected mask ID |
opacity | number | 0.4 | Mask opacity 0-1 |
showLabels | boolean | false | Show mask labels |
showLegend | boolean | false | Show legend panel |
Events
| Event | Detail | Description |
|---|---|---|
ai-segment-select | {id, label} | Mask selected |
ai-segment-toggle | {id, visible} | Mask visibility toggled |