解读Ant Design X API流式响应和流式渲染的原理

前言

AI是未来世界的趋势,deepseek的出现让在国内构建更多的大模型出现了更多的可能。而从前端出发,Ant design团队最近很有意思,基于这个背景,提供了一套面向构建平台化产品的组件。

本篇结合Ant design AIXSteamXRequestapi来分析。

流式响应

XRequest

仔细看一下官方文档XRequest的内容,发现篇幅并不多,对比市面上比较多的useRequest,核心增加了以sse流的形式进行片段式响应的能力。

在这里插入图片描述

核心能力需要在入参中传递stream,即可开启流式响应的能力,直接在api的callback中处理渲染逻辑即可,那我们看一下源码,stream开启后做了些什么。

在这里插入图片描述

请求创建实例的前半部分,与标准请求没什么区别,只是在响应后,XRequest中对response header的contentType做了区分,如果是text/event-stream类型,则属于SSE流式请求,则会进入sseReponseHandler官方内置的响应体处理流程中。

如果需要自定义处理SSE响应,则传入customReponseHandler即可。

那接下来我们来看一下官方内置的处理是如何实现的,找到sseReponseHandler

在这里插入图片描述

可以看到这个函数基于responsecallbacks处理了流的响应体同时进行了异步迭代的回调。

  • chunks数组:存储从XStream中的将流二进制数据转换成逻辑单元的结果;
  • for await:通过异步迭代批次回调通知调用者;
  • onSuccess:最终完成回调;

那奥秘就在XStream中了,它具体做了什么处理将response转换成了chunk

XStream

在这里插入图片描述

XStream中,解码的过程包含了多个管道:

  1. 通过TextDecoderStream将二进制Unit8Array转为string
  2. 通过splitStream进一步拆分字符串;
  3. 通过splitPart进一步拆分流,变成最后的结果,返回到XRequest中,作为回调结果;

splitStream 用于将一个长字符串流分割为小的事件块,每个事件之间以\n\n拆分,每个块表示一个完整的 SSE 事件:

在这里插入图片描述

splitPart 在基础上,进一步将每个事件数据块按 \n: 分割为键值对(SSEOutput),代表每个事件的结构化数据格式。

最后XStream将每一次"AI大模型请求"返回的流二进制数据,转换成了key value的键值对形式的数据,因此XStream其实也是XRequest核心的基于原生的原子能力。

在这里插入图片描述

流式渲染

流式渲染是啥?大白话讲就是大模型回复用户消息的打字效果,这个效果在Ant Design X是怎么实现的?以Bubble组件来举例:

在这里插入图片描述

通过设置typing属性,在Bubble组件渲染到页面的时候,就会以打字效果呈现,可通过两个参数来控制文本渲染的速度:

  • step:每一次渲染的文本数量;
  • interval:每一次渲染的间隔时间;

查看Bubble组件传入的content是完整、一次性传入的一个字符串,因此这里的流式效果就和上面的XStream底层依赖的sse不一样,因此可以推断该组件场景适用于AI的返回结构是完整的字符串,采用前端流式渲染来实现人机对话的效果。

那看一下源码是怎么实现这个效果的。

在这里插入图片描述

源码中涉及typing的的主要逻辑包括了两个hooks:

  • useTypingConfig:根据typing传的配置重新merge了一下;
  • useTypedEffect:看起来是定时更新渲染到页面的内容的核心实现函数了;

我们看一下useTypedEffect的实现:

在这里插入图片描述

从函数看,还是比较好理解的,useTypedEffect有4个变量,分别有对应的职责:

  • content:最终渲染的结果,如"我是AI,这是我告诉你的答案";
  • typingEnabled:是否渲染完成;
  • typingStep:渲染到第几轮;
  • typingInterval:每一轮渲染间隔的时间;

单个组件通过不断的副作用到组件中,直到组件的content渲染完成,才停止副作用,这是整个主要逻辑,看起来还是实现的比较巧妙的。

结尾

本文我们了解了面向构建高效大模型语言平台的前端框架Ant Design X,通过源码分析了解了API流式请求响应XRequest、底层流XStream的转换通道以及UI组件Bubble通过打字效果实现流式渲染的原理。

XRequest底层实现仍然是fetch,不同的是在流式的场景中,底层依赖XStream基于对sse请求的响应体进行转换到最终的异步响应实现了流式响应。

