当前位置: 首页 > news >正文

构建高效智能对话前端:基于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 组件来存储和渲染对话历史。

存储对话历史

对话历史以对象数组的形式存储,每个对象包含 contentrole 属性。

// 存储对话历史
// 内容格式为 { 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 连接总结 实现的效果 待机页面&#xff1a; 等待页面&#xff1a; 完成页面&#xff1a; 前言 随着人工智能技术的飞速发展&#xff0c;大模型对话系统已成为…...

SQLMesh 系列教程5- 详解SQL模型

本文将详细介绍 SQLMesh 的 SQL 模型组成要素及其在实际项目中的应用。SQLMesh 是一个强大的数据工程工具&#xff0c;其 SQL 模型由 MODEL DDL、预处理语句、主查询、后处理语句以及可选的 ON VIRTUAL UPDATE 语句组成。我们将通过一个电商平台每日销售报告的实例&#xff0c;…...

本地DeepSeek模型GGUF文件转换为PyTorch格式

接前文,我们在本地Windows系统上,基于GGUF文件部署了DeepSeek模型(DeepSeek-R1-Distill-Qwen-1.5B.gguf版本),但是GGUF是已经量化的版本,我们除了对其进行微调之外,无法对其训练,那么还有没有其他办法对本地的GGUF部署的DeepSeek模型进行训练呢?今天我们就反其道而行之…...

Flutter:动态表单(在不确定字段的情况下,生成动态表单)

关于数据模型&#xff1a;模型就是一种规范约束&#xff0c;便于维护管理&#xff0c;在不确定表单内会出现什么数据时&#xff0c;就没有模型一说。 这时就要用到动态表单&#xff08;根据接口返回的字段&#xff0c;生成动态表单&#xff09; 1、观察数据格式&#xff0c;定义…...

【Python项目】文本相似度计算系统

【Python项目】文本相似度计算系统 技术简介&#xff1a;采用Python技术、Django技术、MYSQL数据库等实现。 系统简介&#xff1a;本系统基于Django进行开发&#xff0c;包含前端和后端两个部分。前端基于Bootstrap框架进行开发&#xff0c;主要包括系统首页&#xff0c;文本分…...

C# ref 和 out 的使用详解

总目录 前言 在 C# 编程中&#xff0c;ref 和 out 是两个非常重要的关键字&#xff0c;它们都用于方法参数的传递&#xff0c;但用途和行为却有所不同。今天&#xff0c;我们就来深入探讨一下这两个关键字的用法和区别&#xff0c;让你在编程中能够得心应手地使用它们。 一、什…...

Ubuntu 24.04.1 LTS 本地部署 DeepSeek 私有化知识库

文章目录 前言工具介绍与作用工具的关联与协同工作必要性分析 1、DeepSeek 简介1.1、DeepSeek-R1 硬件要求 2、Linux 环境说明2.1、最小部署&#xff08;Ollama DeepSeek&#xff09;2.1.1、扩展&#xff08;非必须&#xff09; - Ollama 后台运行、开机自启&#xff1a; 2.2、…...

用 WOW.js 和 animate.css 实现动画效果

用 wow.js 就可以实现动画效果&#xff0c;但由于里面的动画样式太少&#xff0c;一般还会引入 animated.css 第一步&#xff1a;下载 选择合适的包管理器下载对应的内容 pnpm i wow.js animated.css --save 第二步&#xff1a;引入 在main.js中加入&#xff1a; import …...

1-知识图谱-概述和介绍

知识图谱&#xff1a;浙江大学教授 陈华军 知识图谱 1课时 http://openkg.cn/datasets-type/ 知识图谱的价值 知识图谱是有什么用&#xff1f; 语义搜索 问答系统 QA问答对知识图谱&#xff1a;结构化图 辅助推荐系统 大数据分析系统 自然语言理解 辅助视觉理解 例…...

flink jobgraph详细介绍

一、Flink JobGraph 的核心概念 JobGraph 是 Flink 作业的核心执行计划&#xff0c;它描述了作业的任务拓扑结构和数据流关系。JobGraph 由以下几部分组成&#xff1a; 顶点&#xff08;Vertex&#xff09; 每个顶点代表一个任务&#xff08;Task&#xff09;&#xff0c;例如…...

使用nginx+rtmp+ffmpeg实现桌面直播

使用nginxrtmpffmpeg实现桌面直播 流媒体服务器搭建 docker run docker镜像基于添加了rtmp模块的nginx&#xff0c;和ffmpeg docker pull alfg/nginx-rtmp docker run -d -p 1935:1935 -p 8080:80 --namenginx-rtmp alfg/nginx-rtmprtmp模块说明 进入容器内部查看 docker…...

每日一题——将数字字符串转化为IP地址

