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>