Bubble通过开启typing props,实现组件只需传入AI返回的字符串,即可自动以流式渲染的动效来呈现智能问答的交互。

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

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

相关文章

CentOS 7 64 安装 Docker

前言 在虚拟机中安装 Docker 是一种常见的测试和开发环境搭建方式。通过在虚拟机上安装 Docker,可以方便地创建和管理容器化应用,同时避免对宿主机系统造成影响。以下是在 CentOS 7 虚拟机中安装 Docker 的详细步骤。 1. 更新系统(可以不操作…

SPI驱动(八) -- SPI_DAC设备驱动程序

文章目录 参考资料:一、编写设备树二、 编写驱动程序三、编写测试APP四、Makefile五、上机实验 参考资料: 参考资料: 内核头文件:include\linux\spi\spi.h内核文档:Documentation\spi\spidevDAC芯片手册:…

Ansible 自动化运维

Ansible架构: 一.部署主机清单 前期环境准备: 管理端: 192.168.60.128 被管理端: client1:192.168.60.129 client2:192.168.60.131 1.所有被管理端配置ssh密钥 (1.免密登陆 2.允许root远程登陆) 脚本如下: #!/bin/bash# 检查 sshpass 是否已安装 if ! command -v ss…

Qt 实现波浪填充的圆形进度显示

话不多说&#xff0c;先上效果图 代码示例&#xff1a; #include <QApplication> #include <QWidget> #include <QPainter> #include <QPropertyAnimation> #include <QTimer> #include <cmath>class WaveProgressBar : public QWidget {…

DQN 玩 2048 实战|第一期!搭建游戏环境(附 PyGame 可视化源码)

视频讲解&#xff1a; DQN 玩 2048 实战&#xff5c;第一期&#xff01;搭建游戏环境&#xff08;附 PyGame 可视化源码&#xff09; 代码仓库&#xff1a;GitHub - LitchiCheng/DRL-learning: 深度强化学习 2048游戏介绍&#xff0c;引用维基百科 《2048》在44的网格上进行。…

星越L_外后视镜使用讲解

目录 1.外后视镜调节 2后视镜折叠 3.后视镜加热 1.外后视镜调节 L控制左边后视镜调节,上下拨动调整视野,一般此镜左右21分,上下55开。 R控制左边后视镜调节,上下拨动调整视野,一般此镜左右13分,上下55开。 2后视镜折叠 车辆解锁自动展开 车辆关闭自动折叠 严寒天气…

2025-03-15 Python深度学习2——Numpy库

文章目录 1 基础1.1 数据类型1.1.1 整型数组与浮点型数组1.1.2 元素同化1.1.3 数组类型转换 1.2 数组维度1.2.1 一维数组与二维数组1.2.2 数组形状变换 2 创建数组2.1 创建指定数组2.2 创建递增数组2.3 创建同值数组2.4 创建随机数组 3 索引3.1 访问数组元素3.1.1 访问向量3.1.…

【Linux-传输层协议TCP】流量控制+滑动窗口+拥塞控制+延迟应答+捎带应答+面向字节流+粘包问题+TCP异常情况+TCP小结

5.流量控制 接收端处理数据的速度是有限的。如果发送端发的太快&#xff0c;导致接收端的缓冲区被打满&#xff0c;这个时候如果发送端继续发送就会造成丢包&#xff0c;继而引起丢包重传等等一系列连锁反应。 因此TCP 支持根据接收端的接收数据的能力来决定发送端发送数据的…

[C语言日寄] qsort函数的练习

【作者主页】siy2333 【专栏介绍】⌈c语言日寄⌋&#xff1a;这是一个专注于C语言刷题的专栏&#xff0c;精选题目&#xff0c;搭配详细题解、拓展算法。从基础语法到复杂算法&#xff0c;题目涉及的知识点全面覆盖&#xff0c;助力你系统提升。无论你是初学者&#xff0c;还是…

C语言每日一练——day_8

引言 针对初学者&#xff0c;每日练习几个题&#xff0c;快速上手C语言。第八天。&#xff08;连续更新中&#xff09; 采用在线OJ的形式 什么是在线OJ&#xff1f; 在线判题系统&#xff08;英语&#xff1a;Online Judge&#xff0c;缩写OJ&#xff09;是一种在编程竞赛中用…

python从邮件中提取链接中的符号为什么会变成amp; 解决办法

在Python中&#xff0c;从邮件中提取链接时&#xff0c;&符号变成&amp;是因为HTML实体编码。HTML使用&amp;表示&&#xff0c;以确保在浏览器中正确显示。 原因 HTML实体编码&#xff1a;&在HTML中有特殊含义&#xff0c;用于表示实体编码的开始。为了避免…

农业电商|基于SprinBoot+vue的农业电商服务系统(源码+数据库+文档)

农业电商服务系统 目录 基于SprinBootvue的农业电商服务系统 一、前言 二、系统设计 三、系统功能设计 5.1系统功能实现 5.2后台模块实现 5.2.1管理员模块实现 5.2.2商家模块实现 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码…

【JAVA】七、基础知识“if+switch+循环结构”详细讲解~简单易懂!

目录 7、逻辑控制 7.1 分支结构 7.1.1 if 语句 语法格式1 语法格式2 语法格式3 7.1.2 switch语句 基本语法 执行流程 7.2 循环结构 7.2.1 while循环 语法格式 7.2.2 Break 7.2.3 Continue 7.2.4 for循环 语法格式 执行过程 7.2.5 do while循环 语法格式 7.3 …

C# Exe + Web 自动化 (BitComet 绿灯 自动化配置、设置)

BitComet GreenLight,内网黄灯转绿灯 (HighID), 增加p2p连接率提速下载-CSDN博客 前两天写个这个&#xff0c;每次开机关机后要重来一遍很麻烦的索性写个自动化。 先还是按照上面的教程自己制作一遍&#xff0c;留下Luck 以及 路由器相关的 端口记录信息。 &#xff08;因为自…

JumpServer基础功能介绍演示

堡垒机可以让运维人员通过统一的平台对设备进行维护&#xff0c;集中的进行权限的管理&#xff0c;同时也会对每个操作进行记录&#xff0c;方便后期的溯源和审查&#xff0c;JumpServer是由飞致云推出的开源堡垒机&#xff0c;通过简单的安装配置即可投入使用&#xff0c;本文…

sqldef:一款免费的数据库变更管理工具

应用程序的升级通常伴随着数据库表结构的变更&#xff0c;为了维护各种环境的数据库变更&#xff0c;我们通常需要引入 Liquibase 或者 Flyaway 这样的数据库版本控制工具。不过&#xff0c;这类工具通常需要绑定某种编程语言&#xff0c;例如 Java&#xff1b;这次我们介绍一个…

行为模式---状态模式

概念 状态模式是一种行为模式&#xff0c;用于在内部状态改变的时候改变其行为。它的核心思想就是允许一个对象在其内部状态改变的时候改变它的行为。状态模式通过将对象的状态封装成独立的类&#xff0c;并将其行为委托给当前的状态对象&#xff0c;从而使得对象行为随着状态…

1688按图搜索商品(拍立淘)接口的参数说明【附代码实例】

阿里巴巴中国站按图搜索1688商品&#xff08;拍立淘&#xff09; API 返回值说明 item_search_img-按图搜索1688商品&#xff08;拍立淘&#xff09; 1688.item_search_img 公共参数 名称类型必须描述keyString是调用key&#xff08;必须以GET方式拼接在URL中&#xff09;se…

Linux文件管理练习

1、列出所有账号的账号名 切割显示-cut 作用&#xff1a;cut命令用于按列提取文本内容 格式: cut -d "分隔符" -f列数字 文件名 2、将/etc/passwd中内容按照冒号隔开的第三个字符从大到小排序后输出所有内容 排序显示-sort 作用:sort命令用于对文本内容进行排…

解决PC串流至IPad Pro时由于分辨率不一致导致的黑边问题和鼠标滚轮反转问题

问题背景 今天在做 电脑串流ipad pro 的时候发现了2个问题&#xff1a; 1.ipadpro 接上鼠标后&#xff0c;滚轮上下反转&#xff0c;这个是苹果自己的模拟造成的问题&#xff0c;在设置里选择“触控板与鼠标”。 关闭“自然滚动”,就可以让鼠标滚轮正向滚动。 2. ipadpro 分…