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

最近高了一个简单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完成,反之未完成,返回unitArraylet { 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处理:

npm install marked.js highlight.js -S

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)

最终效果如下:

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/728587.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Python】成功解决TypeError: ‘tuple‘ object does not support item assignment

【Python】成功解决TypeError: ‘tuple’ object does not support item assignment 🌈 个人主页:高斯小哥 🔥 高质量专栏:Matplotlib之旅:零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程&am…

C语言对应汇编代码分析用gdb

在 GDB(GNU 调试器)中,layout 命令用于控制调试会话期间显示的窗口布局。它允许您在单个 GDB 窗口中同时查看源代码、汇编代码、寄存器内容等,以帮助您更好地理解程序的执行状态。以下是 layout 命令的基本用法和示例:…

算法归纳【数组篇】

目录 二分查找1. 前提条件:2. 二分查找边界 2.移除元素有序数组的平方长度最小的子数组59.螺旋矩阵II54. 螺旋矩阵 二分查找 参考链接 https://programmercarl.com/0704.%E4%BA%8C%E5%88%86%E6%9F%A5%E6%89%BE.html#%E6%80%9D%E8%B7%AF 1. 前提条件: 数…

SQL24 统计每个用户的平均刷题数

题意明确: 仅查看山东大学的用户在不同难度下的每个用户的平均答题题目数 问题分解: 限定条件:山东大学的用户 up.university"山东大学";不同难度:按难度分组group by difficult_level平均答题数&#xff…

阿里云ECS磁盘扩容操作手册

云原生专栏大纲 文章目录 ESC磁盘扩容步骤前提条件云盘备份云盘扩容扩容分区和文件系统前提条件操作视频操作步骤准备工作:获取目标云盘信息步骤1:扩容分区步骤2:扩容文件系统 ESC磁盘扩容步骤 扩容已有云盘的操作步骤和注意事项_云服务器 …

影响哈默纳科Harmonic减速机使用寿命的5大因素

哈默纳科HarmonicDrive减速机以其轻量、小型、传动效率高、减速范围广、精度高等特点,被广泛应用于各种传动系统中。然而,尽管哈默纳科Harmonic减速机具有诸多优势,但其使用寿命仍可能受到多种因素的影响。 首先,环境因素对哈默纳…

ThreadLocal, InheritableThreadLocal和TransmittableThreadLocal

ThreadLocal, InheritableThreadLocal和TransmittableThreadLocal ThreadLocal(TL) 后续部分地方会使用ThraedLocal简称为TL 什么是TL? ThreadLocal是Java中的一个类, 也称为线程本地变量, 它提供了线程局部变量的功能。每个ThreadLocal对象都可以存储一个线程本地的变量副…

STM32的IO模拟串口

串口的时序就不再多讲了,主要是分享一个比自己写的IO模拟串口的实例 申明: 这个波特率为115200 分频系数为8 自动重载值为68 约等于8.7微秒 使用其他波特率或者IO口,只需要修改.h文件中的对应参数即可 头文件 #ifndef IO_UART_H #def…

Service Mesh:如何为您的微服务架构带来可靠性和灵活性

在云原生架构中,Service Mesh 技术成为了微服务架构中不可或缺的一环。本文灸哥将和你一起探讨 Service Mesh 技术的原理、功能和实践,帮助架构师和开发人员更好地理解和应用这一关键技术。 1、Service Mesh 技术概述 Service Mesh 又称为服务网格&…

世界的本质是旋转(5)-在复平面上驱动软件无线电SDR发射BPSK波形

在上一篇文章中,我们介绍了复平面、拍照采样的一些思维实验。从本节开始,转入现实应用,通过控制复平面向量的位置,实现一个完整的BPSK全双工通信通道。 发射方:通过控制复平面向量在各个时刻的位置来携带信息的技术&a…

Axure RP 10:让原型设计更快、更直观、更智能 mac版

Axure RP 10是一款强大的原型设计工具,它能够帮助设计师快速创建高保真、交互式的原型,从而更好地展示和测试设计方案。这款软件凭借其直观易用的界面和丰富的功能,已经成为了许多设计师的首 选工具。 Axure RP 10 for Mac版软件获取 首先&a…

将D*算法应用到llm解码

将D算法应用于LLM解码是一个非传统的尝试,因为D算法通常用于动态环境中的路径规划,而语言模型解码是一个序列生成问题。然而,我们可以尝试将D算法的原理应用到解码过程中,特别是在处理动态变化的环境或者需要实时更新解码路径的场…

C++之进程管理

目录 1、创建进程 2、获取指定进程PID 3、结束进程 4、进程枚举 进程是计算机中的程序关于某数据集合上的一次运行活动,是系统进行资源分配的基本单位,也是操作系统结构的基础。它是操作系统动态执行的基本单元,在传统的操作系统中&#…

AI论文速读 | 【综述】城市计算中跨域数据融合的深度学习:分类、进展和展望

题目:Deep Learning for Cross-Domain Data Fusion in Urban Computing: Taxonomy, Advances, and Outlook 作者:Xingchen Zou, Yibo Yan, Xixuan Hao, Yuehong Hu, Haomin Wen(温皓珉), Erdong Liu, Junbo Zhang(张钧…

进程之舞:操作系统中的启动、状态转换与唤醒艺术

✨✨ 欢迎大家来访Srlua的博文(づ ̄3 ̄)づ╭❤~✨✨ 🌟🌟 欢迎各位亲爱的读者,感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua,在这里我会分享我的知识和经验。&#x…

解决QT cc1plus.exe: error: out of memory allocating

QT中增加资源文件过大时,会编译不过,报错: cc1plus.exe: out of memory allocating 1073745919 bytes 使用qrc资源文件,也就是在QT的工程中添加资源文件,就是添加的资源文件(如qrc.cpp)会直接被…

简明固体物理--晶体的形成与晶体结构的描述

简明固体物理-国防科技大学 chapter 1 Formation of Crystal Contents and roadmapQuantum Mechanics and atomic structureElectronsOld quantum theoryMethod of Quantum MechanicsDistributing functions of micro-particles BindingCrystal structure and typical crystal…

Compose基础之State状态

Compose基础之State状态 Stateless和Stateful什么是Stateless&#xff0c;让我看下面代码Stateless它有什么特点呢Stateless它是如何实现避免无效重组的呢什么是Stateful&#xff0c;让我看下面代码 Compose中的State<T>State子类之MutableState 状态的恢复与持久化remem…

Go-Gin-example 第五部分 加入swagger

上一节链接 swagger 为什么要用swagger 问题起源于 前后端分离&#xff0c; 后端&#xff1a;后端控制层&#xff0c;服务层&#xff0c;数据访问层【后端团队】前端&#xff1a;前端控制层&#xff0c;视图层&#xff0c;【前端团队】 所以产生问题&#xff1a;前后端联调…