在 LLM（大语言模型）爆发的今天，市面上已经有了很多优秀的 Chat 客户端。但为了更深入地理解大模型的交互逻辑，特别是最近大火的 DeepSeek R1 模型的“思维链”（Chain of Thought）展示，我决定动手开发一个全栈的 AI 对话应用 —— Shimmer AI ChatBot。
这是一个前后端分离的项目，旨在解决长文本对话性能、推理过程可视化以及多模态交互等痛点。
🚀 项目概览#
Shimmer AI ChatBot 分为前端和后端两个仓库，分别处理极致的交互体验和复杂的业务逻辑。
- 前端：Vue 3 + TypeScript + Vite + Tailwind CSS
- 后端：Django + DRF + MySQL + DeepSeek API
💡 核心亮点与技术实现#
1. DeepSeek 思维链 (CoT) 可视化#
DeepSeek R1 模型的一大特色是输出包含 reasoning_content（推理过程）。在 Shimmer 中，我专门设计了 Reasoner 组件：
- 后端处理：能够分离模型的思考过程与最终回复，并通过 SSE（Server-Sent Events）流式推送给前端。
- 前端展示：实现了类似官方的可折叠“思考过程”面板，用户可以清晰地看到 AI 是如何一步步得出结论的，增强了交互的透明度。
2. 流式响应与打字机效果#
为了减少用户的等待焦虑，应用全链路支持流式输出：
- 后端使用 Django 的
StreamingHttpResponse实现 SSE 协议，毫秒级推送字符。 - 前端实时解析流数据，呈现丝滑的打字机效果，支持暂停和继续生成。
3. 极致性能：虚拟滚动#
在与 AI 进行长对话时，DOM 节点数量会迅速膨胀，导致页面卡顿。
- 引入了
vue-virtual-scroller，无论对话有多少条（即使数千条），DOM 中仅渲染可视区域的消息。 - 配合智能滚动控制：新消息自动跟随底部，但当用户查看历史消息时自动暂停滚动，细节体验拉满。
4. 多模态文件解析 (OCR & PDF)#
不只是纯文本对话，后端内置了强大的 ETL 管道：
- OCR：集成
Tesseract-OCR，支持 JPG/PNG 图片文字提取。 - 文档解析：使用
pdfplumber解析 PDF 内容。 - 代码注入：支持直接读取
.py,.js,.md等文件内容作为上下文发送给模型。
🛠️ 技术栈细节#
前端 (Frontend)#
前端构建在 Vue 3 生态之上，追求现代化的开发体验和 UI 表现：
- UI 框架：使用
Tailwind CSS+shadcn-vue，实现了极简且美观的界面，支持深色模式切换。 - 状态管理：
Pinia管理会话状态、用户设置和模型配置。 - Markdown 渲染：完美支持代码高亮、LaTeX 数学公式和表格渲染。
后端 (Backend)#
后端选择 Django + DRF 是看重其稳定性和扩展性：
- 认证：基于
SimpleJWT实现无状态认证，配合自定义用户模型（8位随机 UID）。 - API 文档：集成
drf-spectacular，自动生成 OpenAPI 3.0 标准文档（Swagger/Redoc）。 - 存储：MySQL 8.0 存储业务数据，媒体文件（头像、附件）本地文件系统管理。
📸 界面展示#
🔗 项目地址#
如果你对这个项目感兴趣，或者想复刻一套自己的 AI 助手，欢迎访问 GitHub 仓库，觉得不错可以点个 Star ⭐️！
- 前端仓库: Shimmer-AIChatBot ↗
- 后端仓库: Shimmer-AIChatBot_backend ↗
Designed with ❤️ by Shane