Upload 51 files

src/components/MultiSourceCaptioningView.tsx

@@ -72,6 +72,10 @@ import * as ort from 'onnxruntime-web';
 // Set your YOLOv8 ONNX model URL here:
 const YOLOV8_ONNX_URL = "https://huggingface.co/Quazim0t0/yolov8-onnx/resolve/main/yolov8n.onnx"; // <-- PUT YOUR ONNX FILE URL HERE
 
+// Add these constants to match the YOLOv8 input size
+const YOLOV8_INPUT_WIDTH = 640;
+const YOLOV8_INPUT_HEIGHT = 480;
+
 // 1. Load the ONNX model once
 let yoloSession: ort.InferenceSession | null = null;
 // Add a busy flag to prevent concurrent YOLOv8 inferences
@@ -408,12 +412,9 @@ export default function MultiSourceCaptioningView() {
           // Draw all YOLOv8 boxes from last detection
           const yoloBoxes = lastYoloBoxesRef.current;
           yoloBoxes.forEach((obj: any) => {
-            const canvasW = canvas.width;
-            const canvasH = canvas.height;
-            const procW = processingVideo.videoWidth;
-            const procH = processingVideo.videoHeight;
-            const scaleX = canvasW / procW;
-            const scaleY = canvasH / procH;
+            // Scale from YOLOv8 input size to canvas size
+            const scaleX = canvas.width / YOLOV8_INPUT_WIDTH;
+            const scaleY = canvas.height / YOLOV8_INPUT_HEIGHT;
             const [x1, y1, x2, y2] = obj.bbox;
             const drawX = x1 * scaleX;
             const drawY = y1 * scaleY;