开箱即用,阿里开源!专业AI 聊天界面工具包:Ant Design X
Ant Design X是一个基于Ant Design体系的创新解决方案,为构建高效的AI交互界面提供了便利和支持。从精细的原子组件到快速集成的模型服务,Ant Design X让开发者能轻松应对各种需求。本文将结合实际场景,展示Ant Design X的功能与使用方法。
为何选择Ant Design X?
核心优势
- 🌟 企业级最佳实践:基于RICH交互范式,优化AI交互体验,满足企业级需求。
- 🌈 灵活多样的原子组件:覆盖大多数AI对话场景,助力快速搭建个性化界面。
- ⚡ 开箱即用的模型集成:支持对接符合OpenAI标准的模型推理服务,简化开发流程。
- 🔄 高效的数据流管理:提供强大的数据流管理工具,提高开发效率。
- 🎨 深度主题定制:支持细粒度的样式调整,满足多样化和个性化需求。
快速安装与导入
通过以下命令安装Ant Design X:
npm install @ant-design/x --save
yarn add @ant-design/x
pnpm add @ant-design/x
浏览器引入
在浏览器中使用时,可以通过<script>和<link>标签直接引入文件,并使用全局变量antdx:
<script src="antd.min.js"></script>
<link rel="stylesheet" href="antd.min.css">
注意:不推荐使用已构建的文件方式,因为这样无法按需加载模块,同时难以快速获得底层依赖的Bug修复支持。
核心功能与场景示例
1. 原子组件:快速构建对话界面
Ant Design X基于RICH交互范式,提供了大量的原子组件。以下是一个简单对话框的示例代码:
import React from 'react';
import {// 信息气泡Bubble,// 输入框Sender,
} from '@ant-design/x';const messages = [{content: 'Hello, Ant Design X!',role: 'user',},
];const App = () => (<div><Bubble.List items={messages} /><Sender /></div>
);export default App;
2. 模型集成:轻松对接AI推理服务
Ant Design X提供了useXAgent和XRequest等工具,帮助开发者快速对接标准化的模型推理服务。以下是一个对接Qwen模型的示例:
import { useXAgent, Sender, XRequest } from '@ant-design/x';
import React from 'react';const { create } = XRequest({baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',dangerouslyApiKey: process.env['DASHSCOPE_API_KEY'],model: 'qwen-plus',
});const Component: React.FC = () => {const [agent] = useXAgent({request: async (info, callbacks) => {const { messages, message } = info;const { onUpdate } = callbacks;let content: string = '';try {create({messages: [{ role: 'user', content: message }],stream: true,},{onSuccess: (chunks) => {console.log('sse chunk list', chunks);},onError: (error) => {console.log('error', error);},onUpdate: (chunk) => {console.log('sse object', chunk);const data = JSON.parse(chunk.data);content += data?.choices[0].delta.content;onUpdate(content);},},);} catch (error) {// handle error}},});function onRequest(message: string) {agent.request({ message },{onUpdate: () => {},onSuccess: () => {},onError: () => {},},);}return <Sender onSubmit={onRequest} />;
};export default Component;
3. 数据流管理:高效处理对话数据
通过useXChat工具,可以轻松管理AI对话应用中的数据流。以下是一个对接OpenAI服务的示例:
import { useXAgent, useXChat, Sender, Bubble } from '@ant-design/x';
import OpenAI from 'openai';
import React from 'react';const client = new OpenAI({apiKey: process.env['OPENAI_API_KEY'],dangerouslyAllowBrowser: true,
});const Demo: React.FC = () => {const [agent] = useXAgent({request: async (info, callbacks) => {const { messages, message } = info;const { onSuccess, onUpdate, onError } = callbacks;let content: string = '';try {const stream = await client.chat.completions.create({model: 'gpt-4o',messages: [{ role: 'user', content: message }],stream: true,});for await (const chunk of stream) {content += chunk.choices[0]?.delta?.content || '';onUpdate(content);}onSuccess(content);} catch (error) {// handle error}},});const {onRequest,messages,} = useXChat({ agent });const items = messages.map(({ message, id }) => ({key: id,content: message,}));return (<div><Bubble.List items={items} /><Sender onSubmit={onRequest} /></div>);
};export default Demo;
总结
Ant Design X通过其强大的原子组件库、便捷的模型集成工具以及高效的数据流管理能力,为开发者提供了快速构建AI驱动界面的全方位支持。不论是构建简单的对话应用,还是实现复杂的交互逻辑,Ant Design X都是一个值得信赖的选择。
相关文章:
开箱即用,阿里开源!专业AI 聊天界面工具包:Ant Design X
Ant Design X是一个基于Ant Design体系的创新解决方案,为构建高效的AI交互界面提供了便利和支持。从精细的原子组件到快速集成的模型服务,Ant Design X让开发者能轻松应对各种需求。本文将结合实际场景,展示Ant Design X的功能与使用方法。 为…...
详解版本控制工作原理及优势,常见的版本控制系统对比(HelixCore、Git、SVN等)
什么是版本控制软件?从基础层面来说,版本控制(也可称版本管理)就是随时间跟踪和管理文件变更的过程,而版本控制软件有助于实现这一过程的自动化。但这仅仅是其功能及其重要性的开端。 什么是版本控制? 版本…...
Vue2 vs Vue3:核心原理与性能优化详解
Vue2 vs Vue3:核心原理与性能优化详解 Vue.js 是目前主流的前端框架之一,随着 Vue3 的发布,框架内部的实现和使用方式都发生了显著变化。本文将从 Vue2 和 Vue3 的核心实现原理出发,详细解析两者的区别,并分析 Vue3…...
Qt+GDAL属性计算软件开发记录
一.GDAL添加字段 void MainWindow::addField(QString fieldName){OGRFieldDefn * fieldDefn new OGRFieldDefn(fieldName.toStdString().c_str(), OFTInteger);ly->CreateField(fieldDefn);srand((int)time(NULL));while (true){OGRFeature * feature ly->GetNextFeat…...
在超表面中琼斯矩阵的使用
琼斯矩阵(Jones Matrix) 是一种线性代数方法,用于描述光的偏振状态和偏振变化,是偏振光学中重要的数学工具。它在 超表面理论设计 中广泛应用,尤其是在设计和调控光与物质相互作用时,例如偏振控制、相位调制…...
在macOS上从源码部署RAGFlow-0.14.1
一、macOS配置 1. macOS配置 我使用MacBook Pro,chip 是 Apple M3 Pro,Memory是18GB,macOS是 Sonoma 14.6.1。 2.安装Docker和Docker compose 官方要求 Docker ≥ 24.0.0 & Docker Compose ≥ v2.26.1,我的版本如下&#x…...
2-2-18-9 QNX系统架构之文件系统(二)
阅读前言 本文以QNX系统官方的文档英文原版资料为参考,翻译和逐句校对后,对QNX操作系统的相关概念进行了深度整理,旨在帮助想要了解QNX的读者及开发者可以快速阅读,而不必查看晦涩难懂的英文原文,这些文章将会作为一个…...
【经管数据】上市公司企业审计报告时滞数据、 年报披露时滞数据(2001-2022年)
测算方式:参考C刊《审计研究》窦笑晨(2022)老师的研究,从审计报告约定披露日期到审计报告实际披露日期之间的时间间隔。有关审计报告时滞的度量,现有研究大多采用资产负债表日与审计报告实际披露日期之间的间隔天数进行…...
debian ubuntu armbian部署asp.net core 项目 开机自启动
我本地的环境是 rk3399机器,安装armbian系统。 1.安装.net core 组件 sudo apt-get update && \sudo apt-get install -y dotnet-sdk-8.0或者安装运行库,但无法生成编译项目 sudo apt-get update && \sudo apt-get install -y aspnet…...
无人机地面遥控遥测技术与算法概述!
一、地面系统遥控检测核心技术 卫星遥测技术: 定义:卫星遥测技术是实现卫星与地面之间遥测数据传输的关键环节。 功能:传输卫星的状态信息、传感器采集的环境参数等。 关键技术: 调制解调技术:用于将数字遥测数据…...
游戏引擎学习第30天
仓库: https://gitee.com/mrxiao_com/2d_game 回顾 在这段讨论中,重点是对开发过程中出现的游戏代码进行梳理和进一步优化的过程。 工作回顾:在第30天,回顾了前一天的工作,并提到今天的任务是继续从第29天的代码开始,…...
Django drf 快速使用
1. 安装: pip install djangorestframework 2. 添加rest_framework到您的INSTALLED_APPS设置。 settings.pyINSTALLED_APPS [...rest_framework, ] 3. 定义模型 models.pyfrom django.db import modelsclass BookModel(models.Model):name models.CharField(max_length64)…...
机器学习介绍与实战:案例解析与未来展望
一、机器学习概述 1. 什么是机器学习? 机器学习(Machine Learning, ML)是一种通过数据训练模型,使计算机能够自动从经验中学习的技术。它旨在让计算机在没有显式编程的情况下,能够从数据中提取模式、进行预测或决策。…...
【SCT71401】3V-40V Vin, 150mA, 2.5uA IQ,低压稳压器,替代SGM2203
SCT71401 3V-40V Vin, 150mA, 2.5uA IQ,低压稳压器,替代SGM2203 描述 SCT71401系列产品是一款低压差线性稳压器,设计用于3 V至40 V (45V瞬态输入电压)的宽输入电压范围和150mA输出电流。SCT71401系列产品使用3.3uF…...
2024.12.3总结
继周一把PPT初稿弄出来后,今晚进行了转正预答辩,主管,导师,团队里能来听答辩的人都来了,讲完后,自己都觉得自己讲得不好,基本上是照着PPT念的。 写PPT,改PPT,不停的预演答辩的过程&…...
Redis探秘Sentinel(哨兵模式)
概述 Redis的高可用机制有持久化、复制、哨兵和集群。其主要的作用和解决的问题分别是: 持久化:持久化是最简单的高可用方法(有时甚至不被归为高可用的手段),主要作用是数据备份,即将数据存储在硬盘,保证数据不会因进…...
Linux C/C++编程之静态库
【图书推荐】《Linux C与C一线开发实践(第2版)》_linux c与c一线开发实践pdf-CSDN博客《Linux C与C一线开发实践(第2版)(Linux技术丛书)》(朱文伟,李建英)【摘要 书评 试读】- 京东图书 (jd.com…...
strlen函数用法,模拟实现
一、strlen 函数用法 用来求字符串长度,从我们给的地址开始,往后数,直到遇到 \0 停止,返回数的个数,不包括 \0 返回值类型是无符号整形 char arr[ ]"bvcxz"; printf("%u ",strlen(arr)); …...
云原生后端:解锁高效可扩展应用的魔法世界
目录 一、云原生后端的崛起:时代的必然选择 二、云原生后端的基石:容器化与 Docker (一)容器化的概念与优势 (二)Docker:容器化的明星工具 三、微服务架构:云原生后端的灵魂 &…...
大数据新视界 -- Hive 数据湖架构中的角色与应用(上)(25 / 30)
💖💖💖亲爱的朋友们,热烈欢迎你们来到 青云交的博客!能与你们在此邂逅,我满心欢喜,深感无比荣幸。在这个瞬息万变的时代,我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…...
边缘计算医疗风险自查APP开发方案
核心目标:在便携设备(智能手表/家用检测仪)部署轻量化疾病预测模型,实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...
从深圳崛起的“机器之眼”:赴港乐动机器人的万亿赛道赶考路
进入2025年以来,尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断,但全球市场热度依然高涨,入局者持续增加。 以国内市场为例,天眼查专业版数据显示,截至5月底,我国现存在业、存续状态的机器人相关企…...
pam_env.so模块配置解析
在PAM(Pluggable Authentication Modules)配置中, /etc/pam.d/su 文件相关配置含义如下: 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块,负责验证用户身份&am…...
c++ 面试题(1)-----深度优先搜索(DFS)实现
操作系统:ubuntu22.04 IDE:Visual Studio Code 编程语言:C11 题目描述 地上有一个 m 行 n 列的方格,从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子,但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...
ESP32 I2S音频总线学习笔记(四): INMP441采集音频并实时播放
简介 前面两期文章我们介绍了I2S的读取和写入,一个是通过INMP441麦克风模块采集音频,一个是通过PCM5102A模块播放音频,那如果我们将两者结合起来,将麦克风采集到的音频通过PCM5102A播放,是不是就可以做一个扩音器了呢…...
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中,新增了一个本地验证码接口 /code,使用函数式路由(RouterFunction)和 Hutool 的 Circle…...
html css js网页制作成品——HTML+CSS榴莲商城网页设计(4页)附源码
目录 一、👨🎓网站题目 二、✍️网站描述 三、📚网站介绍 四、🌐网站效果 五、🪓 代码实现 🧱HTML 六、🥇 如何让学习不再盲目 七、🎁更多干货 一、👨…...
佰力博科技与您探讨热释电测量的几种方法
热释电的测量主要涉及热释电系数的测定,这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中,积分电荷法最为常用,其原理是通过测量在电容器上积累的热释电电荷,从而确定热释电系数…...
【分享】推荐一些办公小工具
1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由:大部分的转换软件需要收费,要么功能不齐全,而开会员又用不了几次浪费钱,借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...
免费PDF转图片工具
免费PDF转图片工具 一款简单易用的PDF转图片工具,可以将PDF文件快速转换为高质量PNG图片。无需安装复杂的软件,也不需要在线上传文件,保护您的隐私。 工具截图 主要特点 🚀 快速转换:本地转换,无需等待上…...
