ASR Lab

配合 CoLearn 主项目的 ASR 识别率对比调试工具。独立部署，与主项目零耦合。

快速开始

cd asr-lab
npm install
npm run dev             # dev 模式，桌面 Chrome / Safari 调试用
npm run build           # 生产构建（含 iOS 15 语法降级）
npm run preview         # 起 preview 供 iOS 真机访问

真机测试走 preview（dev 不做语法降级，iOS 15 走不通，跟主项目一样的坑）：

npm run build
npm run preview
# 真机访问 http://<Mac 局域网 IP>:4173/

核心功能

1. 4 路 A/B 对比（主流程）

一次录音跑完两组正交组合：

	Linear 重采样	Recorder.SampleData 重采样
3A 全开	Track A	Track B
3A 全关	Track C	Track D

流程：

• getUserMedia 只能一次开一个 constraints，所以 3A-ON 和 3A-OFF 需要两次采集串行进行
• 同一次采集里的两路（Linear + Recorder）并发跑，共享 Float32 stream，变量收敛到"重采样"
• 两次采集请说同一段话，才能横向对比

结果卡片里显示：

• 识别文本 + 耗时
• CER 字错率（前提是填了参考文本）
• 最优的一路会标"最佳"徽章
• 每路可下载采到的 wav 供人耳复听

2. recorder-core 全流程（独立串行）

让 Recorder 自己 open 麦克风、走它内部的 audioTrackSet 处理、走它内部的 SampleData，再推 WSS。用途：验证 recorder-core 自己的采集策略跟我们手写"共享采集 + 独立重采样"路径有没有识别率差异。

3A 开关独立可控。

3. 波形 / 频谱可视化

录音期间画实时波形（时域）+ 频谱（频域），肉眼快速判断削顶 / 静音 / 高频丢失。

4. WAV 下载

每次采到的 16k Int16 PCM 直接打包成 wav 下载。听一遍 ASR 拿到的到底是什么。

5. 历史记录

localStorage 存最近 50 次录音的结果，方便前后对比。

项目结构

src/
  App.tsx                主界面，编排 4 路 A/B + Full 模式 + 历史
  main.tsx               React 入口
  index.css              全局样式
  config.ts              硬编码的 WSS 地址（test-ai-api.dkzsxt.com）

  asr/
    wsClient.ts          ASR WSS 协议实现（asr_start/audio/end），一次连接=一路 track

  audio/
    capture.ts           单一 getUserMedia + ScriptProcessor + 广播给多路订阅者
    resampler.ts         重采样器接口
    resamplers/
      linear.ts          线性插值（CoLearn 现网方案 1:1 复刻）
      recorderCore.ts    Recorder.SampleData 包装（带 IIR 抗混叠）
      native.ts          Float32 直转 Int16（不重采样，仅当 ctx=16k 时有用）
    track.ts             Track 编排：采集事件 → 重采样 → 推 WS

  recorderFull.ts        recorder-core 全流程模式（独占麦克风）

  ui/
    Waveform.tsx         波形 + 频谱
    TrackCard.tsx        Track 结果卡片
    HistoryList.tsx      历史记录
    useHistory.ts        localStorage 持久化 hook

  utils/
    pcm.ts               Float32↔Int16、wav 打包、base64
    cer.ts               中文 CER 字错率（Levenshtein）

已知设计限制

1. 两组采集串行：一次录音需要"说同一段话两次"（3A-ON 一次 + 3A-OFF 一次），因为 getUserMedia 无法热切 3A constraints。如果只想对比重采样这一层，用哪一组的结果都行。

2. ScriptProcessorNode 而非 AudioWorklet：与主项目对齐，简单可靠。若识别率主要瓶颈在采集而非重采样，后续再考虑升级。

3. 无热词：调试项目主动去掉了 hotwords，让识别率评估基于"通用模型"。真实业务上热词会额外拉高特定词的识别率，但那是另一个变量。

4. WSS 硬编码：只连 test-ai-api.dkzsxt.com（测试环境）。切生产改 src/config.ts。

如何验证

一个典型的诊断闭环：

1. 在参考文本框输入一句你打算说的话
2. 按"开始录音（4 路 A/B）"
3. 组 1（3A-ON）：说完，点"停止本组"
4. 组 2（3A-OFF）：点"继续下一组"，说同样的话，点"停止本组"
5. 等两组 asr_final 都回来，看 4 张卡片：
   • 谁 CER 最低（有"最佳"徽章）
   • 4 路的识别文本差异集中在哪些字（擦音？数字？）
6. 下载几张的 wav 用系统播放器听一遍，验证是"采得糟"还是"识别得糟"
7. 试试独立的 "recorder-core Full 模式"，看它自己走完整流程能不能再进一步

历史记录会累加，方便反复录同一句话看稳定性。