在当今这个信息泛滥的时代，越来越多的人选择将数据存储在云端。

然而，作为开发者，我在处理敏感的会议记录和私人语音笔记时，总是感到不安：

是否有可能开发出一个完全离线、在浏览器中运行，并且终身免费的AI会议助手呢？

面对复杂的WebAssembly、模型量化和多线程调度，作为一名非专业开发者，我通常需要耗费数周的时间来研究相关文档。

但这一次，在文心快码（Comate）的帮助下，我仅用2小时便完成了这个会议助手的全栈开发。

00｜项目背景：开发一个以隐私为核心的会议助手

市场上的会议记录软件虽然功能强大，但存在两个致命的缺陷：

• 隐私风险：数据必须上传到云端，这对公司内部机密或个人隐私而言，始终存在安全隐患。

• 网络依赖：在高铁、飞机或网络状况不佳的环境下，这些工具便失去了作用。

因此，我决定利用开源社区广受欢迎的Whisper（语音识别技术）和一个可本地部署的大语言模型，开发一个完全前端、无服务端、全离线的Web应用。我的要求包括：

• 绝对的隐私保护：断网也可使用，数据只保留在本地。

• 零成本：无需购买Token或服务器。

• 流畅的用户体验：模型运行不能导致浏览器卡顿。

由于我对WebAssembly并不熟悉，且从未进行过模型量化，单靠手动编写代码，环境配置的复杂性就让我感到望而却步。因此，我将这个难题交给了我的AI助手——文心快码（Comate）。

01｜架构设计

我并未直接开始编码，而是首先向Plan智能体表达了我的想法。

通过对话窗口左下角的选项，可以切换不同的子智能体⬆️

随后，我用自然语言描述了我的需求。

我想要一个完全离线的AI会议助手，请给我一个可行的技术方案。

Plan智能体迅速扮演了架构师的角色，在1分钟内为我提供了一份详尽的技术选型和可行性分析：

⬆️这份文档清晰地列出了：

• 核心引擎：推荐使用Transformers.js，这是Hugging Face的JavaScript版本，支持在浏览器中运行Whisper。

• 架构建议：为了避免AI推理卡住主线程，必须使用Web Worker进行多线程隔离。

• 模型选择：推荐初期使用whisper-tiny验证流程，后期升级为whisper-small以提高中文转录准确性。

这份报告直接为我节省了至少3天的调研和学习时间，并让我迅速理清思路：这个项目是可行的，路径也非常清晰。

02｜产品开发与功能迭代

与Comate协作的过程中，我进行了5次交互，迭代了3个版本。

🐒 初始版本：能够运行，但“胡言乱语”

万事开头难，第一步是让浏览器“听懂”人类语言。为了追求更快的响应，我们选择了whisper-tiny模型。

帮我构建项目骨架。我需要一个Web Worker脚本来独立运行whisper-tiny模型，主界面负责上传音频。Whisper模型对音频采样率要求极为严格，必须妥善处理。

Zulu智能体迅速生成了worker.js的核心逻辑，并特别实现了单例模式，以防止重复点击导致内存溢出。

在处理音频采样率这个“大坑”时，Comate自动编写了一段基于OfflineAudioContext的重采样代码，能够将任意格式的音频（如MP3/M4A）强制转换为模型所需的16000Hz。

在初次运行时，我遇到了经典的“UI假死”问题，进度条没有任何反应。

通过直接向Code Review智能体提问，我很快得到了解决方案：

界面没有反应，控制台报错Cannot read properties of null该如何处理？

Code Review立即发现，问题出在我在更新状态文字时，不小心覆盖了进度条的DOM节点。它迅速提供了修复建议，将文字和进度条的DOM结构分开。

在whisper-tiny成功运行后，我让Zulu帮助将模型升级为whisper-small，显著提升了中文转录的准确率。

到此为止，我的应用已经能够将声音转化为文本，尽管仅是一大段无格式的纯文本。

🤯交互重构：实现音文同步

面对屏幕上密密麻麻的文字，我提出了更高的要求。

