chore: add model api

src/components/seal-form/auto-complete-cascader.tsx

@@ -0,0 +1,75 @@
+import { Cascader, Input, Popover } from 'antd';
+import React, { useEffect, useRef, useState } from 'react';
+
+const { Panel } = Cascader;
+
+const options = [
+  {
+    value: 'fruit',
+    label: 'Fruit',
+    children: [
+      { value: 'apple', label: 'Apple' },
+      { value: 'banana', label: 'Banana' }
+    ]
+  },
+  {
+    value: 'vegetable',
+    label: 'Vegetable',
+    children: [
+      { value: 'carrot', label: 'Carrot' },
+      { value: 'potato', label: 'Potato' }
+    ]
+  }
+];
+
+const CustomCascader: React.FC = () => {
+  const [value, setValue] = useState<string>('');
+  const [visible, setVisible] = useState(false);
+  const [inputWidth, setInputWidth] = useState<number>(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (inputRef.current) {
+      setInputWidth(inputRef.current.offsetWidth);
+    }
+  }, []);
+
+  const handleCascaderChange = (selectedValues: string[]) => {
+    setValue(selectedValues.join(' / '));
+    setVisible(false);
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(e.target.value);
+  };
+
+  return (
+    <Popover
+      overlayStyle={{ minWidth: inputWidth }}
+      content={
+        <div style={{ width: '100%' }}>
+          <Panel
+            options={options}
+            onChange={handleCascaderChange}
+            changeOnSelect
+          />
+        </div>
+      }
+      arrow={false}
+      placement="bottomLeft"
+      trigger="click"
+      open={visible}
+      onOpenChange={setVisible}
+    >
+      <Input
+        ref={inputRef}
+        placeholder="Select or type..."
+        value={value}
+        onChange={handleInputChange}
+        onClick={() => setVisible(true)}
+      />
+    </Popover>
+  );
+};
+
+export default CustomCascader;

src/components/seal-form/components/wrapper.less

@@ -262,7 +262,9 @@
     }
   }
 
