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
src/pages/playground/components/ground-left.tsx
+30 -17
View File
@@ -14,7 +14,7 @@ import {
useState
} from 'react';
import { CHAT_API } from '../apis';
import { Roles } from '../config';
import { Roles, formatMessageParams } from '../config';
import { MessageItem } from '../config/types';
import '../style/ground-left.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 paramsRef = useRef<any>(null);
const messageListLengthCache = useRef<number>(0);
const [viewCodeMessage, setViewCodeMessage] = useState<any[]>([]);
const { initialize, updateScrollerPosition } = 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 = {
messages: systemMessage
? [
{
role: Roles.System,
content: [
{
type: 'text',
text: systemMessage
}
]
},
...formatMessages
]
: [...formatMessages],
messages: finalMessageParams,
...parameters,
stream: true,
stream_options: {
@@ -196,6 +203,13 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
setMessageId();
const { reader, decoder } = result;
await readStreamData(reader, decoder, (chunk: any) => {
if (chunk?.error) {
setTokenResult({
error: true,
errorMessage: chunk?.error?.message || chunk?.message || ''
});
return;
}
joinMessage(chunk);
});
} catch (error) {
@@ -344,8 +358,7 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
<ViewCodeModal
open={show}
systemMessage={systemMessage}
messageList={messageList}
messageList={viewCodeMessage}
parameters={parameters}
onCancel={handleCloseViewCode}
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}` })}
</div>
<div className="actions">
{actions.includes('upload') && (
{actions.includes('upload') && data.role === Roles.User && (
<UploadImg handleUpdateImgList={handleUpdateImgList}></UploadImg>
)}
{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';
import 'simplebar-react/dist/simplebar.min.css';
import { CHAT_API } from '../../apis';
import { Roles } from '../../config';
import { Roles, formatMessageParams } from '../../config';
import CompareContext from '../../config/compare-context';
import { MessageItem, ModelSelectionItem } from '../../config/types';
import '../../style/model-item.less';
@@ -67,6 +67,7 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
const currentMessageRef = useRef<MessageItem[]>([]);
const modelScrollRef = useRef<any>(null);
const messageListLengthCache = useRef<number>(0);
const [viewCodeMessage, setViewCodeMessage] = useState<any[]>([]);
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 = {
messages: systemMessage
? [
{
role: Roles.System,
content: [
{
type: 'text',
text: systemMessage
}
]
},
...formatMessages
]
: [...formatMessages],
messages: finalMessageParams,
...params,
stream: true,
stream_options: {
@@ -196,6 +204,13 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
setMessageId();
const { reader, decoder } = result;
await readStreamData(reader, decoder, (chunk: any) => {
if (chunk?.error) {
setTokenResult({
error: true,
errorMessage: chunk?.error?.message || chunk?.message || ''
});
return;
}
joinMessage(chunk);
});
} catch (error) {
@@ -473,8 +488,7 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
</div>
<ViewCodeModal
open={show}
systemMessage={systemMessage}
messageList={messageList}
messageList={viewCodeMessage}
parameters={params}
onCancel={handleCloseViewCode}
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 { useIntl } from '@umijs/max';
import { Alert, Space, Tooltip } from 'antd';
import { Space, Tooltip, Typography } from 'antd';
import classNames from 'classnames';
import _ from 'lodash';
import '../style/reference-params.less';
@@ -28,18 +28,22 @@ const ReferenceParams = (props: ReferenceParamsProps) => {
}
if (usage.error) {
return (
<Alert
type="error"
style={{ textAlign: 'center', paddingBlock: 0 }}
message={
<span style={{ color: 'var(--ant-color-error)' }}>
<WarningOutlined className="m-r-8" />
{usage?.errorMessage}
</span>
}
banner
showIcon={false}
/>
<Typography.Paragraph
type="danger"
ellipsis={{
rows: 2,
tooltip: usage?.errorMessage
}}
style={{
textAlign: 'center',
paddingBlock: 0,
margin: 0,
backgroundColor: 'var(--ant-color-error-bg)'
}}
>
<WarningOutlined className="m-r-8" />
{usage?.errorMessage}
</Typography.Paragraph>
);
}
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';
const generateCode = () => {
const systemList = systemMessage
? [
{
role: 'system',
content: [
{
type: 'text',
text: systemMessage
}
]
}
]
: [];
// const systemList = systemMessage
// ? [
// {
// role: 'system',
// content: [
// {
// type: 'text',
// text: systemMessage
// }
// ]
// }
// ]
// : [];
const formatMessageList = _.map(messageList, (item: any) => {
return {
role: item.role,
content: [
{
type: 'text',
text: item.content
},
..._.map(item.imgs, (img: any) => {
return {
type: 'image_url',
image_url: {
url: img.dataUrl
}
};
})
]
};
});
// const formatMessageList = _.map(messageList, (item: any) => {
// return {
// role: item.role,
// content: [
// {
// type: 'text',
// text: item.content
// },
// ..._.map(item.imgs, (img: any) => {
// return {
// type: 'image_url',
// image_url: {
// url: img.dataUrl
// }
// };
// })
// ]
// };
// });
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(
{
...parameters,
@@ -95,7 +95,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
)}'`;
setCodeValue(code);
} 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(
{
...parameters,
@@ -121,11 +121,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
);
const messages =
apiType === 'chat'
? `messages=${JSON.stringify(
[...systemList, ...formatMessageList],
null,
2
)}`
? `messages=${JSON.stringify(messageList, 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})`;
setCodeValue(code);
@@ -158,7 +154,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
useEffect(() => {
generateCode();
}, [lang, systemMessage, messageList, parameters]);
}, [lang, messageList, parameters]);
return (
<>
src/pages/playground/config/index.ts
+27
View File
@@ -13,3 +13,30 @@ export const playGroundRoles = [
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;
};