chore: add model api

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

@@ -1,4 +1,3 @@
-import AutoTooltip from '@/components/auto-tooltip';
 import IconFont from '@/components/icon-font';
 import LabelSelector from '@/components/label-selector';
 import ListInput from '@/components/list-input';
@@ -13,7 +12,6 @@ import { useIntl } from '@umijs/max';
 import {
   Checkbox,
   Collapse,
-  Empty,
   Form,
   FormInstance,
   Tooltip,
@@ -150,49 +148,6 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
     form.setFieldValue(['gpu_selector', 'gpu_ids'], lastGroupItems);
   };
 
-  const gpuOptionRender = (data: any) => {
-    if (data.value === '__EMPTY__') {
-      return (
-        <Empty
-          image={false}
-          style={{
-            height: 100,
-            alignSelf: 'center',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center'
-          }}
-          description={intl.formatMessage({
-            id: 'common.search.empty'
-          })}
-        ></Empty>
-      );
-    }
-    let width: any = {
-      maxWidth: 140,
-      minWidth: 140
-    };
-    if (!data.parent) {
-      width = undefined;
-    }
-    if (data.parent) {
-      return (
-        <AutoTooltip ghost {...width}>
-          {data.label}
-        </AutoTooltip>
-      );
-    }
-    return <GPUCard data={data}></GPUCard>;
-  };
-
-  const tagRender = (props: any) => {
-    if (props.isMaxTag) {
-      return props.label;
-    }
-    const parent = _.split(props.value, '__RC_CASCADER_SPLIT__')?.[0];
-    return `${parent} / ${props?.label}`;
-  };
-
   const collapseItems = useMemo(() => {
     const children = (
       <>
@@ -306,19 +261,7 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
                 options={gpuOptions}
                 showCheckedStrategy="SHOW_CHILD"
                 value={form.getFieldValue(['gpu_selector', 'gpu_ids'])}
-                tagRender={(props) => {
-                  return (
-                    <AutoTooltip
-                      className="m-r-4"
-                      closable={props.closable}
-                      onClose={props.onClose}
-                      maxWidth={240}
-                    >
-                      {tagRender(props)}
-                    </AutoTooltip>
-                  );
-                }}
-                optionRender={gpuOptionRender}
+                optionNode={GPUCard}
                 getPopupContainer={(triggerNode) => triggerNode.parentNode}
               ></SealCascader>
             </Form.Item>

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

@@ -1,5 +1,6 @@
 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';
@@ -7,7 +8,7 @@ import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
 import useAppUtils from '@/hooks/use-app-utils';
 import { useIntl } from '@umijs/max';
-import { Form, Typography } from 'antd';
+import { Form, Input, Typography } from 'antd';
 import _ from 'lodash';
 import React, {
   forwardRef,
@@ -46,6 +47,7 @@ interface DataFormProps {
   backendOptions?: Global.BaseOption<string>[];
   sourceList?: Global.BaseOption<string>[];
   gpuOptions: any[];
+  modelFileOptions?: any[];
   onSizeChange?: (val: number) => void;
   onQuantizationChange?: (val: string) => void;
   onSourceChange?: (value: string) => void;
@@ -68,12 +70,14 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
     sourceList,
     byBuiltIn,
     gpuOptions = [],
+    modelFileOptions = [],
     sizeOptions = [],
     quantizationOptions = [],
     fields = ['source'],
     onSourceChange,
     onOk
   } = props;
+  console.log('modelFileOptions--------', modelFileOptions);
   const { getRuleMessage } = useAppUtils();
   const [form] = Form.useForm();
   const intl = useIntl();
@@ -278,6 +282,11 @@ 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 (
       <>
@@ -291,13 +300,37 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
             }
           ]}
         >
-          <SealInput.Input
+          {/* <SealInput.Input
             required
             onBlur={handleLocalPathBlur}
             onFocus={handleOnFocus}
             label={intl.formatMessage({ id: 'models.form.filePath' })}
             description={<TooltipList list={localPathTipsList}></TooltipList>}
-          ></SealInput.Input>
+          ></SealInput.Input> */}
+          <SealCascader
+            required
+            showSearch
+            description={<TooltipList list={localPathTipsList}></TooltipList>}
+            expandTrigger="hover"
+            multiple={false}
+            onSearch={handleOnSearch}
+            popupClassName="cascader-popup-wrapper gpu-selector"
+            maxTagCount={1}
+            label={intl.formatMessage({ id: 'models.form.gpuselector' })}
+            options={modelFileOptions}
+            showCheckedStrategy="SHOW_CHILD"
+            value={form.getFieldValue('local_path')}
+            getPopupContainer={(triggerNode) => triggerNode.parentNode}
+            displayRender={() => (
+              <Input
+                style={{
+                  border: 'none',
+                  outline: 'none',
+                  width: '100%'
+                }}
+              />
+            )}
+          ></SealCascader>
         </Form.Item>
       </>
     );

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

@@ -23,6 +23,7 @@ type AddModalProps = {
   source: string;
   width?: string | number;
   gpuOptions: any[];
+  modelFileOptions: any[];
   onOk: (values: FormData) => void;
   onCancel: () => void;
 };
@@ -286,6 +287,7 @@ const AddModal: FC<AddModalProps> = (props) => {
                 ref={form}
                 isGGUF={isGGUF}
                 gpuOptions={props.gpuOptions}
+                modelFileOptions={props.modelFileOptions}
                 onBackendChange={handleBackendChange}
               ></DataForm>
             </>

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

@@ -12,10 +12,7 @@ import useBodyScroll from '@/hooks/use-body-scroll';
 import useExpandedRowKeys from '@/hooks/use-expanded-row-keys';
 import useTableRowSelection from '@/hooks/use-table-row-selection';
 import useTableSort from '@/hooks/use-table-sort';
-import {
-  GPUDeviceItem,
-  ListItem as WorkerListItem
-} from '@/pages/resources/config/types';
+import { ListItem as WorkerListItem } from '@/pages/resources/config/types';
 import { handleBatchRequest } from '@/utils';
 import {
   IS_FIRST_LOGIN,
@@ -99,8 +96,8 @@ interface ModelsProps {
     categories?: string[];
   };
   deleteIds?: number[];
-  gpuDeviceList: GPUDeviceItem[];
   workerList: WorkerListItem[];
+  modelFileOptions: any[];
   catalogList?: any[];
   dataSource: ListItem[];
   loading: boolean;
@@ -131,6 +128,7 @@ const Models: React.FC<ModelsProps> = ({
   onCancelViewLogs,
   handleCategoryChange,
   handleOnToggleExpandAll,
+  modelFileOptions,
   deleteIds,
   dataSource,
   workerList,
@@ -145,10 +143,12 @@ const Models: React.FC<ModelsProps> = ({
   const { saveScrollHeight, restoreScrollHeight } = useBodyScroll();
   const [updateFormInitials, setUpdateFormInitials] = useState<{
     gpuOptions: any[];
+    modelFileOptions?: any[];
     data: any;
     isGGUF: boolean;
   }>({
     gpuOptions: [],
+    modelFileOptions: [],
     data: {},
     isGGUF: false
   });
@@ -176,11 +176,13 @@ const Models: React.FC<ModelsProps> = ({
     width: number | string;
     source: string;
     gpuOptions: any[];
+    modelFileOptions?: any[];
   }>({
     show: false,
     width: 600,
     source: modelSourceMap.huggingface_value,
-    gpuOptions: []
+    gpuOptions: [],
+    modelFileOptions: []
   });
   const currentData = useRef<ListItem>({} as ListItem);
   const [currentInstance, setCurrentInstance] = useState<{
@@ -213,7 +215,10 @@ const Models: React.FC<ModelsProps> = ({
   }, [deleteIds]);
 
   useEffect(() => {
-    getGPUList();
+    const getData = async () => {
+      await getGPUList();
+    };
+    getData();
     return () => {
       setExpandAtom([]);
     };
@@ -418,6 +423,7 @@ const Models: React.FC<ModelsProps> = ({
     const initialValues = generateFormValues(row, gpuDeviceList.current);
     setUpdateFormInitials({
       gpuOptions: gpuDeviceList.current,
+      modelFileOptions: modelFileOptions,
       data: initialValues,
       isGGUF: row.backend === backendOptionsMap.llamaBox
     });
@@ -497,8 +503,13 @@ const Models: React.FC<ModelsProps> = ({
     }
 
     const config = modalConfig[item.key];
+    console.log('modelFileOptions:', modelFileOptions);
     if (config) {
-      setOpenDeployModal({ ...config, gpuOptions: gpuDeviceList.current });
+      setOpenDeployModal({
+        ...config,
+        gpuOptions: gpuDeviceList.current,
+        modelFileOptions: modelFileOptions
+      });
     }
   };
 
@@ -811,6 +822,7 @@ const Models: React.FC<ModelsProps> = ({
         source={openDeployModal.source}
         width={openDeployModal.width}
         gpuOptions={openDeployModal.gpuOptions}
+        modelFileOptions={openDeployModal.modelFileOptions || []}
         onCancel={handleDeployModalCancel}
         onOk={handleCreateModel}
       ></DeployModal>