vibecoding

给娃搓了个语音陪玩飞行棋助手，LLM转API，踩坑实录

Vibecoding：飞行棋语音扔骰子对话

2026-05-15

前言

最近娃总吵着要我陪玩飞行棋，于是给他手搓了个网页，语音识别 “轮到你了” 后扔骰子，让娃自己玩去吧。

期间，无意间 Get 了以下技能：

用 Huggingface（HF）的 Space 可以把大模型转成 API。

Cloudflare Worker 反向代理 HF Space，用户只访问 Worker，可绕过 hf.space 被墙。

Cloudflare Worker 绑定自己的国内域名，且 DNS 托管在 Cloudflare，可实现国内访问。

需求分析

需求很简单，说给 AI 听一下，让 Claude 给我细化。

因为之前用免费的 Codex（额度已耗尽）搓了一个，方案差不多，也是用浏览器内置的语言识别服务，太不灵敏了，所以我追问了 Claude。他给出了新方案，但又说 API Key 会暴露在前端。

把我所知道的坑都先排除，然后复制给出的 CC 提示词。

方案 A：用 Groq API 提供的语音转文本（国内无法访问，中文识别效果不太好，可跳过此方案）

3.1. 把需求发给 CC，让他写代码。

下载并安装 Claude，并登录 Claude 账号（需要魔法），从 Cowork 切换到 Code，把提示词发给 CC。

CC 很快就干完了，然后让我部署。

3.2. 人工部署调用

先到 console.groq.com 注册并获取 API Key。

然后按下方命令行部署（一开始我总是语音识别失败，因为我这个小白把该输 GROQ_API_KEY 这个名字的地方直接改成 Key 值放进去了。这里直接给正确的做法吧）。

# 1. 安装依赖 & 设置密钥 & 发布 Worker
cd my-dice-app/worker
npm install
npx wrangler secret put GROQ_API_KEY   # 这里的GROQ_API_KEY保持不变，直到提示你输secret value，粘贴你的 Groq Key
npm run deploy                          # 复制输出的 Worker URL
# 2. 替换前端中的 WORKER_URL 常量
# frontend/index.html 第一行 JS：const WORKER_URL = '...'
# 3. 把 frontend/ 拖拽上传到 Cloudflare Pages

把 Frontend / 上传到 Cloudflare Pages，我用了方式二，因为后续更新可能很频繁。

具体步骤可参考我之前的文章。

Cloudflare Pages 部署

3.3. 修 bug

有问题就发给 CC 让它修。

如果涉及到需要你手动把更新的 frontend/index.html 重新上传到 Cloudflare Pages，就终端 cd 到项目所在目录，依次用如下 git 命令。

3.4. 正式试用

给小孩试用了下，他很开心，虽然界面不好看，语音识别不太准，但能用。还有个问题是不支持国内使用。于是开始方案 B。

方案 B：用 Huggingface Spaces 把 LLM 转 API+Cloudflare Worker 反向代理 HF Space+ 国内域名绑定 Cloudflare 的 DNS

4.1. 需求：要解决国内无法访问的问题。

追问 Claude，直到它给出我认为满意的方案。没有听 Claude 的使用硅基流动，主要是发现它没给免费 Token，而它底层的模型 SenseVoiceSmall 是免费的，意外发现居然可以自己搞个 API。

4.2. 用 Huggingface Space 跑 SenseVoiceSmall 模型生成 API

首先去 huggingface.co 用邮箱注册账号，点击收件箱激活账号。

然后点击自己的头像，选择【New Space】

填写信息：
Space name
License
SDK
Visibility
点 Create Space

需要上传两个文件：app.py和 Dockerfile。

在 Space 页面点 Files→ Add file→ Create new file。

填入 app.py 的内容，并点击【Commit new file to main】。

Dockerfile也同样操作。

等待构建，状态变成 Running 即可。

获取 API 地址：https:// 你的用户名 - sensevoice-api.hf.space/api/v1/asr

可以在 Space 页面右上角点 ⋮ → Embed this Space 看到完整域名。

修改 Cloudflare Worker，把 Worker 里的 Groq API 改成你自己的 HF Space 接口：

怕自己改不好，让 CC 来改

4.3.Cloudflare Worker 反向代理 HF Space

上述 huggingface 仍然无法国内访问，再去问 Claude，说要 Cloudflare Worker 反向代理 HF Space。

提示词发给 CC，还是让 CC 来干活。

改完后，国内还是无法访问，继续拷问 Claude，它总给我推硅基流动（合理怀疑它做 GEO 了），我偏不。

手动改文件修 bug

还是报错啊啊啊

终于找到问题了，原来 workers.dev 也被墙了，还好有如下解决办法。

4.4.Cloudflare Worker 绑定自定义域名

4.4.1. 把域名迁移到 Cloudflare DNS

4.4.2. 绑定 Worker 到子域名

4.4.3. 更新前端 Worker 地址

手动更新如上后，git 更新代码，然后真的能国内访问了。

4.4.4. 国内用户可访问了

访问地址：

https://my-dice-app.pages.dev/

因为用的 Hugging face 免费 CPU，语音识别会有 3-8 秒延迟。且识别过程中无法监听语音。但不妨碍娃用得开心。