Add error notification and adjust model fetching logic

src/components/ModelLoader.tsx

@@ -1,10 +1,13 @@
-import { useEffect, useCallback } from 'react'
-import { ChevronDown, Loader } from 'lucide-react'
+import { useEffect, useCallback, useState } from 'react'
+import { ChevronDown, Loader, X } from 'lucide-react'
 import { QuantizationType, WorkerMessage } from '../types'
 import { useModel } from '../contexts/ModelContext'
 import { getWorker } from '../lib/workerManager'
+import { Alert, AlertDescription } from './ui/alert'
 
 const ModelLoader = () => {
+  const [isError, setIsError] = useState(false)
+  const [errorMessage, setErrorMessage] = useState('')
   const {
     modelInfo,
     selectedQuantization,
@@ -75,7 +78,14 @@ const ModelLoader = () => {
         }
       } else if (status === 'error') {
         setStatus('error')
-        console.error(e.data.output)
+        const error = e.data.output
+        console.error(error)
+        setErrorMessage(error.split('.')[0] + '. See console for details.')
+        setIsError(true)
+        setTimeout(() => {
+          setIsError(false)
+          setErrorMessage('')
+        }, 3000)
       }
     }
 
@@ -164,6 +174,13 @@ const ModelLoader = () => {
           </div>
         )}
       </div>
+      {isError && (
+        <div className="fixed bottom-0 right-0 m-2">
+          <Alert variant="destructive">
+            <AlertDescription>{errorMessage}</AlertDescription>
+          </Alert>
+        </div>
+      )}
     </div>
   )
 }

src/lib/huggingface.ts

@@ -9,21 +9,10 @@ const getModelInfo = async (
   modelName: string,
   pipeline: string
 ): Promise<ModelInfoResponse> => {
-  // const token = process.env.REACT_APP_HUGGINGFACE_TOKEN
-
-  // if (!token) {
-  //   throw new Error(
-  //     'Hugging Face token not found. Please set REACT_APP_HUGGINGFACE_TOKEN in your .env file'
-  //   )
-  // }
-
   const response = await fetch(
     `https://huggingface.co/api/models/${modelName}`,
     {
       method: 'GET'
-      // headers: {
-      //   Authorization: `Bearer ${token}`
-      // }
     }
   )
 
@@ -107,9 +96,6 @@ const getModelInfo = async (
       `https://huggingface.co/api/models/${baseModel}`,
       {
         method: 'GET'
-        // headers: {
-        //   Authorization: `Bearer ${token}`
-        // }
       }
     )
 
@@ -144,27 +130,11 @@ const getModelInfo = async (
 const getModelsByPipeline = async (
   pipelineTag: string
 ): Promise<ModelInfoResponse[]> => {
-  // const token = process.env.REACT_APP_HUGGINGFACE_TOKEN
-
-  // if (!token) {
-  //   throw new Error(
-  //     'Hugging Face token not found. Please set REACT_APP_HUGGINGFACE_TOKEN in your .env file'
-  //   )
-  // }
-
-  // First search with filter=onnx
-  console.log(
-    pipelineTag === 'feature-extraction'
-      ? '&search=sentence-transformers'
-      : '&filter=onnx'
-  )
+  // Second search with search=onnx
   const response1 = await fetch(
-    `https://huggingface.co/api/models?filter=${pipelineTag}${pipelineTag === 'feature-extraction' ? '&library=sentence-transformers' : '&filter=onnx'}&sort=downloads&limit=50`,
+    `https://huggingface.co/api/models?filter=${pipelineTag}&search=onnx-community&sort=createdAt&limit=50`,
     {
       method: 'GET'
-      // headers: {
-      //   Authorization: `Bearer ${token}`
-      // }
     }
   )
   if (!response1.ok) {
@@ -174,17 +144,14 @@ const getModelsByPipeline = async (
   }
   const models1 = await response1.json()
 
-  // Second search with search=onnx
+  // First search with filter=onnx
   const response2 = await fetch(
-    `https://huggingface.co/api/models?filter=${pipelineTag}&search=onnx&sort=downloads&limit=50`,
+    `https://huggingface.co/api/models?filter=${pipelineTag}${pipelineTag === 'feature-extraction' ? '&library=sentence-transformers' : '&filter=onnx'}&sort=downloads&limit=50`,
     {
       method: 'GET'
-      // headers: {
-      //   Authorization: `Bearer ${token}`
-      // }
     }
   )
-  if (!response2.ok) {
+  if (!response1.ok) {
     throw new Error(
       `Failed to fetch models for pipeline: ${response2.statusText}`
     )
@@ -218,20 +185,10 @@ const getModelsByPipelineCustom = async (
   searchString: string,
   pipelineTag: string
 ): Promise<ModelInfoResponse[]> => {
-  // const token = process.env.REACT_APP_HUGGINGFACE_TOKEN
-
-  // if (!token) {
-  //   throw new Error(
-  //     'Hugging Face token not found. Please set REACT_APP_HUGGINGFACE_TOKEN in your .env file'
-  //   )
-  // }
   const response = await fetch(
     `https://huggingface.co/api/models?filter=${pipelineTag}&search=${searchString}&sort=downloads&limit=50`,
     {
       method: 'GET'
-      // headers: {
-      //   Authorization: `Bearer ${token}`
-      // }
     }
   )