chore: add model file ux

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

@@ -1,6 +1,5 @@
 import IconFont from '@/components/icon-font';
 import SealAutoComplete from '@/components/seal-form/auto-complete';
-import SealCascader from '@/components/seal-form/seal-cascader';
 import SealInput from '@/components/seal-form/seal-input';
 import SealSelect from '@/components/seal-form/seal-select';
 import TooltipList from '@/components/tooltip-list';
@@ -8,7 +7,7 @@ import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
 import useAppUtils from '@/hooks/use-app-utils';
 import { useIntl } from '@umijs/max';
-import { Form, Input, Typography } from 'antd';
+import { Form, Typography } from 'antd';
 import _ from 'lodash';
 import React, {
   forwardRef,
@@ -30,11 +29,12 @@ import {
   ollamaModelOptions,
   sourceOptions
 } from '../config';
-import { HuggingFaceModels, ModelScopeModels } from '../config/audio-catalog';
+import { identifyModelTask } from '../config/audio-catalog';
 import { FormData } from '../config/types';
 import AdvanceConfig from './advance-config';
 
 interface DataFormProps {
+  initialValues?: any;
   ref?: any;
   source: string;
   action: PageActionType;
@@ -65,6 +65,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
   const {
     action,
     isGGUF,
+    initialValues,
     sourceDisable = true,
     backendOptions,
     sourceList,
@@ -116,33 +117,15 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
     []
   );
 
-  const identifyModelTask = () => {
-    let data = null;
-    if (props.source === modelSourceMap.huggingface_value) {
-      data = HuggingFaceModels.find(
-        (item) =>
-          `${item.org}/${item.name}`.indexOf(props.selectedModel.name) > -1 ||
-          props.selectedModel.name?.indexOf(`${item.org}/${item.name}`) > -1
-      );
-    }
-    if (props.source === modelSourceMap.modelscope_value) {
-      data = ModelScopeModels.find(
-        (item) =>
-          `${item.org}/${item.name}`.indexOf(props.selectedModel.name) > -1 ||
-          props.selectedModel.name?.indexOf(`${item.org}/${item.name}`) > -1
-      );
-    }
-    if (data) {
-      return modelTaskMap.audio;
-    }
-    return '';
-  };
   const handleOnSelectModel = () => {
     let name = _.split(props.selectedModel.name, '/').slice(-1)[0];
     const reg = /(-gguf)$/i;
     name = _.toLower(name).replace(reg, '');
 
-    const modelTaskType = identifyModelTask();
+    const modelTaskType = identifyModelTask(
+      props.source,
+      props.selectedModel.name
+    );
 
     const modelTask =
       HuggingFaceTaskMap.audio.includes(props.selectedModel.task) ||
@@ -282,11 +265,6 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
     );
   };
 
-  const handleOnSearch = (value: string) => {
-    console.log('local_path', value);
-    form.setFieldValue('local_path', value);
-  };
-
   const renderLocalPathFields = () => {
     return (
       <>
@@ -300,14 +278,17 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
             }
           ]}
         >
-          {/* <SealInput.Input
+          <SealAutoComplete
             required
+            filterOption
+            defaultActiveFirstOption
+            options={modelFileOptions}
             onBlur={handleLocalPathBlur}
             onFocus={handleOnFocus}
             label={intl.formatMessage({ id: 'models.form.filePath' })}
             description={<TooltipList list={localPathTipsList}></TooltipList>}
-          ></SealInput.Input> */}
-          <SealCascader
+          ></SealAutoComplete>
+          {/* <SealCascader
             required
             showSearch
             description={<TooltipList list={localPathTipsList}></TooltipList>}
@@ -330,7 +311,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
                 }}
               />
             )}
-          ></SealCascader>
+          ></SealCascader> */}
         </Form.Item>
       </>
     );
@@ -523,7 +504,8 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
         cpu_offloading: true,
         scheduleType: 'auto',
         categories: null,
-        distributed_inference_across_workers: true
+        distributed_inference_across_workers: true,
+        ...initialValues
       }}
     >
       <Form.Item<FormData>

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

@@ -4,7 +4,7 @@ import { PageActionType } from '@/config/types';
 import { CloseOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button, Drawer } from 'antd';
-import { debounce } from 'lodash';
+import _, { debounce } from 'lodash';
 import { FC, useCallback, useEffect, useRef, useState } from 'react';
 import { backendOptionsMap, modelSourceMap } from '../config';
 import { FormData } from '../config/types';
@@ -21,9 +21,11 @@ type AddModalProps = {
   action: PageActionType;
   open: boolean;
   source: string;
+  isGGUF?: boolean;
   width?: string | number;
   gpuOptions: any[];
   modelFileOptions: any[];
+  initialValues?: any;
   onOk: (values: FormData) => void;
   onCancel: () => void;
 };
@@ -36,7 +38,8 @@ const AddModal: FC<AddModalProps> = (props) => {
     onCancel,
     source,
     action,
-    width = 600
+    width = 600,
+    initialValues
   } = props || {};
   const SEARCH_SOURCE = [
     modelSourceMap.huggingface_value,
@@ -47,7 +50,7 @@ const AddModal: FC<AddModalProps> = (props) => {
   const intl = useIntl();
   const [selectedModel, setSelectedModel] = useState<any>({});
   const [collapsed, setCollapsed] = useState<boolean>(false);
-  const [isGGUF, setIsGGUF] = useState<boolean>(false);
+  const [isGGUF, setIsGGUF] = useState<boolean>(props.isGGUF || false);
   const modelFileRef = useRef<any>(null);
   const [warningStatus, setWarningStatus] = useState<{
     show: boolean;
@@ -128,7 +131,9 @@ const AddModal: FC<AddModalProps> = (props) => {
   }, [onCancel]);
 
   useEffect(() => {
-    handleSelectModelFile({ fakeName: '' });
+    if (!_.isEmpty(selectedModel)) {
+      handleSelectModelFile({ fakeName: '' });
+    }
   }, [selectedModel]);
 
   useEffect(() => {
@@ -142,12 +147,17 @@ const AddModal: FC<AddModalProps> = (props) => {
     } else if (source === modelSourceMap.ollama_library_value) {
       form.current?.setFieldValue?.('backend', backendOptionsMap.llamaBox);
       setIsGGUF(true);
+    } else {
+      form.current?.setFieldsValue({
+        ...props.initialValues
+      });
+      setIsGGUF(props.isGGUF || false);
     }
 
     return () => {
       setSelectedModel({});
     };
-  }, [open, source]);
+  }, [open, source, props.isGGUF, props.initialValues]);
 
   return (
     <Drawer
@@ -280,6 +290,7 @@ const AddModal: FC<AddModalProps> = (props) => {
                 </TitleWrapper>
               )}
               <DataForm
+                initialValues={initialValues}
                 source={source}
                 action={action}
                 selectedModel={selectedModel}

src/pages/llmodels/components/file-parts.tsx

@@ -4,8 +4,9 @@ import SimpleBar from 'simplebar-react';
 import 'simplebar-react/dist/simplebar.min.css';
 
 const FileParts: React.FC<{
+  showSize?: boolean;
   fileList: any[];
-}> = ({ fileList }) => {
+}> = ({ fileList, showSize = true }) => {
   return (
     <SimpleBar
       style={{ maxHeight: 200 }}
@@ -19,7 +20,7 @@ const FileParts: React.FC<{
                 {' '}
                 Part {file.part} of {file.total}
               </span>
-              <span>{convertFileSize(file.size)}</span>
+              {showSize && <span>{convertFileSize(file.size)}</span>}
             </div>
           );
         })}

src/pages/llmodels/components/table-list.tsx

@@ -730,7 +730,6 @@ const Models: React.FC<ModelsProps> = ({
                 })}
                 style={{ width: 230 }}
                 size="large"
-                mode="multiple"
                 maxTagCount={1}
                 onChange={handleCategoryChange}
                 options={modelCategories.filter((item) => item.value)}