Upload 36 files

src/App.tsx

@@ -1,7 +1,36 @@
 import MultiSourceCaptioningView from "./components/MultiSourceCaptioningView";
+import { useVLMContext } from "./context/useVLMContext";
+import { useState } from "react";
 
 export default function App() {
-  // Remove all webcam gating logic; just render the main view
+  const { isLoaded, isLoading, error, loadModel } = useVLMContext();
+  const [started, setStarted] = useState(false);
+
+  const handleLoadModel = async () => {
+    try {
+      await loadModel();
+      setStarted(true);
+    } catch (e) {
+      // error is handled by context
+    }
+  };
+
+  if (!started || !isLoaded) {
+    return (
+      <div className="flex flex-col items-center justify-center h-screen bg-gray-900 text-white">
+        <h1 className="text-2xl font-bold mb-4">FastVLM WebGPU</h1>
+        <button
+          className="px-6 py-3 rounded-lg bg-blue-600 text-white font-semibold text-lg mb-4"
+          onClick={handleLoadModel}
+          disabled={isLoading}
+        >
+          {isLoading ? "Loading Model..." : "Load Model"}
+        </button>
+        {error && <div className="text-red-400 mt-2">Model error: {error}</div>}
+      </div>
+    );
+  }
+
   return (
     <div className="App relative h-screen overflow-hidden">
       <div className="absolute inset-0 bg-gray-900" />