Upload 51 files

src/components/MultiSourceCaptioningView.tsx

@@ -148,6 +148,14 @@ export default function MultiSourceCaptioningView() {
         boxes = parseFlatBoxArray(output);
       }
       boxes = normalizeBoxes(boxes);
+      // Restore debug logging
+      console.log("Model output:", output);
+      console.log("Boxes after normalization:", boxes);
+      console.log("Canvas size:", canvas.width, canvas.height);
+      if (boxes.length > 0) {
+        const [x1, y1, x2, y2] = boxes[0].bbox_2d;
+        console.log("First box coords:", x1, y1, x2, y2);
+      }
       if (boxes.length === 0) setInferenceStatus("No boxes detected or model output invalid.");
       if (Array.isArray(boxes) && boxes.length > 0) {
         addBoxesWithTimestamp(boxes); // <-- Add to persistent state
@@ -158,10 +166,11 @@ export default function MultiSourceCaptioningView() {
   // Draw persistent boxes on every frame
   useEffect(() => {
     const draw = () => {
-      if (!videoRef.current || !canvasRef.current) return;
-      const video = videoRef.current;
-      const canvas = canvasRef.current;
+      // Use overlay video for dimensions if available, else fallback to main video
+      const video = overlayVideoRef.current || videoRef.current;
+      if (!video || !canvasRef.current) return;
       if (video.videoWidth === 0) return;
+      const canvas = canvasRef.current;
       canvas.width = video.videoWidth;
       canvas.height = video.videoHeight;
       const ctx = canvas.getContext("2d");
@@ -177,7 +186,7 @@ export default function MultiSourceCaptioningView() {
     draw();
     const interval = setInterval(draw, 100);
     return () => clearInterval(interval);
-  }, [persistentBoxes, videoRef, canvasRef]);
+  }, [persistentBoxes, videoRef, overlayVideoRef, canvasRef]);
 
   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0] || null;