从零实现一个GPT 【React + Express】--- 【3】解析markdown，处理模型记忆

---

theme: yu

highlight: a11y-light

---

摘要

这是本系列的第三章，在此之前我们先回顾一下上一篇文章：

# 从零实现一个GPT 【React + Express】— 【2】实现对话流和停止生成

在这一篇里，我们实现了前端对话流的基本交互，可以做到问答以及停止生成的效果：

但是会发现从效果上来看，似乎很丑，因为都挤在一起了，没有一点格式。

这个时候我们要看一下模型返回的内容是不是没有格式的，看一下接口你就会发现，其实模型返回的内容是markdown的内容，所以我们前端在处理的时候需要对其转换一下的。

本章重点

• 引入React Markdown，代码高亮
• 实现模型记忆
• 实现新建对话

引入ReactMarkdown

来到DialogCardList组件，之前我们只是通过一个div把answer包起来了，现在我们用ReactMarkdown给他包起来：

首先安装一下依赖：

npm i react-markdown

然后修改我们的组件：

// DialogCardList/index.tsximport ReactMarkDown from 'react-markdown';// 其他代码return (<div className={styles.scrollContainer}><div className={styles.dialogCardList}>{dialogCardListStore.dialogCardList.map((item) => {return (<div className={styles.dialogCard} key={item.cardId}><div className={styles.question}><p>{item.question}</p></div><div className={styles.answer}><ReactMarkDown>{item.answer}</ReactMarkDown></div></div>);})}</div></div>
);

这个时候在看一下效果，就发现现在的回答是有格式的了：

实现代码高亮

虽然我们引入了markdown，但是读者可以尝试输入这样一段query：”帮我写一段冒泡排序“。

会发现ReactMarkdown并不会对代码做高亮处理，但是呢，ReactMarkDown组件对外暴露了components属性，用户处理不同类型的标签，例如code类型。所以这里我们给ReactMarkdown加上components属性。

<ReactMarkDown components={{ code: getCode }}>{item.answer}
</ReactMarkDown>

然后我们实现getCode方法，这里为了实现代码高亮，我们引入react-syntax-highlighter

先安装一下依赖：

npm i react-syntax-highlighter

现在我们就可以实现getCode方法了：

import SyntaxHighlighter from 'react-syntax-highlighter';import { hybrid } from 'react-syntax-highlighter/dist/esm/styles/hljs';const getCode = (params: any) => {const { inline, className, children, ...props } = params;const match = /language-(\w+)/.exec(className || '');return !inline && match ? (<SyntaxHighlighterclassName={styles.codeBlock}language={match[1]}PreTag="div"style={hybrid}{...props}>{String(children).replace(/\n$/, '')}</SyntaxHighlighter>) : (<code className={className} {...props}>{children}</code>);
};

这样，我们的代码高亮就也实现了。

这部分的代码提交记录：

https://github.com/TeacherXin/gpt-xin/commit/58ca34ecf8f9f6c5b706639dbc732def554d8f65

后端处理模型记忆

其实现在，如果读者多尝试几次，会发现一个很不正常的问题，比如你这么发送query。

【曹操是谁？】
【模型回答: 曹操是。。。。。】
【他的儿子是谁】
【模型回答：请提供具体的人物。。。。。】

这体现了，模型对历史的对话是不保留记忆的，那如果模型不保留，我们就要给他保留。并且每次发送下一个问题的时候，把之前模型的回答都给模型传过去。这样模型就可以根据以往的回答，对历史保存记忆了。

之前我们使用模型的时候，是这么调用的：

const stream = await client.chat.completions.create({messages: [{ role: 'system', content: '你是一个风趣幽默的中文助手' },{ role: 'user', content: message },],model: 'gpt-3.5-turbo',stream: true,max_tokens: 5000, // 控制生成的 token 数
});

这里介绍一下，role字段的类型：

• system： 代表系统字段，就是一个初始化模型的字段。
• user：代表用户输入的query。
• assistant：代表模型输出的内容。

那如果我们把之前用户的提问和模型的回答组成一对，然后全放在messsages里面，模型不就能够把之前的对话记下来了吗。

但是我们又不能全记，应该是只记录当前会话的历史，比如用户创建了一个新的对话。那么之前对话里的历史就不应该存下来。所以这里我们要有一个sessionId的概念。

我们现在来模拟一下整个流程：

1. 前端第一次发送sse请求，paloyd为用户输入的query
2. 后端接受sse请求，发现没有sessionId，创建一个sessionId通过major返回。
3. 前端接收到sessionId保存下来
4. 前端第二次发送sse请求，paloyd为用户输入的query和sessionId
5. 后端接受sse请求，发现有sessionId，将上一轮的问答传给模型
6. 重复第四步
7. 前端新建一个对话，将sessionId清空，回到第一步

现在我们就可以对后端的getChat方法进行改造了：

// chat.jslet historyList = [];const getChat = async (message, sessionId ,res) => {try {const majorData = {id: Date.now()};if (!sessionId) {sessionId = Date.now();majorData.sessionId = sessionId;historyList = [];}const stream = await client.chat.completions.create({messages: [{ role: 'system', content: '你是一个风趣幽默的中文助手' },...historyList,{ role: 'user', content: message },],model: 'gpt-3.5-turbo',stream: true,max_tokens: 5000, // 控制生成的 token 数});const eventName = 'major';res.write(`event: ${eventName}\n`);res.write(`data: ${JSON.stringify(majorData)}\n\n`);let answer = '';for await (const part of stream) {const eventName = 'message';if (Object.keys(part.choices[0]?.delta || {}).length > 0) {res.write(`event: ${eventName}\n`);res.write(`data: ${JSON.stringify(part.choices[0].delta)}\n\n`);answer += part.choices[0].delta.content || '';}}historyList.push({role: 'user',content: message,});historyList.push({role: 'assistant',content: answer,});console.log(historyList)res.end(); // 结束连接} catch (error) {console.error('Error during OpenAI API call:', error);res.end(); // 结束连接}
};

后端这部分的提交记录如下：

https://github.com/TeacherXin/gpt-xin-server/commit/6c350f063544ba8b06bb5eafe90efb3c92e6ec2b

前端处理新建对话

后端实现完了我们就来完善一下前端内容，首先我们要修改我们的connectSSE方法，sendData里有一个参数是sessionId，当前session第一次发送不携带，后续每次发送都需要携带该参数：

同时在major的callback里，我们要将sessionId存在store里面。

// DialogInput/index.tsx
const majorCallback = (major: Major) => {dialogCardListStore.changeLastId(major.id);if (major.sessionId) {dialogCardListStore.setSessionId(major.sessionId);}
};if (dialogCardListStore.sessionId) {data.sessionId = dialogCardListStore.sessionId;
}connectSSE(url, data, {message: messageCallback,major: majorCallback,close: closeCallback,
});

这个时候，你就可以发送一段连续的query了：

可以看到，模型对之前的内容保留了记忆。

最后来到久违的sidebar组件，增加一个新建对话的按钮并且绑定个事件：

// Sidebar/index.tsxconst newSessionClick = () => {dialogCardListStore.clear();
}

然后在实现一下clear方法：

// DialogCardList/store.tsclear: () => set(() => ({ dialogCardList: [], sessionId: '' })),

这部分的提交记录如下：

https://github.com/TeacherXin/gpt-xin/commit/dc50bdca0f133499b005667844878dd58581f699