关于 ChatGPT 回答的时候,文字渐显的效果是如何实现的?

119 天前
 17681880207

ChatGPT 官网回答的时候的效果~
请教下各位老哥,有了解和知道的吗?

2004 次点击
所在节点    前端开发
14 条回复
concernedz
119 天前
一个字一个字出来的效果吗?我记得是 SSE 吧?
thenxkk
119 天前
chairuosen
119 天前
sse 也是一大段一大段拿的,文字逐字蹦出来只是前端效果
chairuosen
119 天前
一大段字排成数组,设置一个游标定时向后移动,渲染取数组 slice 游标的结果
chenliangngng
119 天前
这功能我做过,前端拿到任意的文本后,随机截取然后拼接,说白了就是假的
xiaoz
119 天前
SSE 可以实现,openai 官方的 API 接口有个选项就是开启 stream 流式传输。具体可以问问 AI
murmurkerman
119 天前
你是说渐变动画么,就一个简单的渐变 shader ,每个新增的文本加上一一个固定时间的动画就好了,就会实现一个渐显的动画。然后优化下动画性能。
vace
119 天前
可以 F12 看源码,SSE 响应的字符,用 <span class="_fadeIn"> 包裹,通过 css 的 animation 和 keyframes 定义一个 700ms 的淡入动画。等整段响应完成,合并字符为段落。
17681880207
119 天前
@concernedz
@thenxkk
@chairuosen #3
@chairuosen #4
@chenliangngng
@xiaoz
感谢各位老哥的答疑,可能我的表述不是很清楚,我想表达是的最新文字出来的渐显动画效果~😋
learnshare
119 天前
处理过简单的效果。前端获取到大段内容,切分为多个片段(元素),再逐步通过显示。

其中细节也很多,比如:

+ 需要整段获取内容,防止 Markdown 渲染为 HTML 时的错乱
+ 需要根据内容长度,合理调整切片数量和长度,以及动画效果
+ 列表也需要有合适的滚动动作
pdog18
119 天前
是不是可以尝试把你的这个问题问 ChatGPT
lawted
118 天前
17681880207
118 天前
@lawted
感谢!!!!!我的老天鹅~
sjhhjx0122
112 天前
这个东西有的时候还挺麻烦的,sse 每次给的字数不是固定的,所以有的时候会一次性一大段,导致很陡,还需要写个工具处理文字输出

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://ex.noerr.eu.org/t/1124014

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX