AI对话剖析实现

1212字约4分钟

人工智能 AI对话流式数据

2024-11-10

前言

现在随着AI的发展，市面出现了很多AI对话的工具，正好这段时间也在做AI对话。其实功能不复杂，主要需要考虑的是细节、体验，跟我一起剖析AI对话是如何实现的。

功能

获取流式数据
内容渲染并且实现打字机效果

实现

准备流式接口

为了更加逼真，这里使用Node简单实现一个流式接口，方便后面使用。

const express = require("express");
const cors = require("cors");
const app = express();
app.use(cors());
const PORT = 5000;
const markdownText = `
# npm

## 常用指令

\`\`\`bash
# 修改仓库地址
git remote set-url origin 新仓库地址
# 查看仓库地址
git remote -v
# 更新远程分支
git remote update origin --prune
# 发布
npm publish
# 继续 rebase
git rebase --continue
# 放弃 rebase
git rebase --abort
# 修改最近一次提交的消息
git commit --amend
# 如果你想直接指定新的提交消息，可以使用 -m 参数，此时不会打开编辑器，来修改信息：
git commit --amend -m "New commit message"
\`\`\`
`;
const contentStr = markdownText.split('')
app.get("/sse", function (req, res) {
  res.writeHead(200, {
    Connection: "keep-alive",
    "Content-Type": "text/event-stream",
    "Cache-Control": "no-cache",
  });
  // 正常的 sse 结束，需要从客户端触发 close 事件，如果从服务端触发，客户端会收到 error 
  req.on('close', function () {
    console.log('close')
    clearInterval(interval)
  })
  let count = 0
  // 此处用计时器来模拟大模型的查询结果
  const interval = setInterval(() => {
    // 如果前端没有正确触发 SSE 的 close 事件，服务端判断如果数据已发送完成，也会主动关闭事件
    if (count > contentStr.length) {
      res.end()
      clearInterval(interval)
      return
    } else if (count === 0) {
      res.write(contentStr[count]);
    } else if (count === contentStr.length) {
      res.write('');
    }
    else {
      res.write(contentStr[count]);
    }
    count++
  }, 100);
});
app.listen(PORT, function () {
  console.log(`Server is running on port ${PORT}`);
});

流式数据获取

这里获取流式数据需要通过原生Fetch API请求。

// 使用fetch函数从http://127.0.0.1:5000/sse获取数据
let resp = await fetch("http://127.0.0.1:5000/sse");
// 获取响应体的读取器
let reader = resp.body.getReader();
// 循环读取数据
while (true) {
	// 读取数据
	let { done, value } = await reader.read();
	// 如果读取完毕，则跳出循环
	if (done) break;
	// 将读取到的数据解码为字符串
	let str = new TextDecoder().decode(value);
	// 将解码后的字符串添加到markdownText中
	this.markdownText += str;
}

页面展示

考虑到数据会是markdown格式，那么就需要解析md格式，可以使用marked这个库进行解析，这个库是整体一块解析的，要实现打字机效果就不适合，需要实时解析，这种组件有很多，这里使用vue-markdown组件。

npm i vue-markdown

<template>
  <VueMarkdown :source="markdownText" />
</template>
<script>
    import VueMarkdown from "vue-markdown";
    export default{
        components: { VueMarkdown },
		data() {
			return {
				markdownText: "",
			};
		},
    }
</script>

现在基本功能已经实现，开始细节优化，页面美化中。。。

细节优化

禁止发送多次，可暂停

AbortController是fetch API提供的一种机制，允许你取消一个fetch请求。虽然这不是真正的暂停，但是你可以重新发起请求。

const controller = new AbortController();
let resp = await fetch("http://127.0.0.1:5000/sse",{
    signal:controller.signal
});
// 在需要暂停请求时
controller.abort();

对话框定位到页面底部

每次对话为对话框添加一个ID，然后通过scrollIntoView定位

this.$nextTick(() => {
	document.querySelector('#ai1').scrollIntoView({
		behavior: "smooth",
		block: "end",
	});
});

页面跟随文字自动定位页面底部，手动滚动取消自动定位

思路： 新建滚动开关，在while循环中根据滚动开关决定是否使用scrollIntoView定位到底部同时开启滚动监听，判断滚动条是否在页面底部，去修改滚动开关，修改后直接移除滚动事件。

let abortCtrl = null
async submit() {
      //每次先定位到底部以防滚动监听不准确
      this.$nextTick(() => {
        document.querySelector('#ai1').scrollIntoView({
          behavior: "smooth",
          block: "end",
        });
      });
      //滚动开关
      let shouldAutoScroll = true;
    //获取外层容器添加监听事件
      let contentDom = document.querySelector(".box");
      contentDom.addEventListener("scroll", function onScroll(e) {
          //判断滚动条是否在页面底部
        let flag = contentDom.scrollHeight - contentDom.clientHeight <= contentDom.scrollTop + 1;
          //不在底部修改状态并且移除监听
        shouldAutoScroll = flag;
        if (!flag) {
          contentDom.removeEventListener("scroll", onScroll);
        }
      });
      abortCtrl = new AbortController();
      // 使用fetch函数从http://127.0.0.1:5000/sse获取数据
      let resp = await fetch("http://127.0.0.1:5000/sse");
      // 获取响应体的读取器
      let reader = resp.body.getReader();
      // 循环读取数据
      while (true) {
        // 读取数据
        let { done, value } = await reader.read();
        // 如果读取完毕，则跳出循环
        if (done) break;
        // 将读取到的数据解码为字符串
        let str = new TextDecoder().decode(value);
        // 将解码后的字符串添加到markdownText中
        this.markdownText += str;
        if (shouldAutoScroll) {
          requestAnimationFrame(() => {
            document.querySelector('#ai1').scrollIntoView({
              behavior: "smooth",
              block: "end",
            });
          });
        }
      }
},

这里就大致实现了AI对话的主要交互功能。主要有流式数据的读取、数据内容的渲染、页面跟随滚动。技术不难，主要是提供一个思路，欢迎大家交流提供其它的实现方式。