Upload 36 files

src/components/MultiSourceCaptioningView.tsx

@@ -79,7 +79,7 @@ export default function MultiSourceCaptioningView() {
   useEffect(() => {
     if (mode !== "Webcam" || !isLoaded || !webcamActive) return;
     let interval: ReturnType<typeof setInterval> | null = null;
-    const processFrame = async () => {
+    const processVideoFrame = async () => {
       if (!videoRef.current || !canvasRef.current) return;
       const video = videoRef.current;
       const canvas = canvasRef.current;
@@ -89,31 +89,17 @@ export default function MultiSourceCaptioningView() {
       const ctx = canvas.getContext("2d");
       if (!ctx) return;
       ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-      try {
-        setProcessing(true);
-        setError(null);
-        setInferenceStatus("Running inference...");
-        const fakeVideo = {
-          videoWidth: canvas.width,
-          videoHeight: canvas.height,
-          getContext: () => ctx,
-        } as unknown as HTMLVideoElement;
-        const result = await runInference(fakeVideo, prompt);
-        setDebugOutput(result);
+      await runInference(video, prompt, (output: string) => {
+        setDebugOutput(output);
         setInferenceStatus("Inference complete.");
         ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-        const boxes = extractJsonFromMarkdown(result) || [];
+        const boxes = extractJsonFromMarkdown(output) || [];
         if (boxes.length === 0) setInferenceStatus("No boxes detected or model output invalid.");
         drawBoundingBoxesOnCanvas(ctx, boxes);
-      } catch (e) {
-        setError(e instanceof Error ? e.message : String(e));
-        setInferenceStatus("Inference error: " + (e instanceof Error ? e.message : String(e)));
-      } finally {
-        setProcessing(false);
-      }
+      });
     };
     interval = setInterval(() => {
-      processFrame();
+      processVideoFrame();
     }, 1000);
     return () => {
       if (interval) clearInterval(interval);
@@ -124,7 +110,7 @@ export default function MultiSourceCaptioningView() {
   useEffect(() => {
     if (mode !== "URL" || !isLoaded || !urlProcessing) return;
     let interval: ReturnType<typeof setInterval> | null = null;
-    const processFrame = async () => {
+    const processVideoFrame = async () => {
       if (!videoRef.current || !canvasRef.current) return;
       const video = videoRef.current;
       const canvas = canvasRef.current;
@@ -134,31 +120,17 @@ export default function MultiSourceCaptioningView() {
       const ctx = canvas.getContext("2d");
       if (!ctx) return;
       ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-      try {
-        setProcessing(true);
-        setError(null);
-        setInferenceStatus("Running inference...");
-        const fakeVideo = {
-          videoWidth: canvas.width,
-          videoHeight: canvas.height,
-          getContext: () => ctx,
-        } as unknown as HTMLVideoElement;
-        const result = await runInference(fakeVideo, prompt);
-        setDebugOutput(result);
+      await runInference(video, prompt, (output: string) => {
+        setDebugOutput(output);
         setInferenceStatus("Inference complete.");
         ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-        const boxes = extractJsonFromMarkdown(result) || [];
+        const boxes = extractJsonFromMarkdown(output) || [];
         if (boxes.length === 0) setInferenceStatus("No boxes detected or model output invalid.");
         drawBoundingBoxesOnCanvas(ctx, boxes);
-      } catch (e) {
-        setError(e instanceof Error ? e.message : String(e));
-        setInferenceStatus("Inference error: " + (e instanceof Error ? e.message : String(e)));
-      } finally {
-        setProcessing(false);
-      }
+      });
     };
     interval = setInterval(() => {
-      processFrame();
+      processVideoFrame();
     }, 1000);
     return () => {
       if (interval) clearInterval(interval);
@@ -177,36 +149,26 @@ export default function MultiSourceCaptioningView() {
     const ctx = canvas.getContext("2d");
     if (!ctx) return;
     ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
-    try {
-      setProcessing(true);
-      setError(null);
-      setInferenceStatus("Running inference...");
-      const fakeVideo = {
-        videoWidth: canvas.width,
-        videoHeight: canvas.height,
-        getContext: () => ctx,
-      } as unknown as HTMLVideoElement;
-      const result = await runInference(fakeVideo, prompt);
-      setDebugOutput(result);
+    setProcessing(true);
+    setError(null);
+    setInferenceStatus("Running inference...");
+    await runInference(img, prompt, (output: string) => {
+      setDebugOutput(output);
       setInferenceStatus("Inference complete.");
       ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
-      const boxes = extractJsonFromMarkdown(result) || [];
+      const boxes = extractJsonFromMarkdown(output) || [];
       if (boxes.length === 0) setInferenceStatus("No boxes detected or model output invalid.");
       drawBoundingBoxesOnCanvas(ctx, boxes);
       setImageProcessed(true);
-    } catch (e) {
-      setError(e instanceof Error ? e.message : String(e));
-      setInferenceStatus("Inference error: " + (e instanceof Error ? e.message : String(e)));
-    } finally {
-      setProcessing(false);
-    }
+    });
+    setProcessing(false);
   };
 
   // File mode: process uploaded video frames (start/stop)
   useEffect(() => {
     if (mode !== "File" || !isLoaded || !uploadedFile || !isVideoFile(uploadedFile) || !videoProcessing) return;
     let interval: ReturnType<typeof setInterval> | null = null;
-    const processFrame = async () => {
+    const processVideoFrame = async () => {
       if (!videoRef.current || !canvasRef.current) return;
       const video = videoRef.current;
       const canvas = canvasRef.current;
@@ -216,31 +178,17 @@ export default function MultiSourceCaptioningView() {
       const ctx = canvas.getContext("2d");
       if (!ctx) return;
       ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-      try {
-        setProcessing(true);
-        setError(null);
-        setInferenceStatus("Running inference...");
-        const fakeVideo = {
-          videoWidth: canvas.width,
-          videoHeight: canvas.height,
-          getContext: () => ctx,
-        } as unknown as HTMLVideoElement;
-        const result = await runInference(fakeVideo, prompt);
-        setDebugOutput(result);
+      await runInference(video, prompt, (output: string) => {
+        setDebugOutput(output);
         setInferenceStatus("Inference complete.");
         ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-        const boxes = extractJsonFromMarkdown(result) || [];
+        const boxes = extractJsonFromMarkdown(output) || [];
         if (boxes.length === 0) setInferenceStatus("No boxes detected or model output invalid.");
         drawBoundingBoxesOnCanvas(ctx, boxes);
-      } catch (e) {
-        setError(e instanceof Error ? e.message : String(e));
-        setInferenceStatus("Inference error: " + (e instanceof Error ? e.message : String(e)));
-      } finally {
-        setProcessing(false);
-      }
+      });
     };
     interval = setInterval(() => {
-      processFrame();
+      processVideoFrame();
     }, 1000);
     return () => {
       if (interval) clearInterval(interval);
@@ -251,7 +199,7 @@ export default function MultiSourceCaptioningView() {
   useEffect(() => {
     if (mode !== "File" || uploadedFile || !isLoaded || !exampleProcessing) return;
     let interval: ReturnType<typeof setInterval> | null = null;
-    const processFrame = async () => {
+    const processVideoFrame = async () => {
       if (!videoRef.current || !canvasRef.current) return;
       const video = videoRef.current;
       const canvas = canvasRef.current;
@@ -261,31 +209,17 @@ export default function MultiSourceCaptioningView() {
       const ctx = canvas.getContext("2d");
       if (!ctx) return;
       ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-      try {
-        setProcessing(true);
-        setError(null);
-        setInferenceStatus("Running inference...");
-        const fakeVideo = {
-          videoWidth: canvas.width,
-          videoHeight: canvas.height,
-          getContext: () => ctx,
-        } as unknown as HTMLVideoElement;
-        const result = await runInference(fakeVideo, prompt);
-        setDebugOutput(result);
+      await runInference(video, prompt, (output: string) => {
+        setDebugOutput(output);
         setInferenceStatus("Inference complete.");
         ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-        const boxes = extractJsonFromMarkdown(result) || [];
+        const boxes = extractJsonFromMarkdown(output) || [];
         if (boxes.length === 0) setInferenceStatus("No boxes detected or model output invalid.");
         drawBoundingBoxesOnCanvas(ctx, boxes);
-      } catch (e) {
-        setError(e instanceof Error ? e.message : String(e));
-        setInferenceStatus("Inference error: " + (e instanceof Error ? e.message : String(e)));
-      } finally {
-        setProcessing(false);
-      }
+      });
     };
     interval = setInterval(() => {
-      processFrame();
+      processVideoFrame();
     }, 1000);
     return () => {
       if (interval) clearInterval(interval);