用 Vue3 + fetch-event-source 打造流式 AI 翻译平台：OCR + 大模型 + SSE 全链路实战

从 UI 工程师到 AI 应用架构者
13 年前，我的工作是让按钮在 IE6 上对齐；
13 年后，我用 fetch-event-source 订阅大模型的“思维流”，用 OCR 解锁图片中的文字——前端，正在成为 AI 产品的第一道体验防线。
最近，我基于 Vue 3 + Vite + TypeScript + Ant Design Vue 开发了一款企业级 AI 多语翻译平台。它支持：

• 
  
  
  
  • ✅ 文本/图片/文档多模态输入
    
  • ✅ 大模型动态切换（通义千问、DeepSeek 等）
    
  • ✅ 行业领域定制（医疗、法律、金融）
    
  • ✅ SSE 流式输出（使用 fetch-event-source）
    
  
  

今天，我将逐行拆解核心代码，带你复现这一高价值 AI 应用的前端架构。
一、技术选型：为什么是 fetch-event-source？

虽然浏览器原生支持 EventSource，但在现代前端工程中，我们更倾向使用 @microsoft/fetch-event-source：

• 
  
  
  
  • ✅ 基于 fetch，天然支持 AbortController（可取消请求）
    
  • ✅ 支持 自定义 headers（用于鉴权）
    
  • ✅ 更好的 TypeScript 类型支持
    
  • ✅ 与 Axios/Vite 生态无缝集成
    
  
  

安装：

1. npm install @microsoft/fetch-event-source

复制代码

二、OCR 图片识别：前端只管“传”和“显”

用户上传一张英文菜单截图，系统自动提取文字并翻译。前端不碰 OCR 算法，但要管理全流程状态。

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！