devbox
花生_TL007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Vue3实现chatgpt的流式输出_vue chatgpt

作者：花生_TL007 | 2024-04-11 11:20:41

赞

踩

vue chatgpt

前言：

我在使用Vue3开发一个chatgpt工具类网站的时候，翻阅了不少博客和github上的一些相关项目，都没能找到适合Vue3去实现stream的流式数据处理。经过踩坑，最终实现了适用直接调chatgpt接口的方法以及改为调用Python后端接口的方法。

背景：

默认情况下，当用户从 OpenAI 请求完成时，会生成整个完成，然后再通过单个响应发回，这样可能会造成等待响应时间过长。

解决：

“流式传输”，需在调用聊天完成或完成端点时设置 stream=True，这将返回一个对象，该对象将响应作为仅数据服务器发送的事件流回。

参数说明：

  • messages: 必须是对象数组

    类型作用
    system设置chatgpt的角色
    user用户输入的内容
    assistantchatgpt返回的内容
  • system 设定角色助手，使得下文对话走这条线路
  • assistant充当历史记录，达到多轮对话，需将用户所问、AI所答数据存储，实现上下文功能，代价是消耗更多的tokens
  • temperature
类型默认值取值范围是否必填
浮点数10 - 2否
  • 随着temperature的取值越大，其输出结果更加随机（较低能集中稳定输出字节，但较高能有意想不到的性能创意）
  • top_p
类型默认值取值范围是否必填
浮点数10 - 1否
  • top_p用于预测可能，值越小时，其输出结果会更加肯定，响应性能会相对快，但值越大时，输出的结果可能会更贴近用户需求

How to stream completions?

API文档：https://platform.openai.com/docs/api-reference/chat/create

有关实例代码：openai-cookbook/How_to_stream_completions.ipynb at main · openai/openai-cookbook · GitHub

相信你们早就阅读了上面的文档，但还是很迷茫，感觉无从下手...下面说说我的踩坑经历：
我在网上搜索到的信息是，需要一些流式处理库，我就问chatgpt，它给我推荐了以下几种
 

  1. RxJS：是一个响应式编程库，支持流式处理和异步操作。

  2. Bacon.js：也是一个响应式编程库，提供了一个功能强大的事件流模型，可以用来处理异步事件。

  3. Highland.js：是一个基于流的函数式编程库，提供了广泛的流操作和管道组合功能。

  4. Node.js的stream模块：是一个流式处理库，提供了流处理的核心功能。可以通过其定义自己的流转换器和消费者函数。

  5. lodash-fp：是一个功能强大的函数式编程库，提供了一整套函数式的操作和工具，可以用来方便快捷地进行流处理。

我没走这条路，我重新查询了一波，网上的意思是，可以利用WebSocket方式或SSE的方式去实现长连接，但我都没采纳，最终使用的是fetch去实现请求即可，不用将问题复杂化哈哈哈

  • 适用直接调chatgpt的接口
  1. // gpt.js
  2. import { CHATGPT_API_URL } from '@/common/config.js'
  3. const OPENAI_API_KEY = '你的接口'
  4. // TODO 适用直接调chatgpt接口
  5. export async function* getChatgpt_Multurn_qa(messages) {
  6.   const response = await fetch(CHATGPT_API_URL + '你的url', {
  7.     method: 'POST',
  8.     headers: {
  9.       'Content-Type': 'application/json',
  10.       'Authorization': `Bearer ${ OPENAI_API_KEY }`
  11.     },
  12.     body: JSON.stringify({
  13.       model: 'gpt-3.5-turbo',
  14.       stream: true,
  15.       messages: messages
  16.     })
  17.   });
  18.  
  19.   if (!response.ok) {
  20.     throw new Error(`HTTP error! status: ${response.status}`);
  21.   }
  22.  
  23.   const reader = response.body.getReader();
  24.   let decoder = new TextDecoder();
  25.   let resultData = '';
  26.  
  27.   while (true) {
  28.     const { done, value } = await reader.read();
  29.     if (done) break;
  30.     resultData += decoder.decode(value);
  31.     while (resultData.includes('\n')) {
  32.       const messageIndex = resultData.indexOf('\n');
  33.       const message = resultData.slice(0, messageIndex);
  34.       resultData = resultData.slice(messageIndex + 1);
  35.       if (message.startsWith('data: ')) {
  36.         const jsonMessage = JSON.parse(message.substring(5));
  37.         if (resultData.includes('[DONE]')) {
  38.           break
  39.         }
  40.         const createdID = jsonMessage.created
  41.         yield {
  42.           content: jsonMessage.choices[0]?.delta?.content || '',
  43.           role: "assistant",
  44.           id: createdID
  45.         };
  46.       }
  47.     }
  48.   }
  49. }

以上是利用迭代器的写法去实现流式输出，我上面的字符串其实是chatgpt响应输出的数据，例如：

{"id":"chatcmpl-7B48ttLhb1iR4JoaCzElQTvxyAgsw","object":"chat.completion.chunk","created":1682871887,"model":"gpt-3.5-turbo-0301","choices":[{"delta":{"content":"."},"index":0,"finish_reason":null}]}

 注意：我利用迭代器需要将每一句 created 相同的流数据存储到一起，才能形成一个消息的闭环，否则页面的效果会是一个字就占一个段落，你们可以去试一试

  1. // vue组件部分代码  
  2.  
  3. const currentDialogId = ref(null)
  4.  
  5. const dialogId = uniqueId()
  6. currentDialogId.value = dialogId   
  7.  
  8. // 获取聊天机器人的回复
  9. for await (const result of getChatgpt_Multurn_qa(messages.value)) {
  10.   // 如果返回的结果 ID 与当前对话 ID 相同，则将聊天机器人的回复拼接到当前对话中
  11.   if (result.id === currentDialogId.value) {
  12.     const index = list.value.findIndex(item => item.id === currentDialogId.value)
  13.     const dialog = list.value[index]
  14.     dialog.content += result.content
  15.   } else {
  16.     currentDialogId.value = result.id
  17.     list.value.push({
  18.       content: result.content,
  19.       role: "assistant",
  20.       id: result.id,
  21.       timestamp: Date.now()
  22.     })
  23.     messages.value.push({
  24.       role: "assistant",
  25.       content: result.content
  26.     })
  27.   }
  28. }

上面代码比较关键的点就是条件的判断 ---  result.id === currentDialogId.value ，到这一步就可以实现chatgpt的流式输出啦，响应速度是非常快的！！！

补充：

1. list 是用户角色和AI角色的对话数组，可以传递给子组件去遍历渲染不同角色的聊天，在文章尾部将展示实现Markdown代码块的步骤

2. message 是将user以及assistant的所有历史记录push进去，是实现多轮对话的关键

  •  改为调用后端Python的接口，先看看后端哥哥@ToTensor写给前端的文档
  1. # ChatGPT流式输出接口
  2.  
  3. ## 接口路径
  4.  
  5. ```bash
  6. https://后端提供的url
  7. ```
  8.  
  9. ## 请求方式
  10.  
  11. **POST**
  12.  
  13. ## 请求参数
  14.  
  15.  
  16. ```bash
  17. {
  18.     "messages": [
  19.         {
  20.             "role": "user",
  21.             "content": "你好"
  22.         }
  23.     ]
  24. }
  25. ```
  26.  
  27. ## 请求参数说明
  28.  
  29. ```bash
  30. messages: 消息体
  31. ```
  32.  
  33.  
  34. ## curl
  35.  
  36. ```bash
  37. curl --location 'https://后端提供的url' \
  38. --header 'Content-Type: application/json' \
  39. --data '{
  40.     "messages": [
  41.         {
  42.             "role": "user",
  43.             "content": "你好"
  44.         }
  45.     ]
  46. }'
  47. ```
  48.  
  49.  
  50. ## 返回数据
  51.  
  52. ```bash
  53. {
  54.     "id": "chatcmpl-7GpjNUPkhPZF0MtJBqTMvW2bbWPPG",
  55.     "object": "chat.completion.chunk",
  56.     "created": 1684246457,
  57.     "model": "gpt-3.5-turbo-0301",
  58.     "choices": [
  59.         {
  60.             "delta": {
  61.                 "role": "assistant"
  62.             },
  63.             "index": 0,
  64.             "finish_reason": null
  65.         }
  66.     ]
  67. }
  68. {
  69.     "id": "chatcmpl-7GpjNUPkhPZF0MtJBqTMvW2bbWPPG",
  70.     "object": "chat.completion.chunk",
  71.     "created": 1684246457,
  72.     "model": "gpt-3.5-turbo-0301",
  73.     "choices": [
  74.         {
  75.             "delta": {
  76.                 "content": "你"
  77.             },
  78.             "index": 0,
  79.             "finish_reason": null
  80.         }
  81.     ]
  82. }
  83. {
  84.     "id": "chatcmpl-7GpjNUPkhPZF0MtJBqTMvW2bbWPPG",
  85.     "object": "chat.completion.chunk",
  86.     "created": 1684246457,
  87.     "model": "gpt-3.5-turbo-0301",
  88.     "choices": [
  89.         {
  90.             "delta": {
  91.                 "content": "好"
  92.             },
  93.             "index": 0,
  94.             "finish_reason": null
  95.         }
  96.     ]
  97. }
  98. {
  99.     "id": "chatcmpl-7GpjNUPkhPZF0MtJBqTMvW2bbWPPG",
  100.     "object": "chat.completion.chunk",
  101.     "created": 1684246457,
  102.     "model": "gpt-3.5-turbo-0301",
  103.     "choices": [
  104.         {
  105.             "delta": {
  106.                 "content": "！"
  107.             },
  108.             "index": 0,
  109.             "finish_reason": null
  110.         }
  111.     ]
  112. }
  113. {
  114.     "id": "chatcmpl-7GpjNUPkhPZF0MtJBqTMvW2bbWPPG",
  115.     "object": "chat.completion.chunk",
  116.     "created": 1684246457,
  117.     "model": "gpt-3.5-turbo-0301",
  118.     "choices": [
  119.         {
  120.             "delta": {},
  121.             "index": 0,
  122.             "finish_reason": "stop"
  123.         }
  124.     ]
  125. }
  126. ```
  127.  
  128. ## 返回参数说明
  129.  
  130. ```bash
  131. role = assistant, 开始输出
  132. finish_reason = stop, 输出结束
  133. finish_reason = null, 正在输出
  134. content 输出内容
  135. ```

