chore: deploy form context provider

src/pages/llmodels/components/advance-config.tsx

@@ -57,7 +57,7 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
   const placement_strategy = Form.useWatch('placement_strategy', form);
   const gpuSelectorIds = Form.useWatch(['gpu_selector', 'gpu_ids'], form);
   const worker_selector = Form.useWatch('worker_selector', form);
-  const { onValuesChange, onBackendChange, backendOptions } = useFormContext();
+  const { onValuesChange } = useFormContext();
 
   const paramsConfig = useMemo(() => {
     return _.get(BackendParameters, backend, []);
@@ -119,23 +119,6 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
     onValuesChange?.({}, form.getFieldsValue());
   };
 
-  const handleBackendVersionOnBlur = () => {
-    onValuesChange?.({}, form.getFieldsValue());
-  };
-
-  const handleScheduleTypeChange = (value: string) => {
-    if (value === ScheduleValueMap.Auto) {
-      onValuesChange?.({}, form.getFieldsValue());
-    }
-  };
-
-  const handleBeforeGpuSelectorChange = (gpuIds: any[]) => {};
-
-  const handleGpuSelectorChange = (value: any[]) => {
-    handleBeforeGpuSelectorChange(value);
-    onValuesChange?.({}, form.getFieldsValue());
-  };
-
   const collapseItems = useMemo(() => {
     const children = (
       <>

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

@@ -15,6 +15,7 @@ import {
   FormData,
   SourceType
 } from '../config/types';
+import { generateGPUIds } from '../config/utils';
 import CatalogFrom from '../forms/catalog';
 import HuggingFaceForm from '../forms/hugging-face';
 import LocalPathForm from '../forms/local-path';
@@ -64,61 +65,29 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
   };
 
   // voxbox is not support multi gpu
-  const handleSetGPUIds = (backend: string) => {
+  const updateGPUSelector = (backend: string) => {
     const gpuids = form.getFieldValue(['gpu_selector', 'gpu_ids']) || [];
 
     if (backend === backendOptionsMap.voxBox && gpuids.length > 0) {
-      form.setFieldValue(['gpu_selector', 'gpu_ids'], [gpuids[0]]);
-    }
-  };
-
-  const handleBackendChange = async (val: string) => {
-    const updates = {
-      backend_version: ''
-    };
-    if (val === backendOptionsMap.llamaBox) {
-      Object.assign(updates, {
-        distributed_inference_across_workers: true,
-        cpu_offloading: true
-      });
-    }
-    form.setFieldsValue({
-      backend_version: '',
-      backend_parameters: [],
-      env: null
-    });
-    handleSetGPUIds(val);
-    props.onBackendChange?.(val);
-  };
-
-  const generateGPUIds = (data: FormData) => {
-    const gpu_ids = _.get(data, 'gpu_selector.gpu_ids', []);
-    if (!gpu_ids.length) {
       return {
-        gpu_selector: null
+        gpu_selector: { gpu_ids: [gpuids[0]] }
       };
     }
-
-    const result = _.reduce(
-      gpu_ids,
-      (acc: string[], item: string | string[], index: number) => {
-        if (Array.isArray(item)) {
-          acc.push(item[1]);
-        } else if (index === 1) {
-          acc.push(item);
-        }
-        return acc;
-      },
-      []
-    );
-
     return {
-      gpu_selector: {
-        gpu_ids: result
-      }
+      gpu_selector: { gpu_ids: gpuids }
     };
   };
 
+  const handleBackendChange = async (val: string, option: BackendOption) => {
+    form.setFieldsValue({
+      env: null,
+      backend_version: option.default_version || '',
+      backend_parameters: option.default_backend_param || [],
+      ...updateGPUSelector(val)
+    });
+    props.onBackendChange?.(val);
+  };
+
   // generate the data is available for the backend including the gpu_ids
   const handleOk = async (formdata: FormData) => {
     let data = _.cloneDeep(formdata);

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

@@ -18,6 +18,7 @@ import {
 import { backendOptionsMap } from '../config/backend-parameters';
 import { CatalogFormContext } from '../config/form-context';
 import { CatalogSpec, FormData, ListItem, SourceType } from '../config/types';
+import { generateGPUIds } from '../config/utils';
 import { useCheckCompatibility } from '../hooks';
 import useFormInitialValues from '../hooks/use-form-initial-values';
 import ColumnWrapper from './column-wrapper';
@@ -96,7 +97,6 @@ const AddModal: React.FC<AddModalProps> = (props) => {
   const {
     setWarningStatus,
     handleDoEvalute,
-    generateGPUIds,
     cancelEvaluate,
     submitAnyway,
     handleOnValuesChange,

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

@@ -13,10 +13,10 @@ import { BackendOption, FormData, SourceType } from '../config/types';
 import {
   MessageStatus,
   WarningStausOptions,
-  checkOnlyAscendNPU,
   useCheckCompatibility,
   useSelectModel
 } from '../hooks';
+import useCheckBackend from '../hooks/use-check-backend';
 import ColumnWrapper from './column-wrapper';
 import CompatibilityAlert from './compatible-alert';
 import DataForm from './data-form';
@@ -94,6 +94,7 @@ const AddModal: FC<AddModalProps> = (props) => {
     modelSourceMap.modelscope_value
   ];
 
+  const { checkOnlyAscendNPU } = useCheckBackend();
   const {
     handleShowCompatibleAlert,
     setWarningStatus,
@@ -312,11 +313,7 @@ const AddModal: FC<AddModalProps> = (props) => {
   };
 
   const handleBackendChange = async (backend: string) => {
-    if (backend === backendOptionsMap.llamaBox) {
-      setIsGGUF(true);
-    } else {
-      setIsGGUF(false);
-    }
+    setIsGGUF(false);
 
     const data = form.current.form.getFieldsValue?.();
     const res = handleBackendChangeBefore(data);

src/pages/llmodels/components/hf-model-item.tsx

@@ -39,7 +39,7 @@ const HFModelItem: React.FC<HFModelItemProps> = (props) => {
               : 'icon-modelscope_light'
           }
           className="m-r-5"
-          style={{ color: 'var(--ant-color-text-tertiary)' }}
+          style={{ color: 'var(--ant-color-text-tertiary)', fontSize: 16 }}
         />
         {props.title}
       </div>

src/pages/llmodels/components/performance.tsx

@@ -44,7 +44,12 @@ const Performance: React.FC = () => {
     onQuantizationChange?.(val);
   };
 
-  const handleGpuSelectorChange = (value: any) => {};
+  const handleBeforeGpuSelectorChange = (gpuIds: any[]) => {};
+
+  const handleGpuSelectorChange = (value: any[]) => {
+    handleBeforeGpuSelectorChange(value);
+    onValuesChange?.({}, form.getFieldsValue());
+  };
 
   return (
     <>

src/pages/llmodels/components/search-model.tsx

@@ -12,12 +12,9 @@ import {
   queryModelScopeModels
 } from '../apis';
 import { ModelScopeSortType, ModelSortType, modelSourceMap } from '../config';
-import { handleRecognizeAudioModel } from '../config/audio-catalog';
-import {
-  MessageStatus,
-  WarningStausOptions,
-  checkCurrentbackend
-} from '../hooks';
+import { MessageStatus, WarningStausOptions } from '../hooks';
+import useCheckBackend from '../hooks/use-check-backend';
+import useRecognizeAudio from '../hooks/use-recognize-audio';
 import SearchStyle from '../style/search-result.less';
 import SearchInput from './search-input';
 import SearchResult from './search-result';
@@ -61,6 +58,8 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
     displayEvaluateStatus
   } = props;
 
+  const { recognizeAudioModel } = useRecognizeAudio();
+  const { checkCurrentbackend } = useCheckBackend();
   const [dataSource, setDataSource] = useState<{
     dataList: any[];
     loading: boolean;
@@ -268,7 +267,7 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
     const currentSearchId = getRequestId();
     try {
       const repoList = list.map((item) => {
-        const res = handleRecognizeAudioModel(item, modelSource);
+        const res = recognizeAudioModel(item, modelSource);
 
         let backendObj = {};
         const backend = checkCurrentbackend({