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

fix: ux bug

Browse Source
This commit is contained in:
jialin
2024-07-02 17:30:03 +08:00
parent 49efbd1a7f
commit 316019586f
19 changed files with 102 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/playground/components/ground-left.tsx
+9 -5
View File
@@ -1,7 +1,7 @@
import TransitionWrapper from '@/components/transition';
import HotKeys from '@/config/hotkeys';
import { fetchChunkedData, readStreamData } from '@/utils/fetch-chunk-data';
import { EyeInvisibleOutlined } from '@ant-design/icons';
import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Button, Input, Spin } from 'antd';
import _ from 'lodash';
@@ -39,6 +39,7 @@ const MessageList: React.FC<MessageProps> = (props) => {
const intl = useIntl();
const [systemMessage, setSystemMessage] = useState('');
const [collapsed, setCollapsed] = useState(true);
const [show, setShow] = useState(false);
const [loading, setLoading] = useState(false);
const [activeIndex, setActiveIndex] = useState(-1);
@@ -56,7 +57,8 @@ const MessageList: React.FC<MessageProps> = (props) => {
};
const handleNewMessage = () => {
messageList.push({
role: 'user',
role:
_.last(messageList)?.role === Roles.User ? Roles.Assistant : Roles.User,
content: '',
uid: messageId.current + 1
});
@@ -95,7 +97,7 @@ const MessageList: React.FC<MessageProps> = (props) => {
messages: systemMessage
? [
{
role: 'system',
role: Roles.System,
content: systemMessage
},
...messageList
@@ -124,7 +126,8 @@ const MessageList: React.FC<MessageProps> = (props) => {
}
};
const handleClear = () => {
setMessageList([]);
const headItem = _.get(messageList, '0');
setMessageList(headItem ? [headItem] : []);
};
const handleView = () => {
@@ -156,7 +159,7 @@ const MessageList: React.FC<MessageProps> = (props) => {
{intl.formatMessage({ id: 'playground.system' })}
</span>
<Button type="primary" size="small">
<EyeInvisibleOutlined />
{collapsed ? <EyeInvisibleOutlined /> : <EyeOutlined />}
</Button>
</div>
);
@@ -189,6 +192,7 @@ const MessageList: React.FC<MessageProps> = (props) => {
<TransitionWrapper
header={renderLabel()}
variant="filled"
setCollapsed={setCollapsed}
ref={systemRef}
>
<Input.TextArea
src/pages/playground/components/message-item.tsx
+15 -9
View File
@@ -1,7 +1,8 @@
import CopyButton from '@/components/copy-button';
import HotKeys from '@/config/hotkeys';
import { MinusCircleOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Button, Input } from 'antd';
import { Button, Input, Space } from 'antd';
import { memo, useEffect, useRef, useState } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import { Roles } from '../config';
@@ -129,14 +130,19 @@ const MessageItem: React.FC<{
></Input.TextArea>
</div>
<div className="delete-btn">
<Button
type="text"
shape="circle"
size="small"
style={{ color: 'var(--ant-color-primary)' }}
onClick={handleDelete}
icon={<MinusCircleOutlined />}
></Button>
<Space size={5}>
{messageContent && (
<CopyButton text={messageContent} size="small"></CopyButton>
)}
<Button
type="text"
shape="circle"
size="small"
style={{ color: 'var(--ant-color-primary)' }}
onClick={handleDelete}
icon={<MinusCircleOutlined />}
></Button>
</Space>
</div>
</div>
);
src/pages/playground/components/params-settings.tsx
+8 -12
View File
@@ -162,14 +162,14 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
field: 'temperature',
label: 'Temperature'
})}
style={{ paddingLeft: 0 }}
style={{ paddingInline: 0 }}
variant="borderless"
>
<Slider
defaultValue={1}
max={2}
step={0.1}
style={{ marginBottom: 0 }}
style={{ marginBottom: 0, marginTop: 16 }}
tooltip={{ open: false }}
value={form.getFieldValue('temperature') || undefined}
onChange={(val) => handleFieldValueChange(val, 'temperature')}
@@ -185,14 +185,14 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
field: 'max_tokens',
label: 'Max Tokens'
})}
style={{ paddingLeft: 0 }}
style={{ paddingInline: 0 }}
variant="borderless"
>
<Slider
defaultValue={1024}
max={16384}
step={1}
style={{ marginBottom: 0 }}
style={{ marginBottom: 0, marginTop: 16 }}
tooltip={{ open: false }}
value={form.getFieldValue('max_tokens') || undefined}
onChange={(val) => handleFieldValueChange(val, 'max_tokens')}
@@ -208,14 +208,14 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
field: 'top_p',
label: 'Top P'
})}
style={{ paddingLeft: 0 }}
style={{ paddingInline: 0 }}
variant="borderless"
>
<Slider
defaultValue={1}
max={1}
step={0.1}
style={{ marginBottom: 0 }}
style={{ marginBottom: 0, marginTop: 16 }}
tooltip={{ open: false }}
value={form.getFieldValue('top_p') || undefined}
onChange={(val) => handleFieldValueChange(val, 'top_p')}
@@ -231,7 +231,7 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
field: 'seed',
label: 'Seed'
})}
style={{ paddingLeft: 0 }}
style={{ paddingInline: 0 }}
variant="borderless"
>
<Slider
@@ -240,13 +240,9 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
tooltip={{ open: false }}
value={form.getFieldValue('seed') || undefined}
onChange={(val) => handleFieldValueChange(val, 'seed')}
style={{ marginBottom: 0 }}
style={{ marginBottom: 0, marginTop: 16 }}
></Slider>
</FieldWrapper>
{/* <SealInput.Number
label="Seed"
style={{ width: INPUT_WIDTH.mini }}
></SealInput.Number> */}
</Form.Item>
<Form.Item<ParamsSettingsFormProps>
name="stop"
src/pages/playground/components/reference-params.tsx
+6
View File
@@ -7,6 +7,7 @@ interface ReferenceParamsProps {
completion_tokens: number;
prompt_tokens: number;
total_tokens: number;
time_per_output_token_ms: number;
};
}
@@ -37,6 +38,11 @@ const ReferenceParams = (props: ReferenceParamsProps) => {
{usage.total_tokens}
</span>
</Tooltip>
<span>
{intl.formatMessage({ id: 'playground.tokenoutput' })}:{' '}
{usage.time_per_output_token_ms} token/s
</span>
</div>
);
};
src/pages/playground/components/view-code-modal.tsx
+2 -2
View File
@@ -135,7 +135,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
closeIcon={true}
maskClosable={false}
keyboard={false}
width={600}
width={'max(50%, 600px)'}
style={{ top: '80px' }}
footer={null}
>
@@ -151,7 +151,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
onChangeLang={handleOnChangeLang}
>
<Editor
height="400px"
height="500px"
theme="vs-dark"
className="monaco-editor"
defaultLanguage="shell"