add loader to zero-shot classification and add sentiment analysis pipeline

src/App.tsx

@@ -1,4 +1,3 @@
-// src/App.tsx
 import { useState } from "react";
 import PipelineSelector from "./components/PipelineSelector";
 import ZeroShotClassification from "./components/ZeroShotClassification";

src/components/PipelineSelector.tsx

@@ -1,4 +1,3 @@
-
 import React from 'react';
 
 const pipelines = [

src/components/SentimentAnalysis.tsx

@@ -18,6 +18,7 @@ function SentimentAnalysis() {
   const [text, setText] = useState<string>(PLACEHOLDER_TEXTS.join("\n"));
   const [results, setResults] = useState<ClassificationOutput[]>([]);
   const [status, setStatus] = useState<string>("idle");
+  const [progress, setProgress] = useState<number>(0);
 
   // Create a reference to the worker object.
   const worker = useRef<Worker | null>(null);
@@ -41,11 +42,16 @@ function SentimentAnalysis() {
         setStatus("loading");
       } else if (status === "ready") {
         setStatus("ready");
+      } else if (status === "progress") {
+        setStatus("progress");
+        if (e.data.output.progress && (e.data.output.file as string).startsWith('onnx'))
+          setProgress(e.data.output.progress)
       } else if (status === "output") {
         const result = e.data.output!;
         setResults((prevResults) => [...prevResults, result]);
       } else if (status === "complete") {
         setStatus("idle");
+        setProgress(100)
       }
     };
 
@@ -126,7 +132,11 @@ function SentimentAnalysis() {
                   ? "Model loading..."
                   : "Processing..."}
             </button>
-            
+            {  status === "progress" &&
+              <div className="text-sm font-medium">
+                {progress}%
+              </div>
+            }
             <button
               className="py-2 px-4 bg-gray-500 hover:bg-gray-600 rounded text-white font-medium transition-colors"
               onClick={handleClear}

src/components/ZeroShotClassification.tsx

@@ -45,6 +45,7 @@ function ZeroShotClassification() {
   );
 
   const [status, setStatus] = useState<string>("idle");
+  const [progress, setProgress] = useState<number>(0);
 
   // Create a reference to the worker object.
   const worker = useRef<Worker | null>(null);
@@ -68,6 +69,10 @@ function ZeroShotClassification() {
         setStatus("loading");
       } else if (status === "ready") {
         setStatus("ready");
+      } else if (status === "progress") {
+        setStatus("progress");
+        if (e.data.output.progress && (e.data.output.file as string).startsWith('onnx'))
+          setProgress(e.data.output.progress)
       } else if (status === "output") {
         const { sequence, labels, scores } = e.data.output!;
 
@@ -86,6 +91,7 @@ function ZeroShotClassification() {
         });
       } else if (status === "complete") {
         setStatus("idle");
+        setProgress(100)
       }
     };
 
@@ -166,6 +172,11 @@ function ZeroShotClassification() {
               ? "Model loading..."
               : "Processing"}
         </button>
+        {  status === "progress" &&
+          <div className="text-sm font-medium">
+            {progress}%
+          </div>
+        }
         <div className="flex gap-1">
           <button
             className="border py-1 px-2 bg-green-400 rounded text-white text-sm font-medium cursor-pointer"

src/types.ts

@@ -12,7 +12,7 @@ export interface ClassificationOutput {
 
 
 export interface WorkerMessage {
-  status: 'initiate' | 'ready' | 'output' | 'complete';
+  status: 'initiate' | 'ready' | 'output' | 'complete' | 'progress';
   output?: any;
 }
 

src/worker.js

@@ -29,7 +29,7 @@ self.addEventListener("message", async (event) => {
   const pipe = await PipelineFactory.getInstance((x) => {
     // We also add a progress callback to the pipeline so that we can
     // track model loading.
-    self.postMessage(x);
+    self.postMessage({ status: "progress", data: x });
   });
 
   // Run the pipeline

src/workers/sentiment-analysis.js

@@ -22,7 +22,7 @@ self.addEventListener("message", async (event) => {
   const classifier = await MyTextClassificationPipeline.getInstance((x) => {
     // We also add a progress callback to the pipeline so that we can
     // track model loading.
-    self.postMessage(x);
+    self.postMessage({ status: "progress", output: x });
   });
 
   const { text } = event.data;

src/workers/zero-shot.js

@@ -22,7 +22,7 @@ self.addEventListener("message", async (event) => {
   const classifier = await MyZeroShotClassificationPipeline.getInstance((x) => {
     // We also add a progress callback to the pipeline so that we can
     // track model loading.
-    self.postMessage(x);
+    self.postMessage({ status: "progress", output: x });
   });
 
   const { text, labels } = event.data;