现在的纯文本太难阅读了。我希望实现以下效果：

文字要按时间戳分段显示。

点击某一段文字，音频自动跳到对应位置播放。

播放时，文字要高亮跟随。

Comate重新设计了worker.js的返回数据结构，开启了return_timestamps: true选项，不仅返回文字，还附带每一句话的[开始时间, 结束时间]。

接着，它重写了前端渲染逻辑，生成了一个包含点击事件的列表。当我再次运行项目并上传一段测试录音时，看到文字随着声音逐行高亮，那种专业产品的质感瞬间显现。

此外，针对“中英文混杂”的问题，Comate还建议我在代码中增加语言锁定逻辑，以防止模型将中文错误翻译为英文。

使用体验如文章内视频所示👉https://mp.weixin.qq.com/s/jjuWFmMG0IJR3M8x-JPdqg

🔽小提示：想要Comate手把手解释代码含义，可以点击“代码解释”来开启哦

🤩注入灵魂：连接本地AI大脑

最后，我希望这个工具不仅能“听”，还能“思考”。

我计划引入一个本地的大型语言模型，旨在自动化会议纪要和待办事项的总结。希望使用的模型具备良好的中文理解能力，并且能够按需加载，而不是一开始就下载几百兆的数据。

Comate 进行了全面的升级：

1. 双模型调度：Comate 更新了后台结构，实现了听觉模型与大型语言模型的独立加载机制。

2. Prompt 工程：Comate 甚至为我定制了一套提示语：“您是专业的会议秘书，请提取摘要和待办事项...”，使得小模型也能生成高质量的输出。

3. 体验优化：为了应对大模型文件过大导致进度条显示 NaN% 的问题，Comate 编写了防御性代码，并设计了一个优雅的“🧠 启用 AI 大脑”开关。

最后，为了验证产品的效果，我上传了一段开源的杂音测试音频。

👇竟然它认真地为我总结出了“待办事项：了解景点背景”，并借助正则清理技术，完美去除了模型输出中的 system/user 等乱码标签。

✨接下来，让我们一起检验这个无需代码和设计稿、在1小时内开发的小程序，究竟效果如何：

🔗实测效果，可以复制以下网址使用：https://chen-chen429.github.io/local-whisper-note/

03｜总结与思考

当我点击 GitHub Pages 部署按钮的瞬间，我意识到：开发者的门槛正在重新定义。

在这个项目当中，文心快码（Comate）不仅仅是一个代码补全工具，它实际上承担了多个角色：

• 产品经理：协助我梳理“离线隐私”的产品定位。

• 架构师：帮助我设计 Web Worker 多线程架构。

• 资深前端工程师：解决了 AudioContext 重采样和 DOM 操作的各种难题。

• AI 工程师：帮助我完成模型量化加载和提示语清理。

靠着与 Comate 的紧密合作，我将原本需要一周时间进行调研和开发的“复杂技术需求”，缩短至2小时的实际操作。

对于开发者而言，已经不必掌握每个领域的细节（例如 WASM 的内存管理），只需具备清晰的逻辑思维与精准的表达能力。

展望未来，随着 WebGPU 算力的进一步释放，这个网页有潜力发展为更强大的“第二大脑”——不仅支持实时声纹识别（能够识别说话者），甚至能够引入本地向量数据库，使用户能够与过去一年的所有会议记录进行跨文档对话......而这一切，仍然无需上传任何数据到云端。

借助 Comate 的辅助开发，释放你的创造力，从现在开始。

👇 不要只是心动，立即动手开始创造吧！

一键下载 Comate，把你的创意变为现实。

点击这里前往：https://comate.baidu.com/zh/download

方式一：下载 Comate AI IDE，享受流畅的开发体验。

方式二：在 VS Code 或 Jetbrains IDE 中搜索“文心快码”插件，安装后即可使用。

如果你也有一个想要实现的创意，

不妨下载文心快码

让它成为你的“专属工程师”！

谁知道呢，下一个热门应用，

也许就会在你的一次尝试中诞生～