feat: download model
This commit is contained in:
jialin
@@ -1,34 +1,35 @@
|
||||
import * as icons from '@ant-design/icons';
|
||||
import { Button, Dropdown, Space } from 'antd';
|
||||
import type { MenuProps } from 'antd/es/menu';
|
||||
import react from 'react';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Dropdown, DropDownProps } from 'antd';
|
||||
import React, { useMemo } from 'react';
|
||||
|
||||
type DropdownProps = {
|
||||
trigger?: Array<'click' | 'hover' | 'contextMenu'>;
|
||||
items: MenuProps['items'];
|
||||
onClick: (e: any) => void;
|
||||
};
|
||||
const renderIcon = (icon: string) => {
|
||||
if (!icon) {
|
||||
return null;
|
||||
}
|
||||
// @ts-ignore
|
||||
const Icon = icons[icon] as React.FC;
|
||||
return react.createElement(Icon);
|
||||
};
|
||||
const DropDownActions: React.FC<DropdownProps> = (props) => {
|
||||
const { trigger, items, onClick } = props;
|
||||
const DropDownActions: React.FC<DropDownProps> = (props) => {
|
||||
const {
|
||||
menu,
|
||||
trigger = ['hover'],
|
||||
placement = 'bottomRight',
|
||||
children,
|
||||
...rest
|
||||
} = props;
|
||||
const intl = useIntl();
|
||||
|
||||
const items = useMemo(() => {
|
||||
return menu?.items?.map((item: any) => ({
|
||||
...item,
|
||||
label: item.locale ? intl.formatMessage({ id: item.label }) : item.label
|
||||
}));
|
||||
}, [menu?.items, intl]);
|
||||
return (
|
||||
<Space>
|
||||
<Dropdown menu={{ items, onClick }} trigger={trigger}>
|
||||
<Button
|
||||
onClick={(e) => e.preventDefault()}
|
||||
style={{ fontSize: '14px' }}
|
||||
type="text"
|
||||
icon={renderIcon('MoreOutlined')}
|
||||
></Button>
|
||||
</Dropdown>
|
||||
</Space>
|
||||
<Dropdown
|
||||
menu={{
|
||||
items: items,
|
||||
onClick: menu?.onClick
|
||||
}}
|
||||
trigger={trigger}
|
||||
placement={placement}
|
||||
{...rest}
|
||||
>
|
||||
{children}
|
||||
</Dropdown>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -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) ? (
|
||||
|
||||
@@ -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']
|
||||
|
||||
@@ -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 { useHotkeys } from 'react-hotkeys-hook';
|
||||
import React, {
|
||||
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 = [
|
||||
{
|
||||
label: 'common.button.edit',
|
||||
key: 'edit',
|
||||
icon: <EditOutlined />
|
||||
},
|
||||
{
|
||||
label: 'models.openinplayground',
|
||||
key: 'chat',
|
||||
icon: <ExperimentOutlined />
|
||||
},
|
||||
{
|
||||
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 getFormattedData = (record: any, extraData = {}) => ({
|
||||
id: record.id,
|
||||
data: {
|
||||
..._.omit(record, [
|
||||
'id',
|
||||
'ready_replicas',
|
||||
'created_at',
|
||||
'updated_at',
|
||||
'rowIndex'
|
||||
]),
|
||||
...extraData
|
||||
}
|
||||
];
|
||||
|
||||
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 params = {
|
||||
id: record.id,
|
||||
data: _.omit(record, [
|
||||
'id',
|
||||
'ready_replicas',
|
||||
'created_at',
|
||||
'updated_at',
|
||||
'rowIndex'
|
||||
])
|
||||
};
|
||||
await updateModel(params);
|
||||
message.success(intl.formatMessage({ id: 'common.message.success' }));
|
||||
const handleOnCell = useCallback(async (record: any) => {
|
||||
try {
|
||||
await updateModel(getFormattedData(record));
|
||||
message.success(intl.formatMessage({ id: 'common.message.success' }));
|
||||
} catch (error) {
|
||||
// ignore
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleStartModel = async (row: ListItem) => {
|
||||
await updateModel({
|
||||
id: row.id,
|
||||
data: {
|
||||
..._.omit(row, [
|
||||
'id',
|
||||
'ready_replicas',
|
||||
'created_at',
|
||||
'updated_at',
|
||||
'rowIndex'
|
||||
]),
|
||||
replicas: 1
|
||||
}
|
||||
});
|
||||
await updateModel(getFormattedData(row, { replicas: 1 }));
|
||||
};
|
||||
|
||||
const handleStopModel = async (row: ListItem) => {
|
||||
await updateModel({
|
||||
id: row.id,
|
||||
data: {
|
||||
..._.omit(row, [
|
||||
'id',
|
||||
'ready_replicas',
|
||||
'created_at',
|
||||
'updated_at',
|
||||
'rowIndex'
|
||||
]),
|
||||
replicas: 0
|
||||
}
|
||||
});
|
||||
await updateModel(getFormattedData(row, { replicas: 0 }));
|
||||
removeExpandedRowKey([row.id]);
|
||||
};
|
||||
|
||||
@@ -538,25 +348,12 @@ const Models: React.FC<ModelsProps> = ({
|
||||
};
|
||||
|
||||
const handleOpenPlayGround = (row: any) => {
|
||||
if (row.categories?.includes(modelCategoriesMap.image)) {
|
||||
navigate(`/playground/text-to-image?model=${row.name}`);
|
||||
return;
|
||||
}
|
||||
if (row.categories?.includes(modelCategoriesMap.text_to_speech)) {
|
||||
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;
|
||||
for (const [category, path] of Object.entries(categoryToPathMap)) {
|
||||
console.log('category:', category, path);
|
||||
if (row.categories?.includes(category)) {
|
||||
navigate(`${path}?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={
|
||||
|
||||
@@ -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
|
||||
}
|
||||
)
|
||||
);
|
||||
*
|
||||
*/
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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');
|
||||
|
||||
Reference in New Issue
Block a user