Upload 51 files

src/components/MultiSourceCaptioningView.tsx

@@ -6,7 +6,7 @@ const MODES = ["Webcam", "URL", "File"] as const;
 type Mode = typeof MODES[number];
 
 const EXAMPLE_VIDEO_URL = "/space/videos/1.mp4";
-const EXAMPLE_PROMPT = "Detect all people in the image. For each person, output a JSON array of objects with fields: 'label' (string) and 'bbox_2d' ([x1, y1, x2, y2]) where coordinates are in pixel values. Example: [{\"label\": \"person\", \"bbox_2d\": [100, 50, 200, 300]}]";
+const EXAMPLE_PROMPT = "Detect all birds in the image. For each bird, output a JSON array of objects with fields: 'label' (string) and 'bbox_2d' ([x1, y1, x2, y2]) where coordinates are in pixel values. This is only an example use your own values (Do not use these values [100, 50, 200, 300]}) Example: [{"label": "bird", "bbox_2d": [100, 50, 200, 300]}]";
 
 function parseFlatBoxArray(arr: any[]): { label: string, bbox_2d: number[] }[] {
   if (typeof arr[0] === "string" && Array.isArray(arr[1])) {
@@ -321,6 +321,30 @@ export default function MultiSourceCaptioningView() {
     ctx.fillText("Test Box", 50, 35);
   };
 
+  useEffect(() => {
+    const draw = () => {
+      const overlayVideo = overlayVideoRef.current;
+      const canvas = canvasRef.current;
+      if (!overlayVideo || !canvas) return;
+      if (overlayVideo.videoWidth === 0) return;
+      canvas.width = overlayVideo.videoWidth;
+      canvas.height = overlayVideo.videoHeight;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      const now = Date.now();
+      const boxHistory = boxHistoryRef.current.filter((b: any) => now - b.timestamp < 2000);
+      if (boxHistory.length > 0) {
+        const scaleX = canvas.width / overlayVideo.videoWidth;
+        const scaleY = canvas.height / overlayVideo.videoHeight;
+        drawBoundingBoxesOnCanvas(ctx, boxHistory, { color: "#FF00FF", lineWidth: 4, font: "20px Arial", scaleX, scaleY });
+      }
+    };
+    draw();
+    const interval = setInterval(draw, 100);
+    return () => clearInterval(interval);
+  }, [overlayVideoRef, canvasRef]);
+
   return (
     <div className="absolute inset-0 text-white">
       <div className="fixed top-0 left-0 w-full bg-gray-900 text-white text-center py-2 z-50">

videos/1.mp4

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:af45772f7154d3e134f0033e65fec8379be7d6a22e847598a8c1a3ffa7b013c3
-size 26572724
+oid sha256:01ea1c79a0b83ee324c292b3f0f12214f5e9d8a42437c0d26bd3be71004b57c0
+size 1754021