refactor: video section

src/utils/canvas-drawing.ts

@@ -0,0 +1,57 @@
+export const DETECTION_COLORS: Record<string, string> = {
+  pothole: '#ef4444',
+  defected_sign_board: '#3b82f6',
+  road_crack: '#f59e0b',
+  damaged_road_marking: '#6366f1',
+  good_sign_board: '#10b981',
+};
+
+export const drawBoundingBoxes = (
+  ctx: CanvasRenderingContext2D,
+  detections: any[],
+  canvasWidth: number,
+  canvasHeight: number,
+  videoWidth: number,
+  videoHeight: number,
+) => {
+  ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+  if (!detections || detections.length === 0) return;
+
+  const scaleX = canvasWidth / videoWidth;
+  const scaleY = canvasHeight / videoHeight;
+
+  detections.forEach((detection) => {
+    const bbox = detection.bbox;
+    if (!bbox) return;
+
+    const x1 = bbox.x1 * scaleX;
+    const y1 = bbox.y1 * scaleY;
+    const x2 = bbox.x2 * scaleX;
+    const y2 = bbox.y2 * scaleY;
+
+    const type = (detection.type || detection._detType || '').toLowerCase();
+    const boxColor = DETECTION_COLORS[type] || '#3b82f6';
+
+    ctx.strokeStyle = boxColor;
+    ctx.lineWidth = 3;
+    ctx.strokeRect(x1, y1, x2 - x1, y2 - y1);
+
+    // Transparent fill
+    ctx.fillStyle = boxColor + '20';
+    ctx.fillRect(x1, y1, x2 - x1, y2 - y1);
+
+    const id = detection.pothole_id ?? detection.signboard_id ?? detection.detection_id;
+    const label = `${type.replace(/_/g, ' ')} #${id} ${(detection.confidence * 100).toFixed(0)}%`;
+
+    ctx.font = 'bold 12px sans-serif';
+    const metrics = ctx.measureText(label);
+
+    // Label background
+    ctx.fillStyle = boxColor;
+    ctx.fillRect(x1, y1 - 20, metrics.width + 10, 20);
+
+    // Label text
+    ctx.fillStyle = '#fff';
+    ctx.fillText(label, x1 + 5, y1 - 6);
+  });
+};