将数字字符串转化为IP地址 题目描述解题思路回溯法步骤分解 代码实现全局变量有效性验证函数回溯函数主函数完整代码 复杂度分析关键点说明总结 这题难度还挺大的&#xff0c;整体上实现并不容易。建议参考视频 和https://programmercarl.com/0093.%E5%A4%8D%E5%8E%9FIP%E5%9C%…...

机器学习数学基础:25.随机变量分布详解

一、随机变量与分布函数的基本概念 &#xff08;一&#xff09;什么是随机变量&#xff1f; 在概率论领域&#xff0c;随机变量是将随机试验的结果进行数值化的关键概念。它就像一座桥梁&#xff0c;把抽象的随机事件和具体的数学分析连接起来。 举例来说&#xff0c;在一个…...

香港电讯与Zenlayer达成战略合作,拓展全球互联生态圈

作为主要国际金融与贸易中心&#xff0c;香港一直是连系中国内地及全球市场的重要门户。香港电讯作为本地领先的综合电讯服务提供商&#xff0c;拥有广泛的网络资源和深厚的技术专长&#xff0c;一直支持国内企业“走出去”和外资企业“走进来”。而旗下由PCCW Global营运的Con…...

MySQL-事务隔离级别

事务有四大特性&#xff08;ACID&#xff09;&#xff1a;原子性&#xff0c;一致性&#xff0c;隔离性和持久性。隔离性一般在事务并发的时候需要保证事务的隔离性&#xff0c;事务并发会出现很多问题&#xff0c;包括脏写&#xff0c;脏读&#xff0c;不可重复读&#xff0c;…...

【Python学习 / 6】面向对象编程(OOP)

文章目录 ⭐前言⭐一、类和对象&#xff1a;面向对象编程基础1. 类&#xff08;Class&#xff09;类的组成&#xff1a;例子&#xff1a;定义一个简单的 Dog 类代码解析&#xff1a; 2. 对象&#xff08;Object&#xff09;对象的创建&#xff1a; 3. 三大特性&#xff1a;封装…...

Ollama DeepSeek + AnythingLLM 实现本地私有AI知识库

Ollama DeepSeek AnythingLLM 实现本地私有AI知识库 本地部署DeepSeek-r1下载安装AnythingLLMAnythingLLM 配置LLM首选项Embedder首选项向量数据库工作区其他配置 AnythingLLM Workspace使用上传知识词嵌入知识检索 本文主要介绍了如何使用AnythingLLM结合Ollama部署的DeepSee…...

个人博客测试报告

一、项目背景 个人博客系统采用前后端分离的方法来实现&#xff0c;同时使用了数据库来存储相关的数据&#xff0c;同时将其部署到云服务器上。前端主要有四个页面构成&#xff1a;登录页、列表页、详情页以及编辑页&#xff0c;以上模拟实现了最简单的个人博客系统。其结合后…...

嵌入式八股文(四)计算机网络篇

第一章 基础概念 1. 服务 指网络中各层为紧邻的上层提供的功能调用,是垂直的。包括面向连接服务、无连接服务、可靠服务、不可靠服务。 2. 协议 是计算机⽹络相互通信的对等层实体之间交换信息时必须遵守的规则或约定的集合。⽹络协议的三个基本要素:语法、…...

基于Electron+Vue3创建桌面应用

Electron 是一个开源框架,基于 Chromium 和 Node.js,用于开发跨平台桌面应用程序。它允许开发者使用 HTML、CSS 和 JavaScript 等 Web 技术构建原生桌面应用,支持 Windows、macOS 和 Linux。Electron 以其开发便捷性、强大的功能和丰富的生态系统而广泛应用于工具类应用、媒…...

【大模型RAG】拍照搜题技术架构速览:三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

【人工智能】神经网络的优化器optimizer(二):Adagrad自适应学习率优化器

一.自适应梯度算法Adagrad概述 Adagrad&#xff08;Adaptive Gradient Algorithm&#xff09;是一种自适应学习率的优化算法&#xff0c;由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率&#xff0c;适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

Auto-Coder使用GPT-4o完成:在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件&#xff0c;然后打开终端&#xff0c;进入下载文件夹&#xff0c;键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

LLM基础1_语言模型如何处理文本

基于GitHub项目&#xff1a;https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken&#xff1a;OpenAI开发的专业"分词器" torch&#xff1a;Facebook开发的强力计算引擎&#xff0c;相当于超级计算器 理解词嵌入&#xff1a;给词语画"…...

NFT模式:数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

学校时钟系统,标准考场时钟系统,AI亮相2025高考,赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...

Go语言多线程问题

打印零与奇偶数&#xff08;leetcode 1116&#xff09; 方法1&#xff1a;使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...

Windows安装Miniconda

一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...