聊聊大模型"打字机"效果的背后技术——SSE

这篇具有很好参考价值的文章主要介绍了聊聊大模型"打字机"效果的背后技术——SSE。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

转载请注明出处:https://www.cnblogs.com/zhiyong-ITNote

SSE:Server Sent Event;服务器发送事件。
Server-Sent Events(SSE)是一种由服务器向客户端推送实时数据的技术。它是构建基于事件的、服务器到客户端的通信的一种方法,特别适用于需要实时更新和推送信息的应用场景,如实时通知、股票交易、实时游戏状态更新等。
SSE的工作原理是,一旦客户端(通常是浏览器)与服务器建立连接,该连接会保持开放状态,服务器就可以推送事件给客户端,直到客户端或服务器决定关闭它,而无需客户端不断地询问服务器是否有新消息。这大大减少了网络通信量,提高了应用程序的性能和响应速度。

从技术原理来看,其实就是事件的发布订阅。客户端订阅服务器端的事件数据;一旦服务器端数据就绪,封装成事件推送到客户端。
但从底层来分析,其实现依赖于底层协议与浏览器的支持。SSE的底层协议还是HTTP协议,以ChatGLM的请求为例,请求头中设置Accept:
image.png
返回的响应只有响应头:
image.png
此时只是建立了连接;一旦服务端数据准备好了,将会推送事件消息给客户端,基本的消息由以下几部分组成:

  • data:实际的消息数据;
  • id:可选,消息的唯一标识符,用于在连接重新建立时同步消息;
  • event:可选,定义事件类型,用于客户端区分消息的类型;
  • retry:可选,自动重连的时间(毫秒),如果连接中断,客户端在自动重新连接之前,需要等待多长时间;

每个消息要以两个换行符(\n\n)结束。SSE返回示例数据如下:

id: 110
event: foo
data: Hello, 

id: 111
event: foo
data: , 

id: 112
event: foo
data: world

id: 113
event: foo
data: !

标准的SSE返回内容是增量生成返回的,因此客户端需要单独处理合并内容块。
ChatGPT等AI模型回复消息时的 打字机 效果,其原理就是基于SSE协议实现的,只是在服务端做了处理,拼接了SSE每次返回的内容;前端直接展示效果就行。返回内容:

id: 110
event: foo
data: Hello, 

id: 111
event: foo
data: Hello, world!

后端可以处理为全量返回,如上,客户端可以直接展示,不需要多余的处理。

转载请注明出处:https://www.cnblogs.com/zhiyong-ITNote

首发于个人公众号
聊聊大模型"打字机"效果的背后技术——SSE文章来源地址https://www.toymoban.com/news/detail-843908.html

到了这里,关于聊聊大模型"打字机"效果的背后技术——SSE的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

原文地址:https://www.cnblogs.com/zhiyong-ITNote/p/18100091

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 如何实现chatgpt的打字机效果

    点击↑上方↑蓝色“ 编了个程 ”关注我~ 这是Yasin的第 88 篇原创文章 最近在搭建chat gpt代理的时候,发现自己的配置虽然能够调通接口,返回数据,但是结果是一次性显示出来的,不像之前的chat gpt的官网demo那样实现了打字机效果,一个字一个字出来。 所以研究了一下chat

    2023年04月18日
    浏览(17)
  • 仅使用 CSS 创建打字机动画效果

    创建打字机效果比您想象的要容易。虽然实现这种效果的最常见方法是使用 JavaScript,但我们也可以使用纯 CSS 来创建我们的打字机动画。 在本文中,我们将了解如何仅使用 CSS 创建打字机动画效果。它简单、漂亮、容易。我们还将看看使用 CSS 与 JavaScript 创建这种效果的利弊

    2024年02月13日
    浏览(11)
  • vue3 实现 chatgpt 的打字机效果

    在做 chatgpt 镜像站的时候,发现有些镜像站是没做打字机的光标效果的,就只是文字输出,是他们不想做吗?反正我想做。于是我仔细研究了一下,实现了打字机效果加光标的效果,现在分享一下我的解决方案以及效果图 首先要明确一点,chatgpt 返回的文本格式是 markdown 的,

    2024年02月05日
    浏览(17)
  • 记录--20行js就能实现逐字显示效果???-打字机效果

    横版 竖版 可以看到文字是一段一段的并且独占一行,使用段落标签p表示一行 一段文字内,字是一个一个显示的,所以这里每一个字都用一个span标签装起来 每一个字都是从透明到不透明的过渡效果,使用css3的过渡属性transition让每个字都从透明过渡到不透明 这里只需要一个

    2024年02月06日
    浏览(9)
  • 前端发送Fetch请求实现流式请求、模拟打字机效果等

    前端需要接收后端的流式返回数据,并实时渲染。 普通的xhr请求都是等http协议数据包一次性返回之后才渲染,类似于ChatGPT的Http接口内容类型为text/event-stream。这种内容类型需要与浏览器建立持久连接并持续监听服务器返回的数据。 npm 方式安装类库 使用 调用 fetchEventSource

    2024年02月13日
    浏览(11)
  • Unity Text文本实现打字机(一个一个出来)的效果

    Unity Text文本要实现打字机,即一个个文字出来的效果,可以通过代码把text文本字符串拆成一个个字符然后添加到文本中。 具体实现: 新建一个控制脚本:TypewriteController.cs,并编写以下代码: 此控制脚本先把脚本文本获取后赋给一个字符串变量,然后置空文本内容,再通过

    2024年01月25日
    浏览(8)
  • 微信小程序-接入sse数据流并实现打字机效果( ChatGPT )

    从流中获取的数据格式如下 小程序调用SSE接口 我这边接收到的数据类型为Uint8Array,需要处理成text文本(如上图) 使对话有打字机效果 参考自:小程序实现 ChatGPT 聊天打字兼自动滚动效果 完整代码

    2024年04月09日
    浏览(12)
  • Vue3实现酷炫打字机效果:让你的网站文字动起来

    ✅创作者:陈书予 🎉个人主页:陈书予的个人主页 🍁陈书予的个人社区,欢迎你的加入: 陈书予的社区 🌟专栏地址: 三十天精通 Vue 3

    2024年02月05日
    浏览(22)
  • 打造专业级ChatGPT风格聊天界面:SpringBoot与Vue实现动态打字机效果,附完整前后端源码

    大家好,今天用 SpringBoot 、 vue 写了一个仿ChatGPT官网聊天的打字机效果。 所有代码地址:gitee代码地址 ,包含前端和后端,可以直接运行 使用本技术实现的项目:aicnn.cn,欢迎大家体验 如果文章知识点有错误的地方,请指正!大家一起学习,一起进步。 本文主要应用的技术有

    2024年01月24日
    浏览(16)
  • 【CSS3】CSS3 动画 ⑤ ( 动画速度曲线 | 设置动画步长 | 动画匀速执行 | 动画分 2 步执行 | 使用动画步长实现打字机效果 )

    CSS3 样式中 , 设置 动画速度曲线 的属性是 animation-timing-function 属性 ; animation-timing-function 属性定义了动画从 初始 CSS 样式 变为 结束状态 时 所消耗的时间 ; animation-timing-function 属性常用 属性值 如下 : linear : 动画在整个执行过程中速度都是匀速的 ; ease : 默认属性值 , 动画首先

    2024年02月13日
    浏览(8)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包