phase 3

ui/detection-app/src/App.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
-import { SSEDataSource, Panel, ResizeHandle, matchTracks, renderTracksToImageData, imageDataToPngB64 } from 'mpr-ui-framework'
+import { SSEDataSource, Panel, ResizeHandle } from 'mpr-ui-framework'
 import type { FrameOverlay, FrameBBox } from 'mpr-ui-framework'
+import { matchTracks, renderTracksToImageData, imageDataToPngB64 } from '@/cv'
 import 'mpr-ui-framework/src/tokens.css'
 import LogPanel from './panels/LogPanel.vue'
 import FunnelPanel from './panels/FunnelPanel.vue'

ui/detection-app/src/components/StageConfigSliders.vue

@@ -5,8 +5,8 @@ import {
   runEdgeDetectionDebug,
   b64ToImageData,
   imageDataToB64,
-} from 'mpr-ui-framework'
-import type { EdgeDetectionParams } from 'mpr-ui-framework'
+} from '@/cv'
+import type { EdgeDetectionParams } from '@/cv'
 
 interface ConfigField {
   name: string

ui/detection-app/src/cv/edges.ts

@@ -0,0 +1,278 @@
+/**
+ * Edge detection — TypeScript port of gpu/models/cv/edges.py
+ *
+ * 1:1 with the Python version. Same algorithm, same parameters,
+ * same output format. Runs in the browser, no network.
+ */
+
+import { toGrayscale, canny } from './imageOps'
+import { houghLinesP, type LineSegment } from './hough'
+
+export interface EdgeRegion {
+  x: number
+  y: number
+  w: number
+  h: number
+  confidence: number
+  label: string
+}
+
+export interface EdgeDetectionParams {
+  cannyLow: number
+  cannyHigh: number
+  houghThreshold: number
+  houghMinLength: number
+  houghMaxGap: number
+  pairMaxDistance: number
+  pairMinDistance: number
+}
+
+export interface EdgeDetectionResult {
+  regions: EdgeRegion[]
+}
+
+export interface EdgeDetectionDebugResult extends EdgeDetectionResult {
+  edgeImageData: ImageData    // Canny output for overlay
+  linesImageData: ImageData   // Frame with Hough lines drawn
+  horizontalCount: number
+  pairCount: number
+}
+
+type HLine = { xMin: number; xMax: number; yMid: number; length: number }
+
+/** Set a pixel on ImageData with bounds check */
+function setPixel(img: ImageData, x: number, y: number, r: number, g: number, b: number) {
+  if (x >= 0 && x < img.width && y >= 0 && y < img.height) {
+    const p = (y * img.width + x) * 4
+    img.data[p] = r
+    img.data[p + 1] = g
+    img.data[p + 2] = b
+    img.data[p + 3] = 255
+  }
+}
+
+/** Bresenham line drawing with thickness */
+function drawLineThick(
+  img: ImageData,
+  x0: number, y0: number, x1: number, y1: number,
+  r: number, g: number, b: number,
+  thickness: number = 1,
+) {
+  const dx = Math.abs(x1 - x0)
+  const dy = Math.abs(y1 - y0)
+  const sx = x0 < x1 ? 1 : -1
+  const sy = y0 < y1 ? 1 : -1
+  let err = dx - dy
+  const half = Math.floor(thickness / 2)
+
+  while (true) {
+    for (let oy = -half; oy <= half; oy++) {
+      for (let ox = -half; ox <= half; ox++) {
+        setPixel(img, x0 + ox, y0 + oy, r, g, b)
+      }
+    }
+    if (x0 === x1 && y0 === y1) break
+    const e2 = 2 * err
+    if (e2 > -dy) { err -= dy; x0 += sx }
+    if (e2 < dx) { err += dx; y0 += sy }
+  }
+}
+
+const DEFAULT_PARAMS: EdgeDetectionParams = {
+  cannyLow: 50,
+  cannyHigh: 150,
+  houghThreshold: 80,
+  houghMinLength: 100,
+  houghMaxGap: 10,
+  pairMaxDistance: 200,
+  pairMinDistance: 15,
+}
+
+/** Filter to near-horizontal lines (within 10 degrees) */
+function filterHorizontal(lines: LineSegment[], maxAngleDeg: number = 10): HLine[] {
+  const maxSlope = Math.tan((maxAngleDeg * Math.PI) / 180)
+  const result: HLine[] = []
+
+  for (const line of lines) {
+    const dx = line.x2 - line.x1
+    if (dx === 0) continue
+    const slope = Math.abs((line.y2 - line.y1) / dx)
+    if (slope <= maxSlope) {
+      const yMid = (line.y1 + line.y2) / 2
+      const xMin = Math.min(line.x1, line.x2)
+      const xMax = Math.max(line.x1, line.x2)
+      const length = Math.sqrt(dx * dx + (line.y2 - line.y1) ** 2)
+      result.push({ xMin, xMax, yMid, length })
+    }
+  }
+  return result
+}
+
+/** Find pairs of horizontal lines that could be top/bottom of a hoarding */
+function findLinePairs(
+  horizontals: HLine[],
+  minDistance: number,
+  maxDistance: number,
+): [HLine, HLine][] {
+  const sorted = [...horizontals].sort((a, b) => a.yMid - b.yMid)
+  const pairs: [HLine, HLine][] = []
+  const used = new Set<number>()
+
+  for (let i = 0; i < sorted.length; i++) {
+    if (used.has(i)) continue
+    const top = sorted[i]
+
+    for (let j = i + 1; j < sorted.length; j++) {
+      if (used.has(j)) continue
+      const bottom = sorted[j]
+      const yGap = bottom.yMid - top.yMid
+
+      if (yGap < minDistance) continue
+      if (yGap > maxDistance) break
+
+      // Check horizontal overlap (50% of shorter line)
+      const overlapStart = Math.max(top.xMin, bottom.xMin)
+      const overlapEnd = Math.min(top.xMax, bottom.xMax)
+      const overlap = overlapEnd - overlapStart
+      const shorterLength = Math.min(top.xMax - top.xMin, bottom.xMax - bottom.xMin)
+
+      if (shorterLength > 0 && overlap / shorterLength >= 0.5) {
+        pairs.push([top, bottom])
+        used.add(i)
+        used.add(j)
+        break
+      }
+    }
+  }
+  return pairs
+}
+
+/** Convert a line pair to a bounding box */
+function pairToBox(
+  top: HLine,
+  bottom: HLine,
+  frameWidth: number,
+  frameHeight: number,
+): EdgeRegion | null {
+  const x = Math.max(0, Math.min(top.xMin, bottom.xMin))
+  const y = Math.max(0, top.yMid)
+  const x2 = Math.min(frameWidth, Math.max(top.xMax, bottom.xMax))
+  const y2 = Math.min(frameHeight, bottom.yMid)
+  const w = x2 - x
+  const h = y2 - y
+
+  if (w < 20 || h < 5) return null
+
+  const avgLineLength = (top.length + bottom.length) / 2
+  const coverage = Math.min(1.0, avgLineLength / Math.max(w, 1))
+
+  return {
+    x: Math.round(x),
+    y: Math.round(y),
+    w: Math.round(w),
+    h: Math.round(h),
+    confidence: Math.round(coverage * 1000) / 1000,
+    label: 'edge_region',
+  }
+}
+
+/**
+ * Detect edges in an RGBA ImageData.
+ *
+ * Equivalent to gpu/models/cv/edges.py detect_edges()
+ */
+export function detectEdges(
+  imageData: ImageData,
+  params: Partial<EdgeDetectionParams> = {},
+): EdgeDetectionResult {
+  const p = { ...DEFAULT_PARAMS, ...params }
+  const { width, height } = imageData
+
+  const gray = toGrayscale(imageData.data, width, height)
+  const edges = canny(gray, width, height, p.cannyLow, p.cannyHigh)
+
+  const rawLines = houghLinesP(edges, width, height, p.houghThreshold, p.houghMinLength, p.houghMaxGap)
+  const horizontals = filterHorizontal(rawLines)
+
+  if (horizontals.length < 2) return { regions: [] }
+
+  const pairs = findLinePairs(horizontals, p.pairMinDistance, p.pairMaxDistance)
+  const regions: EdgeRegion[] = []
+  for (const [top, bottom] of pairs) {
+    const box = pairToBox(top, bottom, width, height)
+    if (box) regions.push(box)
+  }
+
+  return { regions }
+}
+
+/**
+ * Detect edges with debug visualizations.
+ *
+ * Equivalent to gpu/models/cv/edges.py detect_edges_debug()
+ */
+export function detectEdgesDebug(
+  imageData: ImageData,
+  params: Partial<EdgeDetectionParams> = {},
+): EdgeDetectionDebugResult {
+  const p = { ...DEFAULT_PARAMS, ...params }
+  const { width, height, data } = imageData
+
+  const gray = toGrayscale(data, width, height)
+  const edges = canny(gray, width, height, p.cannyLow, p.cannyHigh)
+
+  // Edge overlay — white edges on black
+  const edgeImageData = new ImageData(width, height)
+  for (let i = 0; i < edges.length; i++) {
+    const px = i * 4
+    edgeImageData.data[px] = edges[i]
+    edgeImageData.data[px + 1] = edges[i]
+    edgeImageData.data[px + 2] = edges[i]
+    edgeImageData.data[px + 3] = 255
+  }
+
+  const rawLines = houghLinesP(edges, width, height, p.houghThreshold, p.houghMinLength, p.houghMaxGap)
+  const horizontals = filterHorizontal(rawLines)
+
+  // Lines overlay — darken original frame so lines pop, then draw
+  const linesImageData = new ImageData(new Uint8ClampedArray(data), width, height)
+  for (let i = 0; i < linesImageData.data.length; i += 4) {
+    linesImageData.data[i] = Math.round(linesImageData.data[i] * 0.3)
+    linesImageData.data[i + 1] = Math.round(linesImageData.data[i + 1] * 0.3)
+    linesImageData.data[i + 2] = Math.round(linesImageData.data[i + 2] * 0.3)
+  }
+
+  // Draw all Hough lines in red (3px thick)
+  for (const line of rawLines) {
+    drawLineThick(linesImageData, line.x1, line.y1, line.x2, line.y2, 255, 50, 50, 2)
+  }
+
+  // Draw horizontal lines in cyan (3px thick)
+  for (const h of horizontals) {
+    drawLineThick(linesImageData, Math.round(h.xMin), Math.round(h.yMid), Math.round(h.xMax), Math.round(h.yMid), 0, 255, 255, 3)
+  }
+
+  const pairs = horizontals.length >= 2
+    ? findLinePairs(horizontals, p.pairMinDistance, p.pairMaxDistance)
+    : []
+
+  // Draw paired lines in bright green (4px thick)
+  for (const [top, bottom] of pairs) {
+    drawLineThick(linesImageData, Math.round(top.xMin), Math.round(top.yMid), Math.round(top.xMax), Math.round(top.yMid), 0, 255, 0, 4)
+    drawLineThick(linesImageData, Math.round(bottom.xMin), Math.round(bottom.yMid), Math.round(bottom.xMax), Math.round(bottom.yMid), 0, 255, 0, 4)
+  }
+
+  const regions: EdgeRegion[] = []
+  for (const [top, bottom] of pairs) {
+    const box = pairToBox(top, bottom, width, height)
+    if (box) regions.push(box)
+  }
+
+  return {
+    regions,
+    edgeImageData,
+    linesImageData,
+    horizontalCount: horizontals.length,
+    pairCount: pairs.length,
+  }
+}

ui/detection-app/src/cv/hough.ts

@@ -0,0 +1,147 @@
+/**
+ * Probabilistic Hough Line Transform — pure TypeScript.
+ *
+ * Equivalent to cv2.HoughLinesP. Finds line segments in a binary edge image.
+ */
+
+export interface LineSegment {
+  x1: number
+  y1: number
+  x2: number
+  y2: number
+}
+
+/**
+ * Probabilistic Hough Line Transform.
+ *
+ * @param edges - Binary edge image (255 = edge, 0 = not)
+ * @param width - Image width
+ * @param height - Image height
+ * @param threshold - Accumulator threshold (min votes for a line)
+ * @param minLineLength - Minimum line length in pixels
+ * @param maxLineGap - Maximum gap between points on the same line
+ */
+export function houghLinesP(
+  edges: Uint8Array,
+  width: number,
+  height: number,
+  threshold: number,
+  minLineLength: number,
+  maxLineGap: number,
+): LineSegment[] {
+  const diag = Math.ceil(Math.sqrt(width * width + height * height))
+  const numAngles = 180
+  const rhoMax = diag
+
+  // Precompute sin/cos tables
+  const cosTable = new Float64Array(numAngles)
+  const sinTable = new Float64Array(numAngles)
+  for (let t = 0; t < numAngles; t++) {
+    const angle = (t * Math.PI) / numAngles
+    cosTable[t] = Math.cos(angle)
+    sinTable[t] = Math.sin(angle)
+  }
+
+  // Collect edge points
+  const edgePoints: [number, number][] = []
+  for (let y = 0; y < height; y++) {
+    for (let x = 0; x < width; x++) {
+      if (edges[y * width + x] === 255) {
+        edgePoints.push([x, y])
+      }
+    }
+  }
+
+  if (edgePoints.length === 0) return []
+
+  // Shuffle edge points for probabilistic sampling
+  for (let i = edgePoints.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1))
+    const tmp = edgePoints[i]
+    edgePoints[i] = edgePoints[j]
+    edgePoints[j] = tmp
+  }
+
+  // Accumulator
+  const accum = new Int32Array(numAngles * (2 * rhoMax + 1))
+  const used = new Uint8Array(width * height)
+  const lines: LineSegment[] = []
+
+  for (const [px, py] of edgePoints) {
+    if (used[py * width + px]) continue
+
+    // Vote
+    let maxVotes = 0
+    let bestTheta = 0
+    for (let t = 0; t < numAngles; t++) {
+      const rho = Math.round(px * cosTable[t] + py * sinTable[t]) + rhoMax
+      const idx = t * (2 * rhoMax + 1) + rho
+      accum[idx]++
+      if (accum[idx] > maxVotes) {
+        maxVotes = accum[idx]
+        bestTheta = t
+      }
+    }
+
+    if (maxVotes < threshold) continue
+
+    // Walk along the line at bestTheta through (px, py)
+    const ct = cosTable[bestTheta]
+    const st = sinTable[bestTheta]
+
+    // Line direction is perpendicular to (cos, sin)
+    const dx = -st
+    const dy = ct
+
+    // Walk forward and backward to find line extent
+    const walkLine = (startX: number, startY: number, dirX: number, dirY: number): [number, number] => {
+      let lastEdgeX = startX
+      let lastEdgeY = startY
+      let gap = 0
+      let cx = startX
+      let cy = startY
+
+      for (let step = 1; step < Math.max(width, height); step++) {
+        const nx = Math.round(cx + dirX * step)
+        const ny = Math.round(cy + dirY * step)
+        if (nx < 0 || nx >= width || ny < 0 || ny >= height) break
+
+        if (edges[ny * width + nx] === 255 && !used[ny * width + nx]) {
+          lastEdgeX = nx
+          lastEdgeY = ny
+          gap = 0
+        } else {
+          gap++
+          if (gap > maxLineGap) break
+        }
+      }
+      return [lastEdgeX, lastEdgeY]
+    }
+
+    const [x1, y1] = walkLine(px, py, -dx, -dy)
+    const [x2, y2] = walkLine(px, py, dx, dy)
+
+    const length = Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2)
+    if (length < minLineLength) continue
+
+    // Mark pixels as used
+    const steps = Math.ceil(length)
+    for (let s = 0; s <= steps; s++) {
+      const mx = Math.round(x1 + (x2 - x1) * s / steps)
+      const my = Math.round(y1 + (y2 - y1) * s / steps)
+      if (mx >= 0 && mx < width && my >= 0 && my < height) {
+        used[my * width + mx] = 1
+      }
+    }
+
+    lines.push({ x1, y1, x2, y2 })
+
+    // Unvote (clean accumulator for used points)
+    for (let t = 0; t < numAngles; t++) {
+      const rho = Math.round(px * cosTable[t] + py * sinTable[t]) + rhoMax
+      accum[t * (2 * rhoMax + 1) + rho]--
+    }
+  }
+
+  return lines
+}

