theluyuan/RWKV-Runner
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add sidePanel for Chat page

Browse Source
This commit is contained in:
josc146 2023-11-20 23:47:39 +08:00
parent 66e43c9d9b
commit a9819139b8
5 changed files with 298 additions and 177 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/_locales/ja/main.json
View File

@ -269,5 +269,6 @@
"Server is working on deployment mode, please close the terminal window manually": "サーバーはデプロイモードで動作しています、ターミナルウィンドウを手動で閉じてください",
"Server is working on deployment mode, please exit the program manually to stop the server": "サーバーはデプロイモードで動作しています、サーバーを停止するにはプログラムを手動で終了してください",
"You can increase the number of stored layers in Configs page to improve performance": "パフォーマンスを向上させるために、保存されるレイヤーの数を設定ページで増やすことができます",
"Failed to load model, try to increase the virtual memory (Swap of WSL) or use a smaller base model.": "モデルの読み込みに失敗しました、仮想メモリ (WSL Swap) を増やすか小さなベースモデルを使用してみてください。"
"Failed to load model, try to increase the virtual memory (Swap of WSL) or use a smaller base model.": "モデルの読み込みに失敗しました、仮想メモリ (WSL Swap) を増やすか小さなベースモデルを使用してみてください。",
"Save Conversation": "会話を保存"
}

3
frontend/src/_locales/zh-hans/main.json
View File

@ -269,5 +269,6 @@
"Server is working on deployment mode, please close the terminal window manually": "服务器正在部署模式下运行，请手动关闭终端窗口",
"Server is working on deployment mode, please exit the program manually to stop the server": "服务器正在部署模式下运行，请手动退出程序以停止服务器",
"You can increase the number of stored layers in Configs page to improve performance": "你可以在配置页面增加载入显存层数以提升性能",
"Failed to load model, try to increase the virtual memory (Swap of WSL) or use a smaller base model.": "模型载入失败，尝试增加虚拟内存(WSL Swap)，或使用一个更小规模的基底模型"
"Failed to load model, try to increase the virtual memory (Swap of WSL) or use a smaller base model.": "模型载入失败，尝试增加虚拟内存(WSL Swap)，或使用一个更小规模的基底模型",
"Save Conversation": "保存对话"
}

164
frontend/src/pages/Chat.tsx
View File

