fix: some fields value are null after select model

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
+  };
+};