Upload 36 files

src/components/MultiSourceCaptioningView.tsx

@@ -30,6 +30,9 @@ export default function MultiSourceCaptioningView() {
   const [imageProcessed, setImageProcessed] = useState(false);
   const [exampleProcessing, setExampleProcessing] = useState(false);
   const [urlProcessing, setUrlProcessing] = useState(false);
+  const [debugOutput, setDebugOutput] = useState<string>("");
+  const [canvasDims, setCanvasDims] = useState<{w:number,h:number}|null>(null);
+  const [videoDims, setVideoDims] = useState<{w:number,h:number}|null>(null);
 
   const videoRef = useRef<HTMLVideoElement | null>(null);
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
@@ -94,6 +97,7 @@ export default function MultiSourceCaptioningView() {
           getContext: () => ctx,
         } as unknown as HTMLVideoElement;
         const result = await runInference(fakeVideo, prompt);
+        setDebugOutput(result);
         ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
         const boxes = extractJsonFromMarkdown(result) || [];
         drawBoundingBoxesOnCanvas(ctx, boxes);
@@ -134,6 +138,7 @@ export default function MultiSourceCaptioningView() {
           getContext: () => ctx,
         } as unknown as HTMLVideoElement;
         const result = await runInference(fakeVideo, prompt);
+        setDebugOutput(result);
         ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
         const boxes = extractJsonFromMarkdown(result) || [];
         drawBoundingBoxesOnCanvas(ctx, boxes);
@@ -158,6 +163,8 @@ export default function MultiSourceCaptioningView() {
     const canvas = canvasRef.current;
     canvas.width = img.naturalWidth;
     canvas.height = img.naturalHeight;
+    setCanvasDims({w:canvas.width,h:canvas.height});
+    setVideoDims({w:img.naturalWidth,h:img.naturalHeight});
     const ctx = canvas.getContext("2d");
     if (!ctx) return;
     ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
@@ -170,6 +177,7 @@ export default function MultiSourceCaptioningView() {
         getContext: () => ctx,
       } as unknown as HTMLVideoElement;
       const result = await runInference(fakeVideo, prompt);
+      setDebugOutput(result);
       ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
       const boxes = extractJsonFromMarkdown(result) || [];
       drawBoundingBoxesOnCanvas(ctx, boxes);
@@ -204,6 +212,7 @@ export default function MultiSourceCaptioningView() {
           getContext: () => ctx,
         } as unknown as HTMLVideoElement;
         const result = await runInference(fakeVideo, prompt);
+        setDebugOutput(result);
         ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
         const boxes = extractJsonFromMarkdown(result) || [];
         drawBoundingBoxesOnCanvas(ctx, boxes);
@@ -244,6 +253,7 @@ export default function MultiSourceCaptioningView() {
           getContext: () => ctx,
         } as unknown as HTMLVideoElement;
         const result = await runInference(fakeVideo, prompt);
+        setDebugOutput(result);
         ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
         const boxes = extractJsonFromMarkdown(result) || [];
         drawBoundingBoxesOnCanvas(ctx, boxes);
@@ -287,6 +297,21 @@ export default function MultiSourceCaptioningView() {
     setUrlProcessing((prev) => !prev);
   };
 
+  // Test draw box function
+  const handleTestDrawBox = () => {
+    if (!canvasRef.current) return;
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.strokeStyle = "#FF00FF";
+    ctx.lineWidth = 4;
+    ctx.strokeRect(40, 40, Math.max(40,canvas.width/4), Math.max(40,canvas.height/4));
+    ctx.font = "20px Arial";
+    ctx.fillStyle = "#FF00FF";
+    ctx.fillText("Test Box", 50, 35);
+  };
+
   return (
     <div className="absolute inset-0 text-white">
       <div className="flex flex-col items-center justify-center h-full w-full">
@@ -390,6 +415,17 @@ export default function MultiSourceCaptioningView() {
               </div>
               {processing && <div className="text-blue-400 mt-2">Processing frame...</div>}
               {error && <div className="text-red-400 mt-2">Error: {error}</div>}
+              <button
+                className="mt-4 px-6 py-2 rounded-lg bg-gray-600 text-white font-semibold"
+                onClick={handleTestDrawBox}
+              >
+                Test Draw Box
+              </button>
+              <div className="mt-2 p-2 bg-gray-800 rounded text-xs">
+                <div>Canvas: {canvasDims ? `${canvasDims.w}x${canvasDims.h}` : "-"} | Video: {videoDims ? `${videoDims.w}x${videoDims.h}` : "-"}</div>
+                <div>Raw Model Output:</div>
+                <pre className="overflow-x-auto max-h-32 whitespace-pre-wrap">{debugOutput}</pre>
+              </div>
             </div>
           )}
           {mode === "File" && (
@@ -487,6 +523,17 @@ export default function MultiSourceCaptioningView() {
               )}
               {processing && <div className="text-blue-400 mt-2">Processing frame...</div>}
               {error && <div className="text-red-400 mt-2">Error: {error}</div>}
+              <button
+                className="mt-4 px-6 py-2 rounded-lg bg-gray-600 text-white font-semibold"
+                onClick={handleTestDrawBox}
+              >
+                Test Draw Box
+              </button>
+              <div className="mt-2 p-2 bg-gray-800 rounded text-xs">
+                <div>Canvas: {canvasDims ? `${canvasDims.w}x${canvasDims.h}` : "-"} | Video: {videoDims ? `${videoDims.w}x${videoDims.h}` : "-"}</div>
+                <div>Raw Model Output:</div>
+                <pre className="overflow-x-auto max-h-32 whitespace-pre-wrap">{debugOutput}</pre>
+              </div>
             </div>
           )}
         </div>