diff --git a/config/routes.ts b/config/routes.ts index be958a4a..f287e977 100644 --- a/config/routes.ts +++ b/config/routes.ts @@ -6,7 +6,7 @@ export default [ // redirect: '' // }, { - name: 'Dashboard', + name: 'dashboard', path: '/dashboard', key: 'dashboard', icon: 'home', @@ -14,7 +14,7 @@ export default [ component: './dashboard' }, { - name: 'Playground', + name: 'playground', title: 'Playground', path: '/playground', key: 'playground', @@ -22,28 +22,28 @@ export default [ component: './playground' }, { - name: 'Models', + name: 'models', path: '/models', key: 'models', icon: 'Block', component: './llmodels' }, { - name: 'Resources', + name: 'resources', path: '/resources', key: 'resources', icon: 'CloudServer', component: './resources' }, { - name: 'API Keys', + name: 'apikeys', path: '/api-keys', key: 'apikeys', icon: 'LockOutlined', component: './api-keys' }, { - name: 'Users', + name: 'users', path: '/users', key: 'users', icon: 'Team', @@ -51,7 +51,7 @@ export default [ component: './users' }, { - name: 'Profile', + name: 'profile', path: '/profile', key: 'profile', hideInMenu: true, @@ -59,7 +59,7 @@ export default [ icon: 'User' }, { - name: 'Login', + name: 'login', path: '/login', key: 'login', layout: false, diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx index 2c1eca1a..84db80ca 100644 --- a/src/layouts/index.tsx +++ b/src/layouts/index.tsx @@ -10,6 +10,7 @@ import { history, matchRoutes, useAppData, + useIntl, useLocation, useNavigate, type IRoute @@ -78,6 +79,7 @@ const mapRoutes = (routes: IRoute[], role: string) => { export default (props: any) => { const location = useLocation(); const navigate = useNavigate(); + const intl = useIntl(); const { clientRoutes, pluginManager } = useAppData(); const initialInfo = (useModel && useModel('@@initialState')) || { @@ -94,7 +96,10 @@ export default (props: any) => { locale: true }; - const formatMessage = undefined; + const formatMessage = (args) => { + console.log('formatMessage', args); + return intl.formatMessage({ id: args.id }); + }; const runtimeConfig = { ...initialInfo, @@ -158,8 +163,8 @@ export default (props: any) => { history.push(pathname); } }} - formatMessage={userConfig.formatMessage || formatMessage} - menu={{ locale: userConfig.locale }} + formatMessage={formatMessage} + menu={{ locale: true }} logo={Logo} menuItemRender={(menuItemProps, defaultDom) => { console.log('meurender=========', { defaultDom }); diff --git a/src/layouts/rightRender.tsx b/src/layouts/rightRender.tsx index 14651462..b9905f69 100644 --- a/src/layouts/rightRender.tsx +++ b/src/layouts/rightRender.tsx @@ -16,6 +16,7 @@ export function getRightRenderContent(opts: { setInitialState: any; }) { console.log('runtimeConfig==', opts.runtimeConfig, opts); + // const intl = useIntl(); if (opts.runtimeConfig.rightRender) { return opts.runtimeConfig.rightRender( opts.initialState, @@ -64,7 +65,10 @@ export function getRightRenderContent(opts: { icon={ - 语言 + + {/* {FormattedMessage({ id: 'common.settings.language' })} */} + Language + } > @@ -83,7 +87,8 @@ export function getRightRenderContent(opts: { label: ( <> - 设置 + {/* {intl.formatMessage({ id: 'common.button.settings' })} */} + Settings ), onClick: () => { @@ -107,7 +112,8 @@ export function getRightRenderContent(opts: { label: ( <> - 退出登录 + {/* {intl.formatMessage({ id: 'common.button.logout' })} */} + Logout ), onClick: () => { diff --git a/src/locales/en-US.ts b/src/locales/en-US.ts index b1a28074..1afdbd27 100644 --- a/src/locales/en-US.ts +++ b/src/locales/en-US.ts @@ -1,9 +1,13 @@ import common from './en-US/common'; import menu from './en-US/menu'; import models from './en-US/models'; +import playground from './en-US/playground'; +import resources from './en-US/resources'; export default { ...common, ...menu, - ...models + ...models, + ...playground, + ...resources }; diff --git a/src/locales/en-US/apikeys.ts b/src/locales/en-US/apikeys.ts new file mode 100644 index 00000000..4ee9808c --- /dev/null +++ b/src/locales/en-US/apikeys.ts @@ -0,0 +1,5 @@ +export default { + 'apikeys.title': 'API Keys', + 'apikeys.button.create': 'New API Key', + 'apikeys.form.expiretime': 'Expiration' +}; diff --git a/src/locales/en-US/common.ts b/src/locales/en-US/common.ts index 6e904d15..f52759b7 100644 --- a/src/locales/en-US/common.ts +++ b/src/locales/en-US/common.ts @@ -41,6 +41,7 @@ export default { 'common.button.edit': 'Edit', 'common.button.authorize': 'Role Authorization', 'common.button.confirm': 'Confirm', + 'common.button.viewlog': 'View Logs', 'common.table.operation': 'Operation', 'common.table.createTime': 'Created', 'common.table.updateTime': 'Updated', @@ -173,6 +174,10 @@ export default { 'common.nodata.created': 'No {type} has been created yet', 'common.nodata.added': 'No {type} has been added yet', 'common.status.edited': 'Edited', - 'common.table.user': '用户', - 'common.settings.instructions': 'Instructions' + 'common.table.user': 'User', + 'common.settings.instructions': 'Instructions', + 'common.settings.language': 'Language', + 'common.delete.confirm': + 'Are you sure you want to delete the selected {type}?', + 'common.filter.name': 'Filter by name' }; diff --git a/src/locales/en-US/menu.ts b/src/locales/en-US/menu.ts index ff8b4c56..f9f9fef6 100644 --- a/src/locales/en-US/menu.ts +++ b/src/locales/en-US/menu.ts @@ -1 +1,10 @@ -export default {}; +export default { + 'menu.dashboard': 'Dashboard', + 'menu.playground': 'Playground', + 'menu.models': 'Models', + 'menu.resources': 'Resources', + 'menu.apikeys': 'API Keys', + 'menu.users': 'Users', + 'menu.profile': 'Profile', + 'menu.login': 'Login' +}; diff --git a/src/locales/en-US/models.ts b/src/locales/en-US/models.ts index 12cd8e71..450c0f05 100644 --- a/src/locales/en-US/models.ts +++ b/src/locales/en-US/models.ts @@ -1,3 +1,14 @@ export default { - 'models.button.deploy': 'Deploy Model' + 'models.button.deploy': 'Deploy Model', + 'models.title': 'Models', + 'models.table.models': 'models', + 'models.table.name': 'Model Name', + 'models.form.source': 'Source', + 'models.form.repoid': 'Repo ID', + 'models.form.repoid.desc': 'Only .gguf format is supported', + 'models.form.filename': 'File Name', + 'models.form.replicas': 'Replicas', + 'models.form.s3address': 'S3 Address', + 'models.openinplayground': 'Open in Playground', + 'models.instances': 'instances' }; diff --git a/src/locales/en-US/playground.ts b/src/locales/en-US/playground.ts new file mode 100644 index 00000000..8debb24d --- /dev/null +++ b/src/locales/en-US/playground.ts @@ -0,0 +1,17 @@ +export default { + 'playground.system.tips': 'Enter system message here...', + 'playground.title': 'Playground', + 'playground.system': 'System', + 'playground.user': 'User', + 'playground.assistant': 'Assistant', + 'playground.newMessage': 'New Message', + 'playground.viewcode': 'View Code', + 'playground.model': 'Model', + 'playground.parameters': 'Parameters', + 'playground.viewcode.info': + 'You can use the following code to start integrating your current prompt and settings into your application.', + 'playground.completion': 'Completion', + 'playground.prompt': 'Prompt', + 'playground.tokenusage': 'Token Usage', + 'models.openinplayground': 'Open in Playground' +}; diff --git a/src/locales/en-US/resources.ts b/src/locales/en-US/resources.ts new file mode 100644 index 00000000..fc74c9c3 --- /dev/null +++ b/src/locales/en-US/resources.ts @@ -0,0 +1,11 @@ +export default { + 'resources.title': 'Resources', + 'resources.nodes': 'Nodes', + 'resources.table.hostname': 'Hostname', + 'resources.table.ip': 'IP', + 'resources.table.cpu': 'CPU', + 'resources.table.memory': 'Memory', + 'resources.table.gpu': 'GPU', + 'resources.table.disk': 'Storage', + 'resources.table.vram': 'VRAM' +}; diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts index 526c1746..a8bd430c 100644 --- a/src/locales/zh-CN.ts +++ b/src/locales/zh-CN.ts @@ -1,9 +1,13 @@ import menu from './en-US/menu'; import common from './zh-CN/common'; import models from './zh-CN/models'; +import playground from './zh-CN/playground'; +import resources from './zh-CN/resources'; export default { ...common, ...menu, - ...models + ...models, + ...playground, + ...resources }; diff --git a/src/locales/zh-CN/apikeys.ts b/src/locales/zh-CN/apikeys.ts new file mode 100644 index 00000000..24d4fb96 --- /dev/null +++ b/src/locales/zh-CN/apikeys.ts @@ -0,0 +1,5 @@ +export default { + 'apikeys.title': 'API 密钥', + 'apikeys.button.create': '新建 API 密钥', + 'apikeys.form.expiretime': '过期时间' +}; diff --git a/src/locales/zh-CN/common.ts b/src/locales/zh-CN/common.ts index 093f2444..501abefa 100644 --- a/src/locales/zh-CN/common.ts +++ b/src/locales/zh-CN/common.ts @@ -40,6 +40,7 @@ export default { 'common.button.edit': '编辑', 'common.button.authorize': '角色授权', 'common.button.confirm': '确定', + 'common.button.viewlog': '查看日志', 'common.table.operation': '操作', 'common.table.createTime': '创建时间', 'common.table.updateTime': '更新时间', @@ -170,5 +171,8 @@ export default { 'common.nodata.added': '尚未添加{type}', 'common.status.edited': '已编辑', 'common.table.user': '用户', - 'common.settings.instructions': '操作指引' + 'common.settings.instructions': '操作指引', + 'common.settings.language': '语言', + 'common.delete.confirm': '确定删除选中的{type}吗？', + 'common.filter.name': '名称查询' }; diff --git a/src/locales/zh-CN/menu.ts b/src/locales/zh-CN/menu.ts index ff8b4c56..b0dbe0fc 100644 --- a/src/locales/zh-CN/menu.ts +++ b/src/locales/zh-CN/menu.ts @@ -1 +1,10 @@ -export default {}; +export default { + 'menu.dashboard': '概览', + 'menu.playground': '对话', + 'menu.models': '模型', + 'menu.resources': '资源', + 'menu.apikeys': 'API 密钥', + 'menu.users': '用户', + 'menu.profile': '个人信息', + 'menu.login': '登录' +}; diff --git a/src/locales/zh-CN/models.ts b/src/locales/zh-CN/models.ts index 12cd8e71..26faf637 100644 --- a/src/locales/zh-CN/models.ts +++ b/src/locales/zh-CN/models.ts @@ -1,3 +1,14 @@ export default { - 'models.button.deploy': 'Deploy Model' + 'models.button.deploy': '部署模型', + 'models.title': '模型', + 'models.table.models': '模型', + 'models.table.name': '模型名称', + 'models.form.source': '来源', + 'models.form.repoid': '仓库 ID', + 'models.form.repoid.desc': '只支持 .gguf 格式', + 'models.form.filename': '文件名', + 'models.form.replicas': '副本数', + 'models.form.s3address': 'S3 地址', + 'models.openinplayground': '在 Playground 中打开', + 'models.instances': '实例' }; diff --git a/src/locales/zh-CN/playground.ts b/src/locales/zh-CN/playground.ts new file mode 100644 index 00000000..b92ab703 --- /dev/null +++ b/src/locales/zh-CN/playground.ts @@ -0,0 +1,16 @@ +export default { + 'playground.system.tips': '在这里输入系统消息...', + 'playground.title': '对话', + 'playground.system': '系统', + 'playground.user': '用户', + 'playground.assistant': '助手', + 'playground.newMessage': '新消息', + 'playground.viewcode': '查看代码', + 'playground.model': '模型', + 'playground.parameters': '参数', + 'playground.viewcode.info': + '你可以使用以下代码将当前的提示和设置集成到你的应用程序中。', + 'playground.completion': '补全', + 'playground.prompt': '提示', + 'playground.tokenusage': 'Token 使用量' +}; diff --git a/src/locales/zh-CN/resources.ts b/src/locales/zh-CN/resources.ts new file mode 100644 index 00000000..c33c8258 --- /dev/null +++ b/src/locales/zh-CN/resources.ts @@ -0,0 +1,11 @@ +export default { + 'resources.title': '资源', + 'resources.nodes': '节点', + 'resources.table.hostname': '主机名', + 'resources.table.ip': 'IP', + 'resources.table.cpu': 'CPU', + 'resources.table.memory': '内存', + 'resources.table.gpu': 'GPU', + 'resources.table.disk': '磁盘', + 'resources.table.vram': '显存' +}; diff --git a/src/pages/api-keys/apis/index.ts b/src/pages/api-keys/apis/index.ts index 13d053ab..1f8ddf0c 100644 --- a/src/pages/api-keys/apis/index.ts +++ b/src/pages/api-keys/apis/index.ts @@ -1,7 +1,7 @@ import { request } from '@umijs/max'; import { FormData, ListItem } from '../config/types'; -export const APIS_KEYS_API = '/api_keys'; +export const APIS_KEYS_API = '/api-keys'; export async function queryApisKeysList( params: Global.Pagination & { query?: string } diff --git a/src/pages/api-keys/index.tsx b/src/pages/api-keys/index.tsx index e0850e6f..03d092fb 100644 --- a/src/pages/api-keys/index.tsx +++ b/src/pages/api-keys/index.tsx @@ -27,37 +27,6 @@ import { FormData, ListItem } from './config/types'; const { Column } = Table; -const list = [ - { - key: '1', - name: 'local', - secretKey: `auk_uzem...owsa`, - lastusedTime: '2024-05-22 12:20:10', - createTime: '2024-05-20 12:13:25' - }, - { - key: '2', - name: 'dev', - secretKey: `auk_uzem...okwa`, - lastusedTime: '2024-05-19 13:30:22', - createTime: '2024-05-18 10:28:32' - }, - { - key: '3', - name: 'prod', - secretKey: `auk_uzem...uuds`, - lastusedTime: '2024-05-18 10:28:32', - createTime: '2024-05-17 08:21:09' - }, - { - key: '4', - name: 'test', - secretKey: `auk_uzem...uksa`, - lastusedTime: '2024-05-18 10:28:32', - createTime: '2024-05-16 13:33:23' - } -]; - const Models: React.FC = () => { const rowSelection = useTableRowSelection(); const { sortOrder, setSortOrder } = useTableSort({ diff --git a/src/pages/llmodels/apis/index.ts b/src/pages/llmodels/apis/index.ts index 5675eaa7..c08eb5e7 100644 --- a/src/pages/llmodels/apis/index.ts +++ b/src/pages/llmodels/apis/index.ts @@ -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( diff --git a/src/pages/llmodels/components/add-modal.tsx b/src/pages/llmodels/components/add-modal.tsx index 67d0bde5..0cd70011 100644 --- a/src/pages/llmodels/components/add-modal.tsx +++ b/src/pages/llmodels/components/add-modal.tsx @@ -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 = (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 = (props) => { const initFormValue = () => { if (action === PageAction.CREATE && open) { form.setFieldsValue({ - source: 'huggingface' + source: 'huggingface', + replicas: 1 }); } }; @@ -51,9 +54,7 @@ const AddModal: React.FC = (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 = (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 = (props) => { <> 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' }) } + ) + } + ]} > name="huggingface_filename" - rules={[{ required: true }]} + rules={[ + { + required: true, + message: intl.formatMessage( + { + id: 'common.form.rule.input' + }, + { name: intl.formatMessage({ id: 'models.form.filename' }) } + ) + } + ]} > @@ -152,8 +172,26 @@ const AddModal: React.FC = (props) => { const renderS3Fields = () => { return ( <> - name="s3_address" rules={[{ required: true }]}> - + + name="s3_address" + rules={[ + { + required: true, + message: intl.formatMessage( + { + id: 'common.form.rule.input' + }, + { name: intl.formatMessage({ id: 'models.form.s3address' }) } + ) + } + ]} + > + ); @@ -164,9 +202,22 @@ const AddModal: React.FC = (props) => { <> 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' }) } + ) + } + ]} > - + ); @@ -212,28 +263,80 @@ const AddModal: React.FC = (props) => { } >
- name="name" rules={[{ required: true }]}> - + + name="name" + rules={[ + { + required: true, + message: intl.formatMessage( + { + id: 'common.form.rule.input' + }, + { name: intl.formatMessage({ id: 'common.table.name' }) } + ) + } + ]} + > + - name="source" rules={[{ required: true }]}> + + name="source" + rules={[ + { + required: true, + message: intl.formatMessage( + { + id: 'common.form.rule.select' + }, + { name: intl.formatMessage({ id: 'models.form.source' }) } + ) + } + ]} + > {renderFieldsBySource()} - name="replicas" rules={[{ required: true }]}> + + name="replicas" + rules={[ + { + required: true, + message: intl.formatMessage( + { + id: 'common.form.rule.input' + }, + { name: intl.formatMessage({ id: 'models.form.replicas' }) } + ) + } + ]} + > name="description"> - + diff --git a/src/pages/llmodels/index.tsx b/src/pages/llmodels/index.tsx index 1bf7b3f8..87097b0c 100644 --- a/src/pages/llmodels/index.tsx +++ b/src/pages/llmodels/index.tsx @@ -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 = () => { {hoverChildIndex === `${item.id}-${index}` && ( - + - + @@ -440,7 +454,7 @@ const Models: React.FC = () => { }} > { /> { /> { return !record.transition ? ( - + - + @@ -48,7 +50,7 @@ const ChatFooter: React.FC = (props) => { onClick={onView} disabled={disabled} > - View Code + {intl.formatMessage({ id: 'playground.viewcode' })} diff --git a/src/pages/playground/components/ground-left.tsx b/src/pages/playground/components/ground-left.tsx index 6e4c29c0..5f521b0b 100644 --- a/src/pages/playground/components/ground-left.tsx +++ b/src/pages/playground/components/ground-left.tsx @@ -1,6 +1,7 @@ import TransitionWrapper from '@/components/transition'; import { EyeInvisibleOutlined } from '@ant-design/icons'; import { PageContainer } from '@ant-design/pro-components'; +import { useIntl } from '@umijs/max'; import { Button, Input, Spin } from 'antd'; import _ from 'lodash'; import { useRef, useState } from 'react'; @@ -34,6 +35,7 @@ const MessageList: React.FC = (props) => { } ]); + const intl = useIntl(); const [systemMessage, setSystemMessage] = useState(''); const [show, setShow] = useState(false); const [loading, setLoading] = useState(false); @@ -73,7 +75,8 @@ const MessageList: React.FC = (props) => { ...messageList ] : [...messageList], - ...parameters + ...parameters, + stream: true }; const data = await execChatCompletions(chatParams); const assistant = _.get(data, ['choices', '0', 'message']); @@ -118,14 +121,15 @@ const MessageList: React.FC = (props) => { const handleUpdateMessage = (index: number, message: MessageItemProps) => { messageList[index] = message; - console.log('updatemessage========', index, message); setMessageList([...messageList]); }; const renderLabel = () => { return (
- System + + {intl.formatMessage({ id: 'playground.system' })} + @@ -145,7 +149,7 @@ const MessageList: React.FC = (props) => { value={systemMessage} variant="filled" autoSize={true} - placeholder="Enter system message here..." + placeholder={intl.formatMessage({ id: 'playground.system.tips' })} onChange={handleSystemMessageChange} > @@ -193,9 +197,9 @@ const MessageList: React.FC = (props) => { open={show} systemMessage={systemMessage} messageList={messageList} - parameters={parameters} + parameters={{ ...parameters, stream: true }} onCancel={handleCloseViewCode} - title="View code" + title={intl.formatMessage({ id: 'playground.viewcode' })} >
); diff --git a/src/pages/playground/components/message-item.tsx b/src/pages/playground/components/message-item.tsx index 3d9e977f..59c560a8 100644 --- a/src/pages/playground/components/message-item.tsx +++ b/src/pages/playground/components/message-item.tsx @@ -1,6 +1,6 @@ import { MinusCircleOutlined } from '@ant-design/icons'; +import { useIntl } from '@umijs/max'; import { Button, Input } from 'antd'; -import _ from 'lodash'; import { memo, useEffect, useRef, useState } from 'react'; import { Roles } from '../config'; import '../style/message-item.less'; @@ -18,6 +18,7 @@ const MessageItem: React.FC<{ isFocus: boolean; onDelete: () => void; }> = ({ message, isFocus, onDelete, updateMessage }) => { + const intl = useIntl(); const [roleType, setRoleType] = useState(message.role); const [isTyping, setIsTyping] = useState(false); const [messageContent, setMessageContent] = useState(message.content); @@ -87,7 +88,7 @@ const MessageItem: React.FC<{
diff --git a/src/pages/playground/components/params-settings.tsx b/src/pages/playground/components/params-settings.tsx index 7390554a..0a344e5b 100644 --- a/src/pages/playground/components/params-settings.tsx +++ b/src/pages/playground/components/params-settings.tsx @@ -3,6 +3,7 @@ import SealInput from '@/components/seal-form/seal-input'; import SealSelect from '@/components/seal-form/seal-select'; import { INPUT_WIDTH } from '@/constants'; import { queryModelsList } from '@/pages/llmodels/apis'; +import { useIntl } from '@umijs/max'; import { Button, Form, InputNumber, Slider } from 'antd'; import _ from 'lodash'; import { useEffect, useState } from 'react'; @@ -29,6 +30,7 @@ const ParamsSettings: React.FC = ({ selectedModel, setParams }) => { + const intl = useIntl(); const [ModelList, setModelList] = useState([]); const initialValues = { seed: null, @@ -137,17 +139,22 @@ const ParamsSettings: React.FC = ({ onFinishFailed={handleOnFinishFailed} >
-

Model

+

+ {intl.formatMessage({ id: 'playground.model' })} +

name="model" rules={[{ required: true }]} > - +

- Parameters + {intl.formatMessage({ id: 'playground.parameters' })}

@@ -195,10 +202,6 @@ const ParamsSettings: React.FC = ({ onChange={(val) => handleFieldValueChange(val, 'max_tokens')} > - {/* */} name="top_p" diff --git a/src/pages/playground/components/reference-params.tsx b/src/pages/playground/components/reference-params.tsx index 36ee435e..696aa68e 100644 --- a/src/pages/playground/components/reference-params.tsx +++ b/src/pages/playground/components/reference-params.tsx @@ -1,3 +1,4 @@ +import { useIntl } from '@umijs/max'; import { Space, Tooltip } from 'antd'; import '../style/reference-params.less'; @@ -10,6 +11,7 @@ interface ReferenceParamsProps { } const ReferenceParams = (props: ReferenceParamsProps) => { + const intl = useIntl(); const { usage } = props; if (!usage) { return null; @@ -19,12 +21,21 @@ const ReferenceParams = (props: ReferenceParamsProps) => { - Completion: {usage.completion_tokens} - Prompt: {usage.prompt_tokens} + + {intl.formatMessage({ id: 'playground.completion' })}:{' '} + {usage.completion_tokens} + + + {intl.formatMessage({ id: 'playground.prompt' })}:{' '} + {usage.prompt_tokens} + } > - Token Usage: {usage.total_tokens} + + {intl.formatMessage({ id: 'playground.tokenusage' })}:{' '} + {usage.total_tokens} +
); diff --git a/src/pages/playground/components/view-code-modal.tsx b/src/pages/playground/components/view-code-modal.tsx index 2bee2d16..b854984a 100644 --- a/src/pages/playground/components/view-code-modal.tsx +++ b/src/pages/playground/components/view-code-modal.tsx @@ -1,5 +1,6 @@ import EditorWrap from '@/components/editor-wrap'; import Editor from '@monaco-editor/react'; +import { useIntl } from '@umijs/max'; import { Modal, Spin } from 'antd'; import _ from 'lodash'; import React, { useEffect, useRef, useState } from 'react'; @@ -23,6 +24,7 @@ const ViewCodeModal: React.FC = (props) => { parameters = {} } = props || {}; + const intl = useIntl(); const editorRef = useRef(null); const [loaded, setLoaded] = useState(false); const [codeValue, setCodeValue] = useState(''); @@ -34,16 +36,24 @@ const ViewCodeModal: React.FC = (props) => { { label: 'Nodejs', value: 'javascript' } ]; - useEffect(() => { - generateCode(); - }, [lang, systemMessage, messageList, parameters]); - + const formatCode = () => { + if (editorRef.current) { + setTimeout(() => { + editorRef.current + ?.getAction?.('editor.action.formatDocument') + ?.run() + .then(() => { + console.log('format success'); + }); + }, 100); + } + }; const generateCode = () => { if (lang === 'shell') { const systemList = systemMessage ? [{ role: 'system', content: systemMessage }] : []; - const code = `curl ${window.location.origin}/v1/chat/completions \n-H "Content-Type: application/json" \n-H "Authorization: Bearer $\{GPUSTACK_API_KEY}\" \n-d '${JSON.stringify( + const code = `curl ${window.location.origin}/v1/chat/completions \n-H "Content-Type: application/json" \n-H "Authorization: Bearer $\{GPUSTACK_API_KEY}" \n-d '${JSON.stringify( { ...parameters, messages: [...systemList, ...messageList] @@ -92,19 +102,6 @@ const ViewCodeModal: React.FC = (props) => { setLoaded(true); }; - function formatCode() { - if (editorRef.current) { - setTimeout(() => { - editorRef.current - ?.getAction?.('editor.action.formatDocument') - ?.run() - .then(() => { - console.log('format success'); - }); - }, 100); - } - } - const handleOnChangeLang = (value: string) => { setLang(value); }; @@ -124,6 +121,10 @@ const ViewCodeModal: React.FC = (props) => { } }; + useEffect(() => { + generateCode(); + }, [lang, systemMessage, messageList, parameters]); + return ( <> = (props) => { footer={null} >
- You can use the following code to start integrating your current - prompt and settings into your application. + {intl.formatMessage({ id: 'playground.viewcode.info' })}
= (props) => { /> -
- our API Key can be foundhere You should use environment variables or a - secret management tool to expose your key to your applications. -
); diff --git a/src/pages/playground/config/index.ts b/src/pages/playground/config/index.ts index 29368f94..3f6323aa 100644 --- a/src/pages/playground/config/index.ts +++ b/src/pages/playground/config/index.ts @@ -5,10 +5,10 @@ export const Roles = { export const playGroundRoles = [ { key: 'user', - label: 'User' + label: 'playground.user' }, { key: 'assistant', - label: 'Assistant' + label: 'playground.assitant' } ]; diff --git a/src/pages/resources/components/nodes.tsx b/src/pages/resources/components/nodes.tsx index 4cf3b94f..e82dd066 100644 --- a/src/pages/resources/components/nodes.tsx +++ b/src/pages/resources/components/nodes.tsx @@ -4,6 +4,7 @@ import StatusTag from '@/components/status-tag'; import useTableRowSelection from '@/hooks/use-table-row-selection'; import useTableSort from '@/hooks/use-table-sort'; import { SyncOutlined } from '@ant-design/icons'; +import { useIntl } from '@umijs/max'; import { Button, Input, Space, Table } from 'antd'; import _ from 'lodash'; import { useEffect, useState } from 'react'; @@ -16,6 +17,7 @@ const Models: React.FC = () => { const { sortOrder, setSortOrder } = useTableSort({ defaultSortOrder: 'descend' }); + const intl = useIntl(); const [total, setTotal] = useState(0); const [loading, setLoading] = useState(false); const [dataSource, setDataSource] = useState([]); @@ -86,7 +88,9 @@ const Models: React.FC = () => { left={ @@ -114,9 +118,13 @@ const Models: React.FC = () => { onChange: handlePageChange }} > - + { @@ -145,7 +153,7 @@ const Models: React.FC = () => { }} /> { @@ -177,7 +185,15 @@ const Models: React.FC = () => { }} /> { + return ; + }} + /> + { diff --git a/src/pages/resources/index.tsx b/src/pages/resources/index.tsx index 84fd96be..b4c99633 100644 --- a/src/pages/resources/index.tsx +++ b/src/pages/resources/index.tsx @@ -1,4 +1,5 @@ import { PageContainer } from '@ant-design/pro-components'; +import { useIntl } from '@umijs/max'; import type { TabsProps } from 'antd'; import { Tabs } from 'antd'; import { useState } from 'react'; @@ -20,6 +21,8 @@ const items: TabsProps['items'] = [ const Resources = () => { const [activeKey, setActiveKey] = useState('test'); + const intl = useIntl(); + const handleChangeTab = (key: string) => { setActiveKey(key); }; @@ -28,7 +31,7 @@ const Resources = () => {