fix: allow model hub to be able to search for hugging face url

Signed-off-by: James <[email protected]>

core/src/browser/core.ts

@@ -29,7 +29,7 @@ const downloadFile: (downloadRequest: DownloadRequest, network?: NetworkConfig)
 ) => globalThis.core?.api?.downloadFile(downloadRequest, network)
 
 /**
- * Get file size from browser processes.
+ * Get unit in bytes for a remote file.
  *
  * @param url - The url of the file.
  * @returns {Promise<number>} - A promise that resolves with the file size.

web/hooks/useGetHFRepoData.ts

@@ -23,6 +23,7 @@ export const useGetHFRepoData = () => {
       if (err instanceof Error) {
         setError(err.message)
       }
+      throw err
     } finally {
       setLoading(false)
     }

web/screens/ExploreModels/index.tsx

@@ -23,6 +23,7 @@ import {
   configuredModelsAtom,
   downloadedModelsAtom,
 } from '@/helpers/atoms/Model.atom'
+import ModelSearch from '../Settings/Models/ModelSearch'
 
 const sortMenu = ['All Models', 'Recommended', 'Downloaded']
 
@@ -54,6 +55,10 @@ const ExploreModelsScreen = () => {
     setImportModelStage('SELECTING_MODEL')
   }, [setImportModelStage])
 
+  const onSearchUpdate = useCallback((input: string) => {
+    setsearchValue(input)
+  }, [])
+
   return (
     <div
       className="flex h-full w-full overflow-y-auto bg-background"
@@ -70,17 +75,7 @@ const ExploreModelsScreen = () => {
               />
               <div className="absolute left-1/2 top-1/2 w-1/3 -translate-x-1/2 -translate-y-1/2 space-y-2">
                 <div className="flex flex-row space-x-2">
-                  <div className="relative">
-                    <SearchIcon
-                      size={20}
-                      className="absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground"
-                    />
-                    <Input
-                      placeholder="Search models"
-                      className="bg-white pl-9 dark:bg-background"
-                      onChange={(e) => setsearchValue(e.target.value)}
-                    />
-                  </div>
+                  <ModelSearch onSearchLocal={onSearchUpdate} />
                   <Button
                     themes="outline"
                     className="gap-2 bg-white dark:bg-secondary"

web/screens/Settings/HuggingFaceRepoDetailModal/ModelDownloadList/index.tsx

@@ -23,24 +23,27 @@ const ModelDownloadList: React.FC = () => {
   if (!importingHuggingFaceRepoData) return null
 
   if (!ggufModels || ggufModels.length === 0) {
-    return <div>No available GGUF model</div> // TODO: better wording for this
+    return <div>No available GGUF model</div>
   }
 
   return (
     <div className="flex h-[500px] flex-1 flex-col">
       <h1 className="mb-3 text-sm font-semibold">Available Versions</h1>
       <ScrollArea className="flex-1">
-        {ggufModels.map((model, index) => (
-          <ModelDownloadRow
-            repoData={importingHuggingFaceRepoData}
-            downloadUrl={model.downloadUrl!}
-            key={model.rfilename}
-            index={index}
-            fileName={model.rfilename}
-            fileSize={model.fileSize}
-            quantization={model.quantization}
-          />
-        ))}
+        {ggufModels.map((model, index) => {
+          if (!model.downloadUrl) return null
+          return (
+            <ModelDownloadRow
+              repoData={importingHuggingFaceRepoData}
+              downloadUrl={model.downloadUrl}
+              key={model.rfilename}
+              index={index}
+              fileName={model.rfilename}
+              fileSize={model.fileSize}
+              quantization={model.quantization}
+            />
+          )
+        })}
       </ScrollArea>
     </div>
   )

web/screens/Settings/HuggingFaceRepoDetailModal/ModelDownloadRow/index.tsx

@@ -121,7 +121,7 @@ const ModelDownloadRow: React.FC<Props> = ({
   ])
 
   return (
-    <div className="flex w-[662px] flex-row items-center justify-between rounded border border-border p-3">
+    <div className="flex w-[662px] flex-row items-center justify-between space-x-1 rounded border border-border p-3">
       <div className="flex">
         {quantization && <Badge className="mr-1">{quantization}</Badge>}
 

web/screens/Settings/HuggingFaceRepoDetailModal/index.tsx

@@ -34,7 +34,7 @@ const HuggingFaceRepoDetailModal: React.FC = () => {
 
   return (
     <Modal open={open} onOpenChange={onOpenChange}>
-      <ModalContent className="max-w-[1162px]">
+      <ModalContent className="w-[1162px] max-w-[calc(100%-38px)]">
         <ModalHeader>
           <ModalTitle>{importingHuggingFaceRepoData.id}</ModalTitle>
         </ModalHeader>

web/screens/Settings/Models/ModelSearch.tsx

@@ -6,6 +6,8 @@ import { SearchIcon } from 'lucide-react'
 import { twMerge } from 'tailwind-merge'
 import { useDebouncedCallback } from 'use-debounce'
 
+import { toaster } from '@/containers/Toast'
+
 import { useGetHFRepoData } from '@/hooks/useGetHFRepoData'
 
 import {
@@ -30,7 +32,7 @@ const ModelSearch: React.FC<Props> = ({ onSearchLocal }) => {
 
   const debounced = useDebouncedCallback(async () => {
     if (searchText.indexOf('/') === -1) {
-      // if we don't find / in text search, do search locally
+      // If we don't find / in the text, perform a local search
       onSearchLocal?.(searchText)
       return
     }
@@ -40,7 +42,15 @@ const ModelSearch: React.FC<Props> = ({ onSearchLocal }) => {
       setImportingHuggingFaceRepoData(data)
       setImportHuggingFaceModelStage('REPO_DETAIL')
     } catch (err) {
-      // TODO: might need to display popup
+      let errMessage = 'Unexpected Error'
+      if (err instanceof Error) {
+        errMessage = err.message
+      }
+      toaster({
+        title: 'Failed to get Hugging Face models',
+        description: errMessage,
+        type: 'error',
+      })
       console.error(err)
     }
   }, 300)
@@ -74,7 +84,10 @@ const ModelSearch: React.FC<Props> = ({ onSearchLocal }) => {
       <div className="flex flex-row items-center space-x-4">
         <Input
           placeholder="Search or paste Hugging Face URL"
-          className={twMerge('pl-8', loading ? 'pr-8' : '')}
+          className={twMerge(
+            'bg-white pl-8 dark:bg-background',
+            loading ? 'pr-8' : ''
+          )}
           onChange={onSearchChanged}
           onKeyDown={onKeyDown}
         />

web/screens/Settings/Models/index.tsx

@@ -28,8 +28,10 @@ const Models: React.FC = () => {
   const filteredDownloadedModels = useMemo(
     () =>
       downloadedModels
-        .sort((a, b) => a.name.localeCompare(b.name))
-        .filter((e) => e.name.toLowerCase().includes(searchText.toLowerCase())),
+        .filter((e) =>
+          e.name.toLowerCase().includes(searchText.toLowerCase().trim())
+        )
+        .sort((a, b) => a.name.localeCompare(b.name)),
     [downloadedModels, searchText]
   )