构建高效智能对话前端：基于Ant Design X 的deepseek对话应用

deepseek相关资料

• 深度集成DeepSeek大模型：WebSocket流式聊天实现
• 零代码玩转AI视频革命：StoryFlicks×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 开发，提供完整类型支持，提升开发体验与可靠性。
          • 深度主题定制能力：支持细粒度的样式调整，满足各种场景的个性化需求。

            添加欢迎组件

            在用户首次访问时，显示欢迎组件以介绍应用。

            创建对话气泡

            使用 Bubble 组件来存储和渲染对话历史。

            存储对话历史

            对话历史以对象数组的形式存储，每个对象包含 content 和 role 属性。

            // 存储对话历史
            // 内容格式为 { content: '', role: 'assistant' } / { content: '', role: 'user' }
            const [history, setHistory] = useState([]);
            

            渲染对话气泡

            根据消息的角色（用户或助手）渲染不同的对话气泡。

            {
              history.map((item, index) => {
                if (item.role === 'user') {
                  return (
                    { marginBottom: 8 }}
                      placement="end"
                      content={item.content}
                      messageRender={renderMarkdown}
                      avatar={{ icon: 
                  );
                } else if (item.role === 'assistant') {
                  return (
                    { marginBottom: 8, maxWidth: '80%' }}
                      placement="start"
                      content={item.content}
                      messageRender={renderMarkdown}
                      avatar={{ icon: 
                  );
                }
              })
            }
            

            输入组件

            使用 Sender 组件来处理用户输入和消息发送。

            { 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 的优势，我们得以在较短时间内完成高质量的产品交付。希望这篇文章能给正在探索类似项目的朋友们带来一些启发。

            源码下载地址