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

在这个信息爆炸的时代，我们似乎习惯了把数据交给云端。

但作为一名开发者，当涉及到敏感的会议记录、私人语音笔记时，我总是心存顾虑：

有没有可能打造一个完全离线、跑在浏览器里、且终身免费的AI会议助手？

面对复杂的 WebAssembly、模型量化、多线程调度，作为一个非专业的开发者，我通常需要几周来啃文档。

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

00｜项目背景：开发一个隐私优先的会议助手

市面上的会议记录软件确实好用，但它们有两个致命弱点：

• 隐私黑盒：数据必须上传云端，对于公司内部机密或个人隐私内容，这始终是个隐患。
• 依赖网络：在高铁、飞机或网络不佳的环境下，这些工具直接"变砖"。

因此，我想基于开源社区最火的 Whisper（语音识别）和一个能够本地化部署的大语言模型，开发一个纯前端、零服务端、完全离线的 Web 应用。要求如下：

• 隐私绝对安全：断网也能用，数据不出本地。
• 零成本：不花钱买 Token，不买服务器。
• 体验要丝滑：不能因为跑模型把浏览器卡死。

我不熟悉 WebAssembly，也没搞过模型量化。如果纯手写，光环境配置就十分劝退。于是，我直接把难题抛给了我的专属 AI 工程师------文心快码（Comate） 。

01｜架构设计

我没有直接开始写代码，而是先向Plan智能体抛出了我的想法。

点击对话窗口左下角，即可切换不同子智能体⬆️

然后，用自然语言给出需求。

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

Plan智能体 迅速扮演了架构师的角色，1分钟内就为我输出了一份详细的技术选型与可行性分析：

# 技术选型与可行性分析报告
## 1. 核心引擎选型
**推荐方案：Transformers.js + ONNX Runtime Web**
理由：这是 Hugging Face 的官方 JS 实现，支持直接在浏览器端运行 .wasm 格式的深度学习模型。
## 2. 关键架构建议
⚠️ **风险预警：** AI 推理是计算密集型任务，如果在主线程运行，会导致 UI 界面完全冻结（假死）。
**解决方案：** 必须采用 Web Worker 架构。将 AI 模型加载和推理逻辑完全隔离在后台线程，通过 postMessage 与主界面通信。
## 3. 模型演进路线
**Phase 1 (验证)：** 使用 Xenova/whisper-tiny (约 40MB)。速度快，但中文识别可能出现幻觉（如输出繁体或乱码）。
**Phase 2 (生产)：** 升级为 Xenova/whisper-small (约 240MB)。中文准确率不仅大幅提升，且支持自动标点。
## 4. 数据流设计
```
Input (MP3/WAV) -> AudioContext (重采样至 16kHz) -> Web Worker -> Whisper Model -> Text/Timestamps
```
## 5. 技术实施计划
### 阶段一：基础架构搭建
- [ ] 搭建 Web Worker 通信框架
- [ ] 实现音频文件处理和重采样逻辑
- [ ] 集成 Transformers.js 库
### 阶段二：核心功能开发  
- [ ] 实现 whisper-tiny 模型加载和语音识别
- [ ] 开发时间戳生成功能
- [ ] 构建主界面与 Worker 通信机制
### 阶段三：优化升级
- [ ] 升级到 whisper-small 模型
- [ ] 优化中文识别准确率
- [ ] 添加自动标点功能
### 阶段四：生产部署
- [ ] 性能测试和优化
- [ ] 错误处理和用户体验优化
- [ ] 生产环境部署
## 6. 风险评估与应对
| 风险类型 | 风险描述 | 应对措施 |
|---------|---------|---------|
| 性能风险 | 模型推理导致界面冻结 | Web Worker 隔离，进度反馈 |
| 兼容性风险 | 浏览器对 WebAssembly 支持不一 | 渐进式降级，兼容性检测 |
| 模型风险 | 中文识别准确率不足 | 模型升级，后处理优化 |
| 网络风险 | 模型下载失败或缓慢 | 本地缓存，CDN 加速 |
## 7. 成功指标
- ✅ 语音识别准确率 > 85%
- ✅ 界面响应时间 < 100ms  
- ✅ 模型加载时间 < 30秒
- ✅ 支持主流音频格式
- ✅ 跨浏览器兼容性

⬆️这份文档清晰地规划了：

• 核心引擎：推荐使用 Transformers.js，这是 Hugging Face 的 JS 版本，支持在浏览器端运行 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-tiny 升级为 whisper-small，显著提高了中文转录的准确率。

至此，我的应用已经能把声音转成文字了，虽然只是一大段纯文本。

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

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

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

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

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

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

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

// [worker.js] 开启时间戳与语言锁定
const transcriptionOptions = {
    task: 'transcribe',
// 关键升级：开启时间戳，返回 [start, end] 数据
    return_timestamps: true,
    chunk_length_s: 30,
    ...options
};

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

// [index.html] 渲染带时间戳的字幕列表
renderTranscript(chunks) {
    const container = document.getElementById('transcript');
    const player = document.getElementById('audioPlayer');
    container.innerHTML = '';

    chunks.forEach(chunk => {
        if (!chunk.text.trim()) return;

        const div = document.createElement('div');
        div.className = 'transcript-line';
        const [start, end] = chunk.timestamp; // 获取时间戳
        
        // 显示格式化的时间标签
        div.innerHTML = `<span class="timestamp">[${this.fmtTime(start)}]</span>${chunk.text}`;
        
        // 核心交互：点击文字，播放器跳转到对应时间
        div.onclick = () => { 
            player.currentTime = start; 
            player.play(); 
        };

        container.appendChild(div);
    });
}

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

// 语言锁定逻辑：防止模型把中文误翻译成英文
if (transcriptionOptions.language === 'chinese') {
    transcriptionOptions.language = 'zh'; // 强制使用 'zh' 代码
}

使用体验如文章内视频所示👉 mp.weixin.qq.com/s/jjuWFmMG0...

🔽小tips：想让Comate手把手教学代码含义，可以点击"代码解释"开启哦

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

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

我要引入一个本地的大语言模型，让它帮我自动总结会议纪要和待办事项。要求使用中文能力较好的大模型，且必须按需加载，不要一上来就下载几百兆文件。

Comate 帮我进行了全栈升级：

1.双模型调度：Comate 修改了后台架构，实现了听觉模型和LLM的独立加载逻辑。

// [worker.js] 双模型独立调度架构
self.addEventListener('message', async (event) => {
const { type, data } = event.data;

switch (type) {
case'load_asr': 
// 仅加载听觉模型 (Whisper)，速度快
            await handleLoadASR();
break;

case'load_llm': 
// 用户点击开关后，才加载大脑模型 (Qwen)，按需占用内存
            await handleLoadLLM();
break;

case'generate':
            await handleTranscription(data);
break;

case'summarize':
            await handleSummarization(data);
break;
    }
});

2.Prompt 工程：Comate 甚至帮我内置了一套 Prompt："你是一个专业的会议秘书，请提取摘要和 Todo..."，让小模型也能输出高质量结果。

// [worker.js] 内置 Prompt 工程
const messages = [
    { 
        role: "system", 
        content: "你是一个专业的会议秘书。请根据以下会议记录，提取核心摘要、关键点和待办事项(Todo)。"
    },
    { role: "user", content: text }
];

// 构建符合 Qwen 模型规范的提示词格式
const prompt = `<|im_start|>system\n${messages[0].content}<|im_end|>\n<|im_start|>user\n${messages[1].content}<|im_end|>\n<|im_start|>assistant\n`;

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

// [worker.js] 进度条防御性代码
function createProgressCallback(modelName){
    return (data) => {
        let percent = 0;
        if (data.total && data.loaded) {
            percent = (data.loaded / data.total) * 100;
        }

        // 防御性编程：如果算出来是 NaN (因为缺少 content-length)，则设为 -1
        if (isNaN(percent) || !isFinite(percent)) {
            percent = -1; 
        }

        self.postMessage({
            status: 'progress',
            progress: percent, // 前端根据 -1 显示"下载中..."而非"NaN%"
            message: percent >= 0
                ? `正在下载 ${modelName}: ${percent.toFixed(1)}%` 
                : `正在下载 ${modelName} (数据量较大)...`
        });
    };
}

最后，为了验证产品表现，我上传了一段开源的胡言乱语测试音频。

👇它竟然一本正经地为我总结出了"待办事项：了解景点背景"，并且通过正则清洗技术，完美去除了模型原本输出的 system/user 等乱码标签。

✨最后，让我们一起验收下，这个0代码、0设计稿、1小时内开发出的小程序，究竟效果怎么样：

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

03｜总结与思考

在点击 GitHub Pages 部署按钮的那一刻，我意识到：开发者的门槛正在被重塑。

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

• 产品经理：帮我梳理"离线隐私"的产品定位。
• 架构师：帮我设计 Web Worker 多线程架构。
• 资深前端：帮我解决 AudioContext 重采样和 DOM 操作的疑难杂症。
• AI 工程师：帮我搞定了模型量化加载和 Prompt 清洗。

通过与Comate的深度协作，我把原本需要一周 调研+开发的"硬核技术需求"，压缩到了 2 小时的落地实践。

对于开发者而言，不再需要精通每一个领域的细枝末节（比如 WASM 的内存管理），我们只需要拥有清晰的逻辑和精准的表达。

未来，随着 WebGPU 算力的进一步释放，这个网页完全可以进化为更强大的'第二大脑'------它不仅能支持实时声纹识别（区分是谁在说话），甚至能引入本地向量数据库，让用户直接与过去一年的所有会议记录进行跨文档对话......而这一切，依然不需要上传哪怕 1KB 的数据到云端。

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

👇 别光心动，现在就上手开造！

一键下载 Comate，把你的脑洞变成现实

点我跳转：comate.baidu.com/zh/download...

方式一：下载Comate AI IDE，享受丝滑开发过程

方式二：在 VS Code 或 Jetbrains IDE 中搜索"文心快码"插件，安装即用

如果你也有一个想实现的点子

不妨下载文心快码

让它成为你的「专属工程师」！

谁知道呢，下一个爆款应用

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