个人网店和网站的区别,自己怎么设计公众号,扬州建设工程信息网站,做企划的网站Ant Design X是一个基于Ant Design体系的创新解决方案#xff0c;为构建高效的AI交互界面提供了便利和支持。从精细的原子组件到快速集成的模型服务#xff0c;Ant Design X让开发者能轻松应对各种需求。本文将结合实际场景#xff0c;展示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 srcantd.min.js/script
link relstylesheet hrefantd.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 () (divBubble.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 (divBubble.List items{items} /Sender onSubmit{onRequest} //div);
};export default Demo;总结
Ant Design X通过其强大的原子组件库、便捷的模型集成工具以及高效的数据流管理能力为开发者提供了快速构建AI驱动界面的全方位支持。不论是构建简单的对话应用还是实现复杂的交互逻辑Ant Design X都是一个值得信赖的选择。