@ -16,8 +16,11 @@ import {
Attach16Regular,
Delete28Regular,
Dismiss16Regular,
Dismiss24Regular,
RecordStop28Regular,
Save28Regular
SaveRegular,
TextAlignJustify24Regular,
TextAlignJustifyRotate9024Regular
} from '@fluentui/react-icons';
import { CopyButton } from '../components/CopyButton';
import { ReadButton } from '../components/ReadButton';
@ -26,9 +29,11 @@ import { WorkHeader } from '../components/WorkHeader';
import { DialogButton } from '../components/DialogButton';
import { OpenFileFolder, OpenOpenFileDialog, OpenSaveFileDialog } from '../../wailsjs/go/backend_golang/App';
import { absPathAsset, bytesToReadable, getServerRoot, toastWithButton } from '../utils';
import { PresetsButton } from './PresetsManager/PresetsButton';
import { useMediaQuery } from 'usehooks-ts';
import { botName, ConversationMessage, MessageType, userName, welcomeUuid } from '../types/chat';
import { Labeled } from '../components/Labeled';
import { ValuedSlider } from '../components/ValuedSlider';
import { PresetsButton } from './PresetsManager/PresetsButton';
let chatSseControllers: {
[id: string]: AbortController
@ -188,11 +193,125 @@ const ChatMessageItem: FC<{
</div>;
});
const SidePanel: FC = observer(() => {
const [t] = useTranslation();
const mq = useMediaQuery('(min-width: 640px)');
const params = commonStore.chatParams;
return <div
className={classnames(
'flex flex-col gap-1 h-full flex-shrink-0 transition-width duration-300 ease-in-out',
commonStore.sidePanelCollapsed ? 'w-0' : (mq ? 'w-64' : 'w-full'),
!commonStore.sidePanelCollapsed && 'ml-1')
}>
<div className="flex m-1">
<div className="grow" />
<PresetsButton tab="Chat" size="medium" shape="circular" appearance="subtle" />
<Button size="medium" shape="circular" appearance="subtle" icon={<Dismiss24Regular />}
onClick={() => commonStore.setSidePanelCollapsed(true)}
/>
</div>
<div className="flex flex-col gap-1 overflow-x-hidden overflow-y-auto p-1">
<Labeled flex breakline label={t('Max Response Token')}
desc={t('By default, the maximum number of tokens that can be answered in a single response, it can be changed by the user by specifying API parameters.')}
content={
<ValuedSlider value={params.maxResponseToken} min={100} max={8100}
step={100}
input
onChange={(e, data) => {
commonStore.setChatParams({
maxResponseToken: data.value
});
}} />
} />
<Labeled flex breakline label={t('Temperature')}
desc={t('Sampling temperature, it\'s like giving alcohol to a model, the higher the stronger the randomness and creativity, while the lower, the more focused and deterministic it will be.')}
content={
<ValuedSlider value={params.temperature} min={0} max={2} step={0.1}
input
onChange={(e, data) => {
commonStore.setChatParams({
temperature: data.value
});
}} />
} />
<Labeled flex breakline label={t('Top_P')}
desc={t('Just like feeding sedatives to the model. Consider the results of the top n% probability mass, 0.1 considers the top 10%, with higher quality but more conservative, 1 considers all results, with lower quality but more diverse.')}
content={
<ValuedSlider value={params.topP} min={0} max={1} step={0.1} input
onChange={(e, data) => {
commonStore.setChatParams({
topP: data.value
});
}} />
} />
<Labeled flex breakline label={t('Presence Penalty')}
desc={t('Positive values penalize new tokens based on whether they appear in the text so far, increasing the model\'s likelihood to talk about new topics.')}
content={
<ValuedSlider value={params.presencePenalty} min={0} max={2}
step={0.1} input
onChange={(e, data) => {
commonStore.setChatParams({
presencePenalty: data.value
});
}} />
} />
<Labeled flex breakline label={t('Frequency Penalty')}
desc={t('Positive values penalize new tokens based on their existing frequency in the text so far, decreasing the model\'s likelihood to repeat the same line verbatim.')}
content={
<ValuedSlider value={params.frequencyPenalty} min={0} max={2}
step={0.1} input
onChange={(e, data) => {
commonStore.setChatParams({
frequencyPenalty: data.value
});
}} />
} />
</div>
<div className="grow" />
{/*<Button*/}
{/* icon={<FolderOpenVerticalRegular />}*/}
{/* onClick={() => {*/}
{/* }}>*/}
{/* {t('Load Conversation')}*/}
{/*</Button>*/}
<Button
icon={<SaveRegular />}
onClick={() => {
let savedContent: string = '';
const isWorldModel = commonStore.getCurrentModelConfig().modelParameters.modelName.toLowerCase().includes('world');
const user = isWorldModel ? 'User' : 'Bob';
const bot = isWorldModel ? 'Assistant' : 'Alice';
commonStore.conversationOrder.forEach((uuid) => {
if (uuid === welcomeUuid)
return;
const messageItem = commonStore.conversation[uuid];
if (messageItem.type !== MessageType.Error) {
savedContent += `${messageItem.sender === userName ? user : bot}: ${messageItem.content}\n\n`;
}
});
OpenSaveFileDialog('*.txt', 'conversation.txt', savedContent).then((path) => {
if (path)
toastWithButton(t('Conversation Saved'), t('Open'), () => {
OpenFileFolder(path, false);
});
}).catch(e => {
toast(t('Error') + ' - ' + (e.message || e), { type: 'error', autoClose: 2500 });
});
}}>
{t('Save Conversation')}
</Button>
</div>;
});
const ChatPanel: FC = observer(() => {
const { t } = useTranslation();
const bodyRef = useRef<HTMLDivElement>(null);
const inputRef = useRef<HTMLTextAreaElement>(null);
const mq = useMediaQuery('(min-width: 640px)');
if (commonStore.sidePanelCollapsed === 'auto')
commonStore.setSidePanelCollapsed(!mq);
const currentConfig = commonStore.getCurrentModelConfig();
const apiParams = currentConfig.apiParameters;
const port = apiParams.apiPort;
@ -327,8 +446,10 @@ const ChatPanel: FC = observer(() => {
messages,
stream: true,
model: commonStore.settings.apiChatModelName, // 'gpt-3.5-turbo'
temperature: apiParams.temperature,
top_p: apiParams.topP,
temperature: commonStore.chatParams.temperature,
top_p: commonStore.chatParams.topP,
presence_penalty: commonStore.chatParams.presencePenalty,
frequency_penalty: commonStore.chatParams.frequencyPenalty,
user_name: commonStore.activePreset?.userName || undefined,
assistant_name: commonStore.activePreset?.assistantName || undefined,
presystem: commonStore.activePreset?.presystem && undefined
@ -391,14 +512,17 @@ const ChatPanel: FC = observer(() => {
}, []);
return (
<div className="flex flex-col w-full grow gap-4 pt-4 overflow-hidden">
<div className="flex h-full grow pt-4 overflow-hidden">
<div className="relative flex flex-col w-full grow gap-4 overflow-hidden">
<Button className="absolute top-1 right-1" size="medium" shape="circular" appearance="subtle"
icon={commonStore.sidePanelCollapsed ? <TextAlignJustify24Regular /> : <TextAlignJustifyRotate9024Regular />}
onClick={() => commonStore.setSidePanelCollapsed(!commonStore.sidePanelCollapsed)} />
<div ref={bodyRef} className="grow overflow-y-scroll overflow-x-hidden pr-2">
{commonStore.conversationOrder.map(uuid =>
<ChatMessageItem key={uuid} uuid={uuid} onSubmit={onSubmit} />
)}
</div>
<div className={classnames('flex items-end', mq ? 'gap-2' : '')}>
<PresetsButton tab="Chat" size={mq ? 'large' : 'small'} shape="circular" appearance="subtle" />
<DialogButton tooltip={t('Clear')}
icon={<Delete28Regular />}
size={mq ? 'large' : 'small'} shape="circular" appearance="subtle" title={t('Clear')}
@ -543,34 +667,10 @@ const ChatPanel: FC = observer(() => {
handleKeyDownOrClick(e);
}
}} />
<ToolTipButton desc={t('Save')}
icon={<Save28Regular />}
size={mq ? 'large' : 'small'} shape="circular" appearance="subtle"
onClick={() => {
let savedContent: string = '';
const isWorldModel = commonStore.getCurrentModelConfig().modelParameters.modelName.toLowerCase().includes('world');
const user = isWorldModel ? 'User' : 'Bob';
const bot = isWorldModel ? 'Assistant' : 'Alice';
commonStore.conversationOrder.forEach((uuid) => {
if (uuid === welcomeUuid)
return;
const messageItem = commonStore.conversation[uuid];
if (messageItem.type !== MessageType.Error) {
savedContent += `${messageItem.sender === userName ? user : bot}: ${messageItem.content}\n\n`;
}
});
OpenSaveFileDialog('*.txt', 'conversation.txt', savedContent).then((path) => {
if (path)
toastWithButton(t('Conversation Saved'), t('Open'), () => {
OpenFileFolder(path, false);
});
}).catch(e => {
toast(t('Error') + ' - ' + (e.message || e), { type: 'error', autoClose: 2500 });
});
}} />
</div>
</div>
<SidePanel />
</div>
);
});

18
frontend/src/stores/commonStore.ts
View File

@ -7,7 +7,7 @@ import { defaultCompositionPrompt, defaultModelConfigs, defaultModelConfigsMac }
import { ChartData } from 'chart.js';
import { Preset } from '../types/presets';
import { AboutContent } from '../types/about';
import { Attachment, Conversation } from '../types/chat';
import { Attachment, ChatParams, Conversation } from '../types/chat';
import { CompletionPreset } from '../types/completion';
import { CompositionParams } from '../types/composition';
import { ModelConfig } from '../types/configs';
@ -65,6 +65,14 @@ class CommonStore {
attachmentUploading: boolean = false;
attachments: { [uuid: string]: Attachment[] } = {};
currentTempAttachment: Attachment | null = null;
chatParams: ChatParams = {
maxResponseToken: 1000,
temperature: 1,
topP: 0.3,
presencePenalty: 0,
frequencyPenalty: 1
};
sidePanelCollapsed: boolean | 'auto' = 'auto';
// completion
completionPreset: CompletionPreset | null = null;
completionGenerating: boolean = false;
@ -363,6 +371,14 @@ class CommonStore {
setCurrentTempAttachment(value: Attachment | null) {
this.currentTempAttachment = value;
}
setChatParams(value: Partial<ChatParams>) {
this.chatParams = { ...this.chatParams, ...value };
}
setSidePanelCollapsed(value: boolean | 'auto') {
this.sidePanelCollapsed = value;
}
}
export default new CommonStore();

3
frontend/src/types/chat.ts
View File

@ -1,3 +1,5 @@
import { ApiParameters } from './configs';
export const userName = 'M E';
export const botName = 'A I';
export const welcomeUuid = 'welcome';
@ -32,3 +34,4 @@ export type Attachment = {
size: number;
content: string;
}
export type ChatParams = Omit<ApiParameters, 'apiPort'>