root/gpustack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: add model api

Browse Source
This commit is contained in:
jialin
2025-03-25 12:33:29 +08:00
parent 1819649a3a
commit 05ef2b8eaa
23 changed files with 774 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/llmodels/components/advance-config.tsx
+1 -58
View File
@@ -1,4 +1,3 @@
import AutoTooltip from '@/components/auto-tooltip';
import IconFont from '@/components/icon-font';
import LabelSelector from '@/components/label-selector';
import ListInput from '@/components/list-input';
@@ -13,7 +12,6 @@ import { useIntl } from '@umijs/max';
import {
Checkbox,
Collapse,
Empty,
Form,
FormInstance,
Tooltip,
@@ -150,49 +148,6 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
form.setFieldValue(['gpu_selector', 'gpu_ids'], lastGroupItems);
};
const gpuOptionRender = (data: any) => {
if (data.value === '__EMPTY__') {
return (
<Empty
image={false}
style={{
height: 100,
alignSelf: 'center',
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
}}
description={intl.formatMessage({
id: 'common.search.empty'
})}
></Empty>
);
}
let width: any = {
maxWidth: 140,
minWidth: 140
};
if (!data.parent) {
width = undefined;
}
if (data.parent) {
return (
<AutoTooltip ghost {...width}>
{data.label}
</AutoTooltip>
);
}
return <GPUCard data={data}></GPUCard>;
};
const tagRender = (props: any) => {
if (props.isMaxTag) {
return props.label;
}
const parent = _.split(props.value, '__RC_CASCADER_SPLIT__')?.[0];
return `${parent} / ${props?.label}`;
};
const collapseItems = useMemo(() => {
const children = (
<>
@@ -306,19 +261,7 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
options={gpuOptions}
showCheckedStrategy="SHOW_CHILD"
value={form.getFieldValue(['gpu_selector', 'gpu_ids'])}
tagRender={(props) => {
return (
<AutoTooltip
className="m-r-4"
closable={props.closable}
onClose={props.onClose}
maxWidth={240}
>
{tagRender(props)}
</AutoTooltip>
);
}}
optionRender={gpuOptionRender}
optionNode={GPUCard}
getPopupContainer={(triggerNode) => triggerNode.parentNode}
></SealCascader>
</Form.Item>
src/pages/llmodels/components/data-form.tsx
+36 -3
View File
@@ -1,5 +1,6 @@
import IconFont from '@/components/icon-font';
import SealAutoComplete from '@/components/seal-form/auto-complete';
import SealCascader from '@/components/seal-form/seal-cascader';
import SealInput from '@/components/seal-form/seal-input';
import SealSelect from '@/components/seal-form/seal-select';
import TooltipList from '@/components/tooltip-list';
@@ -7,7 +8,7 @@ import { PageAction } from '@/config';
import { PageActionType } from '@/config/types';
import useAppUtils from '@/hooks/use-app-utils';
import { useIntl } from '@umijs/max';
import { Form, Typography } from 'antd';
import { Form, Input, Typography } from 'antd';
import _ from 'lodash';
import React, {
forwardRef,
@@ -46,6 +47,7 @@ interface DataFormProps {
backendOptions?: Global.BaseOption<string>[];
sourceList?: Global.BaseOption<string>[];
gpuOptions: any[];
modelFileOptions?: any[];
onSizeChange?: (val: number) => void;
onQuantizationChange?: (val: string) => void;
onSourceChange?: (value: string) => void;
@@ -68,12 +70,14 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
sourceList,
byBuiltIn,
gpuOptions = [],
modelFileOptions = [],
sizeOptions = [],
quantizationOptions = [],
fields = ['source'],
onSourceChange,
onOk
} = props;
console.log('modelFileOptions--------', modelFileOptions);
const { getRuleMessage } = useAppUtils();
const [form] = Form.useForm();
const intl = useIntl();
@@ -278,6 +282,11 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
);
};
const handleOnSearch = (value: string) => {
console.log('local_path', value);
form.setFieldValue('local_path', value);
};
const renderLocalPathFields = () => {
return (
<>
@@ -291,13 +300,37 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
}
]}
>
<SealInput.Input
{/* <SealInput.Input
required
onBlur={handleLocalPathBlur}
onFocus={handleOnFocus}
label={intl.formatMessage({ id: 'models.form.filePath' })}
description={<TooltipList list={localPathTipsList}></TooltipList>}
></SealInput.Input>
></SealInput.Input> */}
<SealCascader
required
showSearch
description={<TooltipList list={localPathTipsList}></TooltipList>}
expandTrigger="hover"
multiple={false}
onSearch={handleOnSearch}
popupClassName="cascader-popup-wrapper gpu-selector"
maxTagCount={1}
label={intl.formatMessage({ id: 'models.form.gpuselector' })}
options={modelFileOptions}
showCheckedStrategy="SHOW_CHILD"
value={form.getFieldValue('local_path')}
getPopupContainer={(triggerNode) => triggerNode.parentNode}
displayRender={() => (
<Input
style={{
border: 'none',
outline: 'none',
width: '100%'
}}
/>
)}
></SealCascader>
</Form.Item>
</>
);
src/pages/llmodels/components/deploy-modal.tsx
+2
View File
@@ -23,6 +23,7 @@ type AddModalProps = {
source: string;
width?: string | number;
gpuOptions: any[];
modelFileOptions: any[];
onOk: (values: FormData) => void;
onCancel: () => void;
};
@@ -286,6 +287,7 @@ const AddModal: FC<AddModalProps> = (props) => {
ref={form}
isGGUF={isGGUF}
gpuOptions={props.gpuOptions}
modelFileOptions={props.modelFileOptions}
onBackendChange={handleBackendChange}
></DataForm>
</>
src/pages/llmodels/components/table-list.tsx
+20 -8
View File
@@ -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>
src/pages/llmodels/config/button-actions.ts
+18 -11
View File
@@ -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',
src/pages/llmodels/download/index.tsx
+49 -7
View File
@@ -19,12 +19,21 @@ type AddModalProps = {
open: boolean;
source: string;
width?: string | number;
workersList: Global.BaseOption<number>[];
onOk: (values: FormData) => void;
onCancel: () => void;
};
const DownloadModel: React.FC<AddModalProps> = (props) => {
const { title, open, onOk, onCancel, source, width = 600 } = props || {};
const {
title,
workersList,
open,
onOk,
onCancel,
source,
width = 600
} = props || {};
const SEARCH_SOURCE = [
modelSourceMap.huggingface_value,
modelSourceMap.modelscope_value
@@ -35,18 +44,45 @@ const DownloadModel: React.FC<AddModalProps> = (props) => {
const [selectedModel, setSelectedModel] = useState<any>({});
const [collapsed, setCollapsed] = useState<boolean>(false);
const [isGGUF, setIsGGUF] = useState<boolean>(false);
const [fileName, setFileName] = useState<string>('');
const modelFileRef = useRef<any>(null);
const generateModelInfo = () => {
if (source === modelSourceMap.huggingface_value) {
const huggingFaceModel = {
huggingface_repo_id: selectedModel.name,
huggingface_filename: fileName
};
return huggingFaceModel;
}
if (source === modelSourceMap.modelscope_value) {
const modelScopeModel = {
model_scope_model_id: selectedModel.name,
model_scope_file_path: fileName
};
return modelScopeModel;
}
return {};
};
const handleSelectModelFile = useCallback((item: any) => {
form.current?.setFieldValue?.('file_name', item.fakeName);
setFileName(item.fakeName);
}, []);
const handleOnSelectModel = (item: any) => {
setSelectedModel(item);
};
const handleOk = (values: any) => {
onOk({
...values,
source: source,
...generateModelInfo()
});
};
const handleSumit = () => {
form.current?.submit?.();
form.current?.form?.submit?.();
};
const debounceFetchModelFiles = debounce(() => {
@@ -91,7 +127,7 @@ const DownloadModel: React.FC<AddModalProps> = (props) => {
fontSize: 'var(--font-size-middle)'
}}
>
Download Model
{title}
</span>
<Button type="text" size="small" onClick={handleCancel}>
<CloseOutlined></CloseOutlined>
@@ -173,7 +209,6 @@ const DownloadModel: React.FC<AddModalProps> = (props) => {
<ModalFooter
onCancel={handleCancel}
onOk={handleSumit}
okText={intl.formatMessage({ id: 'common.button.download' })}
style={{
padding: '16px 24px',
display: 'flex',
@@ -186,11 +221,18 @@ const DownloadModel: React.FC<AddModalProps> = (props) => {
<>
{SEARCH_SOURCE.includes(source) && (
<TitleWrapper>
Select Target
{intl.formatMessage({
id: 'resources.modelfiles.selecttarget'
})}
<span style={{ display: 'flex', height: 24 }}></span>
</TitleWrapper>
)}
<TargetForm onOk={onOk} source={source}></TargetForm>
<TargetForm
ref={form}
onOk={handleOk}
source={source}
workersList={workersList}
></TargetForm>
</>
</ColumnWrapper>
</div>
src/pages/llmodels/download/target-form.tsx
+87 -16
View File
@@ -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;
src/pages/llmodels/hooks/index.ts
+57
View File
@@ -1,3 +1,5 @@
import { queryModelFilesList } from '@/pages/resources/apis';
import { ListItem as WorkerListItem } from '@/pages/resources/config/types';
import _ from 'lodash';
import { useRef } from 'react';
import { queryGPUList } from '../apis';
@@ -94,3 +96,58 @@ export const useGenerateFormEditInitialValues = () => {
gpuDeviceList
};
};
export const useGenerateModelFileOptions = () => {
const getModelFileList = async () => {
try {
const res = await queryModelFilesList({ page: 1, perPage: 100 });
const list = res.items || [];
return list;
} catch (error) {
console.error('Error fetching model file list:', error);
return [];
}
};
const generateModelFileOptions = (list: any[], workerList: any[]) => {
const workerFields = new Set(['name', 'id', 'ip', 'status']);
const workersMap = new Map<number, WorkerListItem>();
for (const item of workerList) {
if (!workersMap.has(item.id)) {
workersMap.set(item.id, item);
}
}
const result = Array.from(workersMap.values()).map((worker) => ({
label: worker.name,
value: worker.name,
parent: true,
children: list
.filter((item) => item.worker_id === worker.id)
.map((item) => {
const resolved_paths =
Array.isArray(item.resolved_paths) && item.resolved_paths.length
? item.resolved_paths[0].split('/')
: [];
const label =
resolved_paths.length > 0 ? resolved_paths.pop() : 'Unknown File';
return {
label: item.resolved_paths[0] || '',
value: item.resolved_paths[0] || '',
parent: false,
...item
};
}),
...Object.fromEntries(
Object.entries(worker).filter(([key]) => workerFields.has(key))
)
}));
return result;
};
return {
getModelFileList,
generateModelFileOptions
};
};
src/pages/llmodels/index.tsx
+15 -9
View File
@@ -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>
src/pages/resources/apis/index.ts
+38 -1
View File
@@ -1,8 +1,9 @@
import { request } from '@umijs/max';
import { GPUDeviceItem, ListItem } from '../config/types';
import { GPUDeviceItem, ListItem, ModelFile } from '../config/types';
export const WORKERS_API = '/workers';
export const GPU_DEVICES_API = '/gpu-devices';
export const MODEL_FILES_API = '/model-files';
export async function queryWorkersList(params: Global.SearchParams) {
return request<Global.PageResponse<ListItem>>(`${WORKERS_API}`, {
@@ -36,3 +37,39 @@ export async function updateWorker(id: string | number, data: any) {
data
});
}
export async function queryModelFilesList(params: Global.SearchParams) {
return request<Global.PageResponse<ModelFile>>(MODEL_FILES_API, {
method: 'GET',
params
});
}
export async function deleteModelFile(id: string | number) {
return request<Global.PageResponse<ModelFile>>(`${MODEL_FILES_API}/${id}`, {
method: 'DELETE'
});
}
export async function updateModelFile(id: string | number, data: any) {
return request<Global.PageResponse<ModelFile>>(`${MODEL_FILES_API}/${id}`, {
method: 'PUT',
data
});
}
export async function downloadModelFile(data: any) {
return request<Global.PageResponse<ModelFile>>(MODEL_FILES_API, {
method: 'POST',
data
});
}
export async function retryDownloadModelFile(id: string | number) {
return request<Global.PageResponse<ModelFile>>(
`${MODEL_FILES_API}/${id}/reset`,
{
method: 'POST'
}
);
}
src/pages/resources/components/model-files.tsx
+138 -34
View File
@@ -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>
</>
);
src/pages/resources/config/index.ts
+18
View File
@@ -114,3 +114,21 @@ export const containerInstallOptions = [
{ label: 'Hygon DCU', value: 'dcu' },
{ label: 'CPU', value: 'cpu' }
];
export const ModelfileStateMap = {
Error: 'error',
Downloading: 'downloading',
Ready: 'ready'
};
export const ModelfileStateMapValue = {
[ModelfileStateMap.Error]: 'Error',
[ModelfileStateMap.Downloading]: 'Downloading',
[ModelfileStateMap.Ready]: 'Ready'
};
export const ModelfileState: any = {
[ModelfileStateMap.Ready]: StatusMaps.success,
[ModelfileStateMap.Error]: StatusMaps.error,
[ModelfileStateMap.Downloading]: StatusMaps.transitioning
};
src/pages/resources/config/types.ts
+18 -4
View File
@@ -99,17 +99,31 @@ export interface ListItem {
export interface ModelFile {
source: string;
size: number;
id: number;
created_at: string;
worker_name: string;
huggingface_repo_id: string;
huggingface_filename: string;
ollama_library_model_name: string;
model_scope_model_id: string;
model_scope_file_path: string;
local_path: string;
local_dir: string;
worker_id: number;
size: number;
download_progress: number;
resolved_paths: string[];
state: string;
state_message: string;
id: number;
created_at: string;
updated_at: string;
}
export interface ModelFileFormData {
source: string;
huggingface_repo_id: string;
huggingface_filename: string;
ollama_library_model_name: string;
model_scope_model_id: string;
model_scope_file_path: string;
local_path: string;
local_dir: string;
}
src/pages/resources/index.tsx
+19 -17
View File
@@ -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);
}, []);