fix: comment from QA regarding import model (janhq#2213)

Signed-off-by: James <[email protected]> Co-authored-by: James <[email protected]>
dev-yakuza · Mar 3, 2024 · b70e7fb · b70e7fb
1 parent 52f84dc
commit b70e7fb
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 52 deletions.
diff --git a/electron/handlers/native.ts b/electron/handlers/native.ts
@@ -93,12 +93,12 @@ export function handleAppIPCs() {
     const { canceled, filePaths } = await dialog.showOpenDialog(mainWindow, {
       title: 'Select model files',
       buttonLabel: 'Select',
-      properties: ['openFile', 'multiSelections'],
+      properties: ['openFile', 'openDirectory', 'multiSelections'],
     })
     if (canceled) {
       return
-    } else {
-      return filePaths
     }
+
+    return filePaths
   })
 }
diff --git a/web/containers/ItemCardSidebar/index.tsx b/web/containers/ItemCardSidebar/index.tsx
diff --git a/web/hooks/useDropModelBinaries.ts b/web/hooks/useDropModelBinaries.ts
@@ -39,7 +39,7 @@ export default function useDropModelBinaries() {
       }))
       if (unsupportedFiles.length > 0) {
         snackbar({
-          description: `File has to be a .gguf file`,
+          description: `Only files with .gguf extension can be imported.`,
           type: 'error',
         })
       }

diff --git a/web/screens/Settings/EditModelInfoModal/index.tsx b/web/screens/Settings/EditModelInfoModal/index.tsx
@@ -116,6 +116,11 @@ const EditModelInfoModal: React.FC = () => {
     return null
   }
 
+  const onTagsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const tags = e.target.value.split(',')
+    setTags(tags)
+  }
+
   return (
     <Modal
       open={importModelStage === 'EDIT_MODEL_INFO'}
@@ -128,21 +133,23 @@ const EditModelInfoModal: React.FC = () => {
 
         <div className="flex flex-row space-x-4 rounded-xl border p-4">
           <div className="flex h-10 w-10 items-center justify-center rounded-full bg-blue-400">
-            <Paperclip />
+            <Paperclip color="#fff" />
           </div>
 
-          <div className="flex flex-col">
+          <div className="flex flex-1 flex-col">
             <p>{editingModel.name}</p>
             <div className="flex flex-row">
               <span className="mr-2 text-sm text-[#71717A]">
                 {toGibibytes(editingModel.size)}
               </span>
-              <span className="text-sm font-semibold text-[#71717A]">
-                Format:{' '}
-              </span>
-              <span className="text-sm font-normal text-[#71717A]">
-                {editingModel.format.toUpperCase()}
-              </span>
+              <div className="flex flex-row space-x-1">
+                <span className="text-sm font-semibold text-[#71717A]">
+                  Format:
+                </span>
+                <span className="text-sm font-normal text-[#71717A]">
+                  {editingModel.format.toUpperCase()}
+                </span>
+              </div>
             </div>
             <div className="mt-1 flex flex-row items-center space-x-2">
               <span className="line-clamp-1 text-xs font-normal text-[#71717A]">
@@ -189,7 +196,7 @@ const EditModelInfoModal: React.FC = () => {
           </div>
           <div className="flex flex-col">
             <label className="mb-1">Tags</label>
-            <Input />
+            <Input value={tags.join(',')} onChange={onTagsChange} />
           </div>
         </form>
 

diff --git a/web/screens/Settings/SelectingModelModal/index.tsx b/web/screens/Settings/SelectingModelModal/index.tsx
@@ -1,7 +1,7 @@
 import { useCallback } from 'react'
 import { useDropzone } from 'react-dropzone'
 
-import { ImportingModel, baseName, fs } from '@janhq/core'
+import { ImportingModel, baseName, fs, joinPath } from '@janhq/core'
 import { Modal, ModalContent, ModalHeader, ModalTitle } from '@janhq/uikit'
 import { useAtomValue, useSetAtom } from 'jotai'
 
@@ -34,14 +34,31 @@ const SelectingModelModal: React.FC = () => {
     const sanitizedFilePaths: FilePathWithSize[] = []
     for (const filePath of filePaths) {
       const fileStats = await fs.fileStat(filePath, true)
-      if (!fileStats || fileStats.isDirectory) continue
-
-      const fileName = await baseName(filePath)
-      sanitizedFilePaths.push({
-        path: filePath,
-        name: fileName,
-        size: fileStats.size,
-      })
+      if (!fileStats) continue
+
+      if (!fileStats.isDirectory) {
+        const fileName = await baseName(filePath)
+        sanitizedFilePaths.push({
+          path: filePath,
+          name: fileName,
+          size: fileStats.size,
+        })
+      } else {
+        // allowing only one level of directory
+        const files = await fs.readdirSync(filePath)
+
+        for (const file of files) {
+          const fullPath = await joinPath([filePath, file])
+          const fileStats = await fs.fileStat(fullPath, true)
+          if (!fileStats || fileStats.isDirectory) continue
+
+          sanitizedFilePaths.push({
+            path: fullPath,
+            name: file,
+            size: fileStats.size,
+          })
+        }
+      }
     }
 
     const unsupportedFiles = sanitizedFilePaths.filter(
@@ -68,7 +85,7 @@ const SelectingModelModal: React.FC = () => {
     )
     if (unsupportedFiles.length > 0) {
       snackbar({
-        description: `File has to be a .gguf file`,
+        description: `Only files with .gguf extension can be imported.`,
         type: 'error',
       })
     }