Update src/App.tsx

src/App.tsx

@@ -1,40 +1,40 @@
-import MultiSourceCaptioningView from "./components/MultiSourceCaptioningView";
-import { useVLMContext } from "./context/useVLMContext";
-import { useState } from "react";
-
-export default function App() {
-  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" />
-      <MultiSourceCaptioningView />
-    </div>
-  );
-}
+import MultiSourceCaptioningView from "./components/MultiSourceCaptioningView";
+import { useVLMContext } from "./context/useVLMContext";
+import { useState } from "react";
+
+export default function App() {
+  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+Yolov8n 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" />
+      <MultiSourceCaptioningView />
+    </div>
+  );
+}