Upload 51 files

src/components/MultiSourceCaptioningView.tsx

@@ -2,11 +2,11 @@ import { useState, useRef, useEffect } from "react";
 import { useVLMContext } from "../context/useVLMContext";
 import { drawBoundingBoxesOnCanvas } from "./BoxAnnotator";
 
-const MODES = ["Webcam", "URL", "File"] as const;
+const MODES = ["Webcam", "File"] as const;
 type Mode = typeof MODES[number];
 
 const EXAMPLE_VIDEO_URL = "/space/videos/1.mp4";
-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. Example: [{\"label\": \"bird\", \"bbox_2d\": [x1, y1, x2, y2]}]";
+const EXAMPLE_PROMPT = "Detect each individual bird in the image. The birds are moving. For each object, output a JSON array of objects with fields. Each bird should have its own ([x1, y1, x2, y2]) where coordinates are in pixel values. This should be used to draw a box using the points around the bird. Follow the format of this Example: [x1, y1, x2, y2], [x1, y1, x2, y2]";
 
 function isImageFile(file: File) {
   return file.type.startsWith("image/");
@@ -435,84 +435,6 @@ export default function MultiSourceCaptioningView() {
               {error && <div className="text-red-400 mt-2">Error: {error}</div>}
             </div>
           )}
-          {mode === "URL" && (
-            <div className="w-full text-center flex flex-col items-center">
-              <p className="mb-4">Enter a video stream URL (e.g., HTTP MP4, MJPEG, HLS, etc.):</p>
-              <div className="flex w-full max-w-xl mb-4">
-                <input
-                  type="text"
-                  className="flex-1 px-4 py-2 rounded-l-lg text-black"
-                  value={inputUrl}
-                  onChange={(e) => setInputUrl(e.target.value)}
-                  placeholder="Paste video URL here"
-                />
-                <button
-                  className="px-4 py-2 rounded-r-lg bg-blue-600 text-white font-semibold"
-                  onClick={() => setVideoUrl(inputUrl)}
-                >
-                  Load
-                </button>
-              </div>
-              <div className="mb-4 w-full max-w-xl">
-                <label className="block text-left mb-2 font-medium">Detection Prompt:</label>
-                <textarea
-                  className="w-full p-2 rounded-lg text-black"
-                  rows={3}
-                  value={prompt}
-                  onChange={(e) => setPrompt(e.target.value)}
-                />
-              </div>
-              <div className="relative w-full max-w-xl">
-                {/* Visible overlay video for user */}
-                <video
-                  ref={overlayVideoRef}
-                  src={videoUrl}
-                  controls
-                  autoPlay
-                  loop
-                  muted
-                  playsInline
-                  className="w-full rounded-lg shadow-lg mb-2"
-                  style={{ background: "#222" }}
-                />
-                {/* Hidden processing video for FastVLM/canvas */}
-                <video
-                  ref={processingVideoRef}
-                  src={videoUrl}
-                  autoPlay
-                  loop
-                  muted
-                  playsInline
-                  style={{ display: "none" }}
-                  onLoadedData={e => { e.currentTarget.play().catch(() => {}); }}
-                />
-                <canvas
-                  ref={canvasRef}
-                  className="absolute top-0 left-0 w-full h-full pointer-events-none"
-                  style={{ zIndex: 20, 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>}
-              <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" && (
             <div className="w-full text-center flex flex-col items-center">
               <div className="mb-4 w-full max-w-xl">