Upload 37 files

src/components/BoxAnnotator.ts

@@ -29,12 +29,14 @@ export function extractJsonFromMarkdown(markdown: string): any[] | null {
 export function drawBoundingBoxesOnCanvas(
   ctx: CanvasRenderingContext2D,
   boxes: { bbox_2d: number[]; label?: string }[],
-  options?: { color?: string; lineWidth?: number; font?: string }
+  options?: { color?: string; lineWidth?: number; font?: string, scaleX?: number, scaleY?: number }
 ) {
   if (!Array.isArray(boxes)) return; // Prevent errors if boxes is undefined/null
   const color = options?.color || "#00FF00";
   const lineWidth = options?.lineWidth || 2;
   const font = options?.font || "16px Arial";
+  const scaleX = options?.scaleX ?? 1;
+  const scaleY = options?.scaleY ?? 1;
 
   ctx.save();
   ctx.strokeStyle = color;
@@ -44,11 +46,15 @@ export function drawBoundingBoxesOnCanvas(
 
   boxes.forEach((obj) => {
     const [x1, y1, x2, y2] = obj.bbox_2d;
+    const sx1 = x1 * scaleX;
+    const sy1 = y1 * scaleY;
+    const sx2 = x2 * scaleX;
+    const sy2 = y2 * scaleY;
     ctx.beginPath();
-    ctx.rect(x1, y1, x2 - x1, y2 - y1);
+    ctx.rect(sx1, sy1, sx2 - sx1, sy2 - sy1);
     ctx.stroke();
     if (obj.label) {
-      ctx.fillText(obj.label, x1 + 4, y1 - 4 < 10 ? y1 + 16 : y1 - 4);
+      ctx.fillText(obj.label, sx1 + 4, sy1 - 4 < 10 ? sy1 + 16 : sy1 - 4);
     }
   });
 

src/components/MultiSourceCaptioningView.tsx

@@ -103,7 +103,9 @@ export default function MultiSourceCaptioningView() {
       }
       if (boxes.length === 0) setInferenceStatus("No boxes detected or model output invalid.");
       if (Array.isArray(boxes) && boxes.length > 0) {
-        drawBoundingBoxesOnCanvas(ctx, boxes);
+        const scaleX = canvas.width / video.videoWidth;
+        const scaleY = canvas.height / video.videoHeight;
+        drawBoundingBoxesOnCanvas(ctx, boxes, { scaleX, scaleY });
       }
     });
   };
@@ -233,7 +235,9 @@ export default function MultiSourceCaptioningView() {
       }
       if (boxes.length === 0) setInferenceStatus("No boxes detected or model output invalid.");
       if (Array.isArray(boxes) && boxes.length > 0) {
-        drawBoundingBoxesOnCanvas(ctx, boxes);
+        const scaleX = canvas.width / img.naturalWidth;
+        const scaleY = canvas.height / img.naturalHeight;
+        drawBoundingBoxesOnCanvas(ctx, boxes, { scaleX, scaleY });
       }
       setImageProcessed(true);
     });