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

chore: add model file ux

Browse Source
This commit is contained in:
jialin
2025-03-25 12:33:29 +08:00
parent 05ef2b8eaa
commit dca7a6f270
26 changed files with 1160 additions and 330 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/llmodels/catalog.tsx
+6 -9
View File
@@ -35,7 +35,7 @@ const Catalog: React.FC = () => {
page: 1,
perPage: 100,
search: '',
categories: []
categories: ''
});
const [openDeployModal, setOpenDeployModal] = useState<any>({
show: false,
@@ -49,22 +49,20 @@ const Catalog: React.FC = () => {
const categoryOptions = [...modelCategories.filter((item) => item.value)];
const filterData = useCallback(
(data: { search: string; categories: string[] }) => {
(data: { search: string; categories: string }) => {
const { search, categories } = data;
const dataList = cacheData.current.filter((item) => {
if (search && categories.length > 0) {
if (search && categories) {
return (
_.toLower(item.name).includes(search) &&
categories.some((category) => item.categories.includes(category))
item.categories.includes(categories)
);
}
if (search) {
return _.toLower(item.name).includes(_.toLower(search));
}
if (categories.length > 0) {
return categories.some((category) =>
item.categories.includes(category)
);
if (categories) {
return item.categories.includes(categories);
}
return true;
});
@@ -241,7 +239,6 @@ const Catalog: React.FC = () => {
placeholder={intl.formatMessage({ id: 'models.filter.category' })}
style={{ width: 230 }}
size="large"
mode="multiple"
maxTagCount={1}
onChange={handleCategoryChange}
options={categoryOptions}
src/pages/llmodels/components/data-form.tsx
+17 -35
View File
@@ -1,6 +1,5 @@
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';
@@ -8,7 +7,7 @@ import { PageAction } from '@/config';
import { PageActionType } from '@/config/types';
import useAppUtils from '@/hooks/use-app-utils';
import { useIntl } from '@umijs/max';
import { Form, Input, Typography } from 'antd';
import { Form, Typography } from 'antd';
import _ from 'lodash';
import React, {
forwardRef,
@@ -30,11 +29,12 @@ import {
ollamaModelOptions,
sourceOptions
} from '../config';
import { HuggingFaceModels, ModelScopeModels } from '../config/audio-catalog';
import { identifyModelTask } from '../config/audio-catalog';
import { FormData } from '../config/types';
import AdvanceConfig from './advance-config';
interface DataFormProps {
initialValues?: any;
ref?: any;
source: string;
action: PageActionType;
@@ -65,6 +65,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
const {
action,
isGGUF,
initialValues,
sourceDisable = true,
backendOptions,
sourceList,
@@ -116,33 +117,15 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
[]
);
const identifyModelTask = () => {
let data = null;
if (props.source === modelSourceMap.huggingface_value) {
data = HuggingFaceModels.find(
(item) =>
`${item.org}/${item.name}`.indexOf(props.selectedModel.name) > -1 ||
props.selectedModel.name?.indexOf(`${item.org}/${item.name}`) > -1
);
}
if (props.source === modelSourceMap.modelscope_value) {
data = ModelScopeModels.find(
(item) =>
`${item.org}/${item.name}`.indexOf(props.selectedModel.name) > -1 ||
props.selectedModel.name?.indexOf(`${item.org}/${item.name}`) > -1
);
}
if (data) {
return modelTaskMap.audio;
}
return '';
};
const handleOnSelectModel = () => {
let name = _.split(props.selectedModel.name, '/').slice(-1)[0];
const reg = /(-gguf)$/i;
name = _.toLower(name).replace(reg, '');
const modelTaskType = identifyModelTask();
const modelTaskType = identifyModelTask(
props.source,
props.selectedModel.name
);
const modelTask =
HuggingFaceTaskMap.audio.includes(props.selectedModel.task) ||
@@ -282,11 +265,6 @@ 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 (
<>
@@ -300,14 +278,17 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
}
]}
>
{/* <SealInput.Input
<SealAutoComplete
required
filterOption
defaultActiveFirstOption
options={modelFileOptions}
onBlur={handleLocalPathBlur}
onFocus={handleOnFocus}
label={intl.formatMessage({ id: 'models.form.filePath' })}
description={<TooltipList list={localPathTipsList}></TooltipList>}
></SealInput.Input> */}
<SealCascader
></SealAutoComplete>
{/* <SealCascader
required
showSearch
description={<TooltipList list={localPathTipsList}></TooltipList>}
@@ -330,7 +311,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
}}
/>
)}
></SealCascader>
></SealCascader> */}
</Form.Item>
</>
);
@@ -523,7 +504,8 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
cpu_offloading: true,
scheduleType: 'auto',
categories: null,
distributed_inference_across_workers: true
distributed_inference_across_workers: true,
...initialValues
}}
>
<Form.Item<FormData>
src/pages/llmodels/components/deploy-modal.tsx
+16 -5
View File
@@ -4,7 +4,7 @@ import { PageActionType } from '@/config/types';
import { CloseOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Button, Drawer } from 'antd';
import { debounce } from 'lodash';
import _, { debounce } from 'lodash';
import { FC, useCallback, useEffect, useRef, useState } from 'react';
import { backendOptionsMap, modelSourceMap } from '../config';
import { FormData } from '../config/types';
@@ -21,9 +21,11 @@ type AddModalProps = {
action: PageActionType;
open: boolean;
source: string;
isGGUF?: boolean;
width?: string | number;
gpuOptions: any[];
modelFileOptions: any[];
initialValues?: any;
onOk: (values: FormData) => void;
onCancel: () => void;
};
@@ -36,7 +38,8 @@ const AddModal: FC<AddModalProps> = (props) => {
onCancel,
source,
action,
width = 600
width = 600,
initialValues
} = props || {};
const SEARCH_SOURCE = [
modelSourceMap.huggingface_value,
@@ -47,7 +50,7 @@ const AddModal: FC<AddModalProps> = (props) => {
const intl = useIntl();
const [selectedModel, setSelectedModel] = useState<any>({});
const [collapsed, setCollapsed] = useState<boolean>(false);
const [isGGUF, setIsGGUF] = useState<boolean>(false);
const [isGGUF, setIsGGUF] = useState<boolean>(props.isGGUF || false);
const modelFileRef = useRef<any>(null);
const [warningStatus, setWarningStatus] = useState<{
show: boolean;
@@ -128,7 +131,9 @@ const AddModal: FC<AddModalProps> = (props) => {
}, [onCancel]);
useEffect(() => {
handleSelectModelFile({ fakeName: '' });
if (!_.isEmpty(selectedModel)) {
handleSelectModelFile({ fakeName: '' });
}
}, [selectedModel]);
useEffect(() => {
@@ -142,12 +147,17 @@ const AddModal: FC<AddModalProps> = (props) => {
} else if (source === modelSourceMap.ollama_library_value) {
form.current?.setFieldValue?.('backend', backendOptionsMap.llamaBox);
setIsGGUF(true);
} else {
form.current?.setFieldsValue({
...props.initialValues
});
setIsGGUF(props.isGGUF || false);
}
return () => {
setSelectedModel({});
};
}, [open, source]);
}, [open, source, props.isGGUF, props.initialValues]);
return (
<Drawer
@@ -280,6 +290,7 @@ const AddModal: FC<AddModalProps> = (props) => {
</TitleWrapper>
)}
<DataForm
initialValues={initialValues}
source={source}
action={action}
selectedModel={selectedModel}
src/pages/llmodels/components/file-parts.tsx
+3 -2
View File
@@ -4,8 +4,9 @@ import SimpleBar from 'simplebar-react';
import 'simplebar-react/dist/simplebar.min.css';
const FileParts: React.FC<{
showSize?: boolean;
fileList: any[];
}> = ({ fileList }) => {
}> = ({ fileList, showSize = true }) => {
return (
<SimpleBar
style={{ maxHeight: 200 }}
@@ -19,7 +20,7 @@ const FileParts: React.FC<{
{' '}
Part {file.part} of {file.total}
</span>
<span>{convertFileSize(file.size)}</span>
{showSize && <span>{convertFileSize(file.size)}</span>}
</div>
);
})}
src/pages/llmodels/components/table-list.tsx
-1
View File
@@ -730,7 +730,6 @@ const Models: React.FC<ModelsProps> = ({
})}
style={{ width: 230 }}
size="large"
mode="multiple"
maxTagCount={1}
onChange={handleCategoryChange}
options={modelCategories.filter((item) => item.value)}
src/pages/llmodels/config/audio-catalog.ts
+24
View File
@@ -1,3 +1,5 @@
import { modelSourceMap, modelTaskMap } from './index';
export const HuggingFaceModels = [
{
type: 'stt',
@@ -178,3 +180,25 @@ export const ModelScopeModels = [
name: 'faster-whisper-large-v1'
}
];
export const identifyModelTask = (source: string, modelName: string) => {
let data = null;
if (source === modelSourceMap.huggingface_value) {
data = HuggingFaceModels.find(
(item) =>
`${item.org}/${item.name}`.indexOf(modelName) > -1 ||
modelName?.indexOf(`${item.org}/${item.name}`) > -1
);
}
if (source === modelSourceMap.modelscope_value) {
data = ModelScopeModels.find(
(item) =>
`${item.org}/${item.name}`.indexOf(modelName) > -1 ||
modelName?.indexOf(`${item.org}/${item.name}`) > -1
);
}
if (data) {
return modelTaskMap.audio;
}
return '';
};
src/pages/llmodels/config/button-actions.ts
+6 -6
View File
@@ -189,13 +189,13 @@ export const setModelActionList = (record: any) => {
};
export const modelFileActions = [
// {
// label: 'common.button.deploy',
// key: 'deploy',
// icon: icons.ThunderboltOutlined
// },
{
label: 'common.button.retry',
label: 'common.button.deploy',
key: 'deploy',
icon: icons.ThunderboltOutlined
},
{
label: 'resources.modelfiles.retry.download',
key: 'retry',
icon: icons.RetweetOutlined
},
src/pages/llmodels/download/index.tsx
+6
View File
@@ -110,6 +110,12 @@ const DownloadModel: React.FC<AddModalProps> = (props) => {
} else if (source === modelSourceMap.ollama_library_value) {
setIsGGUF(true);
}
if (open) {
form.current?.form?.setFieldValue(
'worker_id',
workersList[0]?.value || ''
);
}
return () => {
setSelectedModel({});
src/pages/llmodels/download/target-form.tsx
+11 -4
View File
@@ -162,14 +162,21 @@ const TargetForm: React.FC<TargetFormProps> = forwardRef((props, ref) => {
name="local_dir"
rules={[
{
required: true,
message: getRuleMessage('input', 'resources.modelfiles.form.path')
required: false,
message: getRuleMessage(
'input',
'resources.modelfiles.form.localdir'
)
}
]}
>
<SealInput.Input
label={intl.formatMessage({ id: 'resources.modelfiles.form.path' })}
required
description={intl.formatMessage({
id: 'resources.modelfiles.form.localdir.tips'
})}
label={intl.formatMessage({
id: 'resources.modelfiles.form.localdir'
})}
></SealInput.Input>
</Form.Item>
)}
src/pages/llmodels/hooks/index.ts
+23 -1
View File
@@ -143,7 +143,29 @@ export const useGenerateModelFileOptions = () => {
Object.entries(worker).filter(([key]) => workerFields.has(key))
)
}));
return result;
// extract a list from the result, and the structure is like:
// [
// {
// label: 'worker_name/child_label',
// value: 'child_value',
// ...other child properties
// }
// ]
const childrenList = result.reduce((acc: any[], cur) => {
if (cur.children) {
const list = cur.children.map((child: any) => ({
...child,
label: `${cur.label}${child.label}`,
value: child.value
}));
acc.push(...list);
}
return acc;
}, []);
return childrenList;
// return result;
};
return {
src/pages/resources/components/model-files.tsx
+265 -44
View File
@@ -1,3 +1,4 @@
import { modelsExpandKeysAtom } from '@/atoms/models';
import AutoTooltip from '@/components/auto-tooltip';
import CopyButton from '@/components/copy-button';
import DeleteModal from '@/components/delete-modal';
@@ -5,9 +6,19 @@ 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 { PageAction } from '@/config';
import useAppUtils from '@/hooks/use-app-utils';
import useBodyScroll from '@/hooks/use-body-scroll';
import useTableFetch from '@/hooks/use-table-fetch';
import { modelSourceMap } from '@/pages/llmodels/config';
import { createModel } from '@/pages/llmodels/apis';
import DeployModal from '@/pages/llmodels/components/deploy-modal';
import FileParts from '@/pages/llmodels/components/file-parts';
import {
backendOptionsMap,
getSourceRepoConfigValue,
modelSourceMap
} from '@/pages/llmodels/config';
import { identifyModelTask } from '@/pages/llmodels/config/audio-catalog';
import {
generateSource,
modalConfig,
@@ -16,11 +27,32 @@ import {
} 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 {
DeleteOutlined,
DownOutlined,
InfoCircleOutlined,
SyncOutlined
} from '@ant-design/icons';
import { useIntl, useNavigate } from '@umijs/max';
import {
Button,
ConfigProvider,
Empty,
Input,
Space,
Table,
Tag,
Tooltip,
message
} from 'antd';
import dayjs from 'dayjs';
import { useAtom } from 'jotai';
import _ from 'lodash';
import { useEffect, useState } from 'react';
import {
useGenerateFormEditInitialValues,
useGenerateModelFileOptions
} from '../../llmodels/hooks';
import {
MODEL_FILES_API,
deleteModelFile,
@@ -40,6 +72,9 @@ import {
ListItem as WorkerListItem
} from '../config/types';
const pattern = /^(.*)-(\d+)-of-(\d+)\.(.*)$/;
const filterPattern = /^(.*)-\d+-of-\d+(\.gguf)?$/;
const getWorkerName = (
id: number,
workersList: Global.BaseOption<number>[]
@@ -77,11 +112,16 @@ const InstanceStatusTag = (props: { data: ListItem }) => {
};
const ModelFiles = () => {
const { getGPUList, generateFormValues } = useGenerateFormEditInitialValues();
const { saveScrollHeight, restoreScrollHeight } = useBodyScroll();
const [modelsExpandKeys, setModelsExpandKeys] = useAtom(modelsExpandKeysAtom);
const navigate = useNavigate();
const {
dataSource,
rowSelection,
queryParams,
modalRef,
fetchData,
handleDelete,
handleDeleteBatch,
handlePageChange,
@@ -95,7 +135,8 @@ const ModelFiles = () => {
watch: true,
contentForDelete: 'resources.modelfiles.modelfile'
});
const { getModelFileList, generateModelFileOptions } =
useGenerateModelFileOptions();
const intl = useIntl();
const { showSuccess } = useAppUtils();
const [workersList, setWorkersList] = useState<Global.BaseOption<number>[]>(
@@ -112,6 +153,23 @@ const ModelFiles = () => {
source: modelSourceMap.huggingface_value,
gpuOptions: []
});
const [openDeployModal, setOpenDeployModal] = useState<{
show: boolean;
width: number | string;
source: string;
gpuOptions: any[];
modelFileOptions?: any[];
initialValues: any;
isGGUF?: boolean;
}>({
show: false,
width: 600,
source: modelSourceMap.local_path_value,
gpuOptions: [],
modelFileOptions: [],
initialValues: {},
isGGUF: false
});
useEffect(() => {
const fetchWorkerList = async () => {
@@ -140,6 +198,84 @@ const ModelFiles = () => {
fetchWorkerList();
}, []);
const extractFileName = (name: string) => {
return name.replace(filterPattern, '$1');
};
const generateInitialValues = (record: ListItem) => {
const isGGUF = _.includes(record.resolved_paths?.[0], 'gguf');
const isOllama = !!record.ollama_library_model_name;
const audioModelTag = identifyModelTask(
record.source,
record.resolved_paths?.[0]
);
let name = _.toLower(
_.split(
record.huggingface_repo_id ||
record.ollama_library_model_name ||
record.model_scope_model_id ||
record.local_path,
'/'
).pop()
);
return {
source: modelSourceMap.local_path_value,
local_path: record.resolved_paths?.[0],
name: extractFileName(name),
backend:
isGGUF || isOllama
? backendOptionsMap.llamaBox
: audioModelTag
? backendOptionsMap.voxBox
: backendOptionsMap.vllm,
isGGUF: !audioModelTag && (isGGUF || isOllama)
};
};
const renderParts = (record: ListItem) => {
const parts = _.tail(record.resolved_paths);
if (!parts.length) {
return null;
}
const partsList = parts.map((item: string) => {
const match = item.match(pattern);
if (!match) {
return null;
}
return {
part: parseInt(match[2], 10),
total: parseInt(match[3], 10),
name: _.split(match[1], '/').pop()
};
});
return (
<Tooltip
overlayInnerStyle={{
width: 120,
padding: 0
}}
title={<FileParts fileList={partsList} showSize={false}></FileParts>}
>
<Tag
className="tag-item"
color="purple"
style={{
marginRight: 0,
height: 22,
borderRadius: 'var(--border-radius-base)'
}}
>
<span style={{ opacity: 1 }}>
<InfoCircleOutlined className="m-r-5" />
{partsList.length} parts
</span>
</Tag>
</Tooltip>
);
};
const handleSelect = async (val: any, record: ListItem) => {
try {
if (val === 'delete') {
@@ -150,6 +286,22 @@ const ModelFiles = () => {
} else if (val === 'retry') {
await retryDownloadModelFile(record.id);
showSuccess();
} else if (val === 'deploy') {
saveScrollHeight();
const [modelFileList, gpuList] = await Promise.all([
getModelFileList(),
getGPUList()
]);
const dataList = generateModelFileOptions(modelFileList, workersList);
const initialValues = generateInitialValues(record);
setOpenDeployModal({
...openDeployModal,
modelFileOptions: dataList,
gpuOptions: gpuList,
initialValues: initialValues,
isGGUF: initialValues.isGGUF,
show: true
});
}
} catch (error) {
// console.log('error', error);
@@ -189,43 +341,60 @@ const ModelFiles = () => {
...downloadModalStatus,
show: false
});
fetchData();
showSuccess();
} catch (error) {
// console.log('error', error);
}
};
const setActionList = (record: ListItem) => {
return _.filter(modelFileActions, (item: { key: string }) => {
if (item.key === 'deploy') {
return record.state === ModelfileStateMap.Ready;
}
return true;
});
};
const handleDeployModalCancel = () => {
setOpenDeployModal({
...openDeployModal,
show: false
});
restoreScrollHeight();
};
const handleCreateModel = async (data: any) => {
try {
const result = getSourceRepoConfigValue(openDeployModal.source, data);
const modelData = await createModel({
data: {
...result.values,
..._.omit(data, result.omits)
}
});
setOpenDeployModal({
...openDeployModal,
show: false
});
message.success(intl.formatMessage({ id: 'common.message.success' }));
setModelsExpandKeys([modelData.id]);
navigate('/models/list');
} catch (error) {
// console.log('error', error);
}
};
const columns = [
{
title: intl.formatMessage({ id: 'resources.modelfiles.form.path' }),
dataIndex: 'resolved_paths',
width: 240,
render: (text: string, record: ListItem) => {
return (
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: intl.formatMessage({ id: 'resources.modelfiles.size' }),
dataIndex: 'size',
render: (text: string, record: ListItem) => {
return (
<AutoTooltip ghost maxWidth={100}>
<span>{convertFileSize(record.size, 1)}</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: 'Worker',
@@ -238,26 +407,63 @@ const ModelFiles = () => {
);
}
},
{
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',
width: 120,
render: (text: string, record: ListItem) => {
return <InstanceStatusTag data={record} />;
}
},
{
title: intl.formatMessage({ id: 'resources.modelfiles.form.path' }),
dataIndex: 'resolved_paths',
render: (text: string, record: ListItem) => {
if (
!record.resolved_paths.length &&
record.state === ModelfileStateMap.Downloading
) {
return (
<span>
{intl.formatMessage({
id: 'resources.modelfiles.storagePath.holder'
})}
</span>
);
}
return (
record.resolved_paths?.length > 0 && (
<span className="flex-center">
<AutoTooltip ghost maxWidth={'100%'}>
<span>{record.resolved_paths?.[0]}</span>
</AutoTooltip>
<CopyButton
text={record.resolved_paths?.[0]}
type="link"
></CopyButton>
{renderParts(record)}
</span>
)
);
}
},
{
title: intl.formatMessage({ id: 'resources.modelfiles.size' }),
dataIndex: 'size',
width: 100,
render: (text: string, record: ListItem) => {
return (
<AutoTooltip ghost maxWidth={100}>
<span>{convertFileSize(record.size, 1)}</span>
</AutoTooltip>
);
}
},
{
title: intl.formatMessage({ id: 'common.table.createTime' }),
dataIndex: 'created_at',
sorter: false,
width: 180,
render: (text: number) => (
<AutoTooltip ghost>
{dayjs(text).format('YYYY-MM-DD HH:mm:ss')}
@@ -267,9 +473,10 @@ const ModelFiles = () => {
{
title: intl.formatMessage({ id: 'common.table.operation' }),
dataIndex: 'operation',
width: 120,
render: (text: string, record: ListItem) => (
<DropdownButtons
items={modelFileActions}
items={setActionList(record)}
onSelect={(val) => handleSelect(val, record)}
></DropdownButtons>
)
@@ -334,6 +541,7 @@ const ModelFiles = () => {
<ConfigProvider renderEmpty={renderEmpty}>
<Table
columns={columns}
tableLayout="fixed"
style={{ width: '100%' }}
dataSource={dataSource.dataList}
loading={dataSource.loading}
@@ -360,6 +568,19 @@ const ModelFiles = () => {
onOk={handleDownload}
workersList={workersList}
></DownloadModal>
<DeployModal
open={openDeployModal.show}
action={PageAction.CREATE}
title={intl.formatMessage({ id: 'models.button.deploy' })}
source={openDeployModal.source}
width={openDeployModal.width}
gpuOptions={openDeployModal.gpuOptions}
modelFileOptions={openDeployModal.modelFileOptions || []}
initialValues={openDeployModal.initialValues}
isGGUF={openDeployModal.isGGUF}
onCancel={handleDeployModalCancel}
onOk={handleCreateModel}
></DeployModal>
</>
);
};