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 {