0
点赞
收藏
分享

微信扫一扫

JS实现chatgpt数据流式回复效果

小_北_爸 03-08 20:00 阅读 2

最近高了一个简单chatgpt对话功功能,回复时希望流式回复,而不是直接显示结果,其实很简单,前端流式读取即可,后端SSE实现流式传输

前端用到fetch获取数据,然后利用reader读取

let requestId  = parseInt(Math.random() * 1000000000)  // 创建提问ID,用于停止生成
let keyWord = 'xxx' // 问题
let resp = await fetch(`http://10.0.192.84:11015/SYSmartGPTActor/V1.0/sse?keyWord=${keyWord}&requestId=${requestId}`, {
    method: 'get',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer Token'
    }
  })
// 读取器
let reader = resp.body.getReader()
// 文字解析器
let decoder = new TextDecoder()
while (true) {
   // 读取的结果,done为true完成,反之未完成,返回unitArray
   let { done, value } = await reader.read()
   if (done) {
     // 停止生成
     this.generationEnded()
     break
   }
   // 对读取到的结果处理下
   let result = decoder.decode(value)
   if (result) {
     this.text += result
     // 滚动到底部
     this.scrollToBottom()
   }
}

这里可以用EventSource来读取,但是EventSource不支持自定义请求头,如果没有鉴权,直接实现如下:

let eventSource = new EventSource('http://10.0.192.84:11015/SYSmartGPTActor/V1.0/sse')

 eventSource.addEventListener("message", event => {
 	this.text += decodeURIComponent(event.data)
 })

如果接口回加粗等Markdown语法,则需要利用marked.js处理下,然后代码片段着色利用highlight.js处理:

import { marked } from 'marked'
import hljs from "highlight.js"; // 引入 highlight.js
import "highlight.js/styles/default.css"

let rendererMD = new marked.Renderer();
marked.setOptions({
  renderer: rendererMD,
  gfm: true, //默认为true。 允许 Git Hub标准的markdown.
  tables: true, //默认为true。 允许支持表格语法。该选项要求 gfm 为true。
  breaks: true, //默认为false。 允许回车换行。该选项要求 gfm 为true。
  pedantic: false, //默认为false。 尽可能地兼容 markdown.pl的晦涩部分。不纠正原始模型任何的不良行为和错误。
  sanitize: true, //对输出进行过滤(清理)
  smartLists: true,
  smartypants: true, //使用更为时髦的标点,比如在引用语法中加入破折号。
});

// 最终将result渲染
let result = marked.parse(this.text)

最终效果如下:

在这里插入图片描述

举报

相关推荐

0 条评论