Add ModelContext for managing model loading state and progress

src/App.tsx

@@ -4,9 +4,11 @@ import ZeroShotClassification from './components/ZeroShotClassification';
 import TextClassification from './components/TextClassification';
 import Header from './Header';
 import Footer from './Footer';
+import { useModel } from './contexts/ModelContext';
 
 function App() {
   const [pipeline, setPipeline] = useState('zero-shot-classification');
+  const { progress, status, model } = useModel();
 
   return (
     <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
@@ -21,6 +23,47 @@ function App() {
             </h2>
             <PipelineSelector pipeline={pipeline} setPipeline={setPipeline} />
 
+            {/* Model Loading Progress */}
+            {status === 'progress' && (
+              <div className="mt-4 p-4 bg-blue-50 rounded-lg">
+                <div className="flex items-center space-x-3">
+                  <div className="flex-shrink-0">
+                    <svg
+                      className="animate-spin h-5 w-5 text-blue-500"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                    >
+                      <circle
+                        className="opacity-25"
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke="currentColor"
+                        strokeWidth="4"
+                      ></circle>
+                      <path
+                        className="opacity-75"
+                        fill="currentColor"
+                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                      ></path>
+                    </svg>
+                  </div>
+                  <div className="flex-1">
+                    <p className="text-sm font-medium text-blue-900">
+                      Loading Model...
+                    </p>
+                    <div className="mt-2 bg-blue-200 rounded-full h-2">
+                      <div
+                        className="bg-blue-500 h-2 rounded-full transition-all duration-300"
+                        style={{ width: `${progress.toFixed(2)}%` }}
+                      ></div>
+                    </div>
+                    <p className="text-xs text-blue-700 mt-1">{progress.toFixed(2)}%</p>
+                  </div>
+                </div>
+              </div>
+            )}
+
             {/* Pipeline Description */}
             <div className="mt-4 p-4 bg-gray-50 rounded-lg">
               <div className="flex items-start space-x-3">
@@ -42,6 +85,11 @@ function App() {
                     {pipeline === 'zero-shot-classification'
                       ? 'Zero-Shot Classification'
                       : 'Text-Classification'}
+                    {model && (
+                      <span className="ml-2 text-xs text-gray-500 font-normal">
+                        ({model})
+                      </span>
+                    )}
                   </h3>
                   <p className="text-sm text-gray-600 mt-1">
                     {pipeline === 'zero-shot-classification'

src/components/TextClassification.tsx

@@ -4,6 +4,8 @@ import {
   TextClassificationWorkerInput,
   WorkerMessage
 } from '../types';
+import { useModel } from '../contexts/ModelContext';
+
 
 const PLACEHOLDER_TEXTS: string[] = [
   'I absolutely love this product! It exceeded all my expectations.',
@@ -21,8 +23,8 @@ const PLACEHOLDER_TEXTS: string[] = [
 function TextClassification() {
   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);
+  const { setProgress, status, setStatus, setModel } = useModel();
+  setModel('Xenova/bert-base-multilingual-uncased-sentiment')
 
   // Create a reference to the worker object.
   const worker = useRef<Worker | null>(null);
@@ -54,6 +56,7 @@ function TextClassification() {
         )
           setProgress(e.data.output.progress);
       } else if (status === 'output') {
+        setStatus('output');
         const result = e.data.output!;
         setResults((prevResults) => [...prevResults, result]);
         console.log(result);
@@ -111,9 +114,6 @@ function TextClassification() {
                 ? '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

@@ -1,6 +1,7 @@
 // src/App.tsx
 import { useState, useRef, useEffect, useCallback } from 'react';
 import { Section, WorkerMessage, ZeroShotWorkerInput } from '../types';
+import { useModel } from '../contexts/ModelContext';
 
 const PLACEHOLDER_REVIEWS: string[] = [
   // battery/charging problems
@@ -44,8 +45,8 @@ function ZeroShotClassification() {
     PLACEHOLDER_SECTIONS.map((title) => ({ title, items: [] }))
   );
 
-  const [status, setStatus] = useState<string>('idle');
-  const [progress, setProgress] = useState<number>(0);
+  const { setProgress, status, setStatus, setModel } = useModel();
+  setModel('MoritzLaurer/deberta-v3-xsmall-zeroshot-v1.1-all-33')
 
   // Create a reference to the worker object.
   const worker = useRef<Worker | null>(null);
@@ -77,6 +78,7 @@ function ZeroShotClassification() {
         )
           setProgress(e.data.output.progress);
       } else if (status === 'output') {
+        setStatus('output');
         const { sequence, labels, scores } = e.data.output!;
 
         // Threshold for classification
@@ -175,9 +177,6 @@ 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/contexts/ModelContext.tsx

@@ -0,0 +1,39 @@
+import React, { createContext, useContext, useEffect, useState } from 'react';
+
+interface ModelContextType {
+  progress: number;
+  status: string;
+  setProgress: (progress: number) => void;
+  setStatus: (status: string) => void;
+  model: string;
+  setModel: (model: string) => void;
+}
+
+const ModelContext = createContext<ModelContextType | undefined>(undefined);
+
+export function ModelProvider({ children }: { children: React.ReactNode }) {
+  const [progress, setProgress] = useState<number>(0);
+  const [status, setStatus] = useState<string>('idle');
+  const [model, setModel] = useState<string>('');
+
+  // set progress to 0 when model is changed
+  useEffect(() => {
+    setProgress(0);
+  }, [model]);
+
+  return (
+    <ModelContext.Provider
+      value={{ progress, setProgress, status, setStatus, model, setModel }}
+    >
+      {children}
+    </ModelContext.Provider>
+  );
+}
+
+export function useModel() {
+  const context = useContext(ModelContext);
+  if (context === undefined) {
+    throw new Error('useModel must be used within a ModelProvider');
+  }
+  return context;
+}

src/index.tsx

@@ -3,14 +3,18 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import { ModelProvider } from './contexts/ModelContext';
+
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
 root.render(
+  <ModelProvider>
   <React.StrictMode>
     <App />
   </React.StrictMode>
+  </ModelProvider>
 );
 
 // If you want to start measuring performance in your app, pass a function