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

chore: update playground payload format

Browse Source
This commit is contained in:
jialin
2024-10-24 22:40:38 +08:00
parent 6974ac8e14
commit 8afaf1a60e
7 changed files with 143 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
config/config.ts
+1 -1
View File
@@ -14,7 +14,7 @@ const isProduction = env === 'production';
const t = Date.now(); const t = Date.now();
export default defineConfig({ export default defineConfig({
proxy: { proxy: {
...proxy() ...proxy('http://192.168.50.2:8088/')
}, },
history: { history: {
type: 'hash' type: 'hash'
src/pages/playground/components/ground-left.tsx
+30 -17
View File
@@ -14,7 +14,7 @@ import {
useState useState
} from 'react'; } from 'react';
import { CHAT_API } from '../apis'; import { CHAT_API } from '../apis';
import { Roles } from '../config'; import { Roles, formatMessageParams } from '../config';
import { MessageItem } from '../config/types'; import { MessageItem } from '../config/types';
import '../style/ground-left.less'; import '../style/ground-left.less';
import '../style/system-message-wrap.less'; import '../style/system-message-wrap.less';
@@ -51,6 +51,7 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
const currentMessageRef = useRef<any>(null); const currentMessageRef = useRef<any>(null);
const paramsRef = useRef<any>(null); const paramsRef = useRef<any>(null);
const messageListLengthCache = useRef<number>(0); const messageListLengthCache = useRef<number>(0);
const [viewCodeMessage, setViewCodeMessage] = useState<any[]>([]);
const { initialize, updateScrollerPosition } = useOverlayScroller(); const { initialize, updateScrollerPosition } = useOverlayScroller();
const { initialize: innitializeParams } = useOverlayScroller(); const { initialize: innitializeParams } = useOverlayScroller();
@@ -158,21 +159,27 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
}; };
} }
); );
const messageParams = systemMessage
? [
{
role: Roles.System,
content: [
{
type: 'text',
text: systemMessage
}
]
},
...formatMessages
]
: [...formatMessages];
const finalMessageParams = formatMessageParams(messageParams);
setViewCodeMessage(finalMessageParams);
const chatParams = { const chatParams = {
messages: systemMessage messages: finalMessageParams,
? [
{
role: Roles.System,
content: [
{
type: 'text',
text: systemMessage
}
]
},
...formatMessages
]
: [...formatMessages],
...parameters, ...parameters,
stream: true, stream: true,
stream_options: { stream_options: {
@@ -196,6 +203,13 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
setMessageId(); setMessageId();
const { reader, decoder } = result; const { reader, decoder } = result;
await readStreamData(reader, decoder, (chunk: any) => { await readStreamData(reader, decoder, (chunk: any) => {
if (chunk?.error) {
setTokenResult({
error: true,
errorMessage: chunk?.error?.message || chunk?.message || ''
});
return;
}
joinMessage(chunk); joinMessage(chunk);
}); });
} catch (error) { } catch (error) {
@@ -344,8 +358,7 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
<ViewCodeModal <ViewCodeModal
open={show} open={show}
systemMessage={systemMessage} messageList={viewCodeMessage}
messageList={messageList}
parameters={parameters} parameters={parameters}
onCancel={handleCloseViewCode} onCancel={handleCloseViewCode}
title={intl.formatMessage({ id: 'playground.viewcode' })} title={intl.formatMessage({ id: 'playground.viewcode' })}
src/pages/playground/components/multiple-chat/content-item.tsx
+1 -1
View File
@@ -183,7 +183,7 @@ const ContentItem: React.FC<MessageItemProps> = ({
{data.title ?? intl.formatMessage({ id: `playground.${data.role}` })} {data.title ?? intl.formatMessage({ id: `playground.${data.role}` })}
</div> </div>
<div className="actions"> <div className="actions">
{actions.includes('upload') && ( {actions.includes('upload') && data.role === Roles.User && (
<UploadImg handleUpdateImgList={handleUpdateImgList}></UploadImg> <UploadImg handleUpdateImgList={handleUpdateImgList}></UploadImg>
)} )}
{data.content && actions.includes('copy') && ( {data.content && actions.includes('copy') && (
src/pages/playground/components/multiple-chat/model-item.tsx
+31 -17
View File
@@ -24,7 +24,7 @@ import React, {
} from 'react'; } from 'react';
import 'simplebar-react/dist/simplebar.min.css'; import 'simplebar-react/dist/simplebar.min.css';
import { CHAT_API } from '../../apis'; import { CHAT_API } from '../../apis';
import { Roles } from '../../config'; import { Roles, formatMessageParams } from '../../config';
import CompareContext from '../../config/compare-context'; import CompareContext from '../../config/compare-context';
import { MessageItem, ModelSelectionItem } from '../../config/types'; import { MessageItem, ModelSelectionItem } from '../../config/types';
import '../../style/model-item.less'; import '../../style/model-item.less';
@@ -67,6 +67,7 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
const currentMessageRef = useRef<MessageItem[]>([]); const currentMessageRef = useRef<MessageItem[]>([]);
const modelScrollRef = useRef<any>(null); const modelScrollRef = useRef<any>(null);
const messageListLengthCache = useRef<number>(0); const messageListLengthCache = useRef<number>(0);
const [viewCodeMessage, setViewCodeMessage] = useState<any[]>([]);
const { initialize, updateScrollerPosition } = useOverlayScroller(); const { initialize, updateScrollerPosition } = useOverlayScroller();
@@ -157,21 +158,28 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
] ]
}; };
}); });
const messageParams = systemMessage
? [
{
role: Roles.System,
content: [
{
type: 'text',
text: systemMessage
}
]
},
...formatMessages
]
: [...formatMessages];
const finalMessageParams = formatMessageParams(messageParams);
setViewCodeMessage(finalMessageParams);
const chatParams = { const chatParams = {
messages: systemMessage messages: finalMessageParams,
? [
{
role: Roles.System,
content: [
{
type: 'text',
text: systemMessage
}
]
},
...formatMessages
]
: [...formatMessages],
...params, ...params,
stream: true, stream: true,
stream_options: { stream_options: {
@@ -196,6 +204,13 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
setMessageId(); setMessageId();
const { reader, decoder } = result; const { reader, decoder } = result;
await readStreamData(reader, decoder, (chunk: any) => { await readStreamData(reader, decoder, (chunk: any) => {
if (chunk?.error) {
setTokenResult({
error: true,
errorMessage: chunk?.error?.message || chunk?.message || ''
});
return;
}
joinMessage(chunk); joinMessage(chunk);
}); });
} catch (error) { } catch (error) {
@@ -473,8 +488,7 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
</div> </div>
<ViewCodeModal <ViewCodeModal
open={show} open={show}
systemMessage={systemMessage} messageList={viewCodeMessage}
messageList={messageList}
parameters={params} parameters={params}
onCancel={handleCloseViewCode} onCancel={handleCloseViewCode}
title={intl.formatMessage({ id: 'playground.viewcode' })} title={intl.formatMessage({ id: 'playground.viewcode' })}
src/pages/playground/components/reference-params.tsx
+17 -13
View File
@@ -1,6 +1,6 @@
import { WarningOutlined } from '@ant-design/icons'; import { WarningOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max'; import { useIntl } from '@umijs/max';
import { Alert, Space, Tooltip } from 'antd'; import { Space, Tooltip, Typography } from 'antd';
import classNames from 'classnames'; import classNames from 'classnames';
import _ from 'lodash'; import _ from 'lodash';
import '../style/reference-params.less'; import '../style/reference-params.less';
@@ -28,18 +28,22 @@ const ReferenceParams = (props: ReferenceParamsProps) => {
} }
if (usage.error) { if (usage.error) {
return ( return (
<Alert <Typography.Paragraph
type="error" type="danger"
style={{ textAlign: 'center', paddingBlock: 0 }} ellipsis={{
message={ rows: 2,
<span style={{ color: 'var(--ant-color-error)' }}> tooltip: usage?.errorMessage
<WarningOutlined className="m-r-8" /> }}
{usage?.errorMessage} style={{
</span> textAlign: 'center',
} paddingBlock: 0,
banner margin: 0,
showIcon={false} backgroundColor: 'var(--ant-color-error-bg)'
/> }}
>
<WarningOutlined className="m-r-8" />
{usage?.errorMessage}
</Typography.Paragraph>
); );
} }
return ( return (
src/pages/playground/components/view-code-modal.tsx
+36 -40
View File
@@ -50,41 +50,41 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
apiType === 'chat' ? 'choices[0].message.content' : 'data[0].embedding'; apiType === 'chat' ? 'choices[0].message.content' : 'data[0].embedding';
const generateCode = () => { const generateCode = () => {
const systemList = systemMessage // const systemList = systemMessage
? [ // ? [
{ // {
role: 'system', // role: 'system',
content: [ // content: [
{ // {
type: 'text', // type: 'text',
text: systemMessage // text: systemMessage
} // }
] // ]
} // }
] // ]
: []; // : [];
const formatMessageList = _.map(messageList, (item: any) => { // const formatMessageList = _.map(messageList, (item: any) => {
return { // return {
role: item.role, // role: item.role,
content: [ // content: [
{ // {
type: 'text', // type: 'text',
text: item.content // text: item.content
}, // },
..._.map(item.imgs, (img: any) => { // ..._.map(item.imgs, (img: any) => {
return { // return {
type: 'image_url', // type: 'image_url',
image_url: { // image_url: {
url: img.dataUrl // url: img.dataUrl
} // }
}; // };
}) // })
] // ]
}; // };
}); // });
if (lang === langMap.shell) { if (lang === langMap.shell) {
const messages = [...systemList, ...formatMessageList]; const messages = messageList;
const code = `curl ${window.location.origin}/v1-openai/${api} \\\n-H "Content-Type: application/json" \\\n-H "Authorization: Bearer $\{YOUR_GPUSTACK_API_KEY}" \\\n-d '${JSON.stringify( const code = `curl ${window.location.origin}/v1-openai/${api} \\\n-H "Content-Type: application/json" \\\n-H "Authorization: Bearer $\{YOUR_GPUSTACK_API_KEY}" \\\n-d '${JSON.stringify(
{ {
...parameters, ...parameters,
@@ -95,7 +95,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
)}'`; )}'`;
setCodeValue(code); setCodeValue(code);
} else if (lang === langMap.javascript) { } else if (lang === langMap.javascript) {
const messages = [...systemList, ...formatMessageList]; const messages = messageList;
const code = `const OpenAI = require("openai");\n\nconst openai = new OpenAI({\n "apiKey": "YOUR_GPUSTACK_API_KEY",\n "baseURL": "${BaseURL}"\n});\n\nasync function main(){\n const params = ${JSON.stringify( const code = `const OpenAI = require("openai");\n\nconst openai = new OpenAI({\n "apiKey": "YOUR_GPUSTACK_API_KEY",\n "baseURL": "${BaseURL}"\n});\n\nasync function main(){\n const params = ${JSON.stringify(
{ {
...parameters, ...parameters,
@@ -121,11 +121,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
); );
const messages = const messages =
apiType === 'chat' apiType === 'chat'
? `messages=${JSON.stringify( ? `messages=${JSON.stringify(messageList, null, 2)}`
[...systemList, ...formatMessageList],
null,
2
)}`
: ''; : '';
const code = `from openai import OpenAI\n\nclient = OpenAI(\n base_url="${BaseURL}", \n api_key="YOUR_GPUSTACK_API_KEY"\n)\n\nresponse = client.${ClientType}.create(\n${formattedParams} ${messages})\nprint(response.${logcommand})`; const code = `from openai import OpenAI\n\nclient = OpenAI(\n base_url="${BaseURL}", \n api_key="YOUR_GPUSTACK_API_KEY"\n)\n\nresponse = client.${ClientType}.create(\n${formattedParams} ${messages})\nprint(response.${logcommand})`;
setCodeValue(code); setCodeValue(code);
@@ -158,7 +154,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
useEffect(() => { useEffect(() => {
generateCode(); generateCode();
}, [lang, systemMessage, messageList, parameters]); }, [lang, messageList, parameters]);
return ( return (
<> <>
src/pages/playground/config/index.ts
+27
View File
@@ -13,3 +13,30 @@ export const playGroundRoles = [
label: 'playground.assitant' label: 'playground.assitant'
} }
]; ];
export const formatMessageParams = (messageList: any[]) => {
const result: any[] = [];
messageList.forEach((item) => {
const { role, content, title, imgs, uid } = item;
content?.forEach((contentItem: any) => {
if (contentItem.type === 'text') {
result.push({
role,
content: contentItem.text
});
}
if (contentItem.type === 'image_url') {
result.push({
role,
content: [
{
...contentItem
}
]
});
}
});
});
return result;
};