Add model loading status

src/App.tsx

@@ -4,11 +4,11 @@
  */
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
-import { Button } from "@/components/ui/button";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Thumbs } from "./components/thumbs";
 
-import { pipeline, env } from "@xenova/transformers";
+import { env, pipeline } from "@xenova/transformers";
+import { LoaderIcon } from "./components/loader";
 import { Sentiment } from "./types";
 
 // Skip local model check
@@ -25,10 +25,10 @@ type Result = {
 };
 
 export default function App() {
+  const [modelStatus, setModelStatus] = useState("");
   const [statement, setStatement] = useState("I love this app!");
   const classifier = useRef<TextClassificationPipeline | null>(null);
   const [result, setResult] = useState<Result | null>(null);
-  console.log("result :", result);
   const [loading, setLoading] = useState(true);
 
   const queryModel = useCallback((query: string) => {
@@ -41,15 +41,23 @@ export default function App() {
 
   useEffect(() => {
     (async () => {
-      classifier.current = await pipeline(TASK, MODEL);
+      classifier.current = (await pipeline(TASK, MODEL, {
+        progress_callback: progressUpdate,
+      })) as unknown as TextClassificationPipeline;
       queryModel(statement);
     })();
-  }, []);
+  }, [queryModel, statement]);
 
   useEffect(() => {
     setLoading(true);
     queryModel(statement);
-  }, [statement]);
+  }, [queryModel, statement]);
+
+  const progressUpdate = ({ status }: { status: string }) => {
+    if (status === "ready") {
+      setModelStatus(status);
+    }
+  };
 
   return (
     <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
@@ -64,17 +72,24 @@ export default function App() {
         <div className="grid gap-6">
           <div className="grid w-full gap-1.5">
             <Label htmlFor="message">Your Message</Label>
-            <Textarea
-              id="message"
-              placeholder="Type your message here..."
-              value={statement}
-              onChange={(e) => setStatement(e.target.value)}
-              disabled={loading}
-            />
+
+            <div className="relative">
+              {" "}
+              <Textarea
+                id="message"
+                placeholder="Type your message here..."
+                value={statement}
+                onChange={(e) => setStatement(e.target.value)}
+                disabled={loading}
+              />
+              {modelStatus !== "ready" && (
+                <div className="absolute inset-0 flex items-center justify-center bg-yellow-500 text-white px-4 py-2 rounded-md -rotate-12">
+                  <LoaderIcon className="h-4 w-4 animate-spin" />
+                  <span>Model (~1GB) loading...</span>
+                </div>
+              )}
+            </div>
           </div>
-          <Button className="w-full" disabled={loading}>
-            Analyze
-          </Button>
         </div>
 
         {!loading && result && statement.length > 0 && (
@@ -98,15 +113,15 @@ export default function App() {
           Built by{" "}
           <a
             className="text-blue-500 hover:underline"
-            href="https://www.github.com/Luke-Rogerson"
+            href="https://www.linkedin.com/in/lukerogerson/"
             target="_blank"
           >
             Luke Rogerson
           </a>
           . Check out{" "}
           <a
             className="text-blue-500 hover:underline"
-            href="https://www.github.com/Luke-Rogerson"
+            href="https://github.com/Luke-Rogerson/sentiment"
             target="_blank"
           >
             the source code

src/components/loader.tsx

@@ -0,0 +1,25 @@
+export function LoaderIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <line x1="12" x2="12" y1="2" y2="6" />
+      <line x1="12" x2="12" y1="18" y2="22" />
+      <line x1="4.93" x2="7.76" y1="4.93" y2="7.76" />
+      <line x1="16.24" x2="19.07" y1="16.24" y2="19.07" />
+      <line x1="2" x2="6" y1="12" y2="12" />
+      <line x1="18" x2="22" y1="12" y2="12" />
+      <line x1="4.93" x2="7.76" y1="19.07" y2="16.24" />
+      <line x1="16.24" x2="19.07" y1="7.76" y2="4.93" />
+    </svg>
+  );
+}