ui/detection-app/src/cv/imageOps.ts

@@ -0,0 +1,190 @@
+/**
+ * Pure TypeScript image operations — no OpenCV dependency.
+ *
+ * These implement the subset of CV operations needed for the edge
+ * detection editor. Same algorithms as the Python/OpenCV versions
+ * but running in the browser with zero WASM overhead.
+ */
+
+/** Grayscale from RGBA ImageData */
+export function toGrayscale(data: Uint8ClampedArray, width: number, height: number): Uint8Array {
+  const gray = new Uint8Array(width * height)
+  for (let i = 0; i < gray.length; i++) {
+    const p = i * 4
+    // ITU-R BT.601 luma
+    gray[i] = Math.round(0.299 * data[p] + 0.587 * data[p + 1] + 0.114 * data[p + 2])
+  }
+  return gray
+}
+
+/** 5x5 Gaussian blur */
+export function gaussianBlur(src: Uint8Array, width: number, height: number): Uint8Array {
+  // 5x5 Gaussian kernel (sigma ~1.4, matches OpenCV default for Canny)
+  const kernel = [
+    2, 4, 5, 4, 2,
+    4, 9, 12, 9, 4,
+    5, 12, 15, 12, 5,
+    4, 9, 12, 9, 4,
+    2, 4, 5, 4, 2,
+  ]
+  const kSum = 159
+  const out = new Uint8Array(width * height)
+
+  for (let y = 2; y < height - 2; y++) {
+    for (let x = 2; x < width - 2; x++) {
+      let sum = 0
+      for (let ky = -2; ky <= 2; ky++) {
+        for (let kx = -2; kx <= 2; kx++) {
+          sum += src[(y + ky) * width + (x + kx)] * kernel[(ky + 2) * 5 + (kx + 2)]
+        }
+      }
+      out[y * width + x] = Math.round(sum / kSum)
+    }
+  }
+  return out
+}
+
+/** Sobel gradients → magnitude + direction */
+export function sobelGradients(
+  src: Uint8Array,
+  width: number,
+  height: number,
+): { magnitude: Float32Array; direction: Float32Array } {
+  const size = width * height
+  const magnitude = new Float32Array(size)
+  const direction = new Float32Array(size)
+
+  for (let y = 1; y < height - 1; y++) {
+    for (let x = 1; x < width - 1; x++) {
+      const i = y * width + x
+      // Sobel 3x3
+      const gx =
+        -src[(y - 1) * width + (x - 1)] - 2 * src[y * width + (x - 1)] - src[(y + 1) * width + (x - 1)] +
+        src[(y - 1) * width + (x + 1)] + 2 * src[y * width + (x + 1)] + src[(y + 1) * width + (x + 1)]
+      const gy =
+        -src[(y - 1) * width + (x - 1)] - 2 * src[(y - 1) * width + x] - src[(y - 1) * width + (x + 1)] +
+        src[(y + 1) * width + (x - 1)] + 2 * src[(y + 1) * width + x] + src[(y + 1) * width + (x + 1)]
+
+      magnitude[i] = Math.sqrt(gx * gx + gy * gy)
+      direction[i] = Math.atan2(gy, gx)
+    }
+  }
+  return { magnitude, direction }
+}
+
+/** Non-maximum suppression for Canny */
+export function nonMaxSuppression(
+  magnitude: Float32Array,
+  direction: Float32Array,
+  width: number,
+  height: number,
+): Float32Array {
+  const out = new Float32Array(width * height)
+
+  for (let y = 1; y < height - 1; y++) {
+    for (let x = 1; x < width - 1; x++) {
+      const i = y * width + x
+      const mag = magnitude[i]
+      if (mag === 0) continue
+
+      // Quantize direction to 4 angles (0, 45, 90, 135)
+      let angle = (direction[i] * 180) / Math.PI
+      if (angle < 0) angle += 180
+
+      let n1 = 0, n2 = 0
+      if ((angle < 22.5) || (angle >= 157.5)) {
+        n1 = magnitude[y * width + (x + 1)]
+        n2 = magnitude[y * width + (x - 1)]
+      } else if (angle < 67.5) {
+        n1 = magnitude[(y - 1) * width + (x + 1)]
+        n2 = magnitude[(y + 1) * width + (x - 1)]
+      } else if (angle < 112.5) {
+        n1 = magnitude[(y - 1) * width + x]
+        n2 = magnitude[(y + 1) * width + x]
+      } else {
+        n1 = magnitude[(y - 1) * width + (x - 1)]
+        n2 = magnitude[(y + 1) * width + (x + 1)]
+      }
+
+      out[i] = (mag >= n1 && mag >= n2) ? mag : 0
+    }
+  }
+  return out
+}
+
+/** Hysteresis thresholding for Canny */
+export function hysteresis(
+  nms: Float32Array,
+  width: number,
+  height: number,
+  low: number,
+  high: number,
+): Uint8Array {
+  const out = new Uint8Array(width * height)
+
+  // Mark strong and weak edges
+  const STRONG = 255
+  const WEAK = 128
+  for (let i = 0; i < nms.length; i++) {
+    if (nms[i] >= high) out[i] = STRONG
+    else if (nms[i] >= low) out[i] = WEAK
+  }
+
+  // Connect weak edges adjacent to strong edges
+  let changed = true
+  while (changed) {
+    changed = false
+    for (let y = 1; y < height - 1; y++) {
+      for (let x = 1; x < width - 1; x++) {
+        const i = y * width + x
+        if (out[i] !== WEAK) continue
+        // Check 8-neighbors for strong edge
+        for (let dy = -1; dy <= 1; dy++) {
+          for (let dx = -1; dx <= 1; dx++) {
+            if (out[(y + dy) * width + (x + dx)] === STRONG) {
+              out[i] = STRONG
+              changed = true
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // Suppress remaining weak edges
+  for (let i = 0; i < out.length; i++) {
+    if (out[i] !== STRONG) out[i] = 0
+  }
+  return out
+}
+
+/** Full Canny edge detection */
+export function canny(
+  gray: Uint8Array,
+  width: number,
+  height: number,
+  lowThreshold: number,
+  highThreshold: number,
+): Uint8Array {
+  const blurred = gaussianBlur(gray, width, height)
+  const { magnitude, direction } = sobelGradients(blurred, width, height)
+  const nms = nonMaxSuppression(magnitude, direction, width, height)
+  return hysteresis(nms, width, height, lowThreshold, highThreshold)
+}
+
+/** Convert edge image (Uint8Array) to base64 JPEG via offscreen canvas */
+export function edgeImageToB64(edges: Uint8Array, width: number, height: number): string {
+  const canvas = new OffscreenCanvas(width, height)
+  const ctx = canvas.getContext('2d')!
+  const imgData = ctx.createImageData(width, height)
+  for (let i = 0; i < edges.length; i++) {
+    const p = i * 4
+    imgData.data[p] = edges[i]
+    imgData.data[p + 1] = edges[i]
+    imgData.data[p + 2] = edges[i]
+    imgData.data[p + 3] = 255
+  }
+  ctx.putImageData(imgData, 0, 0)
+  const blob = canvas.convertToBlob({ type: 'image/jpeg', quality: 0.7 })
+  return '' // placeholder — async handled in worker
+}

ui/detection-app/src/cv/index.ts

@@ -0,0 +1,102 @@
+/**
+ * Browser-side CV — public API.
+ *
+ * Runs edge detection directly on the main thread.
+ * Pure TypeScript, no WASM, no dependencies.
+ * ~10-50ms per 1080p frame — fast enough for slider feedback.
+ *
+ * TODO: Move to Web Worker when processing larger batches.
+ *
+ * Usage:
+ *   import { runEdgeDetection, runEdgeDetectionDebug } from '@/cv'
+ *   const result = await runEdgeDetection(imageData, params)
+ */
+
+import { detectEdges, detectEdgesDebug, type EdgeRegion, type EdgeDetectionParams } from './edges'
+
+export type { EdgeRegion, EdgeDetectionParams } from './edges'
+export type { EdgeDetectionResult, EdgeDetectionDebugResult } from './edges'
+export { matchTracks, renderTracksToImageData } from './tracks'
+export type { Track, TrackPoint } from './tracks'
+
+/** Run edge detection. Returns bounding boxes. */
+export async function runEdgeDetection(
+  imageData: ImageData,
+  params: Partial<EdgeDetectionParams> = {},
+): Promise<{ regions: EdgeRegion[] }> {
+  return detectEdges(imageData, params)
+}
+
+/** Run edge detection with debug overlays. Returns boxes + visualization ImageData. */
+export async function runEdgeDetectionDebug(
+  imageData: ImageData,
+  params: Partial<EdgeDetectionParams> = {},
+): Promise<{
+  regions: EdgeRegion[]
+  edgeImageData: ImageData
+  linesImageData: ImageData
+  horizontalCount: number
+  pairCount: number
+}> {
+  return detectEdgesDebug(imageData, params)
+}
+
+/**
+ * Decode a base64 JPEG string to ImageData.
+ *
+ * Used to convert the checkpoint frame (base64) into ImageData
+ * that the CV functions can process.
+ */
+export function b64ToImageData(b64: string): Promise<ImageData> {
+  return new Promise((resolve, reject) => {
+    const img = new Image()
+    img.onload = () => {
+      const canvas = new OffscreenCanvas(img.width, img.height)
+      const ctx = canvas.getContext('2d')!
+      ctx.drawImage(img, 0, 0)
+      resolve(ctx.getImageData(0, 0, img.width, img.height))
+    }
+    img.onerror = () => reject(new Error('Failed to decode image'))
+    img.src = `data:image/jpeg;base64,${b64}`
+  })
+}
+
+/**
+ * Encode ImageData to base64 PNG string (preserves transparency).
+ *
+ * Used for overlays that need a transparent background (e.g. motion tracks).
+ * Pair with srcFormat: 'png' on the FrameOverlay.
+ */
+export async function imageDataToPngB64(imageData: ImageData): Promise<string> {
+  const canvas = new OffscreenCanvas(imageData.width, imageData.height)
+  const ctx = canvas.getContext('2d')!
+  ctx.putImageData(imageData, 0, 0)
+  const blob = await canvas.convertToBlob({ type: 'image/png' })
+  const buffer = await blob.arrayBuffer()
+  const bytes = new Uint8Array(buffer)
+  let binary = ''
+  for (let i = 0; i < bytes.length; i++) {
+    binary += String.fromCharCode(bytes[i])
+  }
+  return btoa(binary)
+}
+
+/**
+ * Encode ImageData to base64 JPEG string.
+ *
+ * Used to convert debug overlay ImageData back to base64
+ * for the FrameRenderer overlays prop.
+ */
+export async function imageDataToB64(imageData: ImageData): Promise<string> {
+  const canvas = new OffscreenCanvas(imageData.width, imageData.height)
+  const ctx = canvas.getContext('2d')!
+  ctx.putImageData(imageData, 0, 0)
+  const blob = await canvas.convertToBlob({ type: 'image/jpeg', quality: 0.7 })
+  const buffer = await blob.arrayBuffer()
+  const bytes = new Uint8Array(buffer)
+  let binary = ''
+  for (let i = 0; i < bytes.length; i++) {
+    binary += String.fromCharCode(bytes[i])
+  }
+  return btoa(binary)
+}

ui/detection-app/src/cv/tracks.ts

@@ -0,0 +1,181 @@
+/**
+ * Motion track matching and rendering.
+ *
+ * Matches bounding boxes across frames by IoU (Intersection over Union).
+ * Uses Hungarian-style optimal assignment so every track gets its best match.
+ * Renders VFX-style tracks: × at start/end, dotted trace in between.
+ * Returns ImageData (RGBA, transparent background) for use as a FrameOverlay.
+ */
+
+export type TrackPoint = { seq: number; cx: number; cy: number; w: number; h: number }
+export type Track = { id: number; points: TrackPoint[] }
+
+type Box = { x: number; y: number; w: number; h: number }
+
+function iou(a: Box, b: Box): number {
+  const x1 = Math.max(a.x, b.x)
+  const y1 = Math.max(a.y, b.y)
+  const x2 = Math.min(a.x + a.w, b.x + b.w)
+  const y2 = Math.min(a.y + a.h, b.y + b.h)
+  const inter = Math.max(0, x2 - x1) * Math.max(0, y2 - y1)
+  if (inter === 0) return 0
+  const union = a.w * a.h + b.w * b.h - inter
+  return union > 0 ? inter / union : 0
+}
+
+/**
+ * Match bounding boxes across frames by IoU.
+ *
+ * For each pair of consecutive frames, computes an IoU cost matrix and
+ * assigns tracks to boxes using greedy-best-first on IoU score (descending).
+ * minIoU: minimum overlap to consider a match (default 0.15).
+ */
+export function matchTracks(
+  regionsByFrame: Record<number, Box[]>,
+  minIoU = 0.15,
+): Track[] {
+  const seqs = Object.keys(regionsByFrame).map(Number).sort((a, b) => a - b)
+  if (seqs.length === 0) return []
+
+  let nextId = 0
+  const active: Track[] = []
+  const finished: Track[] = []
+
+  for (const seq of seqs) {
+    const boxes = regionsByFrame[seq]
+
+    if (active.length === 0) {
+      for (const b of boxes) {
+        active.push({
+          id: nextId++,
+          points: [{ seq, cx: b.x + b.w / 2, cy: b.y + b.h / 2, w: b.w, h: b.h }],
+        })
+      }
+      continue
+    }
+
+    // Build cost matrix: IoU between each active track's last box and each new box
+    const costs: Array<{ trackIdx: number; boxIdx: number; score: number }> = []
+    for (let t = 0; t < active.length; t++) {
+      const last = active[t].points[active[t].points.length - 1]
+      const trackBox: Box = { x: last.cx - last.w / 2, y: last.cy - last.h / 2, w: last.w, h: last.h }
+      for (let b = 0; b < boxes.length; b++) {
+        const score = iou(trackBox, boxes[b])
+        if (score >= minIoU) {
+          costs.push({ trackIdx: t, boxIdx: b, score })
+        }
+      }
+    }
+
+    // Greedy-best-first assignment (sorted by descending IoU)
+    costs.sort((a, b) => b.score - a.score)
+    const matchedTracks = new Set<number>()
+    const matchedBoxes = new Set<number>()
+    const next: Track[] = []
+
+    for (const { trackIdx, boxIdx } of costs) {
+      if (matchedTracks.has(trackIdx) || matchedBoxes.has(boxIdx)) continue
+      matchedTracks.add(trackIdx)
+      matchedBoxes.add(boxIdx)
+      const b = boxes[boxIdx]
+      active[trackIdx].points.push({
+        seq, cx: b.x + b.w / 2, cy: b.y + b.h / 2, w: b.w, h: b.h,
+      })
+      next.push(active[trackIdx])
+    }
+
+    // Unmatched tracks → finished
+    for (let t = 0; t < active.length; t++) {
+      if (!matchedTracks.has(t)) finished.push(active[t])
+    }
+
+    // Unmatched boxes → new tracks
+    for (let b = 0; b < boxes.length; b++) {
+      if (!matchedBoxes.has(b)) {
+        const box = boxes[b]
+        next.push({
+          id: nextId++,
+          points: [{ seq, cx: box.x + box.w / 2, cy: box.y + box.h / 2, w: box.w, h: box.h }],
+        })
+      }
+    }
+
+    active.length = 0
+    active.push(...next)
+  }
+
+  return [...finished, ...active]
+}
+
+/**
+ * Render tracks to ImageData (RGBA, transparent background).
+ *
+ * Only draws tracks that span ≥2 frames (single-frame detections are skipped).
+ * × at start, × at end, dotted trace in between.
+ * Filled dot at currentSeq.
+ */
+export function renderTracksToImageData(
+  tracks: Track[],
+  width: number,
+  height: number,
+  currentSeq: number,
+  color = '#00e5ff',
+): ImageData {
+  const canvas = new OffscreenCanvas(width, height)
+  const ctx = canvas.getContext('2d')!
+
+  ctx.clearRect(0, 0, width, height)
+  ctx.strokeStyle = color
+  ctx.fillStyle = color
+
+  for (const track of tracks) {
+    const pts = track.points
+    // Skip single-frame detections — no temporal signal
+    if (pts.length < 2) continue
+
+    // Dotted trace connecting all centers
+    ctx.globalAlpha = 0.75
+    ctx.lineWidth = 1.5
+    ctx.setLineDash([4, 4])
+    ctx.beginPath()
+    ctx.moveTo(pts[0].cx, pts[0].cy)
+    for (let i = 1; i < pts.length; i++) {
+      ctx.lineTo(pts[i].cx, pts[i].cy)
+    }
+    ctx.stroke()
+    ctx.setLineDash([])
+
+    // × at first point
+    ctx.globalAlpha = 0.9
+    ctx.lineWidth = 1.5
+    drawX(ctx, pts[0].cx, pts[0].cy, 7)
+
+    // × at last point
+    drawX(ctx, pts[pts.length - 1].cx, pts[pts.length - 1].cy, 7)
+
+    // Filled dot at current frame
+    const curr = pts.find(p => p.seq === currentSeq)
+    if (curr) {
+      ctx.globalAlpha = 1
+      ctx.beginPath()
+      ctx.arc(curr.cx, curr.cy, 4, 0, Math.PI * 2)
+      ctx.fill()
+    }
+  }
+
+  return ctx.getImageData(0, 0, width, height)
+}
+
+function drawX(
+  ctx: OffscreenCanvasRenderingContext2D,
+  cx: number,
+  cy: number,
+  size: number,
+): void {
+  ctx.beginPath()
+  ctx.moveTo(cx - size, cy - size)
+  ctx.lineTo(cx + size, cy + size)
+  ctx.moveTo(cx + size, cy - size)
+  ctx.lineTo(cx - size, cy + size)
+  ctx.stroke()
+}

ui/detection-app/src/cv/worker.ts

@@ -0,0 +1,41 @@
+/**
+ * CV Web Worker — runs edge detection off the main thread.
+ *
+ * Message protocol:
+ *   Main → Worker: { type: 'detect_edges', imageData: ImageData, params: {...} }
+ *   Main → Worker: { type: 'detect_edges_debug', imageData: ImageData, params: {...} }
+ *   Worker → Main: { type: 'result', regions: [...] }
+ *   Worker → Main: { type: 'debug_result', regions: [...], edgeImageData, linesImageData, horizontalCount, pairCount }
+ *   Worker → Main: { type: 'error', message: string }
+ */
+
+import { detectEdges, detectEdgesDebug, type EdgeDetectionParams } from './edges'
+
+self.onmessage = (event: MessageEvent) => {
+  const { type, imageData, params } = event.data
+
+  try {
+    if (type === 'detect_edges') {
+      const result = detectEdges(imageData, params)
+      self.postMessage({ type: 'result', regions: result.regions })
+    } else if (type === 'detect_edges_debug') {
+      const result = detectEdgesDebug(imageData, params)
+      self.postMessage({
+        type: 'debug_result',
+        regions: result.regions,
+        edgeImageData: result.edgeImageData,
+        linesImageData: result.linesImageData,
+        horizontalCount: result.horizontalCount,
+        pairCount: result.pairCount,
+      }, [
+        // Transfer ownership of the backing buffers for zero-copy
+        result.edgeImageData.data.buffer,
+        result.linesImageData.data.buffer,
+      ])
+    } else {
+      self.postMessage({ type: 'error', message: `Unknown message type: ${type}` })
+    }
+  } catch (e) {
+    self.postMessage({ type: 'error', message: String(e) })
+  }
+}