用 Falaí 实现实时语音翻译
用 Falaí 实现实时语音翻译
在 bosq,我们热衷于将复杂的想法转化为简洁、专注、真正可用的产品。Falaí 正是这一理念的体现:一款面向面对面交流场景的实时同声传译 应用,专为两位说不同语言的人设计,整个交互被浓缩为一个动作——旋转、按住、开口说话。
Falaí 是什么
Falaí 是一款开源的实时语音翻译应用,专为两人面对面对话场景而构建。整个体验围绕屏幕上的一个拨盘展开:旋转拨盘选择语言,按住说话,另一种语言的译文随即以语音输出——没有多余的按钮,没有技术面板,也没有"源语言"或"目标语言"这类术语来打断对话节奏。
项目基于 Vite、React、TypeScript、Tailwind CSS、Framer Motion 以及浏览器原生 WebRTC 构建。最终构建产物为纯静态文件,仅包含 HTML、CSS 和 JavaScript,无后端、无 API 路由、无 Serverless 函数、无数据库、无身份验证、无数据分析。
我们为什么在 bosq 构建这个项目
在 bosq,我们的工作方式强调范围清晰、增量交付与可验证的成果。Falaí 正是这一方法论应用于具体问题的案例:如何以最小的技术复杂度实现实时语音同传,同时做到无密钥托管、无自有服务器、对终端用户零摩擦。
我们不把 AI 当作嵌入在臃肿技术栈中的"魔法层",而是倾向于设计每一个架构决策都有明确目的的产品。在 Falaí 中,这体现为纯浏览器架构——浏览器直接与 OpenAI 的实时 API 通信,无需任何中间层。
纯浏览器架构与 BYOK 模式
Falaí 采用 BYOK(自带密钥) 模式:用户在浏览器中输入自己的 OpenAI API 密钥,所有使用费用均计入该密钥对应的账户。这一选择经过深思熟虑,具有重要意义:
- 密钥仅保存在内存中。
- 不会写入
localStorage、sessionStorage或 Cookie。 - 不经过 Falaí 的任何服务器——因为 Falaí 根本没有服务器 。
- 页面刷新或关闭后立即清除。
浏览器通过 navigator.mediaDevices.getUserMedia、RTCPeerConnection 以及用于字幕增量传输的 oai-events 数据通道直接连接 OpenAI。翻译后的音频通过 <audio autoplay /> 元素播放,MVP 阶段使用的模型为 gpt-realtime-translate,专为实时语音到语音翻译而设计。
对话拨盘:将界面本身做成产品
Falaí 的核心设计之一是对话拨盘(Conversation Dial)。拨盘显示当前激活的语言,交互仅需两个手势:水平拖动旋转拨盘以切换语言,按住以开始说话。当前翻译方向以直观的方式呈现,例如 葡萄牙语 → English。
界面上没有独立的"用户 A"和"用户 B"按钮,也不出现 source、target、input、output 等技术术语。这种极简化是刻意为之的:这款产品是一个语音口译工具,而非技术演示平台。正是这种界面上的克制,让用户能够在真实对话中随时使用,而不打断交流的节奏。
PWA 与静态部署
Falaí 包含 manifest.webmanifest、应用图标以及位于 public/sw.js 的静态 Service Worker。构建完成后,dist/ 目录可直接发布到任意静态托管平台——Netlify、Vercel Static、Cloudflare Pages、GitHub Pages 或任何 CDN——并可作为 PWA 安装,通过 HTTPS 访问麦克风。
这一决策与 BYOK 模式一脉相承:零基础设施、零持续成本、零用户数据托管。这款应用本质上就是一组由 CDN 分发的静态文件,每位用户直接在自己的浏览器中运行独立会话。
这个项目说明了什么
Falaí 不仅仅是一个翻译工具,它展示了一种我们认为极具价值的构建范式:
- 在用例允许的情况下,优 先采用纯浏览器架构;
- 将 BYOK 作为托管第三方密钥的真实替代方案;
- 将界面精简至最核心的交互手势;
- 直接调用实时 API,避免重复发明中间层;
- 以开源为基础,支持演进、Fork 与实验。
这一范式可广泛应用于其他场景:专业语音助手、现场辅助副驾驶、无障碍工具、旅行应用,以及任何对话延迟比后端复杂度更重要的场景。
局限性与生产环境注意事项
Falaí 有意识地定位为 MVP。由于没有后端,无法在应用中隐藏默认密钥,因此 BYOK 是自然而然的选择——用户应为 Falaí 单独生成一个具有适当限额和权限的专用密钥。实际兼容性取决于浏览器支持情况、麦克风可用性、HTTPS 环境以及 OpenAI 当前的直连调用策略。iOS Safari 和 Android Chrome 需在真实设备上进行测试。
对于更大规模的生产场景,更安全的架构方案是引入一个轻量后端来生成临时客户端密钥,避免在浏览器中暴露 API 密钥。当前版本有意不采用这一方案,以保持应用可作为纯静态网站/PWA 发布,无需任何基础设施成本。演进路径已在 README 中明确说明。
探索这个项目
如果你想体验 Falaí、深入研究其纯浏览器架构,或将其作为实时语音产品的起点,欢迎访问代码仓库:
如果你的团队正在寻求将复杂交互转化为简洁产品——兼顾清晰的目标、专注的执行与适配用例的架构——欢迎联系 bosq。我们构建模块、AI 副驾驶、自动化流程与数据管道,从概念出发,直达真实落地。
Tags: #实时语音翻译 #人工智能 #OpenAI #开源 #BYOK #纯浏览器架构 #PWA #ReactJS #TypeScript #WebRTC #同声传译 #ViteJS #TailwindCSS #FramerMotion #前端架构 #语音应用 #RealtimeAPI #Web开发 #Bosq #Falaí