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

Signed-off-by: James <[email protected]>
janhq · Apr 15, 2024 · ccb6ff5 · ccb6ff5
1 parent 89b947a
commit ccb6ff5
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 13 deletions.
diff --git a/web/screens/ExploreModels/index.tsx b/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"

diff --git a/web/screens/Settings/HuggingFaceRepoDetailModal/ModelDownloadRow/index.tsx b/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>}
 

diff --git a/web/screens/Settings/Models/ModelSearch.tsx b/web/screens/Settings/Models/ModelSearch.tsx
@@ -74,7 +74,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}
         />