chore: add model api

2025-03-25 12:33:29 +08:00
parent 1819649a3a
commit 05ef2b8eaa
23 changed files with 774 additions and 186 deletions
@@ -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;
@@ -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;
  }

@@ -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 { cloneDeep } from 'lodash';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { Cascader, Empty, Form } from 'antd';
+import _, { cloneDeep } from 'lodash';
+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> = (
-  props
-) => {
+const tag = (props: any) => {
+  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}
@@ -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;

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

@@ -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 {
@@ -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'
 };
@@ -55,6 +55,18 @@ export default {
    'Выберите метку для генерации команды и скопируйте её.',
  'resources.worker.script.install': 'Установка скриптом',
  'resources.worker.container.install': 'Установка контейнером (только Linux)',
-  '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>.`
+  '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>.`,
+  '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 ==========
@@ -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': '选择目标位置'
 };
@@ -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>
@@ -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>
      </>
    );
@@ -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>
            </>
@@ -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>
@@ -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,
-  {
-    label: 'models.form.localPath',
-    locale: true,
-    value: modelSourceMap.local_path_value,
-    key: 'local_path',
-    icon: icons.LocalPath
-  }
+  ...onLineSourceOptions
 ];

 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',
-    key: 'deploy',
-    icon: icons.ThunderboltOutlined
+    label: 'common.button.retry',
+    key: 'retry',
+    icon: icons.RetweetOutlined
  },
  {
    label: 'common.button.delete',
@@ -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>
@@ -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 { modelSourceMap, ollamaModelOptions } from '../config';
+import React, { forwardRef, useImperativeHandle, useMemo } from 'react';
+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 { onOk, source } = props;
+const TargetForm: React.FC<TargetFormProps> = forwardRef((props, ref) => {
+  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 &&
-        renderOllamaModelFields()}
-      <Form.Item
-        name="worker"
+      <Form.Item<FormData>
+        name="source"
        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;
@@ -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
+  };
+};
@@ -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 {
-  GPUDeviceItem,
-  ListItem as WokerListItem
-} from '@/pages/resources/config/types';
+import { 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>
@@ -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'
+    }
+  );
+}
@@ -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 { deleteWorker, queryWorkersList } from '../apis';
-import { WorkerStatusMapValue, status } from '../config';
-import { ModelFile as ListItem } from '../config/types';
+import { useEffect, useState } from 'react';
+import {
+  MODEL_FILES_API,
+  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,
-    deleteAPI: deleteWorker,
-    contentForDelete: 'worker'
+    fetchAPI: queryModelFilesList,
+    deleteAPI: deleteModelFile,
+    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) => {
-    if (val === 'delete') {
-      handleDelete({
-        ...record,
-        name: record.local_path
-      });
+  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) => {
-    console.log('download:', data);
+  const handleDownload = async (data: any) => {
+    try {
+      await downloadModelFile(data);
+      setDownlaodMoalStatus({
+        ...downloadModalStatus,
+        show: false
+      });
+      showSuccess();
+    } catch (error) {
+      // console.log('error', error);
+    }
  };

  const columns = [
    {
-      title: 'Path',
-      dataIndex: 'local_path',
+      title: intl.formatMessage({ id: 'resources.modelfiles.form.path' }),
+      dataIndex: 'resolved_paths',
      width: 240,
      render: (text: string, record: ListItem) => {
        return (
-          <AutoTooltip ghost maxWidth={240}>
-            <span>{record.local_path}</span>
-          </AutoTooltip>
+          record.resolved_paths?.length > 0 && (
+            <span className="flex-center">
+              <AutoTooltip ghost maxWidth={240}>
+                <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 (
-          <StatusTag
-            statusValue={{
-              status: status[record.state] as any,
-              text: WorkerStatusMapValue[record.state],
-              message: record.state_message
-            }}
-          ></StatusTag>
-        );
+        return <InstanceStatusTag data={record} />;
      }
    },
    {
@@ -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>
    </>
  );
@@ -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
+};
@@ -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;
 }
@@ -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,28 +13,29 @@ const Wrapper = styled.div`
  }
 `;

-const items: TabsProps['items'] = [
-  {
-    key: 'workers',
-    label: 'Workers',
-    children: <Workers />
-  },
-  {
-    key: 'gpus',
-    label: 'GPUs',
-    children: <GPUs />
-  }
-  // {
-  //   key: 'model-files',
-  //   label: 'Model Files',
-  //   children: <ModelFiles />
-  // }
-];
 const Resources = () => {
  const [activeKey, setActiveKey] = useState('workers');

  const intl = useIntl();

+  const items: TabsProps['items'] = [
+    {
+      key: 'workers',
+      label: 'Workers',
+      children: <Workers />
+    },
+    {
+      key: 'gpus',
+      label: 'GPUs',
+      children: <GPUs />
+    },
+    {
+      key: 'model-files',
+      label: intl.formatMessage({ id: 'resources.modelfiles.modelfile' }),
+      children: <ModelFiles />
+    }
+  ];
+
  const handleChangeTab = useCallback((key: string) => {
    setActiveKey(key);
  }, []);