From 316019586f03947b87ed3a269d92e60570f5f807 Mon Sep 17 00:00:00 2001 From: jialin Date: Tue, 2 Jul 2024 17:16:07 +0800 Subject: [PATCH] fix: ux bug --- config/theme.ts | 10 ++ src/components/charts/area.tsx | 2 +- .../seal-table/styles/row-children.less | 1 - src/components/status-tag/index.less | 2 +- src/components/transition/index.tsx | 10 +- src/global.less | 4 + src/locales/en-US/playground.ts | 3 +- src/locales/zh-CN/playground.ts | 4 +- .../llmodels/components/view-logs-modal.tsx | 4 +- src/pages/llmodels/index.tsx | 111 +++--------------- .../playground/components/ground-left.tsx | 14 ++- .../playground/components/message-item.tsx | 24 ++-- .../playground/components/params-settings.tsx | 20 ++-- .../components/reference-params.tsx | 6 + .../playground/components/view-code-modal.tsx | 4 +- src/pages/playground/config/index.ts | 3 +- src/pages/playground/style/custom-label.less | 2 +- src/pages/playground/style/message-item.less | 10 +- .../playground/style/reference-params.less | 1 + 19 files changed, 102 insertions(+), 133 deletions(-) diff --git a/config/theme.ts b/config/theme.ts index c56d26c2..4802ffa5 100644 --- a/config/theme.ts +++ b/config/theme.ts @@ -14,6 +14,16 @@ export default { iconSize: 16, iconMarginInlineEnd: 12, itemHeight: 44 + }, + Progress: { + lineBorderRadius: 4 + }, + Slider: { + handleSize: 8, + handleSizeHover: 10 + // handleColor: '#007BFF' + // trackBg: '#007BFF', + // trackHoverBg: '#007BFF' } }, token: { diff --git a/src/components/charts/area.tsx b/src/components/charts/area.tsx index b0503e5b..5f00f439 100644 --- a/src/components/charts/area.tsx +++ b/src/components/charts/area.tsx @@ -30,7 +30,7 @@ const LineChart: React.FC = (props) => { yField: yField || 'value', autoFit: true, slider, - shapeField: 'smooth', + // shapeField: 'smooth', axis: { x: { textStyle: { diff --git a/src/components/seal-table/styles/row-children.less b/src/components/seal-table/styles/row-children.less index df805f55..7276c4b0 100644 --- a/src/components/seal-table/styles/row-children.less +++ b/src/components/seal-table/styles/row-children.less @@ -5,7 +5,6 @@ height: 54px; padding: 0 16px; border-radius: var(--ant-table-header-border-radius); - background-color: var(--color-fill-1); transition: all 0.2s ease; &:hover { diff --git a/src/components/status-tag/index.less b/src/components/status-tag/index.less index 21c52250..63715a16 100644 --- a/src/components/status-tag/index.less +++ b/src/components/status-tag/index.less @@ -12,7 +12,7 @@ overflow: hidden; &.download { - background-color: rgb(47 191 133 / 30%); + background-color: var(--ant-blue-2); } .download { diff --git a/src/components/transition/index.tsx b/src/components/transition/index.tsx index 4852001b..b0d3dd5d 100644 --- a/src/components/transition/index.tsx +++ b/src/components/transition/index.tsx @@ -13,11 +13,18 @@ interface TransitionWrapProps { header?: React.ReactNode; variant?: 'bordered' | 'filled'; children: React.ReactNode; + setCollapsed?: (val: boolean) => void; ref?: any; } const TransitionWrapper: React.FC = forwardRef( (props, ref) => { - const { minHeight = 50, header, variant = 'bordered', children } = props; + const { + minHeight = 50, + header, + variant = 'bordered', + children, + setCollapsed + } = props; const [isOpen, setIsOpen] = useState(true); const [height, setHeight] = useState(0); const contentRef = useRef(null); @@ -32,6 +39,7 @@ const TransitionWrapper: React.FC = forwardRef( const toggleOpen = () => { setIsOpen(!isOpen); + setCollapsed?.(!isOpen); }; const setHeightByContent = () => { diff --git a/src/global.less b/src/global.less index 305a74a2..e78b3131 100644 --- a/src/global.less +++ b/src/global.less @@ -131,6 +131,10 @@ body * { } body { + .ant-modal-confirm-title { + display: none; + } + .ant-checkbox { .ant-checkbox-inner { border-radius: var(--checkbox-border-radius) !important; diff --git a/src/locales/en-US/playground.ts b/src/locales/en-US/playground.ts index 8debb24d..c8a5095e 100644 --- a/src/locales/en-US/playground.ts +++ b/src/locales/en-US/playground.ts @@ -13,5 +13,6 @@ export default { 'playground.completion': 'Completion', 'playground.prompt': 'Prompt', 'playground.tokenusage': 'Token Usage', - 'models.openinplayground': 'Open in Playground' + 'models.openinplayground': 'Open in Playground', + 'playground.tokenoutput': 'Output' }; diff --git a/src/locales/zh-CN/playground.ts b/src/locales/zh-CN/playground.ts index fab462d9..a340e1a1 100644 --- a/src/locales/zh-CN/playground.ts +++ b/src/locales/zh-CN/playground.ts @@ -12,5 +12,7 @@ export default { '你可以使用以下代码将当前的提示和设置集成到你的应用程序中。', 'playground.completion': '补全', 'playground.prompt': '提示', - 'playground.tokenusage': 'Token 使用量' + 'playground.tokenusage': 'Token 使用量', + 'models.openinplayground': '试验场打开', + 'playground.tokenoutput': '输出' }; diff --git a/src/pages/llmodels/components/view-logs-modal.tsx b/src/pages/llmodels/components/view-logs-modal.tsx index 18b59dc5..f21175f3 100644 --- a/src/pages/llmodels/components/view-logs-modal.tsx +++ b/src/pages/llmodels/components/view-logs-modal.tsx @@ -25,13 +25,13 @@ const ViewCodeModal: React.FC = (props) => { closeIcon={true} maskClosable={false} keyboard={false} - width={600} + width={'max(50%, 600px)'} style={{ top: '80px' }} footer={null} > { const { sortOrder, setSortOrder } = useTableSort({ defaultSortOrder: 'descend' }); - const { createEventSourceConnection, eventSourceRef } = useEventSource(); const [logContent, setLogContent] = useState(''); const [openLogModal, setOpenLogModal] = useState(false); const [hoverChildIndex, setHoverChildIndex] = useState(-1); @@ -137,14 +133,6 @@ const Models: React.FC = () => { } }; - // update data by polling - const fetchDataByPolling = () => { - clearInterval(timer.current); - timer.current = setInterval(() => { - fetchData(true); - }, 5000); - }; - const handleShowSizeChange = (page: number, size: number) => { console.log(page, size); setQueryParams({ @@ -194,38 +182,6 @@ const Models: React.FC = () => { } }; - const createModelsDataByFetch = async () => { - const result = await fetchChunkedData({ - params: { - ..._.pickBy(queryParams, (val: any) => !!val), - watch: true - }, - method: 'GET', - url: `/v1${MODELS_API}` - }); - if (!result) { - return; - } - const { reader, decoder } = result; - - await readStreamData(reader, decoder, (data: any) => { - console.log('streamData=========', data); - }); - }; - - const createModelEvent = () => { - createEventSourceConnection({ - url: `v1${MODELS_API}`, - params: { - ..._.pickBy(queryParams, (val: any) => !!val), - watch: true - }, - onmessage: (data: any) => { - console.log('event source message: ', data); - } - }); - }; - const handleSearch = (e: any) => { fetchData(); }; @@ -303,44 +259,9 @@ const Models: React.FC = () => { navigate(`/playground?model=${row.name}`); }; - const handleDeployInstance = async (row: any) => { - try { - const data = { - model_id: row.id, - model_name: row.name, - huggingface_repo_id: row.huggingface_repo_id, - huggingface_filename: row.huggingface_filename, - source: row.source - }; - await createModelInstance({ data }); - message.success(intl.formatMessage({ id: 'common.message.success' })); - } catch (error) {} - }; - - const handleStreamData = (data: any) => { - setLogContent(data); - }; - const handleViewLogs = async (row: any) => { try { - // const result = await fetchChunkedData({ - // url: `/v1${MODEL_INSTANCE_API}/${row.id}/logs`, - // params: { - // follow: false - // }, - // method: 'GET' - // }); - // if (!result) { - // setLogContent(''); - // } else { - // const { reader, decoder } = result; - // await readStreamData(reader, decoder, (chunk: any) => { - // handleStreamData(chunk); - // }); - // } - setCurrentInstanceUrl(`${MODEL_INSTANCE_API}/${row.id}/logs`); - setOpenLogModal(true); } catch (error) { console.log('error:', error); @@ -433,7 +354,9 @@ const Models: React.FC = () => { onMouseLeave={handleOnMouseLeave} style={{ borderRadius: 'var(--ant-table-header-border-radius)' }} className={ - item.download_progress !== 100 ? 'skeleton-loading' : '' + item.download_progress !== 100 && item.state !== 'Running' + ? 'skeleton-loading' + : '' } > @@ -444,19 +367,21 @@ const Models: React.FC = () => { - {item.state && ( - - )} + + {item.state && ( + + )} + diff --git a/src/pages/playground/components/ground-left.tsx b/src/pages/playground/components/ground-left.tsx index 65da9a28..2bb0c46b 100644 --- a/src/pages/playground/components/ground-left.tsx +++ b/src/pages/playground/components/ground-left.tsx @@ -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 = (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 = (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 = (props) => { messages: systemMessage ? [ { - role: 'system', + role: Roles.System, content: systemMessage }, ...messageList @@ -124,7 +126,8 @@ const MessageList: React.FC = (props) => { } }; const handleClear = () => { - setMessageList([]); + const headItem = _.get(messageList, '0'); + setMessageList(headItem ? [headItem] : []); }; const handleView = () => { @@ -156,7 +159,7 @@ const MessageList: React.FC = (props) => { {intl.formatMessage({ id: 'playground.system' })} ); @@ -189,6 +192,7 @@ const MessageList: React.FC = (props) => {
- + + {messageContent && ( + + )} + +
); diff --git a/src/pages/playground/components/params-settings.tsx b/src/pages/playground/components/params-settings.tsx index 743350a1..0068203d 100644 --- a/src/pages/playground/components/params-settings.tsx +++ b/src/pages/playground/components/params-settings.tsx @@ -162,14 +162,14 @@ const ParamsSettings: React.FC = ({ field: 'temperature', label: 'Temperature' })} - style={{ paddingLeft: 0 }} + style={{ paddingInline: 0 }} variant="borderless" > handleFieldValueChange(val, 'temperature')} @@ -185,14 +185,14 @@ const ParamsSettings: React.FC = ({ field: 'max_tokens', label: 'Max Tokens' })} - style={{ paddingLeft: 0 }} + style={{ paddingInline: 0 }} variant="borderless" > handleFieldValueChange(val, 'max_tokens')} @@ -208,14 +208,14 @@ const ParamsSettings: React.FC = ({ field: 'top_p', label: 'Top P' })} - style={{ paddingLeft: 0 }} + style={{ paddingInline: 0 }} variant="borderless" > handleFieldValueChange(val, 'top_p')} @@ -231,7 +231,7 @@ const ParamsSettings: React.FC = ({ field: 'seed', label: 'Seed' })} - style={{ paddingLeft: 0 }} + style={{ paddingInline: 0 }} variant="borderless" > = ({ tooltip={{ open: false }} value={form.getFieldValue('seed') || undefined} onChange={(val) => handleFieldValueChange(val, 'seed')} - style={{ marginBottom: 0 }} + style={{ marginBottom: 0, marginTop: 16 }} > - {/* */} name="stop" diff --git a/src/pages/playground/components/reference-params.tsx b/src/pages/playground/components/reference-params.tsx index 696aa68e..e96aa90a 100644 --- a/src/pages/playground/components/reference-params.tsx +++ b/src/pages/playground/components/reference-params.tsx @@ -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} + + + {intl.formatMessage({ id: 'playground.tokenoutput' })}:{' '} + {usage.time_per_output_token_ms} token/s + ); }; diff --git a/src/pages/playground/components/view-code-modal.tsx b/src/pages/playground/components/view-code-modal.tsx index 8ec958d0..2f1082f4 100644 --- a/src/pages/playground/components/view-code-modal.tsx +++ b/src/pages/playground/components/view-code-modal.tsx @@ -135,7 +135,7 @@ const ViewCodeModal: React.FC = (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 = (props) => { onChangeLang={handleOnChangeLang} >