Upload 36 files

src/components/MultiSourceCaptioningView.tsx

@@ -28,6 +28,8 @@ export default function MultiSourceCaptioningView() {
   const [uploadedUrl, setUploadedUrl] = useState<string>("");
   const [videoProcessing, setVideoProcessing] = useState(false);
   const [imageProcessed, setImageProcessed] = useState(false);
+  const [exampleProcessing, setExampleProcessing] = useState(false);
+  const [urlProcessing, setUrlProcessing] = useState(false);
 
   const videoRef = useRef<HTMLVideoElement | null>(null);
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
@@ -109,9 +111,9 @@ export default function MultiSourceCaptioningView() {
     };
   }, [mode, isLoaded, prompt, runInference, webcamActive]);
 
-  // Process video frames for URL mode (unchanged)
+  // URL mode: process video frames only when urlProcessing is true
   useEffect(() => {
-    if (mode !== "URL" || !isLoaded) return;
+    if (mode !== "URL" || !isLoaded || !urlProcessing) return;
     let interval: ReturnType<typeof setInterval> | null = null;
     const processFrame = async () => {
       if (!videoRef.current || !canvasRef.current) return;
@@ -147,7 +149,7 @@ export default function MultiSourceCaptioningView() {
     return () => {
       if (interval) clearInterval(interval);
     };
-  }, [mode, isLoaded, prompt, runInference]);
+  }, [mode, isLoaded, prompt, runInference, urlProcessing]);
 
   // File mode: process uploaded image (only on button click)
   const handleProcessImage = async () => {
@@ -219,6 +221,46 @@ export default function MultiSourceCaptioningView() {
     };
   }, [mode, isLoaded, prompt, runInference, uploadedFile, videoProcessing]);
 
+  // File mode: process example video frames (start/stop)
+  useEffect(() => {
+    if (mode !== "File" || uploadedFile || !isLoaded || !exampleProcessing) return;
+    let interval: ReturnType<typeof setInterval> | null = null;
+    const processFrame = async () => {
+      if (!videoRef.current || !canvasRef.current) return;
+      const video = videoRef.current;
+      const canvas = canvasRef.current;
+      if (video.paused || video.ended || video.videoWidth === 0) return;
+      canvas.width = video.videoWidth;
+      canvas.height = video.videoHeight;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+      try {
+        setProcessing(true);
+        setError(null);
+        const fakeVideo = {
+          videoWidth: canvas.width,
+          videoHeight: canvas.height,
+          getContext: () => ctx,
+        } as unknown as HTMLVideoElement;
+        const result = await runInference(fakeVideo, prompt);
+        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+        const boxes = extractJsonFromMarkdown(result) || [];
+        drawBoundingBoxesOnCanvas(ctx, boxes);
+      } catch (e) {
+        setError(e instanceof Error ? e.message : String(e));
+      } finally {
+        setProcessing(false);
+      }
+    };
+    interval = setInterval(() => {
+      processFrame();
+    }, 1000);
+    return () => {
+      if (interval) clearInterval(interval);
+    };
+  }, [mode, isLoaded, prompt, runInference, uploadedFile, exampleProcessing]);
+
   // Handle file upload
   const handleFileChange = (e: any) => {
     const file = e.target.files?.[0] || null;
@@ -227,6 +269,7 @@ export default function MultiSourceCaptioningView() {
     setError(null);
     setImageProcessed(false);
     setVideoProcessing(false);
+    setExampleProcessing(false);
   };
 
   // Handle start/stop for video processing
@@ -234,6 +277,16 @@ export default function MultiSourceCaptioningView() {
     setVideoProcessing((prev) => !prev);
   };
 
+  // Handle start/stop for example video processing
+  const handleToggleExampleProcessing = () => {
+    setExampleProcessing((prev) => !prev);
+  };
+
+  // Handle start/stop for URL video processing
+  const handleToggleUrlProcessing = () => {
+    setUrlProcessing((prev) => !prev);
+  };
+
   return (
     <div className="absolute inset-0 text-white">
       <div className="flex flex-col items-center justify-center h-full w-full">
@@ -328,6 +381,12 @@ export default function MultiSourceCaptioningView() {
                   className="absolute top-0 left-0 w-full h-full pointer-events-none"
                   style={{ zIndex: 10, pointerEvents: "none" }}
                 />
+                <button
+                  className="mt-4 px-6 py-2 rounded-lg bg-blue-600 text-white font-semibold"
+                  onClick={handleToggleUrlProcessing}
+                >
+                  {urlProcessing ? "Stop Processing" : "Start Processing"}
+                </button>
               </div>
               {processing && <div className="text-blue-400 mt-2">Processing frame...</div>}
               {error && <div className="text-red-400 mt-2">Error: {error}</div>}
@@ -418,6 +477,12 @@ export default function MultiSourceCaptioningView() {
                     className="absolute top-0 left-0 w-full h-full pointer-events-none"
                     style={{ zIndex: 10, pointerEvents: "none" }}
                   />
+                  <button
+                    className="mt-4 px-6 py-2 rounded-lg bg-blue-600 text-white font-semibold"
+                    onClick={handleToggleExampleProcessing}
+                  >
+                    {exampleProcessing ? "Stop Processing" : "Start Processing"}
+                  </button>
                 </div>
               )}
               {processing && <div className="text-blue-400 mt-2">Processing frame...</div>}