Upload 51 files

src/components/MultiSourceCaptioningView.tsx

@@ -86,6 +86,7 @@ export default function MultiSourceCaptioningView() {
   const processingVideoRef = useRef<HTMLVideoElement | null>(null);
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const imageRef = useRef<HTMLImageElement | null>(null);
+  const boxHistoryRef = useRef<any[]>([]);
   const webcamStreamRef = useRef<MediaStream | null>(null);
   const { isLoaded, isLoading, error: modelError, runInference } = useVLMContext();
 
@@ -136,12 +137,11 @@ export default function MultiSourceCaptioningView() {
       // Box persistence logic (2 seconds)
       const now = Date.now();
       if (Array.isArray(boxes) && boxes.length > 0) {
-        if (!window._boxHistory) window._boxHistory = [];
-        window._boxHistory = window._boxHistory.filter((b) => now - b.timestamp < 2000);
-        window._boxHistory.push(...boxes.map(box => ({ ...box, timestamp: now })));
+        boxHistoryRef.current = boxHistoryRef.current.filter((b: any) => now - b.timestamp < 2000);
+        boxHistoryRef.current.push(...boxes.map(box => ({ ...box, timestamp: now })));
       }
       // Draw all boxes from last 2 seconds
-      const boxHistory = (window._boxHistory || []).filter((b) => now - b.timestamp < 2000);
+      const boxHistory = boxHistoryRef.current.filter((b: any) => now - b.timestamp < 2000);
       ctx.clearRect(0, 0, canvas.width, canvas.height);
       if (boxHistory.length > 0) {
         const scaleX = canvas.width / video.videoWidth;