64:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 65:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 66:T1bde,'use client'; import * as React from 'react'; import { cn } from '@/registry/localmode/lib/utils'; /** * A pixel-coordinate bounding box, matching `@localmode/core`'s `BoundingBox` * ({@link https://localmode.dev}). Coordinates are in the image's NATURAL pixel * space (origin top-left). */ export interface DetectionBox { /** X of the top-left corner, in natural image pixels. */ x: number; /** Y of the top-left corner, in natural image pixels. */ y: number; /** Box width, in natural image pixels. */ width: number; /** Box height, in natural image pixels. */ height: number; } /** * One detection result: `{ label, score, box }`. Matches `useDetectObjects` * directly; `useDetectFace` / `useDetectHands` / `useDetectPose` return * different shapes (no `label`, and landmarks rather than a box), so map those * into this shape before passing them in. */ export interface Detection { /** Class label, e.g. "person", "face". Used for color-coding + the legend. */ label: string; /** Confidence score in `[0, 1]`. Rendered as a percentage on the chip. */ score?: number; /** Bounding box in natural image pixels. */ box: DetectionBox; } /** Tailwind class tuples (border + chip background + legend dot) per color slot. */ const COLOR_SLOTS = [ { border: 'border-emerald-500', chip: 'bg-emerald-500', dot: 'bg-emerald-500' }, { border: 'border-sky-500', chip: 'bg-sky-500', dot: 'bg-sky-500' }, { border: 'border-amber-500', chip: 'bg-amber-500', dot: 'bg-amber-500' }, { border: 'border-violet-500', chip: 'bg-violet-500', dot: 'bg-violet-500' }, { border: 'border-rose-500', chip: 'bg-rose-500', dot: 'bg-rose-500' }, { border: 'border-cyan-500', chip: 'bg-cyan-500', dot: 'bg-cyan-500' }, { border: 'border-orange-500', chip: 'bg-orange-500', dot: 'bg-orange-500' }, { border: 'border-lime-500', chip: 'bg-lime-500', dot: 'bg-lime-500' }, ] as const; /** * Build a stable label → color-slot map so the same class always gets the same * color across the overlay and the legend. */ export function buildColorMap(labels: string[]): Map { const map = new Map(); let next = 0; for (const label of labels) { if (!map.has(label)) { map.set(label, COLOR_SLOTS[next % COLOR_SLOTS.length]); next += 1; } } return map; } /** Props for {@link BoundingBoxOverlay}. */ export interface BoundingBoxOverlayProps { /** Detections to render. Boxes are in natural-pixel coordinates. */ detections: Detection[]; /** * The image's NATURAL width in pixels (e.g. `imgEl.naturalWidth`). Required * to convert pixel boxes to display-independent percentage offsets. */ naturalWidth: number; /** The image's NATURAL height in pixels (e.g. `imgEl.naturalHeight`). */ naturalHeight: number; /** * Hide the per-box label chip (border-only boxes). Useful for dense * landmark/pose output. * @default false */ hideLabels?: boolean; /** Additional class names merged onto the overlay root. */ className?: string; } /** * Renders detection boxes as absolutely-positioned, color-coded overlays over a * parent image. Pixel boxes are converted to PERCENTAGE offsets using the * image's natural width/height, so placement is correct at any display size. * * Place it as a sibling of the `` inside a `relative` container; it fills * the container (`absolute inset-0`) and is non-interactive. It renders any * `{ label, score, box }[]` — `useDetectObjects` produces that directly; map * face/hand/pose results into the same shape first. * * @example * ```tsx *

* *

* ``` */ export function BoundingBoxOverlay({ detections, naturalWidth, naturalHeight, hideLabels = false, className, }: BoundingBoxOverlayProps) { if (naturalWidth <= 0 || naturalHeight <= 0) return null; const colorMap = buildColorMap(detections.map((d) => d.label)); return (

{detections.map((detection, index) => { const { box, label, score } = detection; const slot = colorMap.get(label) ?? COLOR_SLOTS[0]; const style: React.CSSProperties = { left: `${(box.x / naturalWidth) * 100}%`, top: `${(box.y / naturalHeight) * 100}%`, width: `${(box.width / naturalWidth) * 100}%`, height: `${(box.height / naturalHeight) * 100}%`, }; return (

{!hideLabels && ( {label} {score != null && ( {Math.round(score * 100)}% )} )}

); })}

); } /** Props for {@link DetectionLabelLegend}. */ export interface DetectionLabelLegendProps { /** * Detected class labels (duplicates allowed — they are de-duplicated). Colors * match {@link BoundingBoxOverlay} for the same label set/order. */ labels: string[]; /** Additional class names merged onto the root. */ className?: string; } /** * A wrapping strip of color → class pills that matches the colors used by * {@link BoundingBoxOverlay}. Pass the same labels (in the same order) you fed * the overlay so the color assignment lines up. * * @example * ```tsx * o.label)} /> * ``` */ export function DetectionLabelLegend({ labels, className, }: DetectionLabelLegendProps) { const colorMap = buildColorMap(labels); const unique = Array.from(colorMap.keys()); if (unique.length === 0) return null; return (

{unique.map((label) => { const slot = colorMap.get(label) ?? COLOR_SLOTS[0]; return ( ); })}

); } export default BoundingBoxOverlay; 63:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L64",null,{"namespace":"@registrydirectory","registryDependencies":["https://localmode.ai/r/ui/lib/utils.json"]}]]}],null]}],["$","$L65",null,{"files":[{"path":"registry/localmode/media-vision/bounding-box-overlay/bounding-box-overlay.tsx","content":"$66","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]