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

deepseek相关资料

• 深度集成DeepSeek大模型：WebSocket流式聊天实现
• 零代码玩转AI视频革命：StoryFlicks×DeepSeek极速融合指南
  

实现的效果

• 待机页面：
  

• 等待页面：
  

• 完成页面：
  

前言

随着人工智能技术的飞速发展，大模型对话系统已成为许多应用的核心组件。为了提供一个高效、智能且用户友好的对话界面，我们开发了一款基于 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 开发，提供完整类型支持，提升开发体验与可靠性。
• 深度主题定制能力：支持细粒度的样式调整，满足各种场景的个性化需求。

添加欢迎组件

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

<Welcome
  icon="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 (
        <Bubble
          key={index}
          style={{ marginBottom: 8 }}
          placement="end"
          content={item.content}
          messageRender={renderMarkdown}
          avatar={{ icon: <UserOutlined />, style: fooAvatar }}
        />
      );
    } else if (item.role === 'assistant') {
      return (
        <Bubble
          key={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 组件来处理用户输入和消息发送。

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

源码下载地址