Upload 37 files

src/components/MultiSourceCaptioningView.tsx

@@ -112,67 +112,52 @@ export default function MultiSourceCaptioningView() {
     };
   }, [mode]);
 
-  // Replace setInterval-based frame processing with an async loop for all video modes
-  // Example for webcam mode:
+  // Webcam mode: process frames with setInterval
   useEffect(() => {
     if (mode !== "Webcam" || !isLoaded || !webcamActive) return;
-    let running = true;
-    async function processLoop() {
-      while (running) {
-        if (videoRef.current && !videoRef.current.paused && !videoRef.current.ended && videoRef.current.videoWidth > 0) {
-          await processVideoFrame();
-        }
-        await new Promise(res => setTimeout(res, 1000)); // 1 FPS
-      }
-    }
-    processLoop();
-    return () => { running = false; };
+    let interval: ReturnType<typeof setInterval> | null = null;
+    interval = setInterval(() => {
+      processVideoFrame();
+    }, 1000);
+    return () => {
+      if (interval) clearInterval(interval);
+    };
   }, [mode, isLoaded, prompt, runInference, webcamActive]);
 
-  // Repeat for URL, File video, Example video modes:
+  // URL mode: process frames with setInterval
   useEffect(() => {
     if (mode !== "URL" || !isLoaded || !urlProcessing) return;
-    let running = true;
-    async function processLoop() {
-      while (running) {
-        if (videoRef.current && !videoRef.current.paused && !videoRef.current.ended && videoRef.current.videoWidth > 0) {
-          await processVideoFrame();
-        }
-        await new Promise(res => setTimeout(res, 1000));
-      }
-    }
-    processLoop();
-    return () => { running = false; };
+    let interval: ReturnType<typeof setInterval> | null = null;
+    interval = setInterval(() => {
+      processVideoFrame();
+    }, 1000);
+    return () => {
+      if (interval) clearInterval(interval);
+    };
   }, [mode, isLoaded, prompt, runInference, urlProcessing]);
 
+  // File video mode: process frames with setInterval
   useEffect(() => {
     if (mode !== "File" || !isLoaded || !uploadedFile || !isVideoFile(uploadedFile) || !videoProcessing) return;
-    let running = true;
-    async function processLoop() {
-      while (running) {
-        if (videoRef.current && !videoRef.current.paused && !videoRef.current.ended && videoRef.current.videoWidth > 0) {
-          await processVideoFrame();
-        }
-        await new Promise(res => setTimeout(res, 1000));
-      }
-    }
-    processLoop();
-    return () => { running = false; };
+    let interval: ReturnType<typeof setInterval> | null = null;
+    interval = setInterval(() => {
+      processVideoFrame();
+    }, 1000);
+    return () => {
+      if (interval) clearInterval(interval);
+    };
   }, [mode, isLoaded, prompt, runInference, uploadedFile, videoProcessing]);
 
+  // Example video mode: process frames with setInterval
   useEffect(() => {
     if (mode !== "File" || uploadedFile || !isLoaded || !exampleProcessing) return;
-    let running = true;
-    async function processLoop() {
-      while (running) {
-        if (videoRef.current && !videoRef.current.paused && !videoRef.current.ended && videoRef.current.videoWidth > 0) {
-          await processVideoFrame();
-        }
-        await new Promise(res => setTimeout(res, 1000));
-      }
-    }
-    processLoop();
-    return () => { running = false; };
+    let interval: ReturnType<typeof setInterval> | null = null;
+    interval = setInterval(() => {
+      processVideoFrame();
+    }, 1000);
+    return () => {
+      if (interval) clearInterval(interval);
+    };
   }, [mode, isLoaded, prompt, runInference, uploadedFile, exampleProcessing]);
 
   // File mode: process uploaded image (only on button click)