-  :global(.ant-select.ant-cascader .ant-select-selection-search) {
+  :global(
+      .ant-select.ant-select-multiple.ant-cascader .ant-select-selection-search
+    ) {
     top: 0 !important;
   }
 

src/components/seal-form/seal-cascader.tsx

@@ -1,15 +1,78 @@
 import { isNotEmptyValue } from '@/utils/index';
 import { useIntl } from '@umijs/max';
 import type { CascaderAutoProps } from 'antd';
-import { Cascader, Form } from 'antd';
+import { Cascader, Empty, Form } from 'antd';
-import { cloneDeep } from 'lodash';
+import _, { cloneDeep } from 'lodash';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import AutoTooltip from '../auto-tooltip';
 import Wrapper from './components/wrapper';
 import { SealFormItemProps } from './types';
 
-const SealCascader: React.FC<CascaderAutoProps & SealFormItemProps> = (
+const tag = (props: any) => {
-  props
+  if (props.isMaxTag) {
-) => {
+    return props.label;
+  }
+  const parent = _.split(props.value, '__RC_CASCADER_SPLIT__')?.[0];
+  return `${parent} / ${props?.label}`;
+};
+
+const renderTag = (props: any) => {
+  return (
+    <AutoTooltip
+      className="m-r-4"
+      closable={props.closable}
+      onClose={props.onClose}
+      maxWidth={240}
+    >
+      {tag(props)}
+    </AutoTooltip>
+  );
+};
+
+const OptionNodes = (props: {
+  data: any;
+  optionNode: React.FC<{ data: any }>;
+}) => {
+  const intl = useIntl();
+  const { data, optionNode: OptionNode } = props;
+  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 OptionNode ? <OptionNode data={data}></OptionNode> : data.label;
+};
+
+const SealCascader: React.FC<
+  CascaderAutoProps &
+    SealFormItemProps & { optionNode?: React.FC<{ data: any }> }
+> = (props) => {
   const {
     label,
     placeholder,
@@ -19,6 +82,8 @@ const SealCascader: React.FC<CascaderAutoProps & SealFormItemProps> = (
     options,
     allowNull,
     isInFormItems = true,
+    optionNode,
+    tagRender,
     ...rest
   } = props;
   const intl = useIntl();
@@ -100,6 +165,14 @@ const SealCascader: React.FC<CascaderAutoProps & SealFormItemProps> = (
     >
       <Cascader
         {...rest}
+        optionRender={
+          optionNode
+            ? (data) => (
+                <OptionNodes data={data} optionNode={optionNode}></OptionNodes>
+              )
+            : undefined
+        }
+        tagRender={tagRender ?? renderTag}
         ref={inputRef}
         options={children ? null : _options}
         onFocus={handleOnFocus}

src/components/status-tag/index.less

@@ -7,7 +7,7 @@
   border-radius: 20px;
   min-width: 76px;
   width: max-content;
-  height: 26px;
+  height: 24px;
   font-size: var(--font-size-base);
   overflow: hidden;
 

src/hooks/use-app-utils.ts

@@ -1,7 +1,9 @@
 import { useIntl } from '@umijs/max';
+import { message } from 'antd';
 
 const useAppUtils = () => {
   const intl = useIntl();
+  const [messageApi, contextHolder] = message.useMessage();
 
   const getRuleMessage = (
     type: 'input' | 'select',
@@ -22,8 +24,15 @@ const useAppUtils = () => {
     );
   };
 
+  const showSuccess = (msg?: string) => {
+    messageApi.success(
+      msg || intl.formatMessage({ id: 'common.message.success' })
+    );
+  };
+
   return {
-    getRuleMessage
+    getRuleMessage,
+    showSuccess
   };
 };
 

src/hooks/use-table-fetch.ts

@@ -1,15 +1,21 @@
+import useSetChunkRequest from '@/hooks/use-chunk-request';
 import useTableRowSelection from '@/hooks/use-table-row-selection';
 import useTableSort from '@/hooks/use-table-sort';
+import useUpdateChunkedList from '@/hooks/use-update-chunk-list';
 import { handleBatchRequest } from '@/utils';
 import _ from 'lodash';
+import qs from 'query-string';
 import { useEffect, useRef, useState } from 'react';
 
 export default function useTableFetch<ListItem>(options: {
+  API?: string;
+  watch?: boolean;
   fetchAPI: (params: any) => Promise<Global.PageResponse<ListItem>>;
   deleteAPI?: (id: number) => Promise<any>;
   contentForDelete?: string;
 }) {
-  const { fetchAPI, deleteAPI, contentForDelete } = options;
+  const { fetchAPI, deleteAPI, contentForDelete, API, watch } = options;
+  const chunkRequedtRef = useRef<any>(null);
   const modalRef = useRef<any>(null);
   const rowSelection = useTableRowSelection();
   const { sortOrder, setSortOrder } = useTableSort({
@@ -33,6 +39,44 @@ export default function useTableFetch<ListItem>(options: {
     search: ''
   });
 
+  const { setChunkRequest } = useSetChunkRequest();
+  const { updateChunkedList, cacheDataListRef } = useUpdateChunkedList({
+    events: ['UPDATE'],
+    dataList: dataSource.dataList,
+    setDataList(list, opts?: any) {
+      setDataSource((pre) => {
+        return {
+          total: pre.total,
+          loading: false,
+          loadend: true,
+          dataList: list,
+          deletedIds: opts?.deletedIds || []
+        };
+      });
+    }
+  });
+
+  const updateHandler = (list: any) => {
+    _.each(list, (data: any) => {
+      updateChunkedList(data);
+    });
+  };
+
+  const createModelsChunkRequest = async (params?: any) => {
+    if (!API || !watch) return;
+    chunkRequedtRef.current?.current?.cancel?.();
+    try {
+      const query = _.omit(params || queryParams, ['page', 'perPage']);
+
+      chunkRequedtRef.current = setChunkRequest({
+        url: `${API}?${qs.stringify(_.pickBy(query, (val: any) => !!val))}`,
+        handler: updateHandler
+      });
+    } catch (error) {
+      // ignore
+    }
+  };
+
   const fetchData = async (params?: { query: any }) => {
     const { query } = params || {};
     setDataSource((pre) => {
@@ -79,13 +123,12 @@ export default function useTableFetch<ListItem>(options: {
     fetchData();
   };
 
-  const handleNameChange = (e: any) => {
+  const debounceUpdateFilter = _.debounce((e: any) => {
     setQueryParams({
       ...queryParams,
       page: 1,
       search: e.target.value
     });
-
     fetchData({
       query: {
         ...queryParams,
@@ -93,7 +136,13 @@ export default function useTableFetch<ListItem>(options: {
         search: e.target.value
       }
     });
-  };
+    createModelsChunkRequest({
+      ...queryParams,
+      search: e.target.value
+    });
+  }, 350);
+
+  const handleNameChange = debounceUpdateFilter;
 
   const handleDelete = (row: ListItem & { name: string; id: number }) => {
     modalRef.current.show({
@@ -123,7 +172,17 @@ export default function useTableFetch<ListItem>(options: {
   };
 
   useEffect(() => {
-    fetchData();
+    const init = async () => {
+      await fetchData();
+      setTimeout(() => {
+        createModelsChunkRequest();
+      }, 200);
+    };
+    init();
+    return () => {
+      chunkRequedtRef.current?.cancel?.();
+      cacheDataListRef.current = [];
+    };
   }, []);
 
   return {

src/locales/en-US/resources.ts

@@ -55,5 +55,10 @@ export default {
     'Select a label to generate the command and copy it using the copy button.',
   'resources.worker.script.install': 'Script Installation',
   'resources.worker.container.install': 'Container Installation(Linux Only)',
-  'resources.worker.cann.tips': `Set <span style='color: #000;font-weight: 600'>ASCEND_VISIBLE_DEVICES</span> to the required GPU indices. For GPU0 to GPU3, use <span style='color: #000;font-weight: 600'>ASCEND_VISIBLE_DEVICES=0,1,2,3</span> or <span style='color: #000;font-weight: 600'>ASCEND_VISIBLE_DEVICES=0-3</span>.`
+  'resources.worker.cann.tips': `Set <span style='color: #000;font-weight: 600'>ASCEND_VISIBLE_DEVICES</span> to the required GPU indices. For GPU0 to GPU3, use <span style='color: #000;font-weight: 600'>ASCEND_VISIBLE_DEVICES=0,1,2,3</span> or <span style='color: #000;font-weight: 600'>ASCEND_VISIBLE_DEVICES=0-3</span>.`,
+  'resources.modelfiles.form.path': 'Storage path',
+  'resources.modelfiles.modelfile': 'Model File',
+  'resources.modelfiles.download': 'Download Model',
+  'resources.modelfiles.size': 'Size',
+  'resources.modelfiles.selecttarget': 'Select Target'
 };

src/locales/ru-RU/resources.ts

@@ -55,6 +55,18 @@ export default {
     'Выберите метку для генерации команды и скопируйте её.',
   'resources.worker.script.install': 'Установка скриптом',
   'resources.worker.container.install': 'Установка контейнером (только Linux)',
-  'resources.worker.cann.tips': 
+  'resources.worker.cann.tips': `Укажите индексы GPU через <span style='color: #000;font-weight: 600'>ASCEND_VISIBLE_DEVICES=0,1,2,3</span> или <span style='color: #000;font-weight: 600'>ASCEND_VISIBLE_DEVICES=0-3</span>.`,
-    `Укажите индексы GPU через <span style='color: #000;font-weight: 600'>ASCEND_VISIBLE_DEVICES=0,1,2,3</span> или <span style='color: #000;font-weight: 600'>ASCEND_VISIBLE_DEVICES=0-3</span>.`
+  'resources.modelfiles.form.path': 'Storage path',
+  'resources.modelfiles.modelfile': 'Model File',
+  'resources.modelfiles.download': 'Add Model',
+  'resources.modelfiles.size': 'Size',
+  'resources.modelfiles.selecttarget': 'Select Target'
 };
+
+// ========== To-Do: Translate Keys (Remove After Translation) ==========
+//1. 'resources.modelfiles.form.path',
+//2. 'resources.modelfiles.modelfile',
+//3. 'resources.modelfiles.download',
+//4. 'resources.modelfiles.size',
+//5. 'resources.modelfiles.selecttarget',
+// ========== End of To-Do List ==========

src/locales/zh-CN/resources.ts

@@ -54,5 +54,10 @@ export default {
   'resources.worker.script.install': '脚本安装',
   'resources.worker.container.install': '容器安装(仅支持 Linux)',
   'resources.worker.cann.tips':
-    '按需要挂载的 GPU index 设置 <span style="color: #000;font-weight: 600">ASCEND_VISIBLE_DEVICES</span>，如需挂载 GPU0 - GPU3，则设为 <span style="color: #000;font-weight: 600">ASCEND_VISIBLE_DEVICES=0,1,2,3</span> 或 <span style="color: #000;font-weight: 600">ASCEND_VISIBLE_DEVICES=0-3</span>'
+    '按需要挂载的 GPU index 设置 <span style="color: #000;font-weight: 600">ASCEND_VISIBLE_DEVICES</span>，如需挂载 GPU0 - GPU3，则设为 <span style="color: #000;font-weight: 600">ASCEND_VISIBLE_DEVICES=0,1,2,3</span> 或 <span style="color: #000;font-weight: 600">ASCEND_VISIBLE_DEVICES=0-3</span>',
+  'resources.modelfiles.form.path': '存储路径',
+  'resources.modelfiles.modelfile': '模型文件',
+  'resources.modelfiles.download': '添加模型',
+  'resources.modelfiles.size': '文件大小',
+  'resources.modelfiles.selecttarget': '选择目标位置'
 };

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) => {
+                optionNode={GPUCard}
-                  return (
-                    <AutoTooltip
-                      className="m-r-4"
-                      closable={props.closable}
-                      onClose={props.onClose}
-                      maxWidth={240}
-                    >
-                      {tagRender(props)}
-                    </AutoTooltip>
-                  );
-                }}
-                optionRender={gpuOptionRender}
                 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 {
+import { ListItem as WorkerListItem } from '@/pages/resources/config/types';
-  GPUDeviceItem,
-  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>

src/pages/llmodels/config/button-actions.ts

@@ -4,6 +4,7 @@ import {
   DeleteOutlined,
   EditOutlined,
   ExperimentOutlined,
+  RetweetOutlined,
   ThunderboltOutlined
 } from '@ant-design/icons';
 import _ from 'lodash';
@@ -15,6 +16,7 @@ const icons = {
   ExperimentOutlined: React.createElement(ExperimentOutlined),
   DeleteOutlined: React.createElement(DeleteOutlined),
   ThunderboltOutlined: React.createElement(ThunderboltOutlined),
+  RetweetOutlined: React.createElement(RetweetOutlined),
   Stop: React.createElement(IconFont, { type: 'icon-stop1' }),
   Play: React.createElement(IconFont, { type: 'icon-outline-play' }),
   Catalog: React.createElement(IconFont, { type: 'icon-catalog' }),
@@ -132,6 +134,13 @@ export const onLineSourceOptions = [
     value: modelSourceMap.modelscope_value,
     key: 'modelscope',
     icon: icons.ModelScope
+  },
+  {
+    label: 'models.form.localPath',
+    locale: true,
+    value: modelSourceMap.local_path_value,
+    key: 'local_path',
+    icon: icons.LocalPath
   }
 ];
 
@@ -143,14 +152,7 @@ export const sourceOptions = [
     key: 'catalog',
     icon: icons.Catalog
   },
-  ...onLineSourceOptions,
+  ...onLineSourceOptions
-  {
-    label: 'models.form.localPath',
-    locale: true,
-    value: modelSourceMap.local_path_value,
-    key: 'local_path',
-    icon: icons.LocalPath
-  }
 ];
 
 export const generateSource = (record: any) => {
@@ -187,10 +189,15 @@ export const setModelActionList = (record: any) => {
 };
 
 export const modelFileActions = [
+  // {
+  //   label: 'common.button.deploy',
+  //   key: 'deploy',
+  //   icon: icons.ThunderboltOutlined
+  // },
   {
-    label: 'common.button.deploy',
+    label: 'common.button.retry',
-    key: 'deploy',
+    key: 'retry',
-    icon: icons.ThunderboltOutlined
+    icon: icons.RetweetOutlined
   },
   {
     label: 'common.button.delete',

src/pages/llmodels/download/index.tsx

@@ -19,12 +19,21 @@ type AddModalProps = {
   open: boolean;
   source: string;
   width?: string | number;
+  workersList: Global.BaseOption<number>[];
   onOk: (values: FormData) => void;
   onCancel: () => void;
 };
 
 const DownloadModel: React.FC<AddModalProps> = (props) => {
-  const { title, open, onOk, onCancel, source, width = 600 } = props || {};
+  const {
+    title,
+    workersList,
+    open,
+    onOk,
+    onCancel,
+    source,
+    width = 600
+  } = props || {};
   const SEARCH_SOURCE = [
     modelSourceMap.huggingface_value,
     modelSourceMap.modelscope_value
@@ -35,18 +44,45 @@ const DownloadModel: React.FC<AddModalProps> = (props) => {
   const [selectedModel, setSelectedModel] = useState<any>({});
   const [collapsed, setCollapsed] = useState<boolean>(false);
   const [isGGUF, setIsGGUF] = useState<boolean>(false);
+  const [fileName, setFileName] = useState<string>('');
   const modelFileRef = useRef<any>(null);
 
+  const generateModelInfo = () => {
+    if (source === modelSourceMap.huggingface_value) {
+      const huggingFaceModel = {
+        huggingface_repo_id: selectedModel.name,
+        huggingface_filename: fileName
+      };
+      return huggingFaceModel;
+    }
+
+    if (source === modelSourceMap.modelscope_value) {
+      const modelScopeModel = {
+        model_scope_model_id: selectedModel.name,
+        model_scope_file_path: fileName
+      };
+      return modelScopeModel;
+    }
+    return {};
+  };
   const handleSelectModelFile = useCallback((item: any) => {
-    form.current?.setFieldValue?.('file_name', item.fakeName);
+    setFileName(item.fakeName);
   }, []);
 
   const handleOnSelectModel = (item: any) => {
     setSelectedModel(item);
   };
 
+  const handleOk = (values: any) => {
+    onOk({
+      ...values,
+      source: source,
+      ...generateModelInfo()
+    });
+  };
+
   const handleSumit = () => {
-    form.current?.submit?.();
+    form.current?.form?.submit?.();
   };
 
   const debounceFetchModelFiles = debounce(() => {
@@ -91,7 +127,7 @@ const DownloadModel: React.FC<AddModalProps> = (props) => {
               fontSize: 'var(--font-size-middle)'
             }}
           >
-            Download Model
+            {title}
           </span>
           <Button type="text" size="small" onClick={handleCancel}>
             <CloseOutlined></CloseOutlined>
@@ -173,7 +209,6 @@ const DownloadModel: React.FC<AddModalProps> = (props) => {
                 <ModalFooter
                   onCancel={handleCancel}
                   onOk={handleSumit}
-                  okText={intl.formatMessage({ id: 'common.button.download' })}
                   style={{
                     padding: '16px 24px',
                     display: 'flex',
@@ -186,11 +221,18 @@ const DownloadModel: React.FC<AddModalProps> = (props) => {
             <>
               {SEARCH_SOURCE.includes(source) && (
                 <TitleWrapper>
-                  Select Target
+                  {intl.formatMessage({
+                    id: 'resources.modelfiles.selecttarget'
+                  })}
                   <span style={{ display: 'flex', height: 24 }}></span>
                 </TitleWrapper>
               )}
-              <TargetForm onOk={onOk} source={source}></TargetForm>
+              <TargetForm
+                ref={form}
+                onOk={handleOk}
+                source={source}
+                workersList={workersList}
+              ></TargetForm>
             </>
           </ColumnWrapper>
         </div>

src/pages/llmodels/download/target-form.tsx

@@ -3,27 +3,55 @@ import SealAutoComplete from '@/components/seal-form/auto-complete';
 import SealInput from '@/components/seal-form/seal-input';
 import SealSelect from '@/components/seal-form/seal-select';
 import useAppUtils from '@/hooks/use-app-utils';
-import { ModelFile as FormData } from '@/pages/resources/config/types';
+import { ModelFileFormData as FormData } from '@/pages/resources/config/types';
 import { useIntl } from '@umijs/max';
 import { Form, Typography } from 'antd';
-import React from 'react';
+import React, { forwardRef, useImperativeHandle, useMemo } from 'react';
-import { modelSourceMap, ollamaModelOptions } from '../config';
+import { modelSourceMap, ollamaModelOptions, sourceOptions } from '../config';
 
 interface TargetFormProps {
+  ref?: any;
+  workersList: Global.BaseOption<number>[];
   source: string;
   onOk: (values: any) => void;
 }
 
-const TargetForm: React.FC<TargetFormProps> = (props) => {
+const TargetForm: React.FC<TargetFormProps> = forwardRef((props, ref) => {
-  const { onOk, source } = props;
+  const { onOk, source, workersList } = props;
   const { getRuleMessage } = useAppUtils();
   const intl = useIntl();
   const [form] = Form.useForm();
 
+  useImperativeHandle(ref, () => ({
+    form
+  }));
+
   const handleOk = (values: any) => {
     onOk(values);
   };
 
+  const renderLocalPathFields = () => {
+    return (
+      <>
+        <Form.Item<FormData>
+          name="local_path"
+          key="local_path"
+          rules={[
+            {
+              required: true,
+              message: getRuleMessage('input', 'models.form.filePath')
+            }
+          ]}
+        >
+          <SealInput.Input
+            required
+            label={intl.formatMessage({ id: 'models.form.filePath' })}
+          ></SealInput.Input>
+        </Form.Item>
+      </>
+    );
+  };
+
   const renderOllamaModelFields = () => {
     return (
       <>
@@ -68,20 +96,31 @@ const TargetForm: React.FC<TargetFormProps> = (props) => {
     );
   };
 
+  const renderFieldsBySource = useMemo(() => {
+    if (props.source === modelSourceMap.ollama_library_value) {
+      return renderOllamaModelFields();
+    }
+
+    if (props.source === modelSourceMap.local_path_value) {
+      return renderLocalPathFields();
+    }
+
+    return null;
+  }, [props.source, intl]);
+
   return (
     <Form
-      name="deployModel"
       form={form}
       onFinish={handleOk}
       preserve={false}
       style={{ padding: '16px 24px' }}
       clearOnDestroy={true}
-      initialValues={{}}
+      initialValues={{
+        source: source
+      }}
     >
-      {source === modelSourceMap.ollama_library_value &&
+      <Form.Item<FormData>
-        renderOllamaModelFields()}
+        name="source"
-      <Form.Item
-        name="worker"
         rules={[
           {
             required: true,
@@ -89,21 +128,53 @@ const TargetForm: React.FC<TargetFormProps> = (props) => {
           }
         ]}
       >
-        {<SealSelect label="Worker" options={[]} required></SealSelect>}
+        {
+          <SealSelect
+            disabled
+            label={intl.formatMessage({
+              id: 'models.form.source'
+            })}
+            options={sourceOptions}
+            required
+          ></SealSelect>
+        }
       </Form.Item>
+      {renderFieldsBySource}
       <Form.Item
-        name="local_path"
+        name="worker_id"
         rules={[
           {
             required: true,
-            message: getRuleMessage('input', 'common.table.name')
+            message: getRuleMessage('select', 'worker', false)
           }
         ]}
       >
-        <SealInput.Input label={'Path'} required></SealInput.Input>
+        {
+          <SealSelect
+            label="Worker"
+            options={workersList}
+            required
+          ></SealSelect>
+        }
       </Form.Item>
+      {source !== modelSourceMap.local_path_value && (
+        <Form.Item<FormData>
+          name="local_dir"
+          rules={[
+            {
+              required: true,
+              message: getRuleMessage('input', 'resources.modelfiles.form.path')
+            }
+          ]}
+        >
+          <SealInput.Input
+            label={intl.formatMessage({ id: 'resources.modelfiles.form.path' })}
+            required
+          ></SealInput.Input>
+        </Form.Item>
+      )}
     </Form>
   );
-};
+});
 
 export default TargetForm;

src/pages/llmodels/hooks/index.ts

@@ -1,3 +1,5 @@
+import { queryModelFilesList } from '@/pages/resources/apis';
+import { ListItem as WorkerListItem } from '@/pages/resources/config/types';
 import _ from 'lodash';
 import { useRef } from 'react';
 import { queryGPUList } from '../apis';
@@ -94,3 +96,58 @@ export const useGenerateFormEditInitialValues = () => {
     gpuDeviceList
   };
 };
+
+export const useGenerateModelFileOptions = () => {
+  const getModelFileList = async () => {
+    try {
+      const res = await queryModelFilesList({ page: 1, perPage: 100 });
+      const list = res.items || [];
+      return list;
+    } catch (error) {
+      console.error('Error fetching model file list:', error);
+      return [];
+    }
+  };
+
+  const generateModelFileOptions = (list: any[], workerList: any[]) => {
+    const workerFields = new Set(['name', 'id', 'ip', 'status']);
+    const workersMap = new Map<number, WorkerListItem>();
+
+    for (const item of workerList) {
+      if (!workersMap.has(item.id)) {
+        workersMap.set(item.id, item);
+      }
+    }
+
+    const result = Array.from(workersMap.values()).map((worker) => ({
+      label: worker.name,
+      value: worker.name,
+      parent: true,
+      children: list
+        .filter((item) => item.worker_id === worker.id)
+        .map((item) => {
+          const resolved_paths =
+            Array.isArray(item.resolved_paths) && item.resolved_paths.length
+              ? item.resolved_paths[0].split('/')
+              : [];
+          const label =
+            resolved_paths.length > 0 ? resolved_paths.pop() : 'Unknown File';
+          return {
+            label: item.resolved_paths[0] || '',
+            value: item.resolved_paths[0] || '',
+            parent: false,
+            ...item
+          };
+        }),
+      ...Object.fromEntries(
+        Object.entries(worker).filter(([key]) => workerFields.has(key))
+      )
+    }));
+    return result;
+  };
+
+  return {
+    getModelFileList,
+    generateModelFileOptions
+  };
+};

src/pages/llmodels/index.tsx

@@ -2,14 +2,11 @@ import TableContext from '@/components/seal-table/table-context';
 import useSetChunkRequest from '@/hooks/use-chunk-request';
 import useUpdateChunkedList from '@/hooks/use-update-chunk-list';
 import { queryWorkersList } from '@/pages/resources/apis';
-import {
+import { ListItem as WokerListItem } from '@/pages/resources/config/types';
-  GPUDeviceItem,
-  ListItem as WokerListItem
-} from '@/pages/resources/config/types';
 import { IS_FIRST_LOGIN, readState } from '@/utils/localstore';
 import _ from 'lodash';
 import qs from 'query-string';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import {
   MODELS_API,
   MODEL_INSTANCE_API,
@@ -21,8 +18,11 @@ import {
 import TableList from './components/table-list';
 import { backendOptionsMap } from './config';
 import { ListItem } from './config/types';
+import { useGenerateModelFileOptions } from './hooks';
 
 const Models: React.FC = () => {
+  const { getModelFileList, generateModelFileOptions } =
+    useGenerateModelFileOptions();
   const { setChunkRequest, createAxiosToken } = useSetChunkRequest();
   const { setChunkRequest: setModelInstanceChunkRequest } =
     useSetChunkRequest();
@@ -42,8 +42,8 @@ const Models: React.FC = () => {
   });
 
   const [catalogList, setCatalogList] = useState<any[]>([]);
-  const [gpuDeviceList, setGpuDeviceList] = useState<GPUDeviceItem[]>([]);
   const [workerList, setWorkerList] = useState<WokerListItem[]>([]);
+  const [modelFileOptions, setModelFileOptions] = useState<any[]>([]);
   const chunkRequedtRef = useRef<any>();
   const chunkInstanceRequedtRef = useRef<any>();
   const isPageHidden = useRef(false);
@@ -350,11 +350,16 @@ const Models: React.FC = () => {
     };
 
     const init = async () => {
-      const [modelRes, workerRes, cList] = await Promise.all([
+      const [modelRes, workerRes, cList, modelFileList] = await Promise.all([
         getTableData(),
         getWorkerList(),
-        getCataLogList()
+        getCataLogList(),
+        getModelFileList()
       ]);
+      const dataList = generateModelFileOptions(
+        modelFileList,
+        workerRes.items || []
+      );
       setDataSource({
         dataList: modelRes.items || [],
         loading: false,
@@ -364,6 +369,7 @@ const Models: React.FC = () => {
       });
       setWorkerList(workerRes.items || []);
       setCatalogList(cList);
+      setModelFileOptions(dataList);
 
       clearTimeout(timer);
       timer = setTimeout(() => {
@@ -431,8 +437,8 @@ const Models: React.FC = () => {
         loadend={dataSource.loadend}
         total={dataSource.total}
         deleteIds={dataSource.deletedIds}
-        gpuDeviceList={gpuDeviceList}
         workerList={workerList}
+        modelFileOptions={modelFileOptions}
         catalogList={catalogList}
       ></TableList>
     </TableContext.Provider>

src/pages/resources/apis/index.ts

@@ -1,8 +1,9 @@
 import { request } from '@umijs/max';
-import { GPUDeviceItem, ListItem } from '../config/types';
+import { GPUDeviceItem, ListItem, ModelFile } from '../config/types';
 
 export const WORKERS_API = '/workers';
 export const GPU_DEVICES_API = '/gpu-devices';
+export const MODEL_FILES_API = '/model-files';
 
 export async function queryWorkersList(params: Global.SearchParams) {
   return request<Global.PageResponse<ListItem>>(`${WORKERS_API}`, {
@@ -36,3 +37,39 @@ export async function updateWorker(id: string | number, data: any) {
     data
   });
 }
+
+export async function queryModelFilesList(params: Global.SearchParams) {
+  return request<Global.PageResponse<ModelFile>>(MODEL_FILES_API, {
+    method: 'GET',
+    params
+  });
+}
+
+export async function deleteModelFile(id: string | number) {
+  return request<Global.PageResponse<ModelFile>>(`${MODEL_FILES_API}/${id}`, {
+    method: 'DELETE'
+  });
+}
+
+export async function updateModelFile(id: string | number, data: any) {
+  return request<Global.PageResponse<ModelFile>>(`${MODEL_FILES_API}/${id}`, {
+    method: 'PUT',
+    data
+  });
+}
+
+export async function downloadModelFile(data: any) {
+  return request<Global.PageResponse<ModelFile>>(MODEL_FILES_API, {
+    method: 'POST',
+    data
+  });
+}
+
+export async function retryDownloadModelFile(id: string | number) {
+  return request<Global.PageResponse<ModelFile>>(
+    `${MODEL_FILES_API}/${id}/reset`,
+    {
+      method: 'POST'
+    }
+  );
+}

src/pages/resources/components/model-files.tsx

@@ -1,9 +1,11 @@
 import AutoTooltip from '@/components/auto-tooltip';
+import CopyButton from '@/components/copy-button';
 import DeleteModal from '@/components/delete-modal';
 import DropDownActions from '@/components/drop-down-actions';
 import DropdownButtons from '@/components/drop-down-buttons';
 import PageTools from '@/components/page-tools';
 import StatusTag from '@/components/status-tag';
+import useAppUtils from '@/hooks/use-app-utils';
 import useTableFetch from '@/hooks/use-table-fetch';
 import { modelSourceMap } from '@/pages/llmodels/config';
 import {
@@ -13,14 +15,66 @@ import {
   onLineSourceOptions
 } from '@/pages/llmodels/config/button-actions';
 import DownloadModal from '@/pages/llmodels/download';
+import { convertFileSize } from '@/utils';
 import { DeleteOutlined, DownOutlined, SyncOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button, ConfigProvider, Empty, Input, Space, Table } from 'antd';
 import dayjs from 'dayjs';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
-import { deleteWorker, queryWorkersList } from '../apis';
+import {
-import { WorkerStatusMapValue, status } from '../config';
+  MODEL_FILES_API,
-import { ModelFile as ListItem } from '../config/types';
+  deleteModelFile,
+  downloadModelFile,
+  queryModelFilesList,
+  queryWorkersList,
+  retryDownloadModelFile
+} from '../apis';
+import {
+  ModelfileState,
+  ModelfileStateMap,
+  ModelfileStateMapValue,
+  WorkerStatusMap
+} from '../config';
+import {
+  ModelFile as ListItem,
+  ListItem as WorkerListItem
+} from '../config/types';
+
+const getWorkerName = (
+  id: number,
+  workersList: Global.BaseOption<number>[]
+) => {
+  const worker = workersList.find((item) => item.value === id);
+  return worker?.label || '';
+};
+const InstanceStatusTag = (props: { data: ListItem }) => {
+  const { data } = props;
+  if (!data.state) {
+    return null;
+  }
+  return (
+    <StatusTag
+      download={
+        data.state === ModelfileStateMap.Downloading
+          ? { percent: data.download_progress }
+          : undefined
+      }
+      statusValue={{
+        status:
+          data.state === ModelfileStateMap.Downloading &&
+          data.download_progress === 100
+            ? ModelfileState[ModelfileStateMap.Ready]
+            : ModelfileState[data.state],
+        text: ModelfileStateMapValue[data.state],
+        message:
+          data.state === ModelfileStateMap.Downloading &&
+          data.download_progress === 100
+            ? ''
+            : data.state_message
+      }}
+    />
+  );
+};
 
 const ModelFiles = () => {
   const {
@@ -35,12 +89,18 @@ const ModelFiles = () => {
     handleSearch,
     handleNameChange
   } = useTableFetch<ListItem>({
-    fetchAPI: queryWorkersList,
+    fetchAPI: queryModelFilesList,
-    deleteAPI: deleteWorker,
+    deleteAPI: deleteModelFile,
-    contentForDelete: 'worker'
+    API: MODEL_FILES_API,
+    watch: true,
+    contentForDelete: 'resources.modelfiles.modelfile'
   });
 
   const intl = useIntl();
+  const { showSuccess } = useAppUtils();
+  const [workersList, setWorkersList] = useState<Global.BaseOption<number>[]>(
+    []
+  );
   const [downloadModalStatus, setDownlaodMoalStatus] = useState<{
     show: boolean;
     width: number | string;
@@ -53,12 +113,46 @@ const ModelFiles = () => {
     gpuOptions: []
   });
 
-  const handleSelect = (val: any, record: ListItem) => {
+  useEffect(() => {
+    const fetchWorkerList = async () => {
+      try {
+        const res = await queryWorkersList({
+          page: 1,
+          perPage: 100
+        });
+
+        const list = res.items
+          ?.map((item: WorkerListItem) => {
+            return {
+              ...item,
+              value: item.id,
+              label: item.name
+            };
+          })
+          .filter(
+            (item: WorkerListItem) => item.state === WorkerStatusMap.ready
+          );
+        setWorkersList(list);
+      } catch (error) {
+        // console.log('error', error);
+      }
+    };
+    fetchWorkerList();
+  }, []);
+
+  const handleSelect = async (val: any, record: ListItem) => {
+    try {
       if (val === 'delete') {
         handleDelete({
           ...record,
           name: record.local_path
         });
+      } else if (val === 'retry') {
+        await retryDownloadModelFile(record.id);
+        showSuccess();
+      }
+    } catch (error) {
+      // console.log('error', error);
     }
   };
 
@@ -88,30 +182,47 @@ const ModelFiles = () => {
     });
   };
 
-  const handleDownload = (data: any) => {
+  const handleDownload = async (data: any) => {
-    console.log('download:', data);
+    try {
+      await downloadModelFile(data);
+      setDownlaodMoalStatus({
+        ...downloadModalStatus,
+        show: false
+      });
+      showSuccess();
+    } catch (error) {
+      // console.log('error', error);
+    }
   };
 
   const columns = [
     {
-      title: 'Path',
+      title: intl.formatMessage({ id: 'resources.modelfiles.form.path' }),
-      dataIndex: 'local_path',
+      dataIndex: 'resolved_paths',
       width: 240,
       render: (text: string, record: ListItem) => {
         return (
+          record.resolved_paths?.length > 0 && (
+            <span className="flex-center">
               <AutoTooltip ghost maxWidth={240}>
-            <span>{record.local_path}</span>
+                <span>{record.resolved_paths?.[0]}</span>
               </AutoTooltip>
+              <CopyButton
+                text={record.resolved_paths?.[0]}
+                type="link"
+              ></CopyButton>
+            </span>
+          )
         );
       }
     },
     {
-      title: 'Size',
+      title: intl.formatMessage({ id: 'resources.modelfiles.size' }),
       dataIndex: 'size',
       render: (text: string, record: ListItem) => {
         return (
           <AutoTooltip ghost maxWidth={100}>
-            <span>{record.size}</span>
+            <span>{convertFileSize(record.size, 1)}</span>
           </AutoTooltip>
         );
       }
@@ -122,7 +233,7 @@ const ModelFiles = () => {
       render: (text: string, record: ListItem) => {
         return (
           <AutoTooltip ghost maxWidth={240}>
-            <span>{record.worker_name}</span>
+            <span>{getWorkerName(record.worker_id, workersList)}</span>
           </AutoTooltip>
         );
       }
@@ -140,15 +251,7 @@ const ModelFiles = () => {
       title: intl.formatMessage({ id: 'common.table.status' }),
       dataIndex: 'state',
       render: (text: string, record: ListItem) => {
-        return (
+        return <InstanceStatusTag data={record} />;
-          <StatusTag
-            statusValue={{
-              status: status[record.state] as any,
-              text: WorkerStatusMapValue[record.state],
-              message: record.state_message
-            }}
-          ></StatusTag>
-        );
       }
     },
     {
@@ -209,7 +312,7 @@ const ModelFiles = () => {
                 type="primary"
                 iconPosition="end"
               >
-                Download Model
+                {intl.formatMessage({ id: 'resources.modelfiles.download' })}
               </Button>
             </DropDownActions>
             <Button
@@ -250,11 +353,12 @@ const ModelFiles = () => {
       <DeleteModal ref={modalRef}></DeleteModal>
       <DownloadModal
         open={downloadModalStatus.show}
-        title={intl.formatMessage({ id: 'models.button.deploy' })}
+        title={intl.formatMessage({ id: 'resources.modelfiles.download' })}
         source={downloadModalStatus.source}
         width={downloadModalStatus.width}
         onCancel={handleDownloadCancel}
         onOk={handleDownload}
+        workersList={workersList}
       ></DownloadModal>
     </>
   );

src/pages/resources/config/index.ts

@@ -114,3 +114,21 @@ export const containerInstallOptions = [
   { label: 'Hygon DCU', value: 'dcu' },
   { label: 'CPU', value: 'cpu' }
 ];
+
+export const ModelfileStateMap = {
+  Error: 'error',
+  Downloading: 'downloading',
+  Ready: 'ready'
+};
+
+export const ModelfileStateMapValue = {
+  [ModelfileStateMap.Error]: 'Error',
+  [ModelfileStateMap.Downloading]: 'Downloading',
+  [ModelfileStateMap.Ready]: 'Ready'
+};
+
+export const ModelfileState: any = {
+  [ModelfileStateMap.Ready]: StatusMaps.success,
+  [ModelfileStateMap.Error]: StatusMaps.error,
+  [ModelfileStateMap.Downloading]: StatusMaps.transitioning
+};

src/pages/resources/config/types.ts

@@ -99,17 +99,31 @@ export interface ListItem {
 
 export interface ModelFile {
   source: string;
-  size: number;
-  id: number;
-  created_at: string;
-  worker_name: string;
   huggingface_repo_id: string;
   huggingface_filename: string;
   ollama_library_model_name: string;
   model_scope_model_id: string;
   model_scope_file_path: string;
   local_path: string;
+  local_dir: string;
+  worker_id: number;
+  size: number;
   download_progress: number;
+  resolved_paths: string[];
   state: string;
   state_message: string;
+  id: number;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface ModelFileFormData {
+  source: string;
+  huggingface_repo_id: string;
+  huggingface_filename: string;
+  ollama_library_model_name: string;
+  model_scope_model_id: string;
+  model_scope_file_path: string;
+  local_path: string;
+  local_dir: string;
 }

src/pages/resources/index.tsx

@@ -4,6 +4,7 @@ import type { TabsProps } from 'antd';
 import { useCallback, useState } from 'react';
 import styled from 'styled-components';
 import GPUs from './components/gpus';
+import ModelFiles from './components/model-files';
 import Workers from './components/workers';
 
 const Wrapper = styled.div`
@@ -12,6 +13,11 @@ const Wrapper = styled.div`
   }
 `;
 
+const Resources = () => {
+  const [activeKey, setActiveKey] = useState('workers');
+
+  const intl = useIntl();
+
   const items: TabsProps['items'] = [
     {
       key: 'workers',
@@ -22,17 +28,13 @@ const items: TabsProps['items'] = [
       key: 'gpus',
       label: 'GPUs',
       children: <GPUs />
+    },
+    {
+      key: 'model-files',
+      label: intl.formatMessage({ id: 'resources.modelfiles.modelfile' }),
+      children: <ModelFiles />
     }
-  // {
-  //   key: 'model-files',
-  //   label: 'Model Files',
-  //   children: <ModelFiles />
-  // }
   ];
-const Resources = () => {
-  const [activeKey, setActiveKey] = useState('workers');
-
-  const intl = useIntl();
 
   const handleChangeTab = useCallback((key: string) => {
     setActiveKey(key);