refactor: adjust playground pages dir
This commit is contained in:
jialin
@@ -0,0 +1,180 @@
|
||||
import breakpoints from '@/config/breakpoints';
|
||||
import HotKeys from '@/config/hotkeys';
|
||||
import useWindowResize from '@/hooks/use-window-resize';
|
||||
import { ExtraContent } from '@/layouts/extraRender';
|
||||
import { modelCategoriesMap } from '@/pages/llmodels/config';
|
||||
import { MessageOutlined, OneToOneOutlined } from '@ant-design/icons';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { useMemoizedFn } from 'ahooks';
|
||||
import { Divider, Segmented, Tabs, TabsProps } from 'antd';
|
||||
import classNames from 'classnames';
|
||||
import _ from 'lodash';
|
||||
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { useHotkeys } from 'react-hotkeys-hook';
|
||||
import { PageContainerInner } from '../../_components/page-box';
|
||||
import { queryModelsList } from '../apis';
|
||||
import MultipleChat from '../components/multiple-chat';
|
||||
import ViewCodeButtons from '../components/view-code-buttons';
|
||||
import '../style/play-ground.less';
|
||||
import GroundChat from './page';
|
||||
|
||||
const Playground: React.FC = () => {
|
||||
const intl = useIntl();
|
||||
const { size } = useWindowResize();
|
||||
const [activeKey, setActiveKey] = useState('chat');
|
||||
const groundLeftRef = useRef<any>(null);
|
||||
const groundRerankerRef = useRef<any>(null);
|
||||
const [modelList, setModelList] = useState<Global.BaseOption<string>[]>([]);
|
||||
const [loaded, setLoaded] = useState(false);
|
||||
|
||||
const optionsList = useMemo(() => {
|
||||
return [
|
||||
{
|
||||
label: intl.formatMessage({ id: 'menu.playground.chat' }),
|
||||
value: 'chat',
|
||||
icon: <MessageOutlined />
|
||||
},
|
||||
{
|
||||
label: intl.formatMessage({ id: 'menu.compare' }),
|
||||
value: 'compare',
|
||||
icon: <OneToOneOutlined />
|
||||
}
|
||||
];
|
||||
}, [intl]);
|
||||
|
||||
const handleViewCode = useMemoizedFn(() => {
|
||||
if (activeKey === 'reranker') {
|
||||
groundRerankerRef.current?.viewCode?.();
|
||||
} else if (activeKey === 'chat') {
|
||||
groundLeftRef.current?.viewCode?.();
|
||||
}
|
||||
});
|
||||
|
||||
const handleToggleCollapse = useMemoizedFn(() => {
|
||||
if (activeKey === 'reranker') {
|
||||
groundRerankerRef.current?.setCollapse?.();
|
||||
return;
|
||||
}
|
||||
groundLeftRef.current?.setCollapse?.();
|
||||
});
|
||||
|
||||
const items: TabsProps['items'] = useMemo(() => {
|
||||
return [
|
||||
{
|
||||
key: 'chat',
|
||||
label: 'Chat',
|
||||
icon: <MessageOutlined />,
|
||||
children: (
|
||||
<GroundChat ref={groundLeftRef} modelList={modelList}></GroundChat>
|
||||
)
|
||||
},
|
||||
{
|
||||
key: 'compare',
|
||||
label: 'Compare',
|
||||
icon: <OneToOneOutlined />,
|
||||
children: <MultipleChat modelList={modelList} loaded={loaded} />
|
||||
}
|
||||
];
|
||||
}, [modelList, loaded]);
|
||||
|
||||
useEffect(() => {
|
||||
if (size.width < breakpoints.lg && !groundLeftRef.current?.collapse) {
|
||||
groundLeftRef.current?.setCollapse?.();
|
||||
}
|
||||
}, [size.width]);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const params = {
|
||||
categories: modelCategoriesMap.llm,
|
||||
with_meta: true
|
||||
};
|
||||
const res = await queryModelsList(params);
|
||||
const list = _.map(res.data || [], (item: any) => {
|
||||
return {
|
||||
value: item.id,
|
||||
label: item.id,
|
||||
meta: item.meta
|
||||
};
|
||||
}) as Global.BaseOption<string>[];
|
||||
setModelList(list);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
setLoaded(true);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
const header = useMemo(() => {
|
||||
return {
|
||||
title: (
|
||||
<div className="flex items-center">
|
||||
<span className="font-600">
|
||||
{intl.formatMessage({ id: 'menu.playground.chat' })}
|
||||
</span>
|
||||
{
|
||||
<Segmented
|
||||
options={optionsList}
|
||||
size="middle"
|
||||
className="m-l-24 font-600"
|
||||
value={activeKey}
|
||||
onChange={(key) => setActiveKey(key)}
|
||||
></Segmented>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
};
|
||||
}, [activeKey, optionsList, intl]);
|
||||
|
||||
useHotkeys(
|
||||
HotKeys.RIGHT.join(','),
|
||||
() => {
|
||||
if (activeKey === 'chat') {
|
||||
groundLeftRef.current?.setCollapse?.();
|
||||
}
|
||||
},
|
||||
{
|
||||
preventDefault: true
|
||||
}
|
||||
);
|
||||
|
||||
return (
|
||||
<PageContainerInner
|
||||
className={classNames('playground-container', {
|
||||
compare: activeKey === 'compare',
|
||||
chat: activeKey !== 'compare'
|
||||
})}
|
||||
header={header}
|
||||
extra={[
|
||||
<ViewCodeButtons
|
||||
handleViewCode={handleViewCode}
|
||||
handleToggleCollapse={handleToggleCollapse}
|
||||
activeKey={activeKey}
|
||||
key="view-code-buttons"
|
||||
/>,
|
||||
<div key="divider-wrapper">
|
||||
{activeKey === 'chat' && (
|
||||
<Divider
|
||||
key="divider"
|
||||
orientation="vertical"
|
||||
style={{ height: 16, marginInline: 16 }}
|
||||
/>
|
||||
)}
|
||||
</div>,
|
||||
<ExtraContent key="extra-content" />
|
||||
]}
|
||||
>
|
||||
<div className="play-ground">
|
||||
<div className="chat">
|
||||
<Tabs items={items} activeKey={activeKey}></Tabs>
|
||||
</div>
|
||||
</div>
|
||||
</PageContainerInner>
|
||||
);
|
||||
};
|
||||
|
||||
export default Playground;
|
||||
@@ -0,0 +1,201 @@
|
||||
import { Spin } from 'antd';
|
||||
import 'overlayscrollbars/overlayscrollbars.css';
|
||||
import React, {
|
||||
forwardRef,
|
||||
useImperativeHandle,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState
|
||||
} from 'react';
|
||||
import { CHAT_API } from '../apis';
|
||||
import DynamicParams from '../components/dynamic-params';
|
||||
import MessageInput from '../components/message-input';
|
||||
import MessageContent from '../components/multiple-chat/message-content';
|
||||
import SystemMessage from '../components/multiple-chat/system-message';
|
||||
import ReferenceParams from '../components/reference-params';
|
||||
import RightContainer from '../components/right-container';
|
||||
import ViewCommonCode from '../components/view-common-code';
|
||||
import { Roles, generateMessagesByListContent } from '../config';
|
||||
import { MessageItem, MessageItemAction } from '../config/types';
|
||||
import { LLM_METAKEYS, llmInitialValues } from '../hooks/config';
|
||||
import useChatCompletion from '../hooks/use-chat-completion';
|
||||
import { useInitLLmMeta } from '../hooks/use-init-meta';
|
||||
import '../style/ground-llm.less';
|
||||
import '../style/system-message-wrap.less';
|
||||
import { generateLLMCode } from '../view-code/llm';
|
||||
import { ChatParamsConfig } from './params-config';
|
||||
|
||||
interface MessageProps {
|
||||
modelList: Global.BaseOption<string>[];
|
||||
loaded?: boolean;
|
||||
ref?: any;
|
||||
}
|
||||
|
||||
const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
|
||||
const { modelList } = props;
|
||||
const [systemMessage, setSystemMessage] = useState('');
|
||||
const [show, setShow] = useState(false);
|
||||
const [collapse, setCollapse] = useState(false);
|
||||
const scroller = useRef<any>(null);
|
||||
const [actions, setActions] = useState<MessageItemAction[]>([
|
||||
'upload',
|
||||
'delete',
|
||||
'copy',
|
||||
'edit'
|
||||
]);
|
||||
|
||||
const {
|
||||
submitMessage,
|
||||
handleStopConversation,
|
||||
handleAddNewMessage,
|
||||
handleClear,
|
||||
setMessageList,
|
||||
tokenResult,
|
||||
messageList,
|
||||
loading
|
||||
} = useChatCompletion(scroller);
|
||||
const {
|
||||
handleOnValuesChange,
|
||||
formRef,
|
||||
paramsConfig,
|
||||
initialValues,
|
||||
parameters
|
||||
} = useInitLLmMeta(
|
||||
{ modelList, isChat: true },
|
||||
{
|
||||
defaultValues: {
|
||||
...llmInitialValues,
|
||||
model: modelList[0]?.value
|
||||
},
|
||||
defaultParamsConfig: ChatParamsConfig,
|
||||
metaKeys: LLM_METAKEYS
|
||||
}
|
||||
);
|
||||
|
||||
useImperativeHandle(ref, () => {
|
||||
return {
|
||||
viewCode() {
|
||||
setShow(true);
|
||||
},
|
||||
setCollapse() {
|
||||
setCollapse(!collapse);
|
||||
},
|
||||
collapse: collapse
|
||||
};
|
||||
});
|
||||
|
||||
const viewCodeContent = useMemo(() => {
|
||||
const resultList = systemMessage
|
||||
? [{ role: Roles.System, content: systemMessage }]
|
||||
: [];
|
||||
const list = generateMessagesByListContent([...messageList]);
|
||||
return generateLLMCode({
|
||||
api: CHAT_API,
|
||||
parameters: {
|
||||
...parameters,
|
||||
messages: [...resultList, ...list]
|
||||
}
|
||||
});
|
||||
}, [messageList, systemMessage, parameters]);
|
||||
|
||||
const generateValidMessage = (message: Omit<MessageItem, 'uid'>) => {
|
||||
if (!message.content && !message.imgs?.length && !message.audio?.length) {
|
||||
return undefined;
|
||||
}
|
||||
return message;
|
||||
};
|
||||
|
||||
const handleSendMessage = async (message: Omit<MessageItem, 'uid'>) => {
|
||||
const currentMessage = generateValidMessage(message);
|
||||
submitMessage({
|
||||
system: systemMessage
|
||||
? { role: Roles.System, content: systemMessage }
|
||||
: undefined,
|
||||
current: currentMessage,
|
||||
parameters
|
||||
});
|
||||
};
|
||||
|
||||
const handleCloseViewCode = () => {
|
||||
setShow(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="ground-left-wrapper">
|
||||
<div className="ground-left">
|
||||
<div className="message-list-wrap" ref={scroller}>
|
||||
<>
|
||||
<div
|
||||
style={{
|
||||
marginBottom: 20
|
||||
}}
|
||||
>
|
||||
<SystemMessage
|
||||
style={{
|
||||
borderRadius: 'var(--border-radius-mini)',
|
||||
overflow: 'hidden'
|
||||
}}
|
||||
systemMessage={systemMessage}
|
||||
setSystemMessage={setSystemMessage}
|
||||
></SystemMessage>
|
||||
</div>
|
||||
|
||||
<div className="content">
|
||||
<MessageContent
|
||||
messageList={messageList}
|
||||
setMessageList={setMessageList}
|
||||
editable={true}
|
||||
loading={loading}
|
||||
actions={actions}
|
||||
/>
|
||||
{loading && (
|
||||
<Spin size="small">
|
||||
<div style={{ height: '46px' }}></div>
|
||||
</Spin>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
</div>
|
||||
{tokenResult && !loading && (
|
||||
<div style={{ height: 40 }}>
|
||||
<ReferenceParams usage={tokenResult}></ReferenceParams>
|
||||
</div>
|
||||
)}
|
||||
<div className="ground-left-footer">
|
||||
<MessageInput
|
||||
defaultSize={{
|
||||
minRows: 5,
|
||||
maxRows: 5
|
||||
}}
|
||||
actions={['clear', 'layout', 'role', 'upload', 'add', 'paste']}
|
||||
defaultChecked={false}
|
||||
loading={loading}
|
||||
disabled={!parameters.model}
|
||||
isEmpty={!messageList.length}
|
||||
handleSubmit={handleSendMessage}
|
||||
addMessage={handleAddNewMessage}
|
||||
handleAbortFetch={handleStopConversation}
|
||||
clearAll={handleClear}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<RightContainer collapsed={collapse}>
|
||||
<DynamicParams
|
||||
ref={formRef}
|
||||
onValuesChange={handleOnValuesChange}
|
||||
paramsConfig={paramsConfig}
|
||||
initialValues={initialValues}
|
||||
modelList={modelList}
|
||||
showModelSelector={true}
|
||||
/>
|
||||
</RightContainer>
|
||||
<ViewCommonCode
|
||||
open={show}
|
||||
viewCodeContent={viewCodeContent}
|
||||
onCancel={handleCloseViewCode}
|
||||
></ViewCommonCode>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
export default GroundLeft;
|
||||
@@ -0,0 +1,171 @@
|
||||
import { ParamsSchema } from '../config/types';
|
||||
|
||||
export const ChatParamsConfig: ParamsSchema[] = [
|
||||
{
|
||||
type: 'Slider',
|
||||
name: 'temperature',
|
||||
label: {
|
||||
text: 'Temperature',
|
||||
isLocalized: false
|
||||
},
|
||||
description: {
|
||||
text: 'playground.params.temperature.tips',
|
||||
html: false,
|
||||
isLocalized: true
|
||||
},
|
||||
attrs: {
|
||||
max: 2,
|
||||
step: 0.01,
|
||||
labelWidth: 314,
|
||||
inputnumber: true
|
||||
},
|
||||
rules: [
|
||||
{
|
||||
required: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'Slider',
|
||||
name: 'max_tokens',
|
||||
label: {
|
||||
text: 'Max Tokens',
|
||||
isLocalized: false
|
||||
},
|
||||
description: {
|
||||
text: 'playground.params.maxtokens.tips',
|
||||
html: false,
|
||||
isLocalized: true
|
||||
},
|
||||
attrs: {
|
||||
max: 1024,
|
||||
step: 1,
|
||||
labelWidth: 314,
|
||||
inputnumber: true
|
||||
},
|
||||
rules: [
|
||||
{
|
||||
required: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'Slider',
|
||||
name: 'top_p',
|
||||
label: {
|
||||
text: 'Top P',
|
||||
isLocalized: false
|
||||
},
|
||||
description: {
|
||||
text: 'playground.params.topp.tips',
|
||||
html: false,
|
||||
isLocalized: true
|
||||
},
|
||||
attrs: {
|
||||
max: 1,
|
||||
step: 0.01,
|
||||
labelWidth: 314,
|
||||
inputnumber: true
|
||||
},
|
||||
rules: [
|
||||
{
|
||||
required: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'Slider',
|
||||
name: 'frequency_penalty',
|
||||
label: {
|
||||
text: 'Frequency Penalty',
|
||||
isLocalized: false
|
||||
},
|
||||
description: {
|
||||
text: 'playground.params.frequency_penalty.tips',
|
||||
html: false,
|
||||
isLocalized: true
|
||||
},
|
||||
attrs: {
|
||||
max: 2,
|
||||
min: -2,
|
||||
step: 0.01,
|
||||
labelWidth: 314,
|
||||
inputnumber: true
|
||||
},
|
||||
rules: [
|
||||
{
|
||||
required: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'Slider',
|
||||
name: 'presence_penalty',
|
||||
label: {
|
||||
text: 'Presence Penalty',
|
||||
isLocalized: false
|
||||
},
|
||||
description: {
|
||||
text: 'playground.params.presence_penalty.tips',
|
||||
html: false,
|
||||
isLocalized: true
|
||||
},
|
||||
attrs: {
|
||||
max: 2,
|
||||
min: -2,
|
||||
step: 0.01,
|
||||
labelWidth: 314,
|
||||
inputnumber: true
|
||||
},
|
||||
rules: [
|
||||
{
|
||||
required: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'InputNumber',
|
||||
name: 'seed',
|
||||
label: {
|
||||
text: 'Seed',
|
||||
isLocalized: false
|
||||
},
|
||||
description: {
|
||||
text: 'playground.params.seed.tips',
|
||||
html: false,
|
||||
isLocalized: true
|
||||
},
|
||||
attrs: {
|
||||
min: 0
|
||||
},
|
||||
rules: [
|
||||
{
|
||||
required: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'Input',
|
||||
name: 'stop',
|
||||
label: {
|
||||
text: 'Stop Sequence',
|
||||
isLocalized: false
|
||||
},
|
||||
description: {
|
||||
text: 'playground.params.stop.tips',
|
||||
html: false,
|
||||
isLocalized: true
|
||||
},
|
||||
formItemAttrs: {
|
||||
normalize(value: string) {
|
||||
return value || null;
|
||||
}
|
||||
},
|
||||
attrs: {},
|
||||
rules: [
|
||||
{
|
||||
required: false
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
Reference in New Issue
Block a user