构建高效智能对话前端:基于Ant Design X 的deepseek对话应用
文章目录
- 实现的效果
- 前言
- Ant Design X
- 添加欢迎组件
- 创建对话气泡
- 存储对话历史
- 渲染对话气泡
- 输入组件
- WebSocket 连接
- 总结
实现的效果
-
待机页面:

-
等待页面:

-
完成页面:

前言
随着人工智能技术的飞速发展,大模型对话系统已成为许多应用的核心组件。为了提供一个高效、智能且用户友好的对话界面,我们开发了一款基于 Vite、React 和 Ant Design X 的大模型对话前端页面。该系统能够实时与后端的大模型进行通信,为用户提供流畅的对话体验。
本文主要介绍前端页面部分,后端大模型 DeepSeek 的对接请移步至深度集成 DeepSeek 大模型。
Ant Design X
Ant Design X 是一个遵循 Ant Design 设计体系的 React UI 库,专为构建由 AI 驱动的界面而设计,支持一键接入智能对话组件与 API 服务。
- 源自企业级 AI 产品的最佳实践:基于 RICH 交互范式,提供卓越的 AI 交互体验。
- 灵活多样的原子组件:覆盖绝大部分 AI 对话场景,助力快速构建个性化 AI 交互页面。
- 开箱即用的模型对接能力:轻松对接符合 OpenAI 标准的模型推理服务。
- 高效管理对话数据流:提供好用的数据流管理功能,让开发更高效。
- 丰富的样板间支持:提供多种模板,快速启动 LUI 应用开发。
- TypeScript 全覆盖:采用 TypeScript 开发,提供完整类型支持,提升开发体验与可靠性。
- 深度主题定制能力:支持细粒度的样式调整,满足各种场景的个性化需求。
添加欢迎组件
在用户首次访问时,显示欢迎组件以介绍应用。
<Welcomeicon="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp"title="Hello, I'm Ant Design X"description="Based on Ant Design, AGI product interface solution, create a better intelligent vision~"
/>
创建对话气泡
使用 Bubble 组件来存储和渲染对话历史。
存储对话历史
对话历史以对象数组的形式存储,每个对象包含 content 和 role 属性。
// 存储对话历史
// 内容格式为 { content: '', role: 'assistant' } / { content: '', role: 'user' }
const [history, setHistory] = useState([]);
渲染对话气泡
根据消息的角色(用户或助手)渲染不同的对话气泡。
{history.map((item, index) => {if (item.role === 'user') {return (<Bubblekey={index}style={{ marginBottom: 8 }}placement="end"content={item.content}messageRender={renderMarkdown}avatar={{ icon: <UserOutlined />, style: fooAvatar }}/>);} else if (item.role === 'assistant') {return (<Bubblekey={index}loading={(index === history.length - 1) && loading}style={{ marginBottom: 8, maxWidth: '80%' }}placement="start"content={item.content}messageRender={renderMarkdown}avatar={{ icon: <RobotOutlined />, style: robotAvatar }}/>);}})
}
输入组件
使用 Sender 组件来处理用户输入和消息发送。
<Senderloading={loading}value={inputMsg}style={{ position: 'absolute', bottom: '10px', right: '10px', left: '10px', width: 'auto' }}onChange={(v) => {setInputMsg(v);}}onSubmit={() => {setHistory((prevHistory) => [...prevHistory, { content: inputMsg, role: 'user' }]);sendMsg();setInputMsg('');setLoading(true);}}onCancel={() => {// 取消发送消息时的处理逻辑(如果有需要)}}
/>
WebSocket 连接
使用 WebSocket 协议与后端的大模型进行实时通信。当用户发送消息时,前端通过 WebSocket 将消息发送到后端,并接收 DeepSeek 通过后端 Python 代码返回的对话内容。
代码示例:
const sendMsg = () => {// 创建一个新的 WebSocket 连接const socket = new WebSocket('ws://localhost:8765');// 初始化结果对象,用于存储助手的回复内容let result = {content: '',role: 'assistant'};// WebSocket 连接打开时的处理逻辑socket.onopen = () => {console.log('WebSocket connection established');console.log(inputMsg);// 发送用户输入的消息到后端socket.send(JSON.stringify({"user_input": inputMsg}));// 在对话历史中添加一个新的助手消息占位符setHistory((prevHistory) => [...prevHistory, { content: '', role: 'assistant' }]);};// WebSocket 接收到消息时的处理逻辑socket.onmessage = (event) => {try {// 检查消息是否为结束标志if (event.data === 'end') {// 处理结束逻辑(如果有需要)} else {// 解析接收到的消息const msg = JSON.parse(event.data);console.log(msg);// 累加助手的回复内容result.content += msg.content;// 更新对话历史中的最后一个助手消息内容setHistory((prevHistory) => {const newHistory = [...prevHistory];newHistory[newHistory.length - 1].content = result.content;console.log(newHistory[newHistory.length - 1].content);return newHistory;});}} catch (error) {console.error('Error parsing WebSocket message:', error);}};// WebSocket 连接关闭时的处理逻辑socket.onclose = () => {console.log('WebSocket connection closed');setLoading(false);};// WebSocket 连接发生错误时的处理逻辑socket.onerror = (error) => {console.error('WebSocket error:', error);setLoading(false);};
};
总结
本项目不仅实现了基本的实时对话功能,还充分考虑到了性能及用户体验方面的问题。借助 Vite、React 和 Ant Design X 的优势,我们得以在较短时间内完成高质量的产品交付。希望这篇文章能给正在探索类似项目的朋友们带来一些启发。
源码下载地址
相关文章:
构建高效智能对话前端:基于Ant Design X 的deepseek对话应用
文章目录 实现的效果前言Ant Design X添加欢迎组件创建对话气泡存储对话历史渲染对话气泡 输入组件WebSocket 连接总结 实现的效果 待机页面: 等待页面: 完成页面: 前言 随着人工智能技术的飞速发展,大模型对话系统已成为…...
SQLMesh 系列教程5- 详解SQL模型
本文将详细介绍 SQLMesh 的 SQL 模型组成要素及其在实际项目中的应用。SQLMesh 是一个强大的数据工程工具,其 SQL 模型由 MODEL DDL、预处理语句、主查询、后处理语句以及可选的 ON VIRTUAL UPDATE 语句组成。我们将通过一个电商平台每日销售报告的实例,…...
本地DeepSeek模型GGUF文件转换为PyTorch格式
接前文,我们在本地Windows系统上,基于GGUF文件部署了DeepSeek模型(DeepSeek-R1-Distill-Qwen-1.5B.gguf版本),但是GGUF是已经量化的版本,我们除了对其进行微调之外,无法对其训练,那么还有没有其他办法对本地的GGUF部署的DeepSeek模型进行训练呢?今天我们就反其道而行之…...
Flutter:动态表单(在不确定字段的情况下,生成动态表单)
关于数据模型:模型就是一种规范约束,便于维护管理,在不确定表单内会出现什么数据时,就没有模型一说。 这时就要用到动态表单(根据接口返回的字段,生成动态表单) 1、观察数据格式,定义…...
【Python项目】文本相似度计算系统
【Python项目】文本相似度计算系统 技术简介:采用Python技术、Django技术、MYSQL数据库等实现。 系统简介:本系统基于Django进行开发,包含前端和后端两个部分。前端基于Bootstrap框架进行开发,主要包括系统首页,文本分…...
C# ref 和 out 的使用详解
总目录 前言 在 C# 编程中,ref 和 out 是两个非常重要的关键字,它们都用于方法参数的传递,但用途和行为却有所不同。今天,我们就来深入探讨一下这两个关键字的用法和区别,让你在编程中能够得心应手地使用它们。 一、什…...
Ubuntu 24.04.1 LTS 本地部署 DeepSeek 私有化知识库
文章目录 前言工具介绍与作用工具的关联与协同工作必要性分析 1、DeepSeek 简介1.1、DeepSeek-R1 硬件要求 2、Linux 环境说明2.1、最小部署(Ollama DeepSeek)2.1.1、扩展(非必须) - Ollama 后台运行、开机自启: 2.2、…...
用 WOW.js 和 animate.css 实现动画效果
用 wow.js 就可以实现动画效果,但由于里面的动画样式太少,一般还会引入 animated.css 第一步:下载 选择合适的包管理器下载对应的内容 pnpm i wow.js animated.css --save 第二步:引入 在main.js中加入: import …...
1-知识图谱-概述和介绍
知识图谱:浙江大学教授 陈华军 知识图谱 1课时 http://openkg.cn/datasets-type/ 知识图谱的价值 知识图谱是有什么用? 语义搜索 问答系统 QA问答对知识图谱:结构化图 辅助推荐系统 大数据分析系统 自然语言理解 辅助视觉理解 例…...
flink jobgraph详细介绍
一、Flink JobGraph 的核心概念 JobGraph 是 Flink 作业的核心执行计划,它描述了作业的任务拓扑结构和数据流关系。JobGraph 由以下几部分组成: 顶点(Vertex) 每个顶点代表一个任务(Task),例如…...
使用nginx+rtmp+ffmpeg实现桌面直播
使用nginxrtmpffmpeg实现桌面直播 流媒体服务器搭建 docker run docker镜像基于添加了rtmp模块的nginx,和ffmpeg docker pull alfg/nginx-rtmp docker run -d -p 1935:1935 -p 8080:80 --namenginx-rtmp alfg/nginx-rtmprtmp模块说明 进入容器内部查看 docker…...
每日一题——将数字字符串转化为IP地址
将数字字符串转化为IP地址 题目描述解题思路回溯法步骤分解 代码实现全局变量有效性验证函数回溯函数主函数完整代码 复杂度分析关键点说明总结 这题难度还挺大的,整体上实现并不容易。建议参考视频 和https://programmercarl.com/0093.%E5%A4%8D%E5%8E%9FIP%E5%9C%…...
机器学习数学基础:25.随机变量分布详解
一、随机变量与分布函数的基本概念 (一)什么是随机变量? 在概率论领域,随机变量是将随机试验的结果进行数值化的关键概念。它就像一座桥梁,把抽象的随机事件和具体的数学分析连接起来。 举例来说,在一个…...
香港电讯与Zenlayer达成战略合作,拓展全球互联生态圈
作为主要国际金融与贸易中心,香港一直是连系中国内地及全球市场的重要门户。香港电讯作为本地领先的综合电讯服务提供商,拥有广泛的网络资源和深厚的技术专长,一直支持国内企业“走出去”和外资企业“走进来”。而旗下由PCCW Global营运的Con…...
MySQL-事务隔离级别
事务有四大特性(ACID):原子性,一致性,隔离性和持久性。隔离性一般在事务并发的时候需要保证事务的隔离性,事务并发会出现很多问题,包括脏写,脏读,不可重复读,…...
【Python学习 / 6】面向对象编程(OOP)
文章目录 ⭐前言⭐一、类和对象:面向对象编程基础1. 类(Class)类的组成:例子:定义一个简单的 Dog 类代码解析: 2. 对象(Object)对象的创建: 3. 三大特性:封装…...
Ollama DeepSeek + AnythingLLM 实现本地私有AI知识库
Ollama DeepSeek AnythingLLM 实现本地私有AI知识库 本地部署DeepSeek-r1下载安装AnythingLLMAnythingLLM 配置LLM首选项Embedder首选项向量数据库工作区其他配置 AnythingLLM Workspace使用上传知识词嵌入知识检索 本文主要介绍了如何使用AnythingLLM结合Ollama部署的DeepSee…...
个人博客测试报告
一、项目背景 个人博客系统采用前后端分离的方法来实现,同时使用了数据库来存储相关的数据,同时将其部署到云服务器上。前端主要有四个页面构成:登录页、列表页、详情页以及编辑页,以上模拟实现了最简单的个人博客系统。其结合后…...
嵌入式八股文(四)计算机网络篇
第一章 基础概念 1. 服务 指网络中各层为紧邻的上层提供的功能调用,是垂直的。包括面向连接服务、无连接服务、可靠服务、不可靠服务。 2. 协议 是计算机⽹络相互通信的对等层实体之间交换信息时必须遵守的规则或约定的集合。⽹络协议的三个基本要素:语法、…...
基于Electron+Vue3创建桌面应用
Electron 是一个开源框架,基于 Chromium 和 Node.js,用于开发跨平台桌面应用程序。它允许开发者使用 HTML、CSS 和 JavaScript 等 Web 技术构建原生桌面应用,支持 Windows、macOS 和 Linux。Electron 以其开发便捷性、强大的功能和丰富的生态系统而广泛应用于工具类应用、媒…...
日语AI面试高效通关秘籍:专业解读与青柚面试智能助攻
在如今就业市场竞争日益激烈的背景下,越来越多的求职者将目光投向了日本及中日双语岗位。但是,一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧?面对生疏的日语交流环境,即便提前恶补了…...
多模态2025:技术路线“神仙打架”,视频生成冲上云霄
文|魏琳华 编|王一粟 一场大会,聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中,汇集了学界、创业公司和大厂等三方的热门选手,关于多模态的集中讨论达到了前所未有的热度。其中,…...
TDengine 快速体验(Docker 镜像方式)
简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能,本节首先介绍如何通过 Docker 快速体验 TDengine,然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker,请使用 安装包的方式快…...
Appium+python自动化(十六)- ADB命令
简介 Android 调试桥(adb)是多种用途的工具,该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具,其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利,如安装和调试…...
理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端
🌟 什么是 MCP? 模型控制协议 (MCP) 是一种创新的协议,旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议,它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...
UDP(Echoserver)
网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法:netstat [选项] 功能:查看网络状态 常用选项: n 拒绝显示别名&#…...
pam_env.so模块配置解析
在PAM(Pluggable Authentication Modules)配置中, /etc/pam.d/su 文件相关配置含义如下: 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块,负责验证用户身份&am…...
基于Uniapp开发HarmonyOS 5.0旅游应用技术实践
一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架,支持"一次开发,多端部署",可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务,为旅游应用带来…...
《通信之道——从微积分到 5G》读书总结
第1章 绪 论 1.1 这是一本什么样的书 通信技术,说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号(调制) 把信息从信号中抽取出来&am…...
视频字幕质量评估的大规模细粒度基准
大家读完觉得有帮助记得关注和点赞!!! 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用,因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型(VLMs)在字幕生成方面…...
