fix: some fields value are null after select model

src/components/alert-info/block.less

@@ -30,15 +30,10 @@
   &.success {
     border: 1px solid var(--color-progress-green);
     color: var(--color-progress-green);
-
-    .title-text {
-      color: var(--color-progress-green);
-    }
+    background: var(--ant-green-1);
 
     .content.success {
-      color: var(--color-progress-green);
       font-weight: var(--font-weight-normal);
-      opacity: 0.85;
     }
   }
 

src/locales/en-US/models.ts

@@ -127,7 +127,7 @@ export default {
   'models.form.restart.onerror.tips':
     'When an error occurs, it will automatically attempt to restart.',
   'models.form.check.params': 'Checking configuration...',
-  'models.form.check.passed': 'Check Compatibility Passed',
+  'models.form.check.passed': 'Compatibility Check Passed',
   'models.form.check.claims':
     'The model requires approximately {vram} VRAM and {ram} RAM.'
 };

src/locales/en-US/resources.ts

@@ -64,7 +64,7 @@ export default {
   'resources.modelfiles.selecttarget': 'Select Target',
   'resources.modelfiles.form.localdir': 'Local Directory',
   'resources.modelfiles.form.localdir.tips':
-    'The default storage directory is <span class="desc-block">/var/lib/gpustack/cache</span> or the directory specified with <span class="desc-block">--data-dir</span>.',
+    'The default storage directory is <span class="desc-block">/var/lib/gpustack/cache</span> or the directory specified with <span class="desc-block">--cache-dir</span>.',
   'resources.modelfiles.retry.download': 'Retry Download',
   'resources.modelfiles.storagePath.holder':
     'Waiting for the download to complete...',

src/locales/ja-JP/models.ts

@@ -124,7 +124,7 @@ export default {
   'models.form.restart.onerror.tips':
     'When an error occurs, it will automatically attempt to restart.',
   'models.form.check.params': 'Checking configuration...',
-  'models.form.check.passed': 'Check Compatibility Passed',
+  'models.form.check.passed': 'Compatibility Check Passed',
   'models.form.check.claims':
     'The model requires approximately {vram} VRAM and {ram} RAM.'
 };

src/locales/ja-JP/resources.ts

@@ -65,7 +65,7 @@ export default {
   'resources.modelfiles.selecttarget': 'Select Target',
   'resources.modelfiles.form.localdir': 'Local Directory',
   'resources.modelfiles.form.localdir.tips':
-    'The default storage directory is <span class="desc-block">/var/lib/gpustack/cache</span> or the directory specified with <span class="desc-block">--data-dir</span>.',
+    'The default storage directory is <span class="desc-block">/var/lib/gpustack/cache</span> or the directory specified with <span class="desc-block">--cache-dir</span>.',
   'resources.modelfiles.retry.download': 'Retry Download',
   'resources.modelfiles.storagePath.holder':
     'Waiting for download to complete...',

src/locales/ru-RU/models.ts

@@ -127,11 +127,10 @@ export default {
   'models.form.restart.onerror.tips':
     'При возникновении ошибки система автоматически попытается перезапуститься.',
   'models.form.check.params': 'Проверка конфигурации...',
-  'models.form.check.passed': 'Проверка совместимости: успешно пройдена',
-  'models.form.check.claims':
-    'Модель требует примерно {vram} VRAM и {ram} RAM.'
+  'models.form.check.passed': 'Compatibility Check Passed',
+  'models.form.check.claims': 'Модель требует примерно {vram} VRAM и {ram} RAM.'
 };
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========
-
+// 1. 'models.form.check.passed'
 // ========== End of To-Do List ==========

src/locales/ru-RU/resources.ts

@@ -64,7 +64,7 @@ export default {
   'resources.modelfiles.selecttarget': 'Выбрать назначение',
   'resources.modelfiles.form.localdir': 'Локальный каталог',
   'resources.modelfiles.form.localdir.tips':
-    'Каталог по умолчанию <span class="desc-block>/var/lib/gpustack/cache</span> или каталог, указанный через <span class="desc-block">--data-dir</span>.',
+    'Каталог по умолчанию <span class="desc-block>/var/lib/gpustack/cache</span> или каталог, указанный через <span class="desc-block">--cache-dir</span>.',
   'resources.modelfiles.retry.download': 'Повторить загрузку',
   'resources.modelfiles.storagePath.holder': 'Ожидание завершения загрузки...',
   'resources.filter.worker': 'Фильтровать по узлу',

src/locales/zh-CN/models.ts

@@ -122,5 +122,5 @@ export default {
   'models.form.restart.onerror.tips': '当发生错误时，将自动尝试恢复',
   'models.form.check.params': '正在校验配置...',
   'models.form.check.passed': '兼容性检查通过',
-  'models.form.check.claims': '该模型大约需要 {vram} 显存和 {ram} 内存.'
+  'models.form.check.claims': '该模型大约需要 {vram} 显存和 {ram} 内存。'
 };

src/locales/zh-CN/resources.ts

@@ -63,7 +63,7 @@ export default {
   'resources.modelfiles.selecttarget': '选择目标位置',
   'resources.modelfiles.form.localdir': '本地目录',
   'resources.modelfiles.form.localdir.tips':
-    '默认存储目录为 <span class="desc-block">/var/lib/gpustack/cache</span>，或使用 <span class="desc-block">--data-dir</span> 指定的目录',
+    '默认存储目录为 <span class="desc-block">/var/lib/gpustack/cache</span>，或使用 <span class="desc-block">--cache-dir</span> 指定的目录',
   'resources.modelfiles.retry.download': '重新下载',
   'resources.modelfiles.storagePath.holder': '等待下载完成...',
   'resources.filter.worker': '按 worker 筛选',

src/pages/llmodels/components/data-form.tsx

@@ -7,18 +7,14 @@ import useAppUtils from '@/hooks/use-app-utils';
 import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
 import _ from 'lodash';
-import React, { forwardRef, useImperativeHandle, useState } from 'react';
+import React, { forwardRef, useImperativeHandle } from 'react';
 import {
-  HuggingFaceTaskMap,
-  ModelscopeTaskMap,
   backendOptionsMap,
   backendTipsList,
   excludeFields,
   modelSourceMap,
-  modelTaskMap,
   sourceOptions
 } from '../config';
-import { identifyModelTask } from '../config/audio-catalog';
 import { FormInnerContext } from '../config/form-context';
 import { FormData, SourceType } from '../config/types';
 import CatalogFrom from '../forms/catalog';
@@ -70,68 +66,11 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
   const { getRuleMessage } = useAppUtils();
   const [form] = Form.useForm();
   const intl = useIntl();
-  const [modelTask, setModelTask] = useState<Record<string, any>>({
-    type: '',
-    value: '',
-    text2speech: false,
-    speech2text: false
-  });
 
   const handleSumit = () => {
     form.submit();
   };
 
-  const handleRecognizeAudioModel = (selectModel: any) => {
-    const modelTaskType = identifyModelTask(props.source, selectModel.name);
-
-    const modelTask =
-      HuggingFaceTaskMap.audio.includes(selectModel.task) ||
-      ModelscopeTaskMap.audio.includes(selectModel.task)
-        ? modelTaskMap.audio
-        : '';
-
-    const modelTaskData = {
-      value: selectModel.task,
-      type: modelTaskType || modelTask,
-      text2speech:
-        HuggingFaceTaskMap[modelTaskMap.textToSpeech] === selectModel.task ||
-        ModelscopeTaskMap[modelTaskMap.textToSpeech] === selectModel.task,
-      speech2text:
-        HuggingFaceTaskMap[modelTaskMap.speechToText] === selectModel.task ||
-        ModelscopeTaskMap[modelTaskMap.speechToText] === selectModel.task
-    };
-    return modelTaskData;
-  };
-
-  // just for setting the model name or repo_id, and the backend, Since the model type is fixed.
-  const handleOnSelectModel = (selectModel: any) => {
-    let name = _.split(selectModel.name, '/').slice(-1)[0];
-    const reg = /(-gguf)$/i;
-    name = _.toLower(name).replace(reg, '');
-
-    const modelTaskData = handleRecognizeAudioModel(selectModel);
-    setModelTask(modelTaskData);
-
-    if (SEARCH_SOURCE.includes(props.source)) {
-      form.setFieldsValue({
-        repo_id: selectModel.name,
-        name: name,
-        backend:
-          modelTaskData.type === modelTaskMap.audio
-            ? backendOptionsMap.voxBox
-            : selectModel.isGGUF
-              ? backendOptionsMap.llamaBox
-              : backendOptionsMap.vllm
-      });
-    } else {
-      form.setFieldsValue({
-        ollama_library_model_name: selectModel.name,
-        name: name,
-        backend: backendOptionsMap.llamaBox
-      });
-    }
-  };
-
   // voxbox is not support multi gpu
   const handleSetGPUIds = (backend: string) => {
     const gpuids = form.getFieldValue(['gpu_selector', 'gpu_ids']) || [];
@@ -184,6 +123,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
     };
   };
 
+  // generate the data is available for the backend including the gpu_ids
   const handleOk = async (formdata: FormData) => {
     let data = _.cloneDeep(formdata);
     data.categories = Array.isArray(data.categories)
@@ -217,7 +157,6 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
     () => {
       return {
         form: form,
-        handleOnSelectModel: handleOnSelectModel,
         submit: handleSumit,
         setFieldsValue: (values: FormData) => {
           form.setFieldsValue(values);

src/pages/llmodels/components/deploy-modal.tsx

@@ -13,7 +13,7 @@ import {
 } from '../config';
 import { FormContext } from '../config/form-context';
 import { FormData, SourceType } from '../config/types';
-import { useCheckCompatibility } from '../hooks';
+import { useCheckCompatibility, useSelectModel } from '../hooks';
 import ColumnWrapper from './column-wrapper';
 import CompatibilityAlert from './compatible-alert';
 import DataForm from './data-form';
@@ -84,6 +84,7 @@ const AddModal: FC<AddModalProps> = (props) => {
     warningStatus,
     submitAnyway
   } = useCheckCompatibility();
+  const { onSelectModel } = useSelectModel();
   const form = useRef<any>({});
   const intl = useIntl();
   const [selectedModel, setSelectedModel] = useState<any>({});
@@ -91,25 +92,28 @@ const AddModal: FC<AddModalProps> = (props) => {
   const [isGGUF, setIsGGUF] = useState<boolean>(props.isGGUF || false);
   const modelFileRef = useRef<any>(null);
 
-  const handleSelectModelFile = useCallback((item: any) => {
+  const handleSelectModelFile = (item: any) => {
+    const modelInfo = onSelectModel(selectedModel, props.source);
     form.current?.setFieldsValue?.({
       file_name: item.fakeName,
-      backend: backendOptionsMap.llamaBox,
-      ...item.evaluateResult?.default_spec
+      ...item.evaluateResult?.default_spec,
+      ...modelInfo
     });
+
     if (item.fakeName) {
       handleShowCompatibleAlert(item.evaluateResult);
     }
-  }, []);
+  };
 
   const handleOnSelectModel = (item: any) => {
     setSelectedModel(item);
-    form.current?.handleOnSelectModel?.(item);
     if (!item.isGGUF) {
       setIsGGUF(false);
+      const modelInfo = onSelectModel(item, props.source);
       handleShowCompatibleAlert(item.evaluateResult);
       form.current?.setFieldsValue?.({
-        ...item.evaluateResult?.default_spec
+        ...item.evaluateResult?.default_spec,
+        ...modelInfo
       });
     }
   };

src/pages/llmodels/forms/local-path.tsx

@@ -1,4 +1,4 @@
-import SealAutoComplete from '@/components/seal-form/auto-complete';
+import SealInput from '@/components/seal-form/seal-input';
 import TooltipList from '@/components/tooltip-list';
 import useAppUtils from '@/hooks/use-app-utils';
 import { useIntl } from '@umijs/max';
@@ -60,17 +60,14 @@ const LocalPathForm: React.FC = () => {
           }
         ]}
       >
-        <SealAutoComplete
+        <SealInput.Input
           allowClear
           required
-          filterOption
-          defaultActiveFirstOption
-          options={modelFileOptions}
           onBlur={handleLocalPathBlur}
           onFocus={handleOnFocus}
           label={intl.formatMessage({ id: 'models.form.filePath' })}
           description={<TooltipList list={localPathTipsList}></TooltipList>}
-        ></SealAutoComplete>
+        ></SealInput.Input>
       </Form.Item>
     </>
   );

src/pages/llmodels/hooks/index.ts

@@ -8,11 +8,15 @@ import _ from 'lodash';
 import { useEffect, useRef, useState } from 'react';
 import { evaluationsModelSpec, queryGPUList } from '../apis';
 import {
+  HuggingFaceTaskMap,
+  ModelscopeTaskMap,
   backendOptionsMap,
   getSourceRepoConfigValue,
   modelSourceMap,
+  modelTaskMap,
   setSourceRepoConfigValue
 } from '../config';
+import { identifyModelTask } from '../config/audio-catalog';
 import {
   EvaluateResult,
   FormData,
@@ -317,7 +321,6 @@ export const useCheckCompatibility = () => {
     return {
       show: !compatible || hasClaim,
       type: !compatible ? 'warning' : 'success',
-      isHtml: hasClaim,
       ...msgData
     };
   };
@@ -495,3 +498,50 @@ export const useCheckCompatibility = () => {
     submitAnyway
   };
 };
+
+export const useSelectModel = () => {
+  const handleRecognizeAudioModel = (selectModel: any, source: string) => {
+    const modelTaskType = identifyModelTask(source, selectModel.name);
+
+    const modelTask =
+      HuggingFaceTaskMap.audio.includes(selectModel.task) ||
+      ModelscopeTaskMap.audio.includes(selectModel.task)
+        ? modelTaskMap.audio
+        : '';
+
+    const modelTaskData = {
+      value: selectModel.task,
+      type: modelTaskType || modelTask,
+      text2speech:
+        HuggingFaceTaskMap[modelTaskMap.textToSpeech] === selectModel.task ||
+        ModelscopeTaskMap[modelTaskMap.textToSpeech] === selectModel.task,
+      speech2text:
+        HuggingFaceTaskMap[modelTaskMap.speechToText] === selectModel.task ||
+        ModelscopeTaskMap[modelTaskMap.speechToText] === selectModel.task
+    };
+    return modelTaskData;
+  };
+
+  // just for setting the model name or repo_id, and the backend, Since the model type is fixed.
+  const onSelectModel = (selectModel: any, source: string) => {
+    let name = _.split(selectModel.name, '/').slice(-1)[0];
+    const reg = /(-gguf)$/i;
+    name = _.toLower(name).replace(reg, '');
+
+    const modelTaskData = handleRecognizeAudioModel(selectModel, source);
+    return {
+      repo_id: selectModel.name,
+      name: name,
+      backend:
+        modelTaskData.type === modelTaskMap.audio
+          ? backendOptionsMap.voxBox
+          : selectModel.isGGUF
+            ? backendOptionsMap.llamaBox
+            : backendOptionsMap.vllm
+    };
+  };
+
+  return {
+    onSelectModel
+  };
+};