AI探索实践10 - Typescript开发AI应用2：前端实现本地模型流式响应输出

04-09 阅读 0评论

大家好，我是feng，感谢你阅读我的博文，如果你也关注AI应用开发，欢迎关注公众号和我一起探索。如果文章对你有所启发，请为我点赞！

在前一篇博文《AI探索实践9 - 不用Python！用前端也能开发一个本地运行的“ChatGPT”！》，实现了仅依靠前端程序，就可以和本地大模型通信，实现了类似ChatGPT聊天的效果。但是在运行程序后，我发现本地模型的响应是一次性显示的，并没有像ChatGPT那样实现打字机的效果。本文就来研究如何实现流式输出的效果。

一、重点回顾

在前端程序中，前端和大模型的通信的主要逻辑是这两行代码：

const response = await chatModel.invoke(prompt.value as string);
console.log(response);
addMessage(response.content as string, '/images/robot.png', false);

从代码中，可以明白chatModel.invoke方法，是接收一个提示语参数，并返回一个大模型的响应。来看看控制台下的这个响应内容:

这是一个类型为AIMessage的对象，我们获取这个返回对象的content属性，就可以得到大模型响应的结果。

二、一次提交多个提示语

大多时候，我们都会尽可能的充分利用大模型的性能以给用户更好的体验。LangChain支持一次性提交多个提示语，代码如下。

const response = await chatModel.batch(['你好吗？', '你能做什么事情？']);
console.log(response);

batch方法，接收一个数组。其中每一个参数为一个提示语。来看看响应：

可以看出，当你一次性发出多个提示语时，大模型会返回一个消息数组，对应问题的多个回答。

三、流式请求与响应

3.1 流式请求

LangChain还提供了一种数据通信方式：流式。代码如下：

const response = await chatModel.stream(prompt.value as string);
console.log(response);

stream方法，返回一个流对象。通过控制台看看实际返回的数据：

3.2 流式响应

返回的是一个 IterableReadableStream 类型的异步对象。来看一下 stream的定义：

stream(input: RunInput, options?: Partial): Promise;

3.3 解析流式响应

由于响应对象是一个异步的可读流集合，因此我们可以使用for循环来读取每次的流响应，为了处理异步，我们需要加上关键字 await。

const response = await chatModel.stream(prompt.value as string);
console.log(response);
for await (const chunk of response) {
    console.log(chunk.content);
}

来观察控制台下打印的模型响应：

可以看到，每一行是大模型返回的一个流响应的内容。我们将这个动作增加到页面上，即可实现ChatGPT打字机的效果。

四、实现页面流式响应（打字机效果）

4.1 实现思路

在模板中，显示的对话数据来自于消息数组。每发出或者收到响应消息，都会在数组尾部增加一个消息对象，利用Vue的双向绑定特性，模版中会自动增加最新的消息。

由于流式响应，是对一个回答内容进行多次的补充。从结果上看，是一个回答内容。但是从过程上看，却是多条回答内容。因此如果流式回答也按照上面的方法更新模板（往数组尾部追加消息），就会在页面上显示出多个回答的效果。这显然不是我们想要的。

这里提供一个方法，逻辑实现要点如下，供大家参考。

模板上设置一个默认的机器人回答消息框，默认是隐藏的
消息绑定到一个字符串变量，比如： answer。
消息发出时，显示默认的机器人回答消息框。
当收到流式响应数据时，循环响应流对象，并将每次响应流对象内容追加到 answer后。
当接收全部流式响应数据后
1. 隐藏默认的机器人回答消息框。
2. 将本次回答的完整内容即 answer的值，增加到消息数组中。
3. 重置answer的值为空字符串

4.2 升级代码逻辑

const isAnswering = ref(false);
const answer = ref('');
async function sent() {
  isAnswering.value = true;
  addMessage(prompt.value, '/images/man.png', true);
  const response = await chatModel.stream(prompt.value as string)
  console.log(response);
  for await (const chunk of response) {
    answer.value += chunk.content;
    console.log(chunk.content);
  }
  isAnswering.value = false;
  addMessage(answer.value, '/images/robot.png');
  prompt.value = '';
  answer.value = '';
}