chore: fix responsible issue when importing models (cortex.cpp does not support download in parallel yet)

web/containers/ModelDropdown/index.tsx

@@ -261,8 +261,13 @@ const ModelDropdown = ({
   }, [])
 
   const findByEngine = filteredDownloadedModels
-    .filter((x) => !inActiveEngineProvider.includes(x.engine))
-    .map((x) => x.engine)
+    .map((x) => {
+      // Legacy engine support - they will be grouped under Cortex LlamaCPP
+      if (x.engine === InferenceEngine.nitro)
+        return InferenceEngine.cortex_llamacpp
+      return x.engine
+    })
+    .filter((x) => !inActiveEngineProvider.includes(x))
 
   const groupByEngine = findByEngine
     .filter(function (item, index) {

web/hooks/useImportModel.ts

@@ -18,7 +18,11 @@ import { snackbar } from '@/containers/Toast'
 import { FilePathWithSize } from '@/utils/file'
 
 import { extensionManager } from '@/extension'
-import { importingModelsAtom } from '@/helpers/atoms/Model.atom'
+import {
+  addDownloadingModelAtom,
+  importingModelsAtom,
+  removeDownloadingModelAtom,
+} from '@/helpers/atoms/Model.atom'
 
 export type ImportModelStage =
   | 'NONE'
@@ -49,11 +53,25 @@ export type ModelUpdate = {
 const useImportModel = () => {
   const setImportModelStage = useSetAtom(setImportModelStageAtom)
   const setImportingModels = useSetAtom(importingModelsAtom)
+  const addDownloadingModel = useSetAtom(addDownloadingModelAtom)
+  const removeDownloadingModel = useSetAtom(removeDownloadingModelAtom)
 
   const importModels = useCallback(
-    (models: ImportingModel[], optionType: OptionType) =>
-      localImportModels(models, optionType),
-    []
+    (models: ImportingModel[], optionType: OptionType) => {
+      models
+        .filter((e) => !!e.modelId)
+        .map((model) => {
+          if (model.modelId) {
+            const modelId = model.modelId
+            addDownloadingModel(modelId)
+            extensionManager
+              .get<ModelExtension>(ExtensionTypeEnum.Model)
+              ?.importModel(model.modelId, model.path)
+              .finally(() => removeDownloadingModel(modelId))
+          }
+        })
+    },
+    [addDownloadingModel, removeDownloadingModel]
   )
 
   const updateModelInfo = useCallback(
@@ -101,21 +119,6 @@ const useImportModel = () => {
   return { importModels, updateModelInfo, sanitizeFilePaths }
 }
 
-const localImportModels = async (
-  models: ImportingModel[],
-  // TODO: @louis - We will set this option when cortex.cpp supports it
-  optionType: OptionType
-): Promise<void> => {
-  await models
-    .filter((e) => !!e.modelId)
-    .map((model) => {
-      if (model.modelId)
-        extensionManager
-          .get<ModelExtension>(ExtensionTypeEnum.Model)
-          ?.importModel(model.modelId, model.path)
-    })
-}
-
 const localUpdateModelInfo = async (
   modelInfo: Partial<Model>
 ): Promise<Model | undefined> =>

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

@@ -21,7 +21,10 @@ import { mainViewStateAtom } from '@/helpers/atoms/App.atom'
 import { assistantsAtom } from '@/helpers/atoms/Assistant.atom'
 
 import { importHuggingFaceModelStageAtom } from '@/helpers/atoms/HuggingFace.atom'
-import { downloadedModelsAtom } from '@/helpers/atoms/Model.atom'
+import {
+  downloadedModelsAtom,
+  getDownloadingModelAtom,
+} from '@/helpers/atoms/Model.atom'
 
 type Props = {
   index: number
@@ -42,11 +45,13 @@ const ModelDownloadRow: React.FC<Props> = ({
   const { downloadModel, abortModelDownload } = useDownloadModel()
   const allDownloadStates = useAtomValue(modelDownloadStateAtom)
   const downloadState: DownloadState | undefined = allDownloadStates[fileName]
+  const downloadingModels = useAtomValue(getDownloadingModelAtom)
 
   const { requestCreateNewThread } = useCreateNewThread()
   const setMainViewState = useSetAtom(mainViewStateAtom)
   const assistants = useAtomValue(assistantsAtom)
   const downloadedModel = downloadedModels.find((md) => md.id === fileName)
+  const isDownloading = downloadingModels.some((md) => md === fileName)
 
   const setHfImportingStage = useSetAtom(importHuggingFaceModelStageAtom)
 
@@ -114,7 +119,7 @@ const ModelDownloadRow: React.FC<Props> = ({
         >
           Use
         </Button>
-      ) : downloadState != null ? (
+      ) : isDownloading ? (
         <Button variant="soft">
           <div className="flex items-center space-x-2">
             <span className="inline-block" onClick={onAbortDownloadClick}>
@@ -129,7 +134,7 @@ const ModelDownloadRow: React.FC<Props> = ({
               }
             />
             <span className="tabular-nums">
-              {formatDownloadPercentage(downloadState.percent)}
+              {formatDownloadPercentage(downloadState?.percent)}
             </span>
           </div>
         </Button>

web/screens/Settings/MyModels/index.tsx

@@ -116,7 +116,12 @@ const MyModels = () => {
     getAllSettings()
   }, [])
 
-  const findByEngine = filteredDownloadedModels.map((x) => x.engine)
+  const findByEngine = filteredDownloadedModels.map((x) => {
+    // Legacy engine support - they will be grouped under Cortex LlamaCPP
+    if (x.engine === InferenceEngine.nitro)
+      return InferenceEngine.cortex_llamacpp
+    return x.engine
+  })
   const groupByEngine = findByEngine
     .filter(function (item, index) {
       if (findByEngine.indexOf(item) === index) return item

web/utils/converter.ts

@@ -19,7 +19,7 @@ export const formatDownloadPercentage = (
   options?: { hidePercentage?: boolean }
 ) => {
   if (options?.hidePercentage) return input <= 1 ? input * 100 : input
-  return (input <= 1 ? input * 100 : input).toFixed(2) + '%'
+  return (input <= 1 ? input * 100 : (input ?? 0)).toFixed(2) + '%'
 }
 
 export const formatDownloadSpeed = (input: number | undefined) => {