🚀

最近搞了一个挺有意思的项目：用 Vue3.5 + Node.js 从 0 到 1 打造一个生产级的 AI 多模态应用。

你可以在里面：

• 跟 AI 实时对话（支持流式打字动画）💬

• 输入文字，直接合成语音，秒变播音员🎙️

• 打开麦克风，“边说边写”，语音实时转文字🗣️→⌨️

• 甚至还能用一句话生成图片🎨！

👇先上个图镇楼：

---

🧠 项目背景 & 技术选型

传统 AI 应用一般只做到聊天或语音单点功能，我们的目标是——多模态整合，用户能在同一平台体验完整的 AI 能力。

技术栈选得都是最新稳定版，并且围绕“可维护性 + 性能 + 用户体验”下了不少功夫：

🧩 技术栈（核心）

• 前端： Vue 3.5 + Vite + Element Plus + Pinia + markdown-it

• 后端： Node.js + Express + Prisma + MySQL

• AI 模型： 接入字节的 豆包 多个模型：

  • 对话模型（支持快速&深度思考模式）

  • 图像生成（Seedream 4.0）

  • 语音合成（TTS）

  • 语音识别（ASR）

---

💡核心亮点拆解（开发者视角）

✅ 1. 登录 & 权限：安全做到了极致

我们不是简单写个登录接口就完事儿，而是：

• JWT + HttpOnly Cookie 存储，前后端自动鉴权

• 支持角色权限（用户 / 管理员）

• 防 CSRF / XSS，登出清除所有状态

• 密码加密用的是 bcrypt 单向哈希

体验上：用户完全无感，开发上也很省事。

---

🧠 2. AI 对话系统：双模型 + 流式输出

快速模式回答快，深度模式适合复杂逻辑问题。

难点是两个模型参数格式不一样，还要做流式输出（逐字显示）。

解决方案：

• 后端统一封装接口，自动判断模型类型

• 前端自定义 POST SSE 客户端，支持流式渲染

• 用户只管点按钮，打字效果很丝滑~

---

🔁 3. 聊天长列表不卡顿？我们用了虚拟滚动！

聊天记录多了，页面卡顿是常态？

我们用虚拟滚动 + 分页方案：

• 初始加载 20 条消息，支持滚动加载更多

• 可视区域 + buffer 区渲染，其他用 padding 占位

• 自动保持滚动位置，体验完全不打断

性能提升效果惊人：

项目	优化前	优化后
首屏加载	1.8 秒	0.3 秒
DOM 节点	2000+	40
滚动帧率	30~40fps	55~60fps

---

🔊 4. TTS 实时语音合成：0.5 秒内开口说话！

传统 TTS 有 3~5 秒延迟，这太慢了。

我们做了：

• 后端用 WebSocket 中继豆包 TTS 服务

• 前端用 Audio 标签边接收边播放

• 文本预处理（去 markdown、限制长度）

最终效果：基本做到了“输入即说话”，延迟控制在 0.5~1 秒之间！

---

📝 5. 富文本编辑器 + AI 写作助手

基于 WangEditor 二次封装：

• 支持选中文本生成续写内容

• 也可点击工具栏触发 AI

• 生成内容逐字输出，写完自动插入到光标处

优势： 非常适合写简历、方案、内容草稿之类的场景。

---

🎤 6. 语音转写（ASR）：真正做到“边说边写”

通过麦克风录音 → PCM 流传输 → 实时返回识别结果 → 实时填进文本框。

• 支持格式转换（Float32 → Int16 PCM）

• WebSocket 通信、错误重连机制

• 最小延迟识别结果，边说边填不掉帧

结果：打字效率 ×2，不用再手动输入长段内容。

---

🎨 7. 图片生成：不仅能画，还能保存得住

豆包图像生成是在线图片 URL，但 URL 1 小时就失效？

我们的处理方式：

• 后端自动将图片下载存到本地

• 支持智能识别格式，最多并发下载 4 张

• 本地路径写入数据库，图片长期可用

---

✅ 工程化细节补充

• 统一异常处理 & 日志记录（使用 Morgan）

• 接口响应格式统一（code/msg/data）

• 模块解耦清晰，方便后期功能扩展

• Prisma 类型推导 + 自动生成 SQL

• WebSocket 与 REST 协同管理连接状态

---

🧾 总结一下

你可以把这个项目理解成一个“轻量 AI 多模态平台”。

✔ 安全性：JWT + Cookie + 加密✔ 用户体验：流式、实时、不卡顿✔ 工程质量：架构清晰，代码规范，日志可观测✔ AI 能力：对话 + 语音 + 图像，多模态整合✔ 可维护性：模块化开发，方便继续扩展新模型、新功能

---

从0到1打造一款具备Ai聊天，AI写作，文生图，语音合成，语音识别功能的多模态全栈项目，多模态AI项目开发链接