feat: download model

src/components/drop-down-actions/index.tsx

@@ -1,34 +1,35 @@
-import * as icons from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
-import { Button, Dropdown, Space } from 'antd';
+import { Dropdown, DropDownProps } from 'antd';
-import type { MenuProps } from 'antd/es/menu';
+import React, { useMemo } from 'react';
-import react from 'react';
 
-type DropdownProps = {
+const DropDownActions: React.FC<DropDownProps> = (props) => {
-  trigger?: Array<'click' | 'hover' | 'contextMenu'>;
+  const {
-  items: MenuProps['items'];
+    menu,
-  onClick: (e: any) => void;
+    trigger = ['hover'],
-};
+    placement = 'bottomRight',
-const renderIcon = (icon: string) => {
+    children,
-  if (!icon) {
+    ...rest
-    return null;
+  } = props;
-  }
+  const intl = useIntl();
-  // @ts-ignore
+
-  const Icon = icons[icon] as React.FC;
+  const items = useMemo(() => {
-  return react.createElement(Icon);
+    return menu?.items?.map((item: any) => ({
-};
+      ...item,
-const DropDownActions: React.FC<DropdownProps> = (props) => {
+      label: item.locale ? intl.formatMessage({ id: item.label }) : item.label
-  const { trigger, items, onClick } = props;
+    }));
+  }, [menu?.items, intl]);
   return (
-    <Space>
+    <Dropdown
-      <Dropdown menu={{ items, onClick }} trigger={trigger}>
+      menu={{
-        <Button
+        items: items,
-          onClick={(e) => e.preventDefault()}
+        onClick: menu?.onClick
-          style={{ fontSize: '14px' }}
+      }}
-          type="text"
+      trigger={trigger}
-          icon={renderIcon('MoreOutlined')}
+      placement={placement}
-        ></Button>
+      {...rest}
-      </Dropdown>
+    >
-    </Space>
+      {children}
+    </Dropdown>
   );
 };
 

src/components/seal-table/components/header-prefix.tsx

@@ -38,7 +38,7 @@ const HeaderPrefix: React.FC<HeaderPrefixProps> = (props) => {
     return (
       <div
         className="header-row-prefix-wrapper flex-center"
-        style={{ paddingLeft: 15 }}
+        style={{ paddingLeft: 14 }}
       >
         <span style={{ marginRight: 5 }}>
           {_.isBoolean(expandable) ? (

src/layouts/runtime.tsx

@@ -26,7 +26,7 @@ export function patchRoutes({ routes, initialState }) {
 
 export function renderMenuIcon(icon: string) {
   const upperIcon = formatIcon(icon);
-  console.log('upperIcon', upperIcon);
+  console.log('upperIcon', icon, upperIcon);
   if (icons[upperIcon] || icons[upperIcon + 'Outlined']) {
     return React.createElement(
       icons[upperIcon] || icons[upperIcon + 'Outlined']

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

@@ -1,14 +1,13 @@
 import { modelsExpandKeysAtom } from '@/atoms/models';
 import AutoTooltip from '@/components/auto-tooltip';
 import DeleteModal from '@/components/delete-modal';
+import DropDownActions from '@/components/drop-down-actions';
 import DropdownButtons from '@/components/drop-down-buttons';
-import IconFont from '@/components/icon-font';
 import { PageSize } from '@/components/logs-viewer/config';
 import PageTools from '@/components/page-tools';
 import SealTable from '@/components/seal-table';
 import { SealColumnProps } from '@/components/seal-table/types';
 import { PageAction } from '@/config';
-import HotKeys from '@/config/hotkeys';
 import useBodyScroll from '@/hooks/use-body-scroll';
 import useExpandedRowKeys from '@/hooks/use-expanded-row-keys';
 import useTableRowSelection from '@/hooks/use-table-row-selection';
@@ -24,18 +23,14 @@ import {
   writeState
 } from '@/utils/localstore/index';
 import {
-  DeleteOutlined,
   DownOutlined,
-  EditOutlined,
-  ExperimentOutlined,
   QuestionCircleOutlined,
   SyncOutlined
 } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
-import { useAccess, useIntl, useNavigate } from '@umijs/max';
+import { useIntl, useNavigate } from '@umijs/max';
 import {
   Button,
-  Dropdown,
   Empty,
   Input,
   Select,
@@ -47,8 +42,14 @@ import {
 import dayjs from 'dayjs';
 import { useAtom } from 'jotai';
 import _ from 'lodash';
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, {
-import { useHotkeys } from 'react-hotkeys-hook';
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from 'react';
 import {
   MODELS_API,
   MODEL_INSTANCE_API,
@@ -63,9 +64,16 @@ import {
   backendOptionsMap,
   getSourceRepoConfigValue,
   modelCategories,
-  modelCategoriesMap,
   modelSourceMap
 } from '../config';
+import {
+  ButtonList,
+  categoryToPathMap,
+  generateSource,
+  modalConfig,
+  setModelActionList,
+  sourceOptions
+} from '../config/button-actions';
 import { FormData, ListItem, ModelInstanceListItem } from '../config/types';
 import { useGenerateFormEditInitialValues } from '../hooks';
 import DeployModal from './deploy-modal';
@@ -100,90 +108,19 @@ interface ModelsProps {
   total: number;
 }
 
-const ActionList = [
+const getFormattedData = (record: any, extraData = {}) => ({
-  {
+  id: record.id,
-    label: 'common.button.edit',
+  data: {
-    key: 'edit',
+    ..._.omit(record, [
-    icon: <EditOutlined />
+      'id',
-  },
+      'ready_replicas',
-  {
+      'created_at',
-    label: 'models.openinplayground',
+      'updated_at',
-    key: 'chat',
+      'rowIndex'
-    icon: <ExperimentOutlined />
+    ]),
-  },
+    ...extraData
-  {
-    label: 'common.button.stop',
-    key: 'stop',
-    icon: <IconFont type="icon-stop1"></IconFont>
-  },
-  {
-    label: 'common.button.start',
-    key: 'start',
-    icon: <IconFont type="icon-outline-play"></IconFont>
-  },
-  {
-    label: 'common.button.delete',
-    key: 'delete',
-    props: {
-      danger: true
-    },
-    icon: <DeleteOutlined />
   }
-];
+});
-
-const ButtonList = [
-  {
-    label: 'common.button.start',
-    key: 'start',
-    icon: <IconFont type="icon-outline-play"></IconFont>
-  },
-  {
-    label: 'common.button.stop',
-    key: 'stop',
-    icon: <IconFont type="icon-stop1"></IconFont>
-  },
-  {
-    label: 'common.button.delete',
-    key: 'delete',
-    icon: <DeleteOutlined />,
-    props: {
-      danger: true
-    }
-  }
-];
-
-const generateSource = (record: ListItem) => {
-  if (record.source === modelSourceMap.modelscope_value) {
-    return `${modelSourceMap.modelScope}/${record.model_scope_model_id}`;
-  }
-  if (record.source === modelSourceMap.huggingface_value) {
-    return `${modelSourceMap.huggingface}/${record.huggingface_repo_id}`;
-  }
-  if (record.source === modelSourceMap.local_path_value) {
-    return `${record.local_path}`;
-  }
-  if (record.source === modelSourceMap.ollama_library_value) {
-    return `${modelSourceMap.ollama_library}/${record.ollama_library_model_name}`;
-  }
-  return '';
-};
-
-const setActionList = (record: ListItem) => {
-  return _.filter(ActionList, (action: any) => {
-    if (action.key === 'chat') {
-      return record.ready_replicas > 0;
-    }
-    if (action.key === 'start') {
-      return record.replicas === 0;
-    }
-
-    if (action.key === 'stop') {
-      return record.replicas > 0;
-    }
-
-    return true;
-  });
-};
 
 const Models: React.FC<ModelsProps> = ({
   handleNameChange,
@@ -218,7 +155,6 @@ const Models: React.FC<ModelsProps> = ({
   const [isFirstLogin, setIsFirstLogin] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [expandAtom, setExpandAtom] = useAtom(modelsExpandKeysAtom);
-  const access = useAccess();
   const intl = useIntl();
   const navigate = useNavigate();
   const rowSelection = useTableRowSelection();
@@ -270,69 +206,6 @@ const Models: React.FC<ModelsProps> = ({
     getFirstLoginState();
   }, [catalogList?.length]);
 
-  useHotkeys(
-    HotKeys.NEW1.join(','),
-    () => {
-      setOpenDeployModal({
-        show: true,
-        width: 'calc(100vw - 220px)',
-        source: modelSourceMap.huggingface_value,
-        gpuOptions: gpuDeviceList.current
-      });
-    },
-    {
-      preventDefault: true,
-      enabled: !openAddModal && !openDeployModal.show && !openLogModal
-    }
-  );
-
-  useHotkeys(
-    HotKeys.NEW3.join(','),
-    () => {
-      setOpenDeployModal({
-        show: true,
-        width: 'calc(100vw - 220px)',
-        source: modelSourceMap.modelscope_value,
-        gpuOptions: gpuDeviceList.current
-      });
-    },
-    {
-      preventDefault: true,
-      enabled: !openAddModal && !openDeployModal.show && !openLogModal
-    }
-  );
-
-  useHotkeys(
-    HotKeys.NEW2.join(','),
-    () => {
-      setOpenDeployModal({
-        show: true,
-        width: 600,
-        source: modelSourceMap.ollama_library_value,
-        gpuOptions: gpuDeviceList.current
-      });
-    },
-    {
-      preventDefault: true,
-      enabled: !openAddModal && !openDeployModal.show && !openLogModal
-    }
-  );
-  useHotkeys(
-    HotKeys.NEW4.join(','),
-    () => {
-      setOpenDeployModal({
-        show: true,
-        width: 600,
-        source: modelSourceMap.local_path_value,
-        gpuOptions: gpuDeviceList.current
-      });
-    },
-    {
-      preventDefault: true,
-      enabled: !openAddModal && !openDeployModal.show && !openLogModal
-    }
-  );
-
   useEffect(() => {
     if (deleteIds?.length) {
       rowSelection.removeSelectedKey(deleteIds);
@@ -346,39 +219,6 @@ const Models: React.FC<ModelsProps> = ({
     };
   }, []);
 
-  const sourceOptions = [
-    {
-      label: intl.formatMessage({ id: 'menu.models.modelCatalog' }),
-      value: 'catalog',
-      key: 'catalog',
-      icon: <IconFont type="icon-catalog"></IconFont>
-    },
-    {
-      label: 'Hugging Face',
-      value: modelSourceMap.huggingface_value,
-      key: 'huggingface',
-      icon: <IconFont type="icon-huggingface"></IconFont>
-    },
-    {
-      label: 'Ollama Library',
-      value: modelSourceMap.ollama_library_value,
-      key: 'ollama_library',
-      icon: <IconFont type="icon-ollama"></IconFont>
-    },
-    {
-      label: 'ModelScope',
-      value: modelSourceMap.modelscope_value,
-      key: 'modelscope',
-      icon: <IconFont type="icon-tu2"></IconFont>
-    },
-    {
-      label: intl.formatMessage({ id: 'models.form.localPath' }),
-      value: modelSourceMap.local_path_value,
-      key: 'local_path',
-      icon: <IconFont type="icon-hard-disk"></IconFont>
-    }
-  ];
-
   const setCurrentData = (data: ListItem) => {
     currentData.current = data;
   };
@@ -387,51 +227,21 @@ const Models: React.FC<ModelsProps> = ({
     setSortOrder(order);
   };
 
-  const handleOnCell = useCallback(async (record: any, dataIndex: string) => {
+  const handleOnCell = useCallback(async (record: any) => {
-    const params = {
+    try {
-      id: record.id,
+      await updateModel(getFormattedData(record));
-      data: _.omit(record, [
+      message.success(intl.formatMessage({ id: 'common.message.success' }));
-        'id',
+    } catch (error) {
-        'ready_replicas',
+      // ignore
-        'created_at',
+    }
-        'updated_at',
-        'rowIndex'
-      ])
-    };
-    await updateModel(params);
-    message.success(intl.formatMessage({ id: 'common.message.success' }));
   }, []);
 
   const handleStartModel = async (row: ListItem) => {
-    await updateModel({
+    await updateModel(getFormattedData(row, { replicas: 1 }));
-      id: row.id,
-      data: {
-        ..._.omit(row, [
-          'id',
-          'ready_replicas',
-          'created_at',
-          'updated_at',
-          'rowIndex'
-        ]),
-        replicas: 1
-      }
-    });
   };
 
   const handleStopModel = async (row: ListItem) => {
-    await updateModel({
+    await updateModel(getFormattedData(row, { replicas: 0 }));
-      id: row.id,
-      data: {
-        ..._.omit(row, [
-          'id',
-          'ready_replicas',
-          'created_at',
-          'updated_at',
-          'rowIndex'
-        ]),
-        replicas: 0
-      }
-    });
     removeExpandedRowKey([row.id]);
   };
 
@@ -538,25 +348,12 @@ const Models: React.FC<ModelsProps> = ({
   };
 
   const handleOpenPlayGround = (row: any) => {
-    if (row.categories?.includes(modelCategoriesMap.image)) {
+    for (const [category, path] of Object.entries(categoryToPathMap)) {
-      navigate(`/playground/text-to-image?model=${row.name}`);
+      console.log('category:', category, path);
-      return;
+      if (row.categories?.includes(category)) {
-    }
+        navigate(`${path}?model=${row.name}`);
-    if (row.categories?.includes(modelCategoriesMap.text_to_speech)) {
+        return;
-      navigate(`/playground/speech?model=${row.name}&type=tts`);
+      }
-      return;
-    }
-    if (row.categories?.includes(modelCategoriesMap.speech_to_text)) {
-      navigate(`/playground/speech?model=${row.name}&type=stt`);
-      return;
-    }
-    if (row.categories?.includes(modelCategoriesMap.reranker)) {
-      navigate(`/playground/rerank?model=${row.name}`);
-      return;
-    }
-    if (row.categories?.includes(modelCategoriesMap.embedding)) {
-      navigate(`/playground/embedding?model=${row.name}`);
-      return;
     }
     navigate(`/playground/chat?model=${row.name}`);
   };
@@ -694,43 +491,14 @@ const Models: React.FC<ModelsProps> = ({
   );
 
   const handleClickDropdown = (item: any) => {
-    if (item.key === 'huggingface') {
-      setOpenDeployModal({
-        show: true,
-        width: 'calc(100vw - 220px)',
-        source: modelSourceMap.huggingface_value,
-        gpuOptions: gpuDeviceList.current
-      });
-    }
-
-    if (item.key === 'ollama_library') {
-      setOpenDeployModal({
-        show: true,
-        width: 600,
-        source: modelSourceMap.ollama_library_value,
-        gpuOptions: gpuDeviceList.current
-      });
-    }
-
-    if (item.key === 'modelscope') {
-      setOpenDeployModal({
-        show: true,
-        width: 'calc(100vw - 220px)',
-        source: modelSourceMap.modelscope_value,
-        gpuOptions: gpuDeviceList.current
-      });
-    }
-
-    if (item.key === 'local_path') {
-      setOpenDeployModal({
-        show: true,
-        width: 600,
-        source: modelSourceMap.local_path_value,
-        gpuOptions: gpuDeviceList.current
-      });
-    }
     if (item.key === 'catalog') {
       navigate('/models/catalog');
+      return;
+    }
+
+    const config = modalConfig[item.key];
+    if (config) {
+      setOpenDeployModal({ ...config, gpuOptions: gpuDeviceList.current });
     }
   };
 
@@ -847,7 +615,7 @@ const Models: React.FC<ModelsProps> = ({
         span: 4,
         render: (text, record) => (
           <DropdownButtons
-            items={setActionList(record)}
+            items={setModelActionList(record)}
             onSelect={(val) => handleSelect(val, record)}
           />
         )
@@ -966,7 +734,7 @@ const Models: React.FC<ModelsProps> = ({
           }
           right={
             <Space size={20}>
-              <Dropdown
+              <DropDownActions
                 menu={{
                   items: sourceOptions,
                   onClick: handleClickDropdown
@@ -981,7 +749,7 @@ const Models: React.FC<ModelsProps> = ({
                 >
                   {intl?.formatMessage?.({ id: 'models.button.deploy' })}
                 </Button>
-              </Dropdown>
+              </DropDownActions>
               <DropdownButtons
                 items={ButtonList}
                 extra={

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

@@ -0,0 +1,234 @@
+import IconFont from '@/components/icon-font';
+import HotKeys from '@/config/hotkeys';
+import {
+  DeleteOutlined,
+  EditOutlined,
+  ExperimentOutlined
+} from '@ant-design/icons';
+import _ from 'lodash';
+import React from 'react';
+import { modelCategoriesMap, modelSourceMap } from './index';
+
+const icons = {
+  EditOutlined: React.createElement(EditOutlined),
+  ExperimentOutlined: React.createElement(ExperimentOutlined),
+  DeleteOutlined: React.createElement(DeleteOutlined),
+  Stop: React.createElement(IconFont, { type: 'icon-stop1' }),
+  Play: React.createElement(IconFont, { type: 'icon-outline-play' }),
+  Catalog: React.createElement(IconFont, { type: 'icon-catalog' }),
+  HF: React.createElement(IconFont, { type: 'icon-huggingface' }),
+  Ollama: React.createElement(IconFont, { type: 'icon-ollama' }),
+  ModelScope: React.createElement(IconFont, { type: 'icon-tu2' }),
+  LocalPath: React.createElement(IconFont, { type: 'icon-hard-disk' })
+};
+
+export const modalConfig: Record<
+  string,
+  { show: boolean; width: string | number; source: any }
+> = {
+  huggingface: {
+    show: true,
+    width: 'calc(100vw - 220px)',
+    source: modelSourceMap.huggingface_value
+  },
+  ollama_library: {
+    show: true,
+    width: 600,
+    source: modelSourceMap.ollama_library_value
+  },
+  modelscope: {
+    show: true,
+    width: 'calc(100vw - 220px)',
+    source: modelSourceMap.modelscope_value
+  },
+  local_path: {
+    show: true,
+    width: 600,
+    source: modelSourceMap.local_path_value
+  }
+};
+
+interface ActionItem {
+  label: string;
+  key: string;
+  icon: React.ReactNode;
+  props?: {
+    danger?: boolean;
+  };
+}
+
+export const ActionList: ActionItem[] = [
+  {
+    label: 'common.button.edit',
+    key: 'edit',
+    icon: icons.EditOutlined
+  },
+  {
+    label: 'models.openinplayground',
+    key: 'chat',
+    icon: icons.ExperimentOutlined
+  },
+  {
+    label: 'common.button.stop',
+    key: 'stop',
+    icon: icons.Stop
+  },
+  {
+    label: 'common.button.start',
+    key: 'start',
+    icon: icons.Play
+  },
+  {
+    label: 'common.button.delete',
+    key: 'delete',
+    props: {
+      danger: true
+    },
+    icon: icons.DeleteOutlined
+  }
+];
+
+export const ButtonList = [
+  {
+    label: 'common.button.start',
+    key: 'start',
+    icon: icons.Play
+  },
+  {
+    label: 'common.button.stop',
+    key: 'stop',
+    icon: icons.Stop
+  },
+  {
+    label: 'common.button.delete',
+    key: 'delete',
+    icon: icons.DeleteOutlined,
+    props: {
+      danger: true
+    }
+  }
+];
+
+export const onLineSourceOptions = [
+  {
+    label: 'Hugging Face',
+    locale: false,
+    value: modelSourceMap.huggingface_value,
+    key: 'huggingface',
+    icon: icons.HF
+  },
+  {
+    label: 'Ollama Library',
+    locale: false,
+    value: modelSourceMap.ollama_library_value,
+    key: 'ollama_library',
+    icon: icons.Ollama
+  },
+  {
+    label: 'ModelScope',
+    locale: false,
+    value: modelSourceMap.modelscope_value,
+    key: 'modelscope',
+    icon: icons.ModelScope
+  }
+];
+
+export const sourceOptions = [
+  {
+    label: 'menu.models.modelCatalog',
+    locale: true,
+    value: 'catalog',
+    key: 'catalog',
+    icon: icons.Catalog
+  },
+  ...onLineSourceOptions,
+  {
+    label: 'models.form.localPath',
+    locale: true,
+    value: modelSourceMap.local_path_value,
+    key: 'local_path',
+    icon: icons.LocalPath
+  }
+];
+
+export const generateSource = (record: any) => {
+  if (record.source === modelSourceMap.modelscope_value) {
+    return `${modelSourceMap.modelScope}/${record.model_scope_model_id}`;
+  }
+  if (record.source === modelSourceMap.huggingface_value) {
+    return `${modelSourceMap.huggingface}/${record.huggingface_repo_id}`;
+  }
+  if (record.source === modelSourceMap.local_path_value) {
+    return `${record.local_path}`;
+  }
+  if (record.source === modelSourceMap.ollama_library_value) {
+    return `${modelSourceMap.ollama_library}/${record.ollama_library_model_name}`;
+  }
+  return '';
+};
+
+export const setModelActionList = (record: any) => {
+  return _.filter(ActionList, (action: any) => {
+    if (action.key === 'chat') {
+      return record.ready_replicas > 0;
+    }
+    if (action.key === 'start') {
+      return record.replicas === 0;
+    }
+
+    if (action.key === 'stop') {
+      return record.replicas > 0;
+    }
+
+    return true;
+  });
+};
+
+export const categoryToPathMap: Record<string, string> = {
+  [modelCategoriesMap.llm]: '/playground/chat',
+  [modelCategoriesMap.image]: '/playground/text-to-image',
+  [modelCategoriesMap.text_to_speech]: '/playground/speech?type=tts',
+  [modelCategoriesMap.speech_to_text]: '/playground/speech?type=stt',
+  [modelCategoriesMap.reranker]: '/playground/rerank',
+  [modelCategoriesMap.embedding]: '/playground/embedding'
+};
+
+export const hotkeyConfigs = [
+  {
+    keys: HotKeys.NEW1,
+    width: 'calc(100vw - 220px)',
+    source: modelSourceMap.huggingface_value
+  },
+  {
+    keys: HotKeys.NEW3,
+    width: 'calc(100vw - 220px)',
+    source: modelSourceMap.modelscope_value
+  },
+  {
+    keys: HotKeys.NEW2,
+    width: 600,
+    source: modelSourceMap.ollama_library_value
+  },
+  { keys: HotKeys.NEW4, width: 600, source: modelSourceMap.local_path_value }
+];
+
+/**
+ * hotkeyConfigs.map(({ keys, width, source }) =>
+       useHotkeys(
+         keys.join(','),
+         () => {
+           setOpenDeployModal({
+             show: true,
+             width,
+             source,
+             gpuOptions: gpuDeviceList.current
+           });
+         },
+         {
+           preventDefault: true,
+           enabled: !openAddModal && !openDeployModal.show && !openLogModal
+         }
+       )
+     );
+ * 
+ */

src/pages/llmodels/download/index.tsx

@@ -0,0 +1,202 @@
+import ModalFooter from '@/components/modal-footer';
+import { CloseOutlined } from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
+import { Button, Drawer } from 'antd';
+import { debounce } from 'lodash';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import ColumnWrapper from '../components/column-wrapper';
+import HFModelFile from '../components/hf-model-file';
+import ModelCard from '../components/model-card';
+import SearchModel from '../components/search-model';
+import Separator from '../components/separator';
+import TitleWrapper from '../components/title-wrapper';
+import { modelSourceMap } from '../config';
+import { FormData } from '../config/types';
+import TargetForm from './target-form';
+
+type AddModalProps = {
+  title: string;
+  open: boolean;
+  source: string;
+  width?: string | number;
+  onOk: (values: FormData) => void;
+  onCancel: () => void;
+};
+
+const DownloadModel: React.FC<AddModalProps> = (props) => {
+  const { title, open, onOk, onCancel, source, width = 600 } = props || {};
+  const SEARCH_SOURCE = [
+    modelSourceMap.huggingface_value,
+    modelSourceMap.modelscope_value
+  ];
+
+  const form = useRef<any>({});
+  const intl = useIntl();
+  const [selectedModel, setSelectedModel] = useState<any>({});
+  const [collapsed, setCollapsed] = useState<boolean>(false);
+  const [isGGUF, setIsGGUF] = useState<boolean>(false);
+  const modelFileRef = useRef<any>(null);
+
+  const handleSelectModelFile = useCallback((item: any) => {
+    form.current?.setFieldValue?.('file_name', item.fakeName);
+  }, []);
+
+  const handleOnSelectModel = (item: any) => {
+    setSelectedModel(item);
+  };
+
+  const handleSumit = () => {
+    form.current?.submit?.();
+  };
+
+  const debounceFetchModelFiles = debounce(() => {
+    modelFileRef.current?.fetchModelFiles?.();
+  }, 300);
+
+  const handleSetIsGGUF = (flag: boolean) => {
+    setIsGGUF(flag);
+    if (flag) {
+      debounceFetchModelFiles();
+    }
+  };
+
+  const handleCancel = useCallback(() => {
+    onCancel?.();
+  }, [onCancel]);
+
+  useEffect(() => {
+    handleSelectModelFile({ fakeName: '' });
+  }, [selectedModel]);
+
+  useEffect(() => {
+    if (!open) {
+      setIsGGUF(false);
+    } else if (source === modelSourceMap.ollama_library_value) {
+      setIsGGUF(true);
+    }
+
+    return () => {
+      setSelectedModel({});
+    };
+  }, [open, source]);
+
+  return (
+    <Drawer
+      title={
+        <div className="flex-between flex-center">
+          <span
+            style={{
+              color: 'var(--ant-color-text)',
+              fontWeight: 'var(--font-weight-medium)',
+              fontSize: 'var(--font-size-middle)'
+            }}
+          >
+            Download Model
+          </span>
+          <Button type="text" size="small" onClick={handleCancel}>
+            <CloseOutlined></CloseOutlined>
+          </Button>
+        </div>
+      }
+      open={open}
+      onClose={handleCancel}
+      destroyOnClose={true}
+      closeIcon={false}
+      maskClosable={false}
+      keyboard={false}
+      zIndex={2000}
+      styles={{
+        body: {
+          height: 'calc(100vh - 57px)',
+          padding: '16px 0',
+          overflowX: 'hidden'
+        },
+        content: {
+          borderRadius: '6px 0 0 6px'
+        }
+      }}
+      width={width}
+      footer={false}
+    >
+      <div style={{ display: 'flex', height: '100%' }}>
+        {SEARCH_SOURCE.includes(props.source) && (
+          <>
+            <div
+              style={{
+                display: 'flex',
+                flex: 1,
+                maxWidth: '33.33%'
+              }}
+            >
+              <ColumnWrapper>
+                <SearchModel
+                  modelSource={props.source}
+                  onSelectModel={handleOnSelectModel}
+                ></SearchModel>
+              </ColumnWrapper>
+              <Separator></Separator>
+            </div>
+            <div
+              style={{
+                display: 'flex',
+                flex: 1,
+                maxWidth: '33.33%'
+              }}
+            >
+              <ColumnWrapper>
+                <ModelCard
+                  selectedModel={selectedModel}
+                  onCollapse={setCollapsed}
+                  collapsed={collapsed}
+                  modelSource={props.source}
+                  setIsGGUF={handleSetIsGGUF}
+                ></ModelCard>
+                {isGGUF && (
+                  <HFModelFile
+                    ref={modelFileRef}
+                    selectedModel={selectedModel}
+                    modelSource={props.source}
+                    onSelectFile={handleSelectModelFile}
+                    collapsed={collapsed}
+                  ></HFModelFile>
+                )}
+              </ColumnWrapper>
+              <Separator></Separator>
+            </div>
+          </>
+        )}
+        <div style={{ display: 'flex', flex: 1, maxWidth: '100%' }}>
+          <ColumnWrapper
+            paddingBottom={50}
+            footer={
+              <>
+                <ModalFooter
+                  onCancel={handleCancel}
+                  onOk={handleSumit}
+                  okText={intl.formatMessage({ id: 'common.button.download' })}
+                  style={{
+                    padding: '16px 24px',
+                    display: 'flex',
+                    justifyContent: 'flex-end'
+                  }}
+                ></ModalFooter>
+              </>
+            }
+          >
+            <>
+              {SEARCH_SOURCE.includes(source) && (
+                <TitleWrapper>
+                  Select Target
+                  <span style={{ display: 'flex', height: 24 }}></span>
+                </TitleWrapper>
+              )}
+              <TargetForm onOk={onOk} source={source}></TargetForm>
+            </>
+          </ColumnWrapper>
+        </div>
+      </div>
+    </Drawer>
+  );
+};
+
+export default DownloadModel;

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

@@ -0,0 +1,122 @@
+import IconFont from '@/components/icon-font';
+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 { ModelFile 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';
+
+interface TargetFormProps {
+  source: string;
+  onOk: (values: any) => void;
+}
+
+const TargetForm: React.FC<TargetFormProps> = (props) => {
+  const { onOk, source } = props;
+  const intl = useIntl();
+  const [form] = Form.useForm();
+
+  const handleOk = (values: any) => {
+    onOk(values);
+  };
+
+  const renderOllamaModelFields = () => {
+    return (
+      <>
+        <Form.Item<FormData>
+          name="ollama_library_model_name"
+          key="ollama_library_model_name"
+          rules={[
+            {
+              required: true,
+              message: intl.formatMessage(
+                {
+                  id: 'common.form.rule.input'
+                },
+                { name: intl.formatMessage({ id: 'models.table.name' }) }
+              )
+            }
+          ]}
+        >
+          <SealAutoComplete
+            filterOption
+            defaultActiveFirstOption
+            disabled={false}
+            options={ollamaModelOptions}
+            description={
+              <span>
+                <span>
+                  {intl.formatMessage({ id: 'models.form.ollamalink' })}
+                </span>
+                <Typography.Link
+                  className="flex-center"
+                  href="https://www.ollama.com/library"
+                  target="_blank"
+                >
+                  <IconFont
+                    type="icon-external-link"
+                    className="font-size-14"
+                  ></IconFont>
+                </Typography.Link>
+              </span>
+            }
+            label={intl.formatMessage({ id: 'model.form.ollama.model' })}
+            placeholder={intl.formatMessage({ id: 'model.form.ollamaholder' })}
+            required
+          ></SealAutoComplete>
+        </Form.Item>
+      </>
+    );
+  };
+
+  return (
+    <Form
+      name="deployModel"
+      form={form}
+      onFinish={handleOk}
+      preserve={false}
+      style={{ padding: '16px 24px' }}
+      clearOnDestroy={true}
+      initialValues={{}}
+    >
+      {source === modelSourceMap.ollama_library_value &&
+        renderOllamaModelFields()}
+      <Form.Item
+        name="worker"
+        rules={[
+          {
+            required: true,
+            message: intl.formatMessage(
+              {
+                id: 'common.form.rule.select'
+              },
+              { name: intl.formatMessage({ id: 'models.form.source' }) }
+            )
+          }
+        ]}
+      >
+        {<SealSelect label="Worker" options={[]} required></SealSelect>}
+      </Form.Item>
+      <Form.Item
+        name="local_path"
+        rules={[
+          {
+            required: true,
+            message: intl.formatMessage(
+              {
+                id: 'common.form.rule.input'
+              },
+              { name: intl.formatMessage({ id: 'common.table.name' }) }
+            )
+          }
+        ]}
+      >
+        <SealInput.Input label={'Path'} required></SealInput.Input>
+      </Form.Item>
+    </Form>
+  );
+};
+
+export default TargetForm;

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

@@ -0,0 +1,305 @@
+import AutoTooltip from '@/components/auto-tooltip';
+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 useTableFetch from '@/hooks/use-table-fetch';
+import { modelSourceMap } from '@/pages/llmodels/config';
+import {
+  modalConfig,
+  onLineSourceOptions
+} from '@/pages/llmodels/config/button-actions';
+import DownloadModal from '@/pages/llmodels/download';
+import {
+  DeleteOutlined,
+  DownOutlined,
+  SyncOutlined,
+  ThunderboltOutlined
+} from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
+import React, {
+  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';
+
+const ActionList = [
+  {
+    label: 'common.button.deploy',
+    key: 'deploy',
+    icon: <ThunderboltOutlined />
+  },
+  {
+    label: 'common.button.delete',
+    key: 'delete',
+    props: {
+      danger: true
+    },
+    icon: <DeleteOutlined />
+  }
+];
+
+const generateSource = (record: ListItem) => {
+  if (record.source === modelSourceMap.modelscope_value) {
+    return `${modelSourceMap.modelScope}/${record.model_scope_model_id}`;
+  }
+  if (record.source === modelSourceMap.huggingface_value) {
+    return `${modelSourceMap.huggingface}/${record.huggingface_repo_id}`;
+  }
+  if (record.source === modelSourceMap.local_path_value) {
+    return `${record.local_path}`;
+  }
+  if (record.source === modelSourceMap.ollama_library_value) {
+    return `${modelSourceMap.ollama_library}/${record.ollama_library_model_name}`;
+  }
+  return '';
+};
+
+const ModelFiles: React.FC = () => {
+  const {
+    dataSource,
+    rowSelection,
+    queryParams,
+    modalRef,
+    handleDelete,
+    handleDeleteBatch,
+    handlePageChange,
+    handleTableChange,
+    handleSearch,
+    handleNameChange
+  } = useTableFetch<ListItem>({
+    fetchAPI: queryWorkersList,
+    deleteAPI: deleteWorker,
+    contentForDelete: 'worker'
+  });
+
+  const intl = useIntl();
+  const [downloadModalStatus, setDownlaodMoalStatus] = useState<{
+    show: boolean;
+    width: number | string;
+    source: string;
+    gpuOptions: any[];
+  }>({
+    show: false,
+    width: 600,
+    source: modelSourceMap.huggingface_value,
+    gpuOptions: []
+  });
+
+  const handleSelect = (val: any, record: ListItem) => {
+    if (val === 'delete') {
+      handleDelete({
+        ...record,
+        name: record.local_path
+      });
+    }
+  };
+
+  const renderEmpty = (type?: string) => {
+    if (type !== 'Table') return;
+    if (
+      !dataSource.loading &&
+      dataSource.loadend &&
+      !dataSource.dataList.length
+    ) {
+      return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}></Empty>;
+    }
+    return <div></div>;
+  };
+
+  const handleClickDropdown = (item: any) => {
+    const config = modalConfig[item.key];
+    if (config) {
+      setDownlaodMoalStatus({ ...config, gpuOptions: [] });
+    }
+  };
+
+  const handleDownloadCancel = () => {
+    setDownlaodMoalStatus({
+      ...downloadModalStatus,
+      show: false
+    });
+  };
+
+  const handleDownload = (data: any) => {
+    console.log('download:', data);
+  };
+
+  const columns = [
+    {
+      title: 'Path',
+      dataIndex: 'local_path',
+      width: 240,
+      render: (text: string, record: ListItem) => {
+        return (
+          <AutoTooltip ghost maxWidth={240}>
+            <span>{record.local_path}</span>
+          </AutoTooltip>
+        );
+      }
+    },
+    {
+      title: 'Size',
+      dataIndex: 'size',
+      render: (text: string, record: ListItem) => {
+        return (
+          <AutoTooltip ghost maxWidth={100}>
+            <span>{record.size}</span>
+          </AutoTooltip>
+        );
+      }
+    },
+    {
+      title: 'Worker',
+      dataIndex: 'worker_name',
+      render: (text: string, record: ListItem) => {
+        return (
+          <AutoTooltip ghost maxWidth={240}>
+            <span>{record.worker_name}</span>
+          </AutoTooltip>
+        );
+      }
+    },
+    {
+      title: intl.formatMessage({ id: 'models.form.source' }),
+      dataIndex: 'source',
+      render: (text: string, record: ListItem) => (
+        <span className="flex flex-column" style={{ width: '100%' }}>
+          <AutoTooltip ghost>{generateSource(record)}</AutoTooltip>
+        </span>
+      )
+    },
+    {
+      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>
+        );
+      }
+    },
+    {
+      title: intl.formatMessage({ id: 'common.table.createTime' }),
+      dataIndex: 'created_at',
+      sorter: false,
+      render: (text: number) => (
+        <AutoTooltip ghost>
+          {dayjs(text).format('YYYY-MM-DD HH:mm:ss')}
+        </AutoTooltip>
+      )
+    },
+    {
+      title: intl.formatMessage({ id: 'common.table.operation' }),
+      dataIndex: 'operation',
+      render: (text: string, record: ListItem) => (
+        <DropdownButtons
+          items={ActionList}
+          onSelect={(val) => handleSelect(val, record)}
+        ></DropdownButtons>
+      )
+    }
+  ];
+
+  return (
+    <>
+      <PageTools
+        marginBottom={10}
+        marginTop={10}
+        left={
+          <Space>
+            <Input
+              placeholder={intl.formatMessage({
+                id: 'common.filter.name'
+              })}
+              style={{ width: 300 }}
+              allowClear
+              onChange={handleNameChange}
+            ></Input>
+            <Button
+              type="text"
+              style={{ color: 'var(--ant-color-text-tertiary)' }}
+              onClick={handleSearch}
+              icon={<SyncOutlined></SyncOutlined>}
+            ></Button>
+          </Space>
+        }
+        right={
+          <Space size={20}>
+            <DropDownActions
+              menu={{
+                items: onLineSourceOptions,
+                onClick: handleClickDropdown
+              }}
+            >
+              <Button
+                icon={<DownOutlined></DownOutlined>}
+                type="primary"
+                iconPosition="end"
+              >
+                Download Model
+              </Button>
+            </DropDownActions>
+            <Button
+              icon={<DeleteOutlined />}
+              danger
+              onClick={handleDeleteBatch}
+              disabled={!rowSelection.selectedRowKeys.length}
+            >
+              <span>
+                {intl?.formatMessage?.({ id: 'common.button.delete' })}
+                {rowSelection.selectedRowKeys.length > 0 && (
+                  <span>({rowSelection.selectedRowKeys?.length})</span>
+                )}
+              </span>
+            </Button>
+          </Space>
+        }
+      ></PageTools>
+      <ConfigProvider renderEmpty={renderEmpty}>
+        <Table
+          columns={columns}
+          style={{ width: '100%' }}
+          dataSource={dataSource.dataList}
+          loading={dataSource.loading}
+          rowKey="id"
+          onChange={handleTableChange}
+          rowSelection={rowSelection}
+          pagination={{
+            showSizeChanger: true,
+            pageSize: queryParams.perPage,
+            current: queryParams.page,
+            total: dataSource.total,
+            hideOnSinglePage: queryParams.perPage === 10,
+            onChange: handlePageChange
+          }}
+        ></Table>
+      </ConfigProvider>
+      <DeleteModal ref={modalRef}></DeleteModal>
+      <DownloadModal
+        open={downloadModalStatus.show}
+        title={intl.formatMessage({ id: 'models.button.deploy' })}
+        source={downloadModalStatus.source}
+        width={downloadModalStatus.width}
+        onCancel={handleDownloadCancel}
+        onOk={handleDownload}
+      ></DownloadModal>
+    </>
+  );
+};
+
+export default ModelFiles;

src/pages/resources/config/types.ts

@@ -96,3 +96,20 @@ export interface ListItem {
   created_at: string;
   updated_at: string;
 }
+
+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;
+  download_progress: number;
+  state: string;
+  state_message: string;
+}

src/pages/resources/index.tsx

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