开箱即用,阿里开源!专业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)
💖💖💖亲爱的朋友们,热烈欢迎你们来到 青云交的博客!能与你们在此邂逅,我满心欢喜,深感无比荣幸。在这个瞬息万变的时代,我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…...
云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?
大家好,欢迎来到《云原生核心技术》系列的第七篇! 在上一篇,我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在,我们就像一个拥有了一块崭新数字土地的农场主,是时…...
Golang dig框架与GraphQL的完美结合
将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用,可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器,能够帮助开发者更好地管理复杂的依赖关系,而 GraphQL 则是一种用于 API 的查询语言,能够提…...

Python实现prophet 理论及参数优化
文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候,写过一篇简单实现,后期随着对该模型的深入研究,本次记录涉及到prophet 的公式以及参数调优,从公式可以更直观…...
Python爬虫(二):爬虫完整流程
爬虫完整流程详解(7大核心步骤实战技巧) 一、爬虫完整工作流程 以下是爬虫开发的完整流程,我将结合具体技术点和实战经验展开说明: 1. 目标分析与前期准备 网站技术分析: 使用浏览器开发者工具(F12&…...
Linux云原生安全:零信任架构与机密计算
Linux云原生安全:零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言:云原生安全的范式革命 随着云原生技术的普及,安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测,到2025年,零信任架构将成为超…...
Spring Boot+Neo4j知识图谱实战:3步搭建智能关系网络!
一、引言 在数据驱动的背景下,知识图谱凭借其高效的信息组织能力,正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合,探讨知识图谱开发的实现细节,帮助读者掌握该技术栈在实际项目中的落地方法。 …...

12.找到字符串中所有字母异位词
🧠 题目解析 题目描述: 给定两个字符串 s 和 p,找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义: 若两个字符串包含的字符种类和出现次数完全相同,顺序无所谓,则互为…...

SpringCloudGateway 自定义局部过滤器
场景: 将所有请求转化为同一路径请求(方便穿网配置)在请求头内标识原来路径,然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

Unsafe Fileupload篇补充-木马的详细教程与木马分享(中国蚁剑方式)
在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马(服务器方面的)的原理,连接,以及各种木马及连接工具的分享 文件木马:https://w…...
服务器--宝塔命令
一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行! sudo su - 1. CentOS 系统: yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...