Upload 36 files

src/components/MultiSourceCaptioningView.tsx

@@ -26,6 +26,8 @@ export default function MultiSourceCaptioningView() {
   const [webcamActive, setWebcamActive] = useState(false);
   const [uploadedFile, setUploadedFile] = useState<File | null>(null);
   const [uploadedUrl, setUploadedUrl] = useState<string>("");
+  const [videoProcessing, setVideoProcessing] = useState(false);
+  const [imageProcessed, setImageProcessed] = useState(false);
 
   const videoRef = useRef<HTMLVideoElement | null>(null);
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
@@ -147,41 +149,39 @@ export default function MultiSourceCaptioningView() {
     };
   }, [mode, isLoaded, prompt, runInference]);
 
-  // File mode: process uploaded image
-  useEffect(() => {
-    if (mode !== "File" || !isLoaded || !uploadedFile || !isImageFile(uploadedFile)) return;
+  // File mode: process uploaded image (only on button click)
+  const handleProcessImage = async () => {
+    if (!isLoaded || !uploadedFile || !isImageFile(uploadedFile) || !imageRef.current || !canvasRef.current) return;
     const img = imageRef.current;
     const canvas = canvasRef.current;
-    if (!img || !canvas) return;
-    img.onload = async () => {
-      canvas.width = img.naturalWidth;
-      canvas.height = img.naturalHeight;
-      const ctx = canvas.getContext("2d");
-      if (!ctx) return;
+    canvas.width = img.naturalWidth;
+    canvas.height = img.naturalHeight;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    ctx.drawImage(img, 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(img, 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(img, 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);
-      }
-    };
-  }, [mode, isLoaded, prompt, runInference, uploadedFile]);
+      const boxes = extractJsonFromMarkdown(result) || [];
+      drawBoundingBoxesOnCanvas(ctx, boxes);
+      setImageProcessed(true);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setProcessing(false);
+    }
+  };
 
-  // File mode: process uploaded video frames
+  // File mode: process uploaded video frames (start/stop)
   useEffect(() => {
-    if (mode !== "File" || !isLoaded || !uploadedFile || !isVideoFile(uploadedFile)) return;
+    if (mode !== "File" || !isLoaded || !uploadedFile || !isVideoFile(uploadedFile) || !videoProcessing) return;
     let interval: ReturnType<typeof setInterval> | null = null;
     const processFrame = async () => {
       if (!videoRef.current || !canvasRef.current) return;
@@ -217,14 +217,21 @@ export default function MultiSourceCaptioningView() {
     return () => {
       if (interval) clearInterval(interval);
     };
-  }, [mode, isLoaded, prompt, runInference, uploadedFile]);
+  }, [mode, isLoaded, prompt, runInference, uploadedFile, videoProcessing]);
 
   // Handle file upload
-  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleFileChange = (e: any) => {
     const file = e.target.files?.[0] || null;
     setUploadedFile(file);
     setUploadedUrl(file ? URL.createObjectURL(file) : "");
     setError(null);
+    setImageProcessed(false);
+    setVideoProcessing(false);
+  };
+
+  // Handle start/stop for video processing
+  const handleToggleVideoProcessing = () => {
+    setVideoProcessing((prev) => !prev);
   };
 
   return (
@@ -360,6 +367,13 @@ 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={handleProcessImage}
+                    disabled={processing}
+                  >
+                    {processing ? "Processing..." : imageProcessed ? "Reprocess Image" : "Process Image"}
+                  </button>
                 </div>
               )}
               {/* Show uploaded video */}
@@ -379,6 +393,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={handleToggleVideoProcessing}
+                  >
+                    {videoProcessing ? "Stop Processing" : "Start Processing"}
+                  </button>
                 </div>
               )}
               {/* Show example video if no file uploaded */}