一、项目描述：

        这是个给AI问答系统加语音播报和动画的智能助手项目。简单说就是用户问问题，AI回答的时候，右下角会出现一个会说话的小人，把答案用语音念出来，同时还有动画效果，体验特别好。

        技术上用Vue3做的，封装成Web组件，可以插到任何项目里。核心功能是自动监听AI的回答流，拿到完整文本后调TTS接口转成语音，然后让音频和视频动画同步播放。还做了防抖和请求取消，解决了用户快速连续提问时语音重叠和接口报错的问题。整体架构比较轻量，不影响原有业务，集成也很方便。

二、前端项目亮点与技术难点

1.项目架构：Vue3 + Web Components 混合架构使用 

• defineCustomElement

   将 Vue 组件转换为原生 Web Component

• 实现跨框架复用，可嵌入任何前端项目（React、Angular、原生JS）

• 封装完整的生命周期管理（mount、unmount、dispose）

2. SSE流式响应拦截与解析（⭐核心难点）

// 重写全局 fetch，无侵入式拦截 SSE 流
const originalFetch = window.fetch;
window.fetch = async function(...args) {
    // 检测 text/event-stream 类型
    // 实时解析流式数据
    // 累积完整文本后触发 TTS
}

3.技术难点：

• 需要创建新的 ReadableStream 透传给原始调用者，不影响业务逻辑

• 实时解析 SSE 数据格式（

  data: {...}

  ）

• 处理 EOF 标记，精确判断流结束时机

• 避免重复触发（isEOF 标记）

4. 音视频同步播放控制（⭐技术亮点）

// 全局单例管理
let currentAudio: HTMLAudioElement | null = null;
let currentVideo: HTMLVideoElement | null = null;
let currentAbortController: AbortController | null = null;

实现要点：

• 音频驱动视频：通过 

  audio.onplay

   事件同步启动视频

• 全局状态管理：确保同一时刻只有一个音视频在播放

• 资源自动释放：

  URL.revokeObjectURL

   防止内存泄漏

5. 请求取消与防抖机制（⭐性能优化）

// AbortController 取消未完成的请求
if (currentAbortController) {
    currentAbortController.abort();
}

// 防抖标记避免重复调用
if (isPlayingTTS) return;

解决问题：

• 快速连续提问导致 TTS API 500错误

• 服务端过载保护

• 提升响应速度（立即处理最新请求）

6. 智能文本清洗

const cleanedText = text
    .replace(/\n/g, ' ')              // 换行符
    .replace(/#{1,6}\s*/g, '')        // Markdown标题
    .replace(/\*\*|\*|__|_/g, '')     // 加粗斜体
    .replace(/```[\s\S]*?```/g, '')   // 代码块
    .replace(/`[^`]+`/g, '')          // 行内代码
    .replace(/\s+/g, ' ')             // 多空格合并

价值：确保 TTS 播报内容自然流畅，无技术标记干扰

三、💡 技术难点攻克：

难点1：SSE流式响应的透明拦截

挑战：既要拦截数据做处理，又不能影响原有业务逻辑
解决方案：

• 创建新的 ReadableStream 作为代理

• 使用 

  controller.enqueue(value)

   透传原始数据

• 在透传的同时进行数据解析和累积

难点2：多媒体资源的生命周期管理

挑战：频繁创建音视频对象导致内存泄漏
解决方案：

• 全局单例模式管理音视频实例

• 播放结束后立即释放 Blob URL

• 使用 

  onended

   和 

  onerror

   事件确保资源清理

难点3：高并发场景下的稳定性

挑战：用户快速连续提问导致 TTS API 崩溃
解决方案：

• AbortController 取消机制

• 防抖逻辑（isPlayingTTS 标记）

• 优雅的错误处理（区分 AbortError 和真实错误）

难点4：跨框架组件封装

挑战：Vue 组件如何在非 Vue 项目中使用
解决方案：

• 使用 Web Components 标准

• 提供标准化的 API 接口（initialize、cleanup、createWidget）

• 单例模式确保全局唯一实例

技术栈

• 框架：Vue 3 + TypeScript

• 构建工具：Vite

• 核心技术：

  • Web Components API

  • Server-Sent Events (SSE)

  • AbortController API

  • Web Audio API

  • HTML5 Video API

  • Reactive State Management

四、后端项目亮点与技术难点

智能AI助手平台 - 智能助手

• 项目定位: 企业级AI对话助手平台，集成TTS语音合成

• 技术架构: 微服务架构 + 流式响应 + 容器化部署

一、💻 后端技术栈

核心框架

• Spring Boot - 主框架

• Spring WebFlux - 响应式编程，支持流式响应

• Reactor - 异步非阻塞流处理

AI集成

• 企业公司AI平台 - 企业级AI智能体框架

• LLM Chat Agent - 大语言模型对话代理

• 流式对话 - 实时响应用户交互

语音技术

• TTS服务 - 文本转语音

• Edge TTS - 微软语音合成

• Coqui TTS - 开源语音合成引擎

• 音频流处理 - 实时音频数据传输

二、🌟 项目亮点

1. 流式响应架构

Flux<CompletionMessage> startConversation(List<ConversationMessage> messages)

Copy

• 使用 Reactor Flux 实现流式对话

• 实时响应，提升用户体验

• 支持大文本分块传输

2. 智能文本预处理

• Markdown清理 - 移除格式标记，优化TTS效果

• 正则表达式 - 复杂文本清洗算法

• 多语言支持 - 中英文混合处理

3. 微服务架构

• 服务解耦 - TTS，

• 配置外化 - 支持多环境配置

三、🔥 技术难点

1. 流式响应与TTS集成

难点: 流式文本如何完整收集用于语音合成
解决方案:

StringBuilder fullResponse = new StringBuilder();
Flux<CompletionMessage> responseStream = stream
    .doOnNext(msg -> fullResponse.append(msg.getContent()))
    .doOnComplete(() -> triggerTTS(fullResponse.toString()));

Copyjava

2. 历史消息过滤

难点: 对话历史中混杂Widget数据，影响AI理解
解决方案:

• 智能过滤包含audioData的消息

• 检测超大消息（>10KB）

• 只保留纯文本对话

3. 前端音频播放时序

难点: Vue组件渲染与音频播放时序冲突
解决方案:

• 绕过DOM依赖，直接使用Audio API

• 简化架构，提高可靠性

四、🎯 面试要点

技术深度

• 响应式编程: Flux/Mono的使用场景和优势

• 微服务设计: 服务拆分原则和通信方式

• AI集成: 企业级AI平台的架构理解

问题解决

• 性能优化: 流式响应减少首屏等待时间

• 用户体验: TTS让AI更人性化

• 系统稳定: 容器化部署保证服务可用性

业务价值

• 企业数字化: AI助手提升工作效率

• 技术创新: 语音交互的前沿探索

• 平台化: 可复用的AI服务架构

核心竞争力: 在企业级AI平台基础上，实现了流式对话+语音合成的完整解决方案，具备从架构设计到技术实现的全栈能力。