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

chore: languages settings

Browse Source
This commit is contained in:
jialin
2024-06-24 14:00:06 +08:00
parent de96c3d81d
commit 64683fdeb6
32 changed files with 417 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/llmodels/apis/index.ts
+1 -1
View File
@@ -9,7 +9,7 @@ import {
export const MODELS_API = '/models';
export const MODEL_INSTANCE_API = '/model_instances';
export const MODEL_INSTANCE_API = '/model-instances';
// ===================== Models =====================
export async function queryModelsList(
src/pages/llmodels/components/add-modal.tsx
+124 -21
View File
@@ -5,6 +5,7 @@ import SealSelect from '@/components/seal-form/seal-select';
import { PageAction } from '@/config';
import { PageActionType } from '@/config/types';
import { convertFileSize } from '@/utils';
import { useIntl } from '@umijs/max';
import { Form, Input, Modal } from 'antd';
import _ from 'lodash';
import { useEffect, useState } from 'react';
@@ -31,6 +32,7 @@ const sourceOptions = [
const AddModal: React.FC<AddModalProps> = (props) => {
const { title, action, open, onOk, onCancel } = props || {};
const [form] = Form.useForm();
const intl = useIntl();
const modelSource = Form.useWatch('source', form);
const [repoOptions, setRepoOptions] = useState<
{ label: string; value: string }[]
@@ -42,7 +44,8 @@ const AddModal: React.FC<AddModalProps> = (props) => {
const initFormValue = () => {
if (action === PageAction.CREATE && open) {
form.setFieldsValue({
source: 'huggingface'
source: 'huggingface',
replicas: 1
});
}
};
@@ -51,9 +54,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
initFormValue();
}, [open]);
const handleInputRepoChange = (value: string) => {
console.log('repo change', value);
};
const handleInputRepoChange = (value: string) => {};
const fileNamLabel = (item: any) => {
return (
@@ -87,7 +88,6 @@ const AddModal: React.FC<AddModalProps> = (props) => {
const handleRepoOnBlur = (e: any) => {
const repo = form.getFieldValue('huggingface_repo_id');
console.log('repo blur', repo);
handleRepoSelect(repo);
};
@@ -119,28 +119,48 @@ const AddModal: React.FC<AddModalProps> = (props) => {
<>
<Form.Item<FormData>
name="huggingface_repo_id"
rules={[{ required: true }]}
rules={[
{
required: true,
message: intl.formatMessage(
{
id: 'common.form.rule.input'
},
{ name: intl.formatMessage({ id: 'models.form.repoid' }) }
)
}
]}
>
<SealAutoComplete
label="Repo ID"
label={intl.formatMessage({ id: 'models.form.repoid' })}
required
showSearch
onBlur={handleRepoOnBlur}
onChange={handleInputRepoChange}
onSearch={debounceSearch}
options={repoOptions}
description="Only .gguf format is supported"
description={intl.formatMessage({ id: 'models.form.repoid.desc' })}
>
<Input.Search style={{ width: '520px' }}></Input.Search>
</SealAutoComplete>
</Form.Item>
<Form.Item<FormData>
name="huggingface_filename"
rules={[{ required: true }]}
rules={[
{
required: true,
message: intl.formatMessage(
{
id: 'common.form.rule.input'
},
{ name: intl.formatMessage({ id: 'models.form.filename' }) }
)
}
]}
>
<SealAutoComplete
showSearch
label="File Name"
label={intl.formatMessage({ id: 'models.form.filename' })}
required
options={fileOptions}
></SealAutoComplete>
@@ -152,8 +172,26 @@ const AddModal: React.FC<AddModalProps> = (props) => {
const renderS3Fields = () => {
return (
<>
<Form.Item<FormData> name="s3_address" rules={[{ required: true }]}>
<SealInput.Input label="S3 Address" required></SealInput.Input>
<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>
</>
);
@@ -164,9 +202,22 @@ const AddModal: React.FC<AddModalProps> = (props) => {
<>
<Form.Item<FormData>
name="ollama_library_model_name"
rules={[{ required: true }]}
rules={[
{
required: true,
message: intl.formatMessage(
{
id: 'common.form.rule.input'
},
{ name: intl.formatMessage({ id: 'models.table.name' }) }
)
}
]}
>
<SealInput.Input label="Model Name" required></SealInput.Input>
<SealInput.Input
label={intl.formatMessage({ id: 'models.table.name' })}
required
></SealInput.Input>
</Form.Item>
</>
);
@@ -212,28 +263,80 @@ const AddModal: React.FC<AddModalProps> = (props) => {
}
>
<Form name="addModalForm" form={form} onFinish={onOk} preserve={false}>
<Form.Item<FormData> name="name" rules={[{ required: true }]}>
<SealInput.Input label="Name" required></SealInput.Input>
<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 }]}>
<Form.Item<FormData>
name="source"
rules={[
{
required: true,
message: intl.formatMessage(
{
id: 'common.form.rule.select'
},
{ name: intl.formatMessage({ id: 'models.form.source' }) }
)
}
]}
>
<SealSelect
label="Source"
label={intl.formatMessage({
id: 'models.form.source'
})}
options={sourceOptions}
required
onChange={handleSourceChange}
></SealSelect>
</Form.Item>
{renderFieldsBySource()}
<Form.Item<FormData> name="replicas" rules={[{ required: true }]}>
<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="Replicas"
label={intl.formatMessage({
id: 'models.form.replicas'
})}
required
min={1}
></SealInput.Number>
</Form.Item>
<Form.Item<FormData> name="description">
<SealInput.TextArea label="Description"></SealInput.TextArea>
<SealInput.TextArea
label={intl.formatMessage({
id: 'common.table.description'
})}
></SealInput.TextArea>
</Form.Item>
</Form>
</Modal>
src/pages/llmodels/index.tsx
+43 -23
View File
@@ -178,7 +178,6 @@ const Models: React.FC = () => {
const handleAddModal = () => {
setOpenAddModal(true);
setAction(PageAction.CREATE);
setTitle('Deploy Model');
};
const handleClickMenu = (e: any) => {
@@ -186,10 +185,9 @@ const Models: React.FC = () => {
};
const handleModalOk = async (data: FormData) => {
console.log('handleModalOk', data);
await createModel({ data });
setOpenAddModal(false);
message.success('successfully!');
message.success(intl.formatMessage({ id: 'common.message.success' }));
};
const handleModalCancel = () => {
@@ -203,10 +201,13 @@ const Models: React.FC = () => {
const handleDelete = async (row: any) => {
Modal.confirm({
title: '',
content: 'Are you sure you want to delete the selected models?',
content: intl.formatMessage(
{ id: 'common.delete.confirm' },
{ type: intl.formatMessage({ id: 'models.table.models' }) }
),
async onOk() {
await deleteModel(row.id);
message.success('successfully!');
message.success(intl.formatMessage({ id: 'common.message.success' }));
fetchData();
},
onCancel() {
@@ -217,10 +218,13 @@ const Models: React.FC = () => {
const handleDeleteBatch = () => {
Modal.confirm({
title: '',
content: 'Are you sure you want to delete the selected models?',
content: intl.formatMessage(
{ id: 'common.delete.confirm' },
{ type: intl.formatMessage({ id: 'models.table.models' }) }
),
async onOk() {
await handleBatchRequest(rowSelection.selectedRowKeys, deleteModel);
message.success('successfully!');
message.success(intl.formatMessage({ id: 'common.message.success' }));
fetchData();
},
onCancel() {
@@ -244,7 +248,7 @@ const Models: React.FC = () => {
source: row.source
};
await createModelInstance({ data });
message.success('successfully!');
message.success(intl.formatMessage({ id: 'common.message.success' }));
} catch (error) {}
};
@@ -258,11 +262,13 @@ const Models: React.FC = () => {
const handleDeleteInstace = (row: any) => {
Modal.confirm({
title: '',
content: 'Are you sure you want to delete the instance?',
content: intl.formatMessage(
{ id: 'common.delete.confirm' },
{ type: intl.formatMessage({ id: 'models.instances' }) }
),
async onOk() {
console.log('OK');
await deleteModelInstance(row.id);
message.success('successfully!');
message.success(intl.formatMessage({ id: 'common.message.success' }));
fetchData();
},
onCancel() {
@@ -343,7 +349,11 @@ const Models: React.FC = () => {
<Col span={7}>
{hoverChildIndex === `${item.id}-${index}` && (
<Space size={20}>
<Tooltip title="Delete">
<Tooltip
title={intl.formatMessage({
id: 'common.button.delete'
})}
>
<Button
size="small"
danger
@@ -351,7 +361,11 @@ const Models: React.FC = () => {
icon={<DeleteOutlined></DeleteOutlined>}
></Button>
</Tooltip>
<Tooltip title="View Logs">
<Tooltip
title={intl.formatMessage({
id: 'common.button.viewlog'
})}
>
<Button
size="small"
onClick={() => handleViewLogs(item)}
@@ -375,7 +389,7 @@ const Models: React.FC = () => {
<PageContainer
ghost
header={{
title: 'Models'
title: intl.formatMessage({ id: 'models.title' })
}}
extra={[]}
>
@@ -384,7 +398,7 @@ const Models: React.FC = () => {
left={
<Space>
<Input
placeholder="名称查询"
placeholder={intl.formatMessage({ id: 'common.filter.name' })}
style={{ width: 300 }}
allowClear
onChange={handleNameChange}
@@ -413,7 +427,7 @@ const Models: React.FC = () => {
onClick={handleDeleteBatch}
disabled={!rowSelection.selectedRowKeys.length}
>
Delete
{intl?.formatMessage?.({ id: 'common.button.delete' })}
</Button>
</Access>
</Space>
@@ -440,7 +454,7 @@ const Models: React.FC = () => {
}}
>
<SealColumn
title="Model Name"
title={intl.formatMessage({ id: 'models.table.name' })}
dataIndex="name"
key="name"
width={400}
@@ -461,7 +475,7 @@ const Models: React.FC = () => {
/>
<SealColumn
span={8}
title="Create Time"
title={intl.formatMessage({ id: 'common.table.createTime' })}
dataIndex="created_at"
key="createTime"
defaultSortOrder="descend"
@@ -474,12 +488,16 @@ const Models: React.FC = () => {
/>
<SealColumn
span={8}
title="Operation"
title={intl.formatMessage({ id: 'common.table.operation' })}
key="operation"
render={(text, record) => {
return !record.transition ? (
<Space size={20}>
<Tooltip title="Open in PlayGround">
<Tooltip
title={intl.formatMessage({
id: 'models.openinplayground'
})}
>
<Button
size="small"
type="primary"
@@ -487,7 +505,9 @@ const Models: React.FC = () => {
icon={<WechatWorkOutlined />}
></Button>
</Tooltip>
<Tooltip title="Delete">
<Tooltip
title={intl.formatMessage({ id: 'common.button.delete' })}
>
<Button
size="small"
type="primary"
@@ -505,12 +525,12 @@ const Models: React.FC = () => {
<AddModal
open={openAddModal}
action={action}
title={title}
title={intl.formatMessage({ id: 'models.button.deploy' })}
onCancel={handleModalCancel}
onOk={handleModalOk}
></AddModal>
<ViewLogsModal
title="View Logs"
title={intl.formatMessage({ id: 'common.button.viewlog' })}
open={openLogModal}
onCancel={handleLogModalCancel}
></ViewLogsModal>