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/playground/components/chat-footer.tsx
+6 -4
View File
@@ -4,6 +4,7 @@ import {
PlusOutlined,
SaveOutlined
} from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Button, Col, Row, Space } from 'antd';
import '../style/chat-footer.less';
@@ -17,6 +18,7 @@ interface ChatFooterProps {
}
const ChatFooter: React.FC<ChatFooterProps> = (props) => {
const intl = useIntl();
const { onSubmit, onClear, onNewMessage, onView, feedback, disabled } = props;
return (
<div className="chat-footer">
@@ -29,14 +31,14 @@ const ChatFooter: React.FC<ChatFooterProps> = (props) => {
icon={<PlusOutlined />}
onClick={onNewMessage}
>
New Message
{intl.formatMessage({ id: 'playground.newMessage' })}
</Button>
<Button
icon={<DeleteOutlined></DeleteOutlined>}
onClick={onClear}
disabled={disabled}
>
Clear
{intl.formatMessage({ id: 'common.button.clear' })}
</Button>
</Space>
</Col>
@@ -48,7 +50,7 @@ const ChatFooter: React.FC<ChatFooterProps> = (props) => {
onClick={onView}
disabled={disabled}
>
View Code
{intl.formatMessage({ id: 'playground.viewcode' })}
</Button>
<Button
disabled={disabled}
@@ -56,7 +58,7 @@ const ChatFooter: React.FC<ChatFooterProps> = (props) => {
icon={<SaveOutlined></SaveOutlined>}
onClick={onSubmit}
>
Submit
{intl.formatMessage({ id: 'common.button.submit' })}
</Button>
</Space>
</Col>
src/pages/playground/components/ground-left.tsx
+10 -6
View File
@@ -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<MessageProps> = (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<MessageProps> = (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<MessageProps> = (props) => {
const handleUpdateMessage = (index: number, message: MessageItemProps) => {
messageList[index] = message;
console.log('updatemessage========', index, message);
setMessageList([...messageList]);
};
const renderLabel = () => {
return (
<div className="system-message-wrap ">
<span className="title">System</span>
<span className="title">
{intl.formatMessage({ id: 'playground.system' })}
</span>
<Button type="primary" size="small">
<EyeInvisibleOutlined />
</Button>
@@ -145,7 +149,7 @@ const MessageList: React.FC<MessageProps> = (props) => {
value={systemMessage}
variant="filled"
autoSize={true}
placeholder="Enter system message here..."
placeholder={intl.formatMessage({ id: 'playground.system.tips' })}
onChange={handleSystemMessageChange}
></Input.TextArea>
</TransitionWrapper>
@@ -193,9 +197,9 @@ const MessageList: React.FC<MessageProps> = (props) => {
open={show}
systemMessage={systemMessage}
messageList={messageList}
parameters={parameters}
parameters={{ ...parameters, stream: true }}
onCancel={handleCloseViewCode}
title="View code"
title={intl.formatMessage({ id: 'playground.viewcode' })}
></ViewCodeModal>
</div>
);
src/pages/playground/components/message-item.tsx
+3 -2
View File
@@ -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<{
<div className="message-item">
<div className="role-type">
<Button onClick={handleRoleChange} type="text">
{_.upperFirst(roleType)}
{intl.formatMessage({ id: `playground.${roleType}` })}
</Button>
</div>
<div className="message-content-input">
src/pages/playground/components/params-settings.tsx
+11 -8
View File
@@ -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<ParamsSettingsProps> = ({
selectedModel,
setParams
}) => {
const intl = useIntl();
const [ModelList, setModelList] = useState([]);
const initialValues = {
seed: null,
@@ -137,17 +139,22 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
onFinishFailed={handleOnFinishFailed}
>
<div>
<h3 className="m-b-20 m-l-10">Model</h3>
<h3 className="m-b-20 m-l-10">
{intl.formatMessage({ id: 'playground.model' })}
</h3>
<Form.Item<ParamsSettingsFormProps>
name="model"
rules={[{ required: true }]}
>
<SealSelect options={ModelList} label="Model"></SealSelect>
<SealSelect
options={ModelList}
label={intl.formatMessage({ id: 'playground.model' })}
></SealSelect>
</Form.Item>
<h3 className="m-b-20 m-l-10 flex-between flex-center">
<span>Parameters</span>
<span>{intl.formatMessage({ id: 'playground.parameters' })}</span>
<Button size="small" onClick={handleResetParams}>
Reset
{intl.formatMessage({ id: 'common.button.reset' })}
</Button>
</h3>
<Form.Item<ParamsSettingsFormProps>
@@ -195,10 +202,6 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
onChange={(val) => handleFieldValueChange(val, 'max_tokens')}
></Slider>
</FieldWrapper>
{/* <SealInput.Number
label="Max Tokens"
style={{ width: INPUT_WIDTH.mini }}
></SealInput.Number> */}
</Form.Item>
<Form.Item<ParamsSettingsFormProps>
name="top_p"
src/pages/playground/components/reference-params.tsx
+14 -3
View File
@@ -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) => {
<Tooltip
title={
<Space>
<span>Completion: {usage.completion_tokens}</span>
<span>Prompt: {usage.prompt_tokens}</span>
<span>
{intl.formatMessage({ id: 'playground.completion' })}:{' '}
{usage.completion_tokens}
</span>
<span>
{intl.formatMessage({ id: 'playground.prompt' })}:{' '}
{usage.prompt_tokens}
</span>
</Space>
}
>
<span>Token Usage: {usage.total_tokens}</span>
<span>
{intl.formatMessage({ id: 'playground.tokenusage' })}:{' '}
{usage.total_tokens}
</span>
</Tooltip>
</div>
);
src/pages/playground/components/view-code-modal.tsx
+20 -24
View File
@@ -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<ViewModalProps> = (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<ViewModalProps> = (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<ViewModalProps> = (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<ViewModalProps> = (props) => {
}
};
useEffect(() => {
generateCode();
}, [lang, systemMessage, messageList, parameters]);
return (
<>
<Modal
@@ -139,8 +140,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
footer={null}
>
<div style={{ marginBottom: '10px' }}>
You can use the following code to start integrating your current
prompt and settings into your application.
{intl.formatMessage({ id: 'playground.viewcode.info' })}
</div>
<Spin spinning={!loaded}>
<EditorWrap
@@ -162,10 +162,6 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
/>
</EditorWrap>
</Spin>
<div style={{ marginTop: '10px' }}>
our API Key can be foundhere You should use environment variables or a
secret management tool to expose your key to your applications.
</div>
</Modal>
</>
);