jialin
1 year ago
parent
af077c4706
commit
2e5f0d9210
@ -1,7 +1,7 @@
|
||||
import { createFromIconfontCN } from '@ant-design/icons';
|
||||
|
||||
const IconFont = createFromIconfontCN({
|
||||
scriptUrl: '//at.alicdn.com/t/c/font_4613488_3n3aubqzylv.js'
|
||||
scriptUrl: '//at.alicdn.com/t/c/font_4613488_xpmv3m9655d.js'
|
||||
});
|
||||
|
||||
export default IconFont;
|
||||
|
||||
@ -0,0 +1,153 @@
|
||||
import IconFont from '@/components/icon-font';
|
||||
import HotKeys from '@/config/hotkeys';
|
||||
import { platformCall } from '@/utils';
|
||||
import {
|
||||
ClearOutlined,
|
||||
ControlOutlined,
|
||||
PictureOutlined,
|
||||
SendOutlined
|
||||
} from '@ant-design/icons';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Button, Input, Select } from 'antd';
|
||||
import { useState } from 'react';
|
||||
import { useHotkeys } from 'react-hotkeys-hook';
|
||||
import '../style/message-input.less';
|
||||
|
||||
const layoutOptions = [
|
||||
{
|
||||
label: '2 columns',
|
||||
icon: 'icon-cols_2',
|
||||
value: {
|
||||
span: 12,
|
||||
count: 2
|
||||
},
|
||||
tips: 'two models compare'
|
||||
},
|
||||
{
|
||||
label: '3 columns',
|
||||
icon: 'icon-cols_3',
|
||||
value: {
|
||||
span: 8,
|
||||
count: 3
|
||||
},
|
||||
tips: 'three models compare'
|
||||
},
|
||||
{
|
||||
label: '4 columns',
|
||||
icon: 'icon-cols_4',
|
||||
value: {
|
||||
span: 6,
|
||||
count: 4
|
||||
},
|
||||
tips: 'four models compare'
|
||||
},
|
||||
{
|
||||
label: '6 columns',
|
||||
icon: 'icon-cols_6',
|
||||
value: {
|
||||
span: 8,
|
||||
count: 6
|
||||
},
|
||||
tips: 'six models compare'
|
||||
}
|
||||
];
|
||||
|
||||
interface MessageInputProps {
|
||||
modelList: Global.BaseOption<string>[];
|
||||
handleSubmit: (value: string) => void;
|
||||
handleAbortFetch: () => void;
|
||||
setParamsSettings: (value: Record<string, any>) => void;
|
||||
setSpans: (value: { span: number; count: number }) => void;
|
||||
loading: boolean;
|
||||
}
|
||||
|
||||
const MessageInput: React.FC<MessageInputProps> = ({
|
||||
handleSubmit,
|
||||
handleAbortFetch,
|
||||
setParamsSettings,
|
||||
loading,
|
||||
modelList,
|
||||
setSpans
|
||||
}) => {
|
||||
const { TextArea } = Input;
|
||||
const intl = useIntl();
|
||||
const platform = platformCall();
|
||||
const [disabled, setDisabled] = useState(false);
|
||||
const [message, setMessage] = useState('');
|
||||
const handleInputChange = (value: string) => {
|
||||
setMessage(value);
|
||||
};
|
||||
const handleSendMessage = () => {
|
||||
handleSubmit(message);
|
||||
};
|
||||
const onStop = () => {
|
||||
setDisabled(false);
|
||||
handleAbortFetch();
|
||||
};
|
||||
const handleLayoutChange = (value: { span: number; count: number }) => {
|
||||
console.log('layout change:', value);
|
||||
setSpans(value);
|
||||
};
|
||||
useHotkeys(
|
||||
HotKeys.SUBMIT.join(','),
|
||||
() => {
|
||||
handleSendMessage();
|
||||
},
|
||||
{ preventDefault: true }
|
||||
);
|
||||
return (
|
||||
<div className="messageInput">
|
||||
<div className="tool-bar">
|
||||
<div className="actions">
|
||||
<Button type="text" icon={<PictureOutlined />} size="middle"></Button>
|
||||
<Button type="text" icon={<ClearOutlined />} size="middle"></Button>
|
||||
<Button type="text" icon={<ControlOutlined />} size="middle"></Button>
|
||||
|
||||
{layoutOptions.map((option) => (
|
||||
<Button
|
||||
key={option.icon}
|
||||
type="text"
|
||||
icon={<IconFont type={option.icon}></IconFont>}
|
||||
size="middle"
|
||||
onClick={() => handleLayoutChange(option.value)}
|
||||
></Button>
|
||||
))}
|
||||
</div>
|
||||
<div className="actions">
|
||||
<Select
|
||||
variant="borderless"
|
||||
style={{ width: 200 }}
|
||||
placeholder="select models"
|
||||
options={modelList}
|
||||
mode="multiple"
|
||||
maxCount={6}
|
||||
maxTagCount={0}
|
||||
maxTagTextLength={15}
|
||||
></Select>
|
||||
{!loading ? (
|
||||
<Button type="primary" onClick={handleSendMessage} size="middle">
|
||||
<SendOutlined />
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={onStop}
|
||||
size="middle"
|
||||
icon={<IconFont type="icon-stop1"></IconFont>}
|
||||
></Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<TextArea
|
||||
placeholder="Send your message"
|
||||
autoSize={{ minRows: 3, maxRows: 3 }}
|
||||
onChange={(e) => handleInputChange(e.target.value)}
|
||||
value={message}
|
||||
size="large"
|
||||
variant="borderless"
|
||||
></TextArea>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MessageInput;
|
||||
@ -1,43 +0,0 @@
|
||||
import { SendOutlined } from '@ant-design/icons';
|
||||
import { Button, Input } from 'antd';
|
||||
import { useState } from 'react';
|
||||
import '../style/message-input.less';
|
||||
|
||||
const MessageInput: React.FC = () => {
|
||||
const { TextArea } = Input;
|
||||
const [message, setMessage] = useState('');
|
||||
const handleInputChange = (value: string) => {
|
||||
setMessage(value);
|
||||
};
|
||||
const handleSendMessage = () => {
|
||||
console.log('send message:', message);
|
||||
};
|
||||
const SendButton: React.FC = () => {
|
||||
return (
|
||||
<Button
|
||||
type="primary"
|
||||
shape="circle"
|
||||
size="middle"
|
||||
icon={<SendOutlined />}
|
||||
onClick={() => handleSendMessage()}
|
||||
></Button>
|
||||
);
|
||||
};
|
||||
return (
|
||||
<div className="messageInput">
|
||||
<TextArea
|
||||
placeholder="send your message"
|
||||
autoSize={{ minRows: 1, maxRows: 6 }}
|
||||
onChange={(e) => handleInputChange(e.target.value)}
|
||||
value={message}
|
||||
size="large"
|
||||
variant="borderless"
|
||||
></TextArea>
|
||||
<span className="send-btn">
|
||||
<SendButton />
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MessageInput;
|
||||
@ -0,0 +1,19 @@
|
||||
import { useIntl } from '@umijs/max';
|
||||
import React from 'react';
|
||||
|
||||
const ContentItem: React.FC<{ data: { role: string; content: string } }> = ({
|
||||
data
|
||||
}) => {
|
||||
const intl = useIntl();
|
||||
return (
|
||||
<div className="content-item">
|
||||
<div className="content-item-role">
|
||||
{' '}
|
||||
{intl.formatMessage({ id: `playground.${data.role}` })}
|
||||
</div>
|
||||
<div className="content-item-content">{data.content}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(ContentItem);
|
||||
@ -0,0 +1,126 @@
|
||||
import { Col, Row } from 'antd';
|
||||
import { memo, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import '../../style/multiple-chat.less';
|
||||
import MessageInput from '../message-input';
|
||||
import ModelItem from './model-item';
|
||||
|
||||
interface MultiCompareProps {
|
||||
modelList: Global.BaseOption<string>[];
|
||||
parmasSettings?: Record<string, any>;
|
||||
spans?: number;
|
||||
}
|
||||
|
||||
const MultiCompare: React.FC<MultiCompareProps> = ({ modelList }) => {
|
||||
const [loadingStatus, setLoadingStatus] = useState<boolean[]>([]);
|
||||
const [parmasSettings, setParamsSettings] = useState<Record<string, any>>({});
|
||||
const [systemMessage, setSystemMessage] = useState<string>('');
|
||||
const [currentMessage, setCurrentMessage] = useState<
|
||||
{
|
||||
role: 'user' | 'assistant';
|
||||
content: string;
|
||||
}[]
|
||||
>([]);
|
||||
const [globalParams, setGlobalParams] = useState<Record<string, any>>({
|
||||
seed: null,
|
||||
stop: null,
|
||||
temperature: 1,
|
||||
top_p: 1,
|
||||
max_tokens: 1024
|
||||
});
|
||||
const [spans, setSpans] = useState<{
|
||||
span: number;
|
||||
count: number;
|
||||
}>({
|
||||
span: 12,
|
||||
count: 2
|
||||
});
|
||||
const modelRefs = useRef<any[]>([]);
|
||||
|
||||
const isLoading = useMemo(() => {
|
||||
return loadingStatus.some((status) => status);
|
||||
}, [loadingStatus]);
|
||||
|
||||
const modelSelections = useMemo(() => {
|
||||
const list = modelList.slice?.(0, spans.count);
|
||||
return list;
|
||||
}, [modelList, spans.count]);
|
||||
|
||||
useEffect(() => {
|
||||
modelRefs.current = modelSelections.map(() => {
|
||||
return {};
|
||||
});
|
||||
}, [modelSelections]);
|
||||
|
||||
const handleSubmit = (message: string) => {
|
||||
let msg: any[] = [];
|
||||
if (message) {
|
||||
msg = [
|
||||
{
|
||||
role: 'user',
|
||||
content: message
|
||||
}
|
||||
];
|
||||
}
|
||||
modelRefs.current.forEach(async (ref, index) => {
|
||||
ref?.setMessageList((preList: any) => {
|
||||
return [...preList, ...msg];
|
||||
});
|
||||
setLoadingStatus((preStatus) => {
|
||||
const newState = [...preStatus];
|
||||
newState[index] = true;
|
||||
return newState;
|
||||
});
|
||||
await ref?.submit();
|
||||
setLoadingStatus((preStatus) => {
|
||||
const newState = [...preStatus];
|
||||
newState[index] = false;
|
||||
return newState;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const handleAbortFetch = () => {
|
||||
modelRefs.current.forEach((ref) => {
|
||||
ref?.abortFetch();
|
||||
});
|
||||
};
|
||||
|
||||
const setModelRefs = (index: number, ref: any) => {
|
||||
modelRefs.current[index] = ref;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="multiple-chat">
|
||||
<div className="chat-list">
|
||||
<Row gutter={[16, 16]} style={{ height: '100%' }}>
|
||||
{modelSelections.map((model, index) => (
|
||||
<Col span={spans.span} key={model.value}>
|
||||
<ModelItem
|
||||
ref={(el: any) => setModelRefs(index, el)}
|
||||
modelList={modelSelections}
|
||||
globalParams={{
|
||||
...globalParams,
|
||||
model: model.value
|
||||
}}
|
||||
systemMessage={systemMessage}
|
||||
setGlobalParams={setGlobalParams}
|
||||
/>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
</div>
|
||||
<div>
|
||||
<MessageInput
|
||||
loading={isLoading}
|
||||
handleSubmit={handleSubmit}
|
||||
handleAbortFetch={handleAbortFetch}
|
||||
setParamsSettings={setParamsSettings}
|
||||
setSpans={setSpans}
|
||||
modelList={modelList}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default memo(MultiCompare);
|
||||
@ -0,0 +1,22 @@
|
||||
import React from 'react';
|
||||
import ContentItem from './content-item';
|
||||
|
||||
interface MessageContentProps {
|
||||
messageList: {
|
||||
role: string;
|
||||
uid?: string;
|
||||
content: string;
|
||||
}[];
|
||||
}
|
||||
|
||||
const MessageContent: React.FC<MessageContentProps> = ({ messageList }) => {
|
||||
return (
|
||||
<div>
|
||||
{messageList.map((item, index) => (
|
||||
<ContentItem key={index} data={item} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(MessageContent);
|
||||
@ -0,0 +1,186 @@
|
||||
import IconFont from '@/components/icon-font';
|
||||
import {
|
||||
ClearOutlined,
|
||||
CloseOutlined,
|
||||
MoreOutlined,
|
||||
SettingOutlined
|
||||
} from '@ant-design/icons';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Button, Checkbox, Dropdown, Popover, Select } from 'antd';
|
||||
import React, {
|
||||
forwardRef,
|
||||
useEffect,
|
||||
useImperativeHandle,
|
||||
useRef,
|
||||
useState
|
||||
} from 'react';
|
||||
import SimpleBar from 'simplebar-react';
|
||||
import 'simplebar-react/dist/simplebar.min.css';
|
||||
import useChatCompletion from '../../hooks/use-chat-completion';
|
||||
import '../../style/model-item.less';
|
||||
import ParamsSettings from '../params-settings';
|
||||
import MessageContent from './message-content';
|
||||
|
||||
interface ModelItemProps {
|
||||
model?: string;
|
||||
globalParams: Record<string, any>;
|
||||
setGlobalParams: (value: Record<string, any>) => void;
|
||||
modelList: Global.BaseOption<string>[];
|
||||
systemMessage: string;
|
||||
ref: any;
|
||||
}
|
||||
|
||||
const ModelItem: React.FC<ModelItemProps> = forwardRef(
|
||||
({ model, systemMessage, modelList, globalParams, setGlobalParams }, ref) => {
|
||||
const intl = useIntl();
|
||||
const isApplyToAllModels = useRef(false);
|
||||
const [params, setParams] = useState<Record<string, any>>({});
|
||||
// const [messageList, setMessageList] = useState<
|
||||
// {
|
||||
// role: 'user' | 'assistant';
|
||||
// content: string;
|
||||
// }[]
|
||||
// >([]);
|
||||
const { messageList, submitMessage, abortFetch, setMessageList, loading } =
|
||||
useChatCompletion(systemMessage, params);
|
||||
|
||||
useImperativeHandle(ref, () => {
|
||||
return {
|
||||
submit: submitMessage,
|
||||
abortFetch,
|
||||
setMessageList,
|
||||
loading
|
||||
};
|
||||
});
|
||||
|
||||
const actions = [
|
||||
{
|
||||
label: intl.formatMessage({ id: 'common.button.clear' }),
|
||||
key: 'clear',
|
||||
icon: <ClearOutlined />
|
||||
},
|
||||
{
|
||||
label: intl.formatMessage({ id: 'playground.viewcode' }),
|
||||
key: 'viewcode',
|
||||
icon: <IconFont type="icon-code" />
|
||||
}
|
||||
];
|
||||
|
||||
const handleModelChange = (value: string) => {
|
||||
setParams({
|
||||
...params,
|
||||
model: value
|
||||
});
|
||||
};
|
||||
|
||||
const handleApplyToAllModels = (e: any) => {
|
||||
console.log('checkbox change:', e.target.checked);
|
||||
isApplyToAllModels.current = e.target.checked;
|
||||
if (e.target.checked) {
|
||||
setGlobalParams({
|
||||
...params
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleOnValuesChange = (
|
||||
changeValues: any,
|
||||
allValues: Record<string, any>
|
||||
) => {
|
||||
console.log('value:', allValues, isApplyToAllModels.current);
|
||||
if (isApplyToAllModels.current) {
|
||||
setParams({
|
||||
...params,
|
||||
...allValues
|
||||
});
|
||||
setGlobalParams({
|
||||
...allValues
|
||||
});
|
||||
} else {
|
||||
setParams({
|
||||
...params,
|
||||
...changeValues
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleDropdownAction = ({ key }: { key: string }) => {
|
||||
console.log('key:', key);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
console.log('globalParams:', globalParams.model, globalParams);
|
||||
setParams({
|
||||
...params,
|
||||
...globalParams
|
||||
});
|
||||
}, [globalParams]);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
abortFetch();
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="model-item">
|
||||
<div className="header">
|
||||
<span className="title">
|
||||
<Select
|
||||
variant="borderless"
|
||||
options={modelList}
|
||||
onChange={handleModelChange}
|
||||
value={params.model}
|
||||
></Select>
|
||||
</span>
|
||||
<span className="action">
|
||||
<Dropdown
|
||||
menu={{ items: actions, onSelect: handleDropdownAction }}
|
||||
placement="bottomRight"
|
||||
>
|
||||
<Button
|
||||
type="text"
|
||||
icon={<MoreOutlined style={{ fontSize: '14px' }} />}
|
||||
size="small"
|
||||
></Button>
|
||||
</Dropdown>
|
||||
<Popover
|
||||
content={
|
||||
<ParamsSettings
|
||||
showModelSelector={false}
|
||||
setParams={setParams}
|
||||
globalParams={globalParams}
|
||||
onValuesChange={handleOnValuesChange}
|
||||
/>
|
||||
}
|
||||
trigger={['click']}
|
||||
arrow={false}
|
||||
fresh={true}
|
||||
title={
|
||||
<div>
|
||||
<Checkbox onChange={handleApplyToAllModels}>
|
||||
Apply to all models
|
||||
</Checkbox>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Button
|
||||
type="text"
|
||||
icon={<SettingOutlined />}
|
||||
size="small"
|
||||
></Button>
|
||||
</Popover>
|
||||
<Button type="text" icon={<CloseOutlined />} size="small"></Button>
|
||||
</span>
|
||||
</div>
|
||||
<SimpleBar style={{ height: 'calc(100% - 46px)' }}>
|
||||
<div className="content">
|
||||
<MessageContent messageList={messageList} />
|
||||
</div>
|
||||
</SimpleBar>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
export default React.memo(ModelItem);
|
||||
@ -0,0 +1,115 @@
|
||||
import { fetchChunkedData, readStreamData } from '@/utils/fetch-chunk-data';
|
||||
import _ from 'lodash';
|
||||
import { useRef, useState } from 'react';
|
||||
import { CHAT_API } from '../apis';
|
||||
import { Roles } from '../config';
|
||||
|
||||
interface MessageItemProps {
|
||||
role: string | number;
|
||||
content: string;
|
||||
uid: number;
|
||||
}
|
||||
|
||||
const useChatCompletion = (
|
||||
systemMessage: string,
|
||||
parameters: Record<string, any>
|
||||
) => {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const messageId = useRef<number>(0);
|
||||
const [messageList, setMessageList] = useState<MessageItemProps[]>([
|
||||
{
|
||||
role: 'user',
|
||||
content: '',
|
||||
uid: messageId.current
|
||||
}
|
||||
]);
|
||||
const contentRef = useRef<any>('');
|
||||
const controllerRef = useRef<any>(null);
|
||||
|
||||
const setMessageId = () => {
|
||||
messageId.current = messageId.current + 1;
|
||||
};
|
||||
|
||||
const abortFetch = () => {
|
||||
controllerRef.current?.abort?.();
|
||||
};
|
||||
|
||||
const joinMessage = (chunk: any) => {
|
||||
if (!chunk) {
|
||||
return;
|
||||
}
|
||||
if (_.get(chunk, 'choices.0.finish_reason')) {
|
||||
return;
|
||||
}
|
||||
contentRef.current =
|
||||
contentRef.current + _.get(chunk, 'choices.0.delta.content', '');
|
||||
setMessageList([
|
||||
...messageList,
|
||||
{
|
||||
role: Roles.Assistant,
|
||||
content: contentRef.current,
|
||||
uid: messageId.current
|
||||
}
|
||||
]);
|
||||
};
|
||||
|
||||
const submitMessage = async () => {
|
||||
if (!parameters.model) return;
|
||||
try {
|
||||
setLoading(true);
|
||||
setMessageId();
|
||||
|
||||
controllerRef.current?.abort?.();
|
||||
controllerRef.current = new AbortController();
|
||||
const signal = controllerRef.current.signal;
|
||||
const messages = _.map(messageList, (item: MessageItemProps) => {
|
||||
return {
|
||||
role: item.role,
|
||||
content: item.content
|
||||
};
|
||||
});
|
||||
|
||||
contentRef.current = '';
|
||||
const chatParams = {
|
||||
messages: systemMessage
|
||||
? [
|
||||
{
|
||||
role: Roles.System,
|
||||
content: systemMessage
|
||||
},
|
||||
...messages
|
||||
]
|
||||
: [...messages],
|
||||
...parameters,
|
||||
stream: true
|
||||
};
|
||||
const result = await fetchChunkedData({
|
||||
data: chatParams,
|
||||
url: CHAT_API,
|
||||
signal
|
||||
});
|
||||
|
||||
if (!result) {
|
||||
return;
|
||||
}
|
||||
const { reader, decoder } = result;
|
||||
await readStreamData(reader, decoder, (chunk: any) => {
|
||||
joinMessage(chunk);
|
||||
});
|
||||
setLoading(false);
|
||||
} catch (error) {
|
||||
console.log('error=====', error);
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
loading,
|
||||
messageList,
|
||||
setMessageList,
|
||||
submitMessage,
|
||||
abortFetch
|
||||
};
|
||||
};
|
||||
|
||||
export default useChatCompletion;
|
||||
@ -0,0 +1,21 @@
|
||||
.model-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid var(--ant-color-border);
|
||||
border-radius: var(--border-radius-base);
|
||||
height: 100%;
|
||||
|
||||
.header {
|
||||
padding-inline: 2px 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 46px;
|
||||
border-bottom: 1px solid var(--ant-color-border);
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,12 @@
|
||||
.multiple-chat {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: calc(100vh - 72px);
|
||||
|
||||
.chat-list {
|
||||
flex: 1;
|
||||
padding-bottom: 16px;
|
||||
padding-inline: var(--layout-content-inlinepadding);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue