ChatGPT的打字回复效果,原理是什么?我带你们实现!

当下圈内比较火的非 chatGPT 莫属了。

chatGPT 回复效果

相信使用过 chatGPT 的朋友,都会看到,当你提问一个问题时,chatGPT 会一字一字地给你展示出来,而不是一次性给你返回,如下图:

ed7ca4d4c3032d0c3d3541ad341205b7.gif

这样做的好处,我想应该是节省性能吧,并且应该也是因为 AI 需要一边学习,一边把学习到的结果返回到前端,所以需要这样持续输出

怎么实现的?

一开始我联想到 Websocket,因为它能做到跟前端建立长连接,不断向前端输送东西,但是我一打开 Network 界面,看到用的不是 Websocket,而是 Server-sent events

f2d3fded30d4ed17a19763bbff1b9674.png

Server-sent events

一个网页获取新的数据通常需要发送一个请求到服务器,也就是向服务器请求的页面。使用 server-sent 事件,服务器可以在任何时刻向我们的 Web 页面推送数据和信息。这些被推送进来的信息可以在这个页面上作为 Events + data 的形式来处理。

3e1f604a7520b6b48cf1a16aadbe9a21.png

EventSource

想要使用 Server-sent events,就不得不依赖到一个 API —— EventSource

9e7e5bf4215412ef55af114fef83a967.png 1579f02a3bf71fc34cb4ed4fd4369b9e.png

实现

接下来带大家来简单实现以下吧!

Nodejs 起服务

Nodejs 起服务需要注意几个响应头

  • 'Content-Type': 'text/event-stream'

  • 'Connection': 'keep-alive'

  • 'Access-Control-Allow-Origin': '*'

const http = require('http');// 将歌词变成一个数组
let song = ['我', '懒', '得', '写', '你', '谷', '搜', '到', '处', '皆', '只', '因', '你', '太', '美', '浅', '唱', '动', '人', '说', '不', '出', '我', '试', '着', '多', '看', '你', '一', '眼', '却', '发', '现', '我', '已', '沉', '溺', '于', '你', '的', '镜', '头', '里', '只', '因', '你', '太', '美', '所', '以', '我', '多', '看', '了', '一', '眼', '只', '因', '我', '太', '傻', '所', '以', '我', '放', '不', '开', '你', '的', '手', '只', '因', '你', '太', '美', '所', '以', '我', '做', '了', '个', '梦', '梦', '见', '你', '在', '微', '笑', '我', '在', '注', '视', '只', '因', '你', '太', '美', '所', '以', '我', '放', '了', '你', '的', '手', '所', '以', '我', '会', '微', '笑', '因', '为', '你', '太', '美', 'end'
];http.createServer((req, res) => {if (req.url === '/article') {res.writeHead(200, {// 开启 Server-sent events'Content-Type': 'text/event-stream','Cache-Control': 'no-cache',// 保持连接'Connection': 'keep-alive',// 允许跨域'Access-Control-Allow-Origin': '*'});let index = 0;// 模拟每隔0.5s向前端推送一次setInterval(() => {const s = song[index];if (s) {res.write(`data: ${song[index]}\n\n`);} else {res.write('0');}index++;}, 500);}
}).listen(3000);console.log('Server running at http://localhost:3000/');

前端

// 建立连接
const source = new EventSource('http://localhost:3000/article');
let str = '';
// 接收信息
source.onmessage = function (e) {if (e.data === 'end') {// 判断end,关闭连接source.close()}str += e.data// 实时输出字符串console.log(str)
};

效果

现在我们可以去前端看效果:

f00986c740a858181f916631249a7aa9.gif

我们只需要把这个字符串,实时渲染到页面上就行了,就能实现一个字一个字打出来的效果!!!!

- END -

关于奇舞团

奇舞团是 360 集团最大的大前端团队,代表集团参与 W3C 和 ECMA 会员(TC39)工作。奇舞团非常重视人才培养,有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择,并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。

bba4b97c36c9cbaffd4ce6ac9cbe8c22.png


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

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

相关文章

clickhouse数据去重函数介绍(count distinct)

clickhouse提供了许多的去重函数,有精确去重的以及非精确去重的,下面介绍下两种 非精确去重函数:uniq、uniqHLL12、uniqCombined 精确去重函数:uniqExact、groupBitmap 测试数据量:2000w SELECT count(id) from tab…

消息幂等(去重)通用解决方案,真顶!

作者 | 薛定谔的风口猪 来源 | https://jaskey.github.io/blog/2020/06/08/rocketmq-message-dedup/ 消息中间件是分布式系统常用的组件,无论是异步化、解耦、削峰等都有广泛的应用价值。我们通常会认为,消息中间件是一个可靠的组件——这里所谓的可靠是…

TP6关联统计无法去重的解决方案

在tp6中官方手册跟源码中是没办法做到去重关联统计的,因为源代码中的withCount方法,默认是以“*”进行统计。当我们想要统计类型有多少,而不是数量有多少的时候就会非常麻烦。 这时候需要修改源码,将默认的“*”,改成传…

postgreSql根据多个字段去重详细流程

postgreSql根据多个字段去重详细流程 这是测试表的建标语句,需要的可以拿去用。 CREATE TABLE "public"."class_name" ("id" int4 NOT NULL DEFAULT nextval(id::regclass),"class_no" varchar(50) COLLATE "pg_cat…

mysql去重函数:DISTINCT ,与GROUP_CONCAT结合去重

mysql去重函数:DISTINCT ,与GROUP_CONCAT结合 创建表语法distinct多字段去重DISTINCT 结合 group 统计实例 创建表 DROP TABLE IF EXISTS qipa_shop; CREATE TABLE qipa_shop (price varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci N…

tp6 count distinct统计时根据字段去重

代码: AppointmentModel::field([identity])->count(distinct identity)生成的sql: SELECT COUNT(DISTINCT identity) AS think_count FROM dg_appointment;下面是tp6手册内容 我尝试着这样写 发现生成的sql不对 AppointmentModel::distinct(tru…

oracle listagg如何去重

listagg去重 去重思路:利用listagg会忽略null值的特点 按ENTITY_GROUP_RRN 分组,用 listagg 分别合并 EQPT_ID 与 STATION_ID ,同时要求去重 表 T_TEST 数据如下: EQPT_IDENTITY_GROUP_RRNSTATION_IDTOOL-00110493721JITAI-1TO…

【数据去重】海量数据实时去重方案

文章目录 Prologue布隆过滤器去重什么是布隆过滤器实现的核心思想怎么理解 内嵌RocksDB状态后端去重引入外部K-V存储去重 Prologue 数据去重(data deduplication)是我们大数据攻城狮司空见惯的问题了。除了统计UV等传统用法之外,去重的意义更…

listagg结果去重

最近在一个项目中用到了listagg方法,但是在组合结果中出现有重复的情况。默认的结果如下 于是我就写了一个方法对listagg的结果去重,也可以对该格式的字符串去重,方法如下 create or replace function listaggpure(targetStr varchar2,seper…

非常实用的5种json数组去重方法,函数实现思路竟是chatgpt帮我写的!

文章目录 人工智能福利文章方法一 reduce实现思路 方法二 filter和Map实现思路 方法三 变异for实现思路 方法四 for filter实现思路 方法五 for实现思路 写在最后 人工智能福利文章 【分享几个国内免费可用的ChatGPT镜像】【10几个类ChatGPT国内AI大模型】【用《文心一言》1分…

AI自动播——AI虚拟主播帮你实现24小时直播带货技术分享

如今很多淘宝天猫商家会在做直播的时候,会遇到真人主播难招或者真人主播直播时长有限,那么有什么办法解决这个难题呢,这个时候就可以用AI自动播了,也就是AI虚拟主播直播带货。具体怎么操作呢?下面一起来看看吧。 AI自动…

亚马逊账号被关联能申诉得回来吗

关于亚马逊账号被关联能申诉回来吗?小编有话要说。 其实小编是一个特别谨慎的人,在初入亚马逊之前,会了解到亚马逊所有的问题之后,才会注册账号。那么要了解的有什么呢?注册需要的信息,注册的规则&#xf…

社区1月热门文章、ChatGPT工具汇总,强化学习安全和隐私、斯坦福大学CS234《智源社区强化学习周刊》第75期...

No.75 智源社区 强化学习组 强 化 学 习 研究 观点 资源 活动 社区热门文章 Google发布Bard与ChatGPT竞争 https://hub.baai.ac.cn/view/23925 纽约时报:ChatGPT诞生背后的故事 https://hub.baai.ac.cn/view/23835 ChatGPT提示与AI工具、开发工具、低代码工具汇总 《…

5款超实用的免费AI工具,让你轻松提升工作效率!

目录 1、AiChat 产品特点 任意选择内置角色对话 自定义AI角色进行对话 推荐理由🌟🌟🌟🌟🌟 2、MINISTER AI 产品特点 集成ChatGPT聊天 简化Stable Diffusion 集成Midjourney模式 训练并分享模型 推荐理由&a…

13 款炫酷的 MySQL 可视化管理工具!好用到爆!!

MySQL 的管理维护工具非常多,除了系统自带的命令行管理工具之外,还有许多其他的图形化管理工具,工具好用是一方面,个人的使用习惯也很重要,这里介绍 13 款 MySQL 图形化管理工具,供大家参考。 1、DBeaver D…

GPT模型支持下的Python-GEE遥感云大数据分析、管理与可视化技术及多领域案例应用

查看原文>>>GPT模型支持下的Python-GEE遥感云大数据分析、管理与可视化技术及多领域案例应用 目录 第一章、理论基础 第二章、开发环境搭建 第三章、遥感大数据处理基础与ChatGPT等AI模型交互 第四章、典型案例操作实践 第五章、输入输出及数据资产高效管理 第…

【IC基础】集成电路设计领域术语缩写及名词解释(字母索引版)

前言: 笔者在大三上学习学习《SoC设计导论》时整理的有关集成电路设计领域的常见有英文缩写和对应的名词解释,文中标注的页码均出自《SoC设计方法与实现》这本参考书: 目录 目录 前言: 目录 A B C CTG(Clock Tree Generat…

浏览器扩展合集来啦!实用而有趣的浏览器扩展插件!

五彩:网页划线、批注、高亮工具 五彩严格意义上的同类产品是 Hypothesis、diigo 等工具,Cubox、Readwise、简悦则属于需要先解析一下网页后高亮的插件。 此前我已经在用 Cubox 了,为什么还需要五彩来完成网页高亮? Cubox 在移动…

GPT模型结合Python-GEE遥感云大数据分析、管理与可视化技术

GPT模型支持下的Python-GEE遥感云大数据分析、管理与可视化技术及多领域案例应用 随着航空、航天、近地空间等多个遥感平台的不断发展,近年来遥感技术突飞猛进。由此,遥感数据的空间、时间、光谱分辨率不断提高,数据量也大幅增长&#xff0c…

分享6个AI绘画网站

ChatGPT狂飙160天,世界已经不是之前的样子。 新建了人工智能中文站https://ai.weoknow.com 每天给大家更新可用的国内可用chatGPT资源 1、Midjourney 特点:业内标杆,效果最强大 Midjourney是基于diffusion的AI图画艺术生成器。生成图片不局…