打造一个「隐私至上」的本地会议助手！

共计 3315 个字符，预计需要花费 9 分钟才能阅读完成。

打造一款完全离线的 AI 会议助手：我的开发历程 在当今信息爆炸的时代，许多人已经习惯将数据存储在云端。 然而，作为一名开发者，当涉及到敏感的会议记录和私人语音笔记时，我总是心中充满疑虑： 是否能够实现一个完全离线运行、在浏览器中使用、并且终身免费的 AI 会议助手呢？ 面对复杂的 WebAssembly、模型量化以及多线程调度，作为一个非专业开发者，我往往需要几周的时间来消化相关文档。 幸运的是，在 文心快码（Comate）的帮助下，我仅花费了 2 小时 就顺利完成了这个会议助手的全栈开发。 <h3 id='pk-menu-0'>00|项目背景：构建一个以隐私为核心的会议助手</h3> 市面上的会议记录软件确实非常实用，但它们存在两个致命缺陷： <ul> <li> 隐私风险：数据需要上传到云端，这对公司机密或个人隐私而言始终是个隐患。 </li> <li> 网络依赖：在高铁、飞机或网络不稳定时，这些工具会变得无用。 </li> </ul> 因此，我决定基于开源社区广受欢迎的 Whisper（语音识别技术）和能够本地化部署的大型语言模型，开发一个 完全前端、无服务端、完全离线的 Web 应用。具体要求如下： <ul> <li> 绝对安全的隐私：即使断网也能使用，数据不离开本地。 </li> <li> 零成本：无需购买 Token，也不需要服务器。 </li> <li> 流畅的体验：不能因为模型运行导致浏览器卡顿。 </li> </ul> 由于我对 WebAssembly 不熟悉，也没有进行过模型量化的经验，单靠手动配置环境会让我感到望而却步。因此，我将这个难题交给了我的专属 AI 工程师——文心快码（Comate）。 <h3 id='pk-menu-1'>01|架构设计</h3> 我没有急于编写代码，而是首先向 Plan 智能体 提出了我的构想。 <img decoding="async" data-src="https://www.chat2024.cn/wp-content/uploads/2026/04/image-Oq6R5z.webp" data-lazy="true" src="https://www.chat2024.cn/wp-content/themes/wordpress-theme-puock-master/assets/img/z/load.svg" loading="lazy"> 点击对话窗口左下角，可以切换不同的子智能体⬆️ 接着，我用自然语言描述了我的需求。 <blockquote class="bjh-blockquote"> 我想要一个完全离线的 AI 会议助手，请给我一个可行的技术方案。 </blockquote> Plan 智能体 迅速成为架构师，在 1 分钟内 为我提供了一份详细的技术选型和可行性分析： ⬆️这个文档清晰地列出了： <ul/> <li> 核心引擎：推荐使用 Transformers.js，这是 Hugging Face 的 JS 版本，支持在浏览器中运行 Whisper。 </li> <li> 架构建议：为防止 AI 推理阻塞主线程，必须采用 Web Worker 进行多线程隔离。 </li> <li> 模型选择：建议初期使用 whisper-tiny 进行验证，后续升级为 whisper-small 以提高中文的准确性。 </li> </ul> 这份报告让我省去了 至少 3 天 的调研和学习时间，并迅速理清了思路：这个项目是可行的，而且路径清晰。 <h3 id='pk-menu-2'>02|产品开发与功能迭代</h3> 我与 Comate 进行了 5 次交互，迭代了 3 个版本。 <img decoding="async" src="https://www.chat2024.cn/wp-content/uploads/2026/04/image-aioQTN.webp" loading="lazy"> <h3 id='pk-menu-3'>🐒 初始版本：能够运行，但“胡言乱语”</h3> 万事开头难，第一步是让浏览器“听懂”人类的语言。为了追求速度，我们选择了 whisper-tiny 模型。 <blockquote class="bjh-blockquote"> 请帮我搭建项目框架。我需要一个 Web Worker 脚本来独立运行 whisper-tiny 模型，主界面负责上传音频。Whisper 模型对音频采样率要求极高，必须处理好。 </blockquote> Zulu 智能体 迅速生成了 worker.js 的核心逻辑，并特别实现了单例模式，以防止重复点击导致内存问题。 <img decoding="async" src="https://www.chat2024.cn/wp-content/uploads/2026/04/image-CxF8EM.webp" loading="lazy"> 在处理音频采样率的问题时，Comate 自动编写了一段基于 OfflineAudioContext 的重采样代码，将各种格式的音频（MP3/M4A）强制转换为模型所需的 16000Hz。 <img decoding="async" src="https://www.chat2024.cn/wp-content/uploads/2026/04/image-n6lXgS.webp" loading="lazy"> 初次运行时，我遇到了经典的“UI 假死”问题，进度条没有反应。 直接用简单明了的语言向 Code Review 智能体询问： <blockquote class="bjh-blockquote"> 界面没有反应，控制台显示 Cannot read properties of null，该如何解决？ </blockquote> Code Review 迅速发现，问题在于我在更新状态文字时，不小心覆盖了进度条的 DOM 节点。它立刻提供了修复方案，将文字和进度条的 DOM 结构分开。 <img decoding="async" src="https://www.chat2024.cn/wp-content/uploads/2026/04/image-Ept7Vw.webp" loading="lazy"> 当 whisper-tiny 可以正常运行后，我让 Zulu 将模型升级到 whisper-small，显著提升了中文转录的准确性。 <img decoding="async" src="https://www.chat2024.cn/wp-content/uploads/2026/04/image-X9lend.webp" loading="lazy"> 至此，我的应用已能将声音转化为文字，尽管只是简单的一段纯文本。 <img decoding="async" src="https://www.chat2024.cn/wp-content/uploads/2026/04/image-8IsEXX.webp" loading="lazy"> <h3 id='pk-menu-4'>🤯交互重构：实现音文同步</h3> 面对屏幕上密密麻麻的文字，我提出了更高的需求。 <blockquote class="bjh-blockquote"> 现在的纯文本太难以阅读了。我希望能实现以下效果： 文字按时间戳分段显示。 点击某一段文字时，音频能够自动跳转到对应位置播放。 播放时，文字能够高亮跟随。 </blockquote> Comate 重新设计了 worker.js 的返回数据结构，开启了 return_timestamps: true 选项，不仅返回了文字，还返回了每句话的[开始时间，结束时间]。 随后，它重写了前端渲染逻辑，生成了一个包含点击事件的列表。当我再次运行项目并上传一段测试录音时，看到文字随着声音逐行高亮，那种专业产品的质感瞬间显现出来。 此外，针对“中英文混杂”的问题，Comate 还建议我在代码中增加语言锁定逻辑，以防模型将中文误翻译成英文。 使用体验如文章内视频所示👉https://mp.weixin.qq.com/s/jjuWFmMG0IJR3M8x-JPdqg 🔽小贴士：想要让 Comate 手把手教你代码的含义，可以点击“代码解释”来开启哦。 <img decoding="async" data-src="https://www.chat2024.cn/wp-content/uploads/2026/04/image-GqhhCC.webp" data-lazy="true" src="https://www.chat2024.cn/wp-content/themes/wordpress-theme-puock-master/assets/img/z/load.svg" loading="lazy"> <h3 id='pk-menu-5'>🤩注入灵魂：连接本地 AI 大脑</h3> 最终，我希望这个工具不仅仅能“听”，还能够“思考”。 <blockquote class="bjh-blockquote"> 我计划引入一款本地的大型语言模型，以便自动化地整理会议记录和待办事项。此模型需具备较强的中文处理能力，并且应按照需求加载，而不是一次性下载几百兆的数据。 </blockquote> Comate 为我进行了全面的升级： 1. 双模型调度：Comate 对后台架构进行了改进，使得听觉模型和 LLM 能够独立加载。 2. Prompt 工程：Comate 还为我构建了一套内置的提示语：“你是一名专业的会议秘书，请提取摘要和待办事项 …”，以确保小模型能够生成高质量的输出。 3. 体验优化：为了解决大模型文件过大所引发的进度条显示 NaN% 的问题，Comate 编写了防护代码，并设计了一个优雅的“🧠 启用 AI 大脑”开关。 最终，为了测试产品的表现，我上传了一段开源的无意义测试音频。 👇令人惊讶的是，它竟然认真地为我总结了“待办事项：了解景点背景”，并通过正则清洗技术，完美去除了模型输出中的 system/user 等乱码标签。 ✨现在，让我们一起来看一下，这个无需编写代码、无需设计稿、在一小时内开发完成的小程序的实际效果： 🔗实际测试效果，您可以复制以下网址使用：https://chen-chen429.github.io/local-whisper-note/ <h3 id='pk-menu-6'>03|总结与反思</h3> 当我点击 GitHub Pages 部署按钮的瞬间，我意识到：开发者的准入门槛正在发生变化。 在这个项目里，文心快码（Comate）不仅是一款代码补全工具，它实际上承担了多个角色： <ul> <li> 产品经理：帮助我明确“离线隐私”的产品定位。 </li> <li> 架构师：协助我设计 Web Worker 多线程架构。 </li> <li> 资深前端：解决 AudioContext 重采样和 DOM 操作的各种问题。 </li> <li> AI 工程师：负责模型量化加载和提示语清洗的实现。 </li> </ul> 通过与 Comate 的紧密合作，我将原本需要 一周 的调研与开发的“技术需求”，压缩到了 2 小时 的实际应用。 对于开发者而言，不再需要掌握每个领域的细节（例如 WASM 的内存管理），我们只需具备清晰的思路和精准的表达能力。 未来，随着 WebGPU 计算能力的进一步提升，这个网页有潜力演变为更强大的“第二大脑”——它不仅能够支持实时声纹识别（辨识说话者），还可以引入本地向量数据库，让用户与过去一年的所有会议记录进行跨文档对话 …… 而这一切，仍然无需上传任何数据到云端。 借助 Comate 的开发辅助，释放你的创造力，从现在开始。 👇 不要只是心动，马上动手实践！ 一键下载 Comate，让你的创意变为现实 点击跳转：https://comate.baidu.com/zh/download 方式一：下载 Comate AI IDE，享受流畅的开发体验 方式二：在 VS Code 或 Jetbrains IDE 中搜索“文心快码”插件，安装后即可使用 如果你也有想要实现的创意 不妨 下载文心快码 让它成为你的“专属工程师”！ 谁知道呢，下一个热门应用 也许就在你的一次尝试中诞生～

来源：百家号

原文标题：用文心快码写个「隐私优先」的本地会议助手

原文链接：https://baijiahao.baidu.com/s?id=1849730875391437517

声明：

文章来自网络收集后经过 ai 改写发布，如不小心侵犯了您的权益，请联系本站删除，给您带来困扰，深表歉意！