Refactor modelInfo handling across components for improved null safety

src/App.tsx

@@ -3,7 +3,6 @@ import PipelineSelector from './components/PipelineSelector'
 import ZeroShotClassification from './components/ZeroShotClassification'
 import TextClassification from './components/TextClassification'
 import Header from './Header'
-import Footer from './Footer'
 import { useModel } from './contexts/ModelContext'
 import { getModelsByPipeline } from './lib/huggingface'
 import ModelSelector from './components/ModelSelector'
@@ -11,9 +10,10 @@ import ModelInfo from './components/ModelInfo'
 import ModelReadme from './components/ModelReadme'
 
 function App() {
-  const { pipeline, setPipeline, setModels, modelInfo } = useModel()
+  const { pipeline, setPipeline, setModels, setModelInfo, modelInfo } = useModel()
 
   useEffect(() => {
+    setModelInfo(null)
     const fetchModels = async () => {
       const fetchedModels = await getModelsByPipeline(pipeline)
       setModels(fetchedModels)

src/components/ModelInfo.tsx

@@ -64,7 +64,7 @@ const ModelInfo = () => {
     </div>
   )
 
-  if (!modelInfo.name) {
+  if (!modelInfo) {
     return <ModelInfoSkeleton />
   }
 

src/components/ModelLoader.tsx

@@ -19,6 +19,8 @@ const ModelLoader = () => {
   } = useModel()
 
   useEffect(() => {
+    if (!modelInfo) return
+
     if (modelInfo.isCompatible && modelInfo.supportedQuantizations.length > 0) {
       const quantizations = modelInfo.supportedQuantizations
       let defaultQuant: QuantizationType = 'fp32'
@@ -34,12 +36,13 @@ const ModelLoader = () => {
       setSelectedQuantization(defaultQuant)
     }
   }, [
-    modelInfo.supportedQuantizations,
-    modelInfo.isCompatible,
+    modelInfo,
     setSelectedQuantization
   ])
 
   useEffect(() => {
+    if (!modelInfo) return
+
     const newWorker = getWorker(pipeline)
     if (!newWorker) {
       return
@@ -70,10 +73,10 @@ const ModelLoader = () => {
       newWorker.removeEventListener('message', onMessageReceived)
       // terminateWorker(pipeline);
     }
-  }, [pipeline, modelInfo.name, selectedQuantization, setActiveWorker, setStatus, setProgress])
+  }, [pipeline, modelInfo, selectedQuantization, setActiveWorker, setStatus, setProgress])
 
   const loadModel = useCallback(() => {
-    if (!modelInfo.name || !selectedQuantization) return
+    if (!modelInfo || !selectedQuantization) return
 
     setStatus('loading')
     const message = {
@@ -82,12 +85,12 @@ const ModelLoader = () => {
       quantization: selectedQuantization
     }
     activeWorker?.postMessage(message)
-  }, [modelInfo.name, selectedQuantization, setStatus, activeWorker])
+  }, [modelInfo, selectedQuantization, setStatus, activeWorker])
 
    const ready: boolean = status === 'ready'
    const busy: boolean = status === 'loading'
 
-  if (!modelInfo.isCompatible || modelInfo.supportedQuantizations.length === 0) {
+  if (!modelInfo?.isCompatible || modelInfo.supportedQuantizations.length === 0) {
     return null
   }
 

src/components/ModelSelector.tsx

@@ -119,7 +119,7 @@ const ModelSelector: React.FC = () => {
   }
 
   const selectedModel =
-    models.find((model) => model.id === modelInfo.id) || models[0]
+    models.find((model) => model.id === modelInfo?.id) || models[0]
 
   return (
     <div className="relative">
@@ -132,7 +132,7 @@ const ModelSelector: React.FC = () => {
             <div className="flex items-center justify-between w-full">
               <div className="flex flex-col flex-1 min-w-0">
                 <span className="truncate font-medium">
-                  {modelInfo.id || 'Select a model'}
+                  {modelInfo?.id || 'Select a model'}
                 </span>
               </div>
 

src/components/TextClassification.tsx

@@ -58,6 +58,7 @@ function TextClassification() {
   }, [setStatus])
 
   const classify = useCallback(() => {
+    if (!modelInfo) return
     setStatus('loading')
     setResults([]) // Clear previous results
     const message: TextClassificationWorkerInput = {
@@ -66,7 +67,7 @@ function TextClassification() {
       model: modelInfo.id
     }
     workerRef.current?.postMessage(message)
-  }, [text, modelInfo.id, setStatus])
+  }, [text, modelInfo, setStatus])
 
   const busy: boolean = status !== 'ready'
 

src/components/ZeroShotClassification.tsx

@@ -104,6 +104,8 @@ function ZeroShotClassification() {
   }, [sections])
 
   const classify = useCallback(() => {
+    if (!modelInfo) return
+
     setStatus('loading')
     const message: ZeroShotWorkerInput = {
       text,
@@ -113,7 +115,7 @@ function ZeroShotClassification() {
       model: modelInfo.name
     }
     worker.current?.postMessage(message)
-  }, [text, sections, modelInfo.name])
+  }, [text, sections, modelInfo])
 
   const busy: boolean = status !== 'ready'
 

src/contexts/ModelContext.tsx

@@ -16,8 +16,8 @@ interface ModelContextType {
   setStatus: (status: WorkerStatus) => void
   progress: number
   setProgress: (progress: number) => void
-  modelInfo: ModelInfo
-  setModelInfo: (model: ModelInfo) => void
+  modelInfo: ModelInfo | null
+  setModelInfo: (model: ModelInfo | null) => void
   pipeline: string
   setPipeline: (pipeline: string) => void
   models: ModelInfoResponse[]
@@ -33,7 +33,7 @@ const ModelContext = createContext<ModelContextType | undefined>(undefined)
 export function ModelProvider({ children }: { children: React.ReactNode }) {
   const [progress, setProgress] = useState<number>(0)
   const [status, setStatus] = useState<WorkerStatus>('initiate')
-  const [modelInfo, setModelInfo] = useState<ModelInfo>({} as ModelInfo)
+  const [modelInfo, setModelInfo] = useState<ModelInfo | null>(null)
   const [models, setModels] = useState<ModelInfoResponse[]>(
     [] as ModelInfoResponse[]
   )
@@ -45,7 +45,7 @@ export function ModelProvider({ children }: { children: React.ReactNode }) {
   // set progress to 0 when model is changed
   useEffect(() => {
     setProgress(0)
-  }, [modelInfo.name])
+  }, [modelInfo?.name])
 
   return (
     <ModelContext.Provider