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

chore: model form state update

Browse Source
This commit is contained in:
jialin
2024-08-20 15:30:19 +08:00
parent 5d1d8773ec
commit ba1670e56d
16 changed files with 642 additions and 368 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/llmodels/components/data-form.tsx
+301
View File
@@ -0,0 +1,301 @@
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 { PageAction } from '@/config';
import { PageActionType } from '@/config/types';
import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import _ from 'lodash';
import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
import { modelSourceMap, ollamaModelOptions } from '../config';
import { FormData } from '../config/types';
interface DataFormProps {
ref?: any;
source: string;
action: PageActionType;
repo: string;
onOk: (values: FormData) => void;
}
const sourceOptions = [
{
label: 'Hugging Face',
value: modelSourceMap.huggingface_value,
key: 'huggingface'
},
{
label: 'Ollama Library',
value: modelSourceMap.ollama_library_value,
key: 'ollama_library'
}
];
const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
const { action, repo, onOk } = props;
const [form] = Form.useForm();
const intl = useIntl();
const handleSumit = () => {
form.submit();
};
useImperativeHandle(
ref,
() => {
return {
submit: handleSumit,
setFieldsValue: (values: FormData) => {
form.setFieldsValue(values);
},
setFieldValue: (name: string, value: any) => {
form.setFieldValue(name, value);
},
getFieldValue: (name: string) => {
return form.getFieldValue(name);
}
};
},
[]
);
const handleOnSelectModel = () => {
console.log('repo=============', repo);
if (!repo) {
return;
}
let name = _.split(repo, '/').slice(-1)[0];
const reg = /(-gguf)$/i;
name = _.toLower(name).replace(reg, '');
if (props.source === modelSourceMap.huggingface_value) {
form.setFieldsValue({
huggingface_repo_id: repo,
name: name
});
} else {
form.setFieldsValue({
ollama_library_model_name: repo,
name: name
});
}
};
const renderHuggingfaceFields = () => {
return (
<>
<Form.Item<FormData>
name="huggingface_repo_id"
key="huggingface_repo_id"
rules={[
{
required: true,
message: intl.formatMessage(
{
id: 'common.form.rule.input'
},
{ name: intl.formatMessage({ id: 'models.form.repoid' }) }
)
}
]}
>
<SealInput.Input
label={intl.formatMessage({ id: 'models.form.repoid' })}
required
disabled={true}
></SealInput.Input>
</Form.Item>
<Form.Item<FormData>
name="huggingface_filename"
rules={[
{
required: true,
message: intl.formatMessage(
{
id: 'common.form.rule.input'
},
{ name: intl.formatMessage({ id: 'models.form.filename' }) }
)
}
]}
>
<SealInput.Input
label={intl.formatMessage({ id: 'models.form.filename' })}
required
disabled={true}
></SealInput.Input>
</Form.Item>
</>
);
};
const renderS3Fields = () => {
return (
<>
<Form.Item<FormData>
name="s3_address"
rules={[
{
required: true,
message: intl.formatMessage(
{
id: 'common.form.rule.input'
},
{ name: intl.formatMessage({ id: 'models.form.s3address' }) }
)
}
]}
>
<SealInput.Input
label={intl.formatMessage({
id: 'models.form.s3address'
})}
required
></SealInput.Input>
</Form.Item>
</>
);
};
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
disabled={action === PageAction.EDIT}
label={intl.formatMessage({ id: 'model.form.ollama.model' })}
placeholder={intl.formatMessage({ id: 'model.form.ollamaholder' })}
required
options={ollamaModelOptions}
></SealAutoComplete>
</Form.Item>
</>
);
};
const renderFieldsBySource = () => {
switch (props.source) {
case modelSourceMap.huggingface_value:
return renderHuggingfaceFields();
case modelSourceMap.ollama_library_value:
return renderOllamaModelFields();
case modelSourceMap.s3_value:
return renderS3Fields();
default:
return null;
}
};
useEffect(() => {
handleOnSelectModel();
}, [repo]);
return (
<Form
name="deployModel"
form={form}
onFinish={onOk}
preserve={false}
style={{ padding: '16px 24px' }}
clearOnDestroy={true}
initialValues={{ replicas: 1, source: props.source }}
>
<Form.Item<FormData>
name="name"
rules={[
{
required: true,
message: intl.formatMessage(
{
id: 'common.form.rule.input'
},
{ name: intl.formatMessage({ id: 'common.table.name' }) }
)
}
]}
>
<SealInput.Input
label={intl.formatMessage({
id: 'common.table.name'
})}
required
></SealInput.Input>
</Form.Item>
<Form.Item<FormData>
name="source"
rules={[
{
required: true,
message: intl.formatMessage(
{
id: 'common.form.rule.select'
},
{ name: intl.formatMessage({ id: 'models.form.source' }) }
)
}
]}
>
{
<SealSelect
disabled={true}
label={intl.formatMessage({
id: 'models.form.source'
})}
options={sourceOptions}
required
></SealSelect>
}
</Form.Item>
{renderFieldsBySource()}
<Form.Item<FormData>
name="replicas"
rules={[
{
required: true,
message: intl.formatMessage(
{
id: 'common.form.rule.input'
},
{
name: intl.formatMessage({ id: 'models.form.replicas' })
}
)
}
]}
>
<SealInput.Number
style={{ width: '100%' }}
label={intl.formatMessage({
id: 'models.form.replicas'
})}
required
min={0}
></SealInput.Number>
</Form.Item>
<Form.Item<FormData> name="description">
<SealInput.TextArea
label={intl.formatMessage({
id: 'common.table.description'
})}
></SealInput.TextArea>
</Form.Item>
</Form>
);
});
export default React.memo(DataForm);
src/pages/llmodels/components/deploy-modal.tsx
+41 -341
View File
@@ -1,18 +1,13 @@
import ModalFooter from '@/components/modal-footer';
import SealInput from '@/components/seal-form/seal-input';
import SealSelect from '@/components/seal-form/seal-select';
import { PageAction } from '@/config';
import { PageActionType } from '@/config/types';
import { convertFileSize } from '@/utils';
import { CloseOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Button, Drawer, Form } from 'antd';
import _ from 'lodash';
import { memo, useCallback, useEffect, useState } from 'react';
import { queryHuggingfaceModelFiles, queryHuggingfaceModels } from '../apis';
import { Button, Drawer } from 'antd';
import { useCallback, useEffect, useRef, useState } from 'react';
import { modelSourceMap } from '../config';
import { FormData, ListItem } from '../config/types';
import ColumnWrapper from './column-wrapper';
import DataForm from './data-form';
import HFModelFile from './hf-model-file';
import ModelCard from './model-card';
import SearchModel from './search-model';
@@ -24,257 +19,44 @@ type AddModalProps = {
open: boolean;
data?: ListItem;
source: string;
width?: string | number;
onOk: (values: FormData) => void;
onCancel: () => void;
};
const sourceOptions = [
{
label: 'Hugging Face',
value: modelSourceMap.huggingface_value,
key: 'huggingface'
},
{
label: 'Ollama Library',
value: modelSourceMap.ollama_library_value,
key: 'ollama_library'
}
];
const AddModal: React.FC<AddModalProps> = (props) => {
console.log('addmodel====');
const { title, action, open, source, onOk, onCancel } = props || {};
const [form] = Form.useForm();
const {
title,
open,
onOk,
onCancel,
source,
action,
width = 600
} = props || {};
const form = useRef<any>({});
const intl = useIntl();
const modelSource = Form.useWatch('source', form);
const huggingfaceRepoId = Form.useWatch('huggingface_repo_id', form);
const [loading, setLoading] = useState(false);
const [repoOptions, setRepoOptions] = useState<
{ label: string; value: string }[]
>([]);
const [fileOptions, setFileOptions] = useState<
{ label: string; value: string }[]
>([]);
const [huggingfaceRepoId, setHuggingfaceRepoId] = useState<string>('');
const initFormValue = () => {
form.setFieldsValue({
source: props.source,
replicas: 1
});
const handleSelectModelFile = useCallback((item: any) => {
form.current?.setFieldValue?.('huggingface_filename', item.path);
}, []);
const handleOnSelectModel = (item: any) => {
setHuggingfaceRepoId(item.name);
};
const handleSumit = () => {
form.current?.submit?.();
};
useEffect(() => {
initFormValue();
console.log('source========', props.source);
return () => {
setHuggingfaceRepoId('');
};
}, [open]);
const fileNamLabel = (item: any) => {
return (
<span>
{item.path}
<span
style={{ color: 'var(--ant-color-text-tertiary)', marginLeft: '4px' }}
>
({convertFileSize(item.size)})
</span>
</span>
);
};
const handleFetchModelFiles = async (repo: string) => {
try {
setLoading(true);
const res = await queryHuggingfaceModelFiles({ repo });
const list = _.filter(res, (file: any) => {
return _.endsWith(file.path, '.gguf');
}).map((item: any) => {
return {
label: fileNamLabel(item),
value: item.path,
size: item.size
};
});
setFileOptions(list);
setLoading(false);
} catch (error) {
setFileOptions([]);
setLoading(false);
}
};
const handleRepoOnBlur = (e: any) => {
const repo = form.getFieldValue('huggingface_repo_id');
handleFetchModelFiles(repo);
};
const handleSelectModelFile = useCallback((item: any) => {
form.setFieldValue('huggingface_filename', item.path);
}, []);
const handleOnSearchRepo = async (text: string) => {
try {
const params = {
search: {
query: text,
tags: ['gguf']
}
};
const models = await queryHuggingfaceModels(params);
const list = _.map(models || [], (item: any) => {
return {
...item,
value: item.name,
label: item.name
};
});
setRepoOptions(list);
} catch (error) {
setRepoOptions([]);
}
};
const debounceSearch = _.debounce((text: string) => {
handleOnSearchRepo(text);
}, 300);
const renderHuggingfaceFields = () => {
return (
<>
<Form.Item<FormData>
name="huggingface_repo_id"
rules={[
{
required: true,
message: intl.formatMessage(
{
id: 'common.form.rule.input'
},
{ name: intl.formatMessage({ id: 'models.form.repoid' }) }
)
}
]}
>
<SealInput.Input
label={intl.formatMessage({ id: 'models.form.repoid' })}
required
disabled={true}
></SealInput.Input>
</Form.Item>
<Form.Item<FormData>
name="huggingface_filename"
rules={[
{
required: true,
message: intl.formatMessage(
{
id: 'common.form.rule.input'
},
{ name: intl.formatMessage({ id: 'models.form.filename' }) }
)
}
]}
>
<SealInput.Input
label={intl.formatMessage({ id: 'models.form.filename' })}
required
disabled={true}
></SealInput.Input>
</Form.Item>
</>
);
};
const renderS3Fields = () => {
return (
<>
<Form.Item<FormData>
name="s3_address"
rules={[
{
required: true,
message: intl.formatMessage(
{
id: 'common.form.rule.input'
},
{ name: intl.formatMessage({ id: 'models.form.s3address' }) }
)
}
]}
>
<SealInput.Input
label={intl.formatMessage({
id: 'models.form.s3address'
})}
required
></SealInput.Input>
</Form.Item>
</>
);
};
const renderOllamaModelFields = () => {
return (
<>
<Form.Item<FormData>
name="ollama_library_model_name"
rules={[
{
required: true,
message: intl.formatMessage(
{
id: 'common.form.rule.input'
},
{ name: intl.formatMessage({ id: 'models.table.name' }) }
)
}
]}
>
<SealInput.Input
disabled={action === PageAction.EDIT}
label={intl.formatMessage({ id: 'model.form.ollama.model' })}
placeholder={intl.formatMessage({ id: 'model.form.ollamaholder' })}
required
></SealInput.Input>
</Form.Item>
</>
);
};
const renderFieldsBySource = () => {
switch (props.source) {
case modelSourceMap.huggingface_value:
return renderHuggingfaceFields();
case modelSourceMap.ollama_library_value:
return renderOllamaModelFields();
case modelSourceMap.s3_value:
return renderS3Fields();
default:
return null;
}
};
const handleOnSelectModel = useCallback((item: any) => {
const repo = item.name;
let name = _.split(item.name, '/').slice(-1)[0];
const reg = /(-gguf)$/i;
name = _.toLower(name).replace(reg, '');
if (form.getFieldValue('source') === modelSourceMap.huggingface_value) {
form.setFieldsValue({
huggingface_repo_id: repo,
name: name
});
} else {
form.setFieldsValue({
ollama_library_model_name: repo,
name: name
});
}
}, []);
const handleSumit = () => {
form.submit();
};
return (
<Drawer
title={
@@ -309,18 +91,14 @@ const AddModal: React.FC<AddModalProps> = (props) => {
borderRadius: '8px 0 0 8px'
}
}}
width={
props.source === modelSourceMap.huggingface_value
? 'calc(100vw - 220px)'
: 600
}
width={width}
footer={false}
>
<div style={{ display: 'flex' }}>
{props.source === modelSourceMap.huggingface_value && (
<ColumnWrapper>
<SearchModel
modelSource={modelSource}
modelSource={props.source}
onSelectModel={handleOnSelectModel}
></SearchModel>
</ColumnWrapper>
@@ -348,94 +126,16 @@ const AddModal: React.FC<AddModalProps> = (props) => {
}
>
<>
<TitleWrapper>Configuration</TitleWrapper>
<Form
name="deployModel"
form={form}
onFinish={onOk}
preserve={false}
style={{ padding: '16px 24px' }}
>
<Form.Item<FormData>
name="name"
rules={[
{
required: true,
message: intl.formatMessage(
{
id: 'common.form.rule.input'
},
{ name: intl.formatMessage({ id: 'common.table.name' }) }
)
}
]}
>
<SealInput.Input
label={intl.formatMessage({
id: 'common.table.name'
})}
required
></SealInput.Input>
</Form.Item>
<Form.Item<FormData>
name="source"
rules={[
{
required: true,
message: intl.formatMessage(
{
id: 'common.form.rule.select'
},
{ name: intl.formatMessage({ id: 'models.form.source' }) }
)
}
]}
>
{
<SealSelect
disabled={true}
label={intl.formatMessage({
id: 'models.form.source'
})}
options={sourceOptions}
required
></SealSelect>
}
</Form.Item>
{renderFieldsBySource()}
<Form.Item<FormData>
name="replicas"
rules={[
{
required: true,
message: intl.formatMessage(
{
id: 'common.form.rule.input'
},
{
name: intl.formatMessage({ id: 'models.form.replicas' })
}
)
}
]}
>
<SealInput.Number
style={{ width: '100%' }}
label={intl.formatMessage({
id: 'models.form.replicas'
})}
required
min={0}
></SealInput.Number>
</Form.Item>
<Form.Item<FormData> name="description">
<SealInput.TextArea
label={intl.formatMessage({
id: 'common.table.description'
})}
></SealInput.TextArea>
</Form.Item>
</Form>
<TitleWrapper>
{intl.formatMessage({ id: 'models.form.configurations' })}
</TitleWrapper>
<DataForm
source={source}
action={action}
repo={huggingfaceRepoId}
onOk={onOk}
ref={form}
></DataForm>
</>
</ColumnWrapper>
</div>
@@ -443,4 +143,4 @@ const AddModal: React.FC<AddModalProps> = (props) => {
);
};
export default memo(AddModal);
export default AddModal;
src/pages/llmodels/components/hf-model-file.tsx
+7 -3
View File
@@ -39,7 +39,7 @@ const HFModelFile: React.FC<HFModelFileProps> = (props) => {
try {
const res = await queryHuggingfaceModelFiles({ repo: props.repo });
const list = _.filter(res, (file: any) => {
return _.endsWith(file.path, '.gguf');
return _.endsWith(file.path, '.gguf') || _.includes(file.path, '.gguf');
});
const sortList = _.sortBy(list, (item: any) => item.size);
setDataSource({ fileList: sortList, loading: false });
@@ -58,7 +58,11 @@ const HFModelFile: React.FC<HFModelFileProps> = (props) => {
}
console.log('quanType', quanType, FileType[quanType]);
if (FileType[quanType] !== undefined) {
return <Tag className="tag-item">{quanType}</Tag>;
return (
<Tag className="tag-item" color="cyan">
{quanType}
</Tag>
);
}
return null;
};
@@ -100,7 +104,7 @@ const HFModelFile: React.FC<HFModelFileProps> = (props) => {
</span> */}
<Tag
className="tag-item"
color="geekblue"
color="green"
style={{
marginRight: 0
}}
src/pages/llmodels/components/hf-model-item.tsx
+1 -1
View File
@@ -43,7 +43,7 @@ const HFModelItem: React.FC<HFModelItemProps> = (props) => {
{props.task && (
<Tag
className="tag-item"
color="geekblue"
color="gold"
style={{
marginRight: 0
}}
src/pages/llmodels/components/search-input.tsx
+8 -6
View File
@@ -45,12 +45,14 @@ const SearchInput: React.FC<{
)
}
prefix={
<SearchOutlined
style={{
fontSize: '16px',
color: 'var(--ant-color-text-quaternary)'
}}
/>
<>
<SearchOutlined
style={{
fontSize: '16px',
color: 'var(--ant-color-text-quaternary)'
}}
/>
</>
}
></Input>
);
src/pages/llmodels/components/search-model.tsx
+1
View File
@@ -232,6 +232,7 @@ const SearchModel: React.FC<SearchInputProps> = (props) => {
useEffect(() => {
handleOnOpen();
console.log('SearchModel useEffect', modelSource);
return () => {
axiosTokenRef.current?.abort?.();
};
src/pages/llmodels/components/table-list.tsx
+29 -13
View File
@@ -80,14 +80,17 @@ const Models: React.FC<ModelsProps> = ({
const [openViewCodeModal, setOpenViewCodeModal] = useState(false);
const [openLogModal, setOpenLogModal] = useState(false);
const [openAddModal, setOpenAddModal] = useState(false);
const [openDeployModal, setOpenDeployModal] = useState(false);
const [openDeployModal, setOpenDeployModal] = useState<any>({
show: false,
width: 600,
source: modelSourceMap.huggingface_value
});
const [title, setTitle] = useState<string>('');
const [currentData, setCurrentData] = useState<ListItem | undefined>(
undefined
);
const [currentInstanceUrl, setCurrentInstanceUrl] = useState<string>('');
const modalRef = useRef<any>(null);
const sourceRef = useRef<any>(null);
const sourceOptions = [
{
@@ -96,8 +99,11 @@ const Models: React.FC<ModelsProps> = ({
key: 'huggingface',
icon: <IconFont type="icon-huggingface"></IconFont>,
onClick: () => {
sourceRef.current = modelSourceMap.huggingface_value;
setOpenDeployModal(true);
setOpenDeployModal({
show: true,
width: 'calc(100vw - 220px)',
source: modelSourceMap.huggingface_value
});
}
},
{
@@ -106,8 +112,11 @@ const Models: React.FC<ModelsProps> = ({
key: 'ollama_library',
icon: <IconFont type="icon-ollama"></IconFont>,
onClick: () => {
sourceRef.current = modelSourceMap.ollama_library_value;
setOpenDeployModal(true);
setOpenDeployModal({
show: true,
width: 600,
source: modelSourceMap.ollama_library_value
});
}
}
];
@@ -177,16 +186,22 @@ const Models: React.FC<ModelsProps> = ({
setOpenAddModal(false);
}, []);
const handleDeployModalCancel = useCallback(() => {
setOpenDeployModal(false);
}, []);
const handleDeployModalCancel = () => {
setOpenDeployModal({
...openDeployModal,
show: false
});
};
const handleCreateModel = useCallback(async (data: FormData) => {
try {
console.log('data:', data);
await createModel({ data });
setOpenDeployModal(false);
setOpenDeployModal({
...openDeployModal,
show: false
});
message.success(intl.formatMessage({ id: 'common.message.success' }));
} catch (error) {}
}, []);
@@ -476,11 +491,12 @@ const Models: React.FC<ModelsProps> = ({
onOk={handleModalOk}
></UpdateModel>
<DeployModal
open={openDeployModal}
open={openDeployModal.show}
action={PageAction.CREATE}
title="Deploy Model"
title={intl.formatMessage({ id: 'models.button.deploy' })}
data={currentData}
source={sourceRef.current}
source={openDeployModal.source}
width={openDeployModal.width}
onCancel={handleDeployModalCancel}
onOk={handleCreateModel}
></DeployModal>
src/pages/llmodels/style/hf-model-file.less
+3 -2
View File
@@ -27,8 +27,9 @@
border-radius: 4px;
font-size: 12px;
height: 22px;
border: 1px solid var(--ant-color-border);
color: var(--ant-color-text-secondary);
opacity: 0.7;
// border: 1px solid var(--ant-color-border);
// color: var(--ant-color-text-secondary);
}
.btn {
src/pages/llmodels/style/hf-model-item.less
+3 -2
View File
@@ -31,8 +31,9 @@
border-radius: 4px;
font-size: 12px;
height: 22px;
border: 1px solid var(--ant-color-border);
color: var(--ant-color-text-secondary);
opacity: 0.9;
// border: 1px solid var(--ant-color-border);
// color: var(--ant-color-text-secondary);
}
}
}