根据文档，我们只需要小小改动代码

  1. // TODO 改用chatgpt接口
  2. import { _BASE_API_URL } from '@/common/config.js'
  3.  
  4. // 流式输出接口
  5. export async function* getChatgpt_Multurn_qa(messages, onStreamDone) {
  6.   const response = await fetch(_BASE_API_URL + `你的url`, {
  7.     method: 'POST',
  8.     headers: {
  9.       'Content-Type': 'application/json'
  10.     },
  11.     body: JSON.stringify({
  12.       messages: messages
  13.     })
  14.   })
  15.  
  16.   if (!response.ok) {
  17.     throw new Error(`HTTP error! status: ${response.status}`)
  18.   }
  19.  
  20.   const reader = response.body.getReader()
  21.  
  22.   let result = ''
  23.   let done = false
  24.  
  25.   while (!done) {
  26.     const { value, done: streamDone } = await reader.read()
  27.  
  28.     if (value) {
  29.       const decoder = new TextDecoder()
  30.       result += decoder.decode(value)
  31.       const lines = result.split('\n')
  32.       result = lines.pop()
  33.  
  34.       for (const line of lines) {
  35.         try {
  36.           const json = JSON.parse(line)
  37.           if (json.choices && json.choices.length > 0) {
  38.             const content = json.choices[0].delta.content
  39.             if (content) {
  40.               yield { id: json.created, content }
  41.             }
  42.           }
  43.           if (json.choices && json.choices[0].finish_reason === 'stop') {
  44.             done = true
  45.             onStreamDone()
  46.             break
  47.           }
  48.         } catch (e) {
  49.           console.error(e)
  50.         }
  51.       }
  52.     }
  53.     if (streamDone) {
  54.       done = true;
  55.     }
  56.   }
  57. }

上面代码多了个onStreamDone参数，是我需要利用它处理响应完成的逻辑，没有这个需求的伙伴可以适当删改，接下来再看看父组件如何获取数据吧

  1. // vue父组件 
  2.      for await (const result of getChatgpt_Multurn_qa(messages.value, onStreamDone)) {
  3.         if (currentConversationId.value === null) {
  4.           currentConversationId.value = result.id;
  5.         }
  6.         if (result.id === currentConversationId.value) {
  7.           const index = list.value.findIndex(item => item.id === currentConversationId.value);
  8.           const dialog = list.value[index];
  9.           dialog.content += result.content;
  10.         } else {
  11.           currentConversationId.value = result.id;
  12.           list.value.push({
  13.             content: result.content || '',
  14.             role: "assistant",
  15.             id: result.id,
  16.             timestamp: Date.now()
  17.           });
  18.           messages.value.push({
  19.             role: "assistant",
  20.             content: result.content || ''
  21.           });
  22.         }
  23.       }
  • 父子组件是如何通信的呢？
  1. // 父组件
  2.  
  3. <session-box :list="list" @sent="handleSent"></session-box>

 

  1. // 子组件
  2. const props = defineProps({
  3.   list: {
  4.     type: Array,
  5.     default: []
  6.   }
  7. })
  8.  
  9. const { list } = toRefs(props)
  10.  
  11. const sessionList = ref(null)
  12.  
  13. const sortedList = computed(() => {
  14.   return list.value.slice().sort((a, b) => a.timestamp - b.timestamp)
  15. })

说明：

通过 computed 创建了一个名为 sortedList 的计算属性，该属性返回一个已排序的 list 数组副本。在排序过程中，使用了 slice 方法创建了一个数组副本，以避免直接修改原始数组。排序方式为按照每个数组元素的 timestamp 属性升序排序。

在模板中遍历循环sortedList的内容就能实现用户和ai对话啦

  •  选择合适的Markdown 编辑器组件库

介绍一下md-editor-v3 

官网：MdEditorV3 Documentation (imzbf.github.io)

github地址：imzbf/md-editor-v3: Markdown editor for vue3, developed in jsx and typescript, dark theme、beautify content by prettier、render articles directly、paste or clip the picture and upload it... (github.com)

文档说明：MdEditorV3 Documentation (imzbf.github.io)

 它提供了一些基础的 Markdown 编辑功能，如加粗、斜体、标题、无序列表、有序列表、引用、代码块等。除此之外，它还支持上传图片、撤销/重做、全屏等功能。md-editor-v3 的优点是易于使用、易于扩展，并且提供了一些定制化的选项。但是我只是想实现代码块，故解构出MdPreview

 使用：

  1. // 模板中
  2. <MdPreview
  3.    :showCodeRowNumber="true"            // 显示行号
  4.    :modelValue="item.content"
  5. />
  6.  
  7.  
  8. import { MdPreview } from 'md-editor-v3'
  9. import 'md-editor-v3/lib/style.css'

效果图：

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号