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

Signed-off-by: James <[email protected]>
janhq · Apr 16, 2024 · 7fd2ef9 · 7fd2ef9
1 parent 22a25cf
commit 7fd2ef9
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 18 deletions.
diff --git a/core/src/browser/core.ts b/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.

diff --git a/extensions/model-extension/bin/mac-arm64/quantize b/extensions/model-extension/bin/mac-arm64/quantize
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/HuggingFaceRepoDetailModal/index.tsx b/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>

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

diff --git a/web/screens/Settings/Models/index.tsx b/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]
   )