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

摘要

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

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

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

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

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

本章重点

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

引入ReactMarkdown

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

首先安装一下依赖:

js 复制代码
npm i react-markdown

然后修改我们的组件:

js 复制代码
// DialogCardList/index.tsx

import 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属性。

js 复制代码
<ReactMarkDown components={{ code: getCode }}>
    {item.answer}
</ReactMarkDown>

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

先安装一下依赖:

js 复制代码
npm i react-syntax-highlighter

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

js 复制代码
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 ? (
        <SyntaxHighlighter
            className={styles.codeBlock}
            language={match[1]}
            PreTag="div"
            style={hybrid}
            {...props}
        >
            {String(children).replace(/\n$/, '')}
        </SyntaxHighlighter>
        ) : (
            <code className={className} {...props}>
            {children}
        </code>
    );
};

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

这部分的代码提交记录:

github.com/TeacherXin/...

后端处理模型记忆

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

【曹操是谁?】

【模型回答: 曹操是。。。。。】

【他的儿子是谁】

【模型回答:请提供具体的人物。。。。。】

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

之前我们使用模型的时候,是这么调用的:

js 复制代码
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方法进行改造了:

js 复制代码
// chat.js

let 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(); // 结束连接
    }
};

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

github.com/TeacherXin/...

前端处理新建对话

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

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

js 复制代码
// 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组件,增加一个新建对话的按钮并且绑定个事件:

js 复制代码
// Sidebar/index.tsx

const newSessionClick = () => {
    dialogCardListStore.clear();
}

然后在实现一下clear方法:

js 复制代码
// DialogCardList/store.ts


clear: () => set(() => ({ dialogCardList: [], sessionId: '' })),

这部分的提交记录如下:

github.com/TeacherXin/...

相关推荐
浪裡遊11 分钟前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
Cacciatore->7 小时前
React 基本介绍与项目创建
前端·react.js·arcgis
摸鱼仙人~7 小时前
React Ref 指南:原理、实现与实践
前端·javascript·react.js
贵沫末7 小时前
React——基础
前端·react.js·前端框架
爱学习的茄子8 小时前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
10年前端老司机8 小时前
在React项目中如何封装一个可扩展,复用性强的组件
前端·javascript·react.js
sophie旭8 小时前
《深入浅出react开发指南》总结之 10.1 React运行时总览
前端·react.js·源码阅读
轻语呢喃8 小时前
React智能前端:从零开始写的图片分析页面实战
前端·react.js·aigc
MiyueFE8 小时前
每个前端开发者都应该掌握的几个 ReactJS 概念
前端·react.js