跟着做就会
把「看着馋但迟迟不动手」变成「跟着一步步就做出来了」。
HowToCook 的程序员菜谱，做成全屏、沉浸、一步一步带你做完的烹饪 App。
👉 打开 Vibe Cook · 下载客户端 · 本地开发 · 功能 · 菜谱来源 HowToCook
|
📦 回馈社区的开放数据集 · The Unlicense 本项目的数据来自社区的 HowToCook。做 App 的过程中，我们把原文 Markdown 做成了结构化 JSON，并为每道菜生成了配图。数据源于社区，便以与上游相同的协议交还给社区——欢迎二次开发以及补充（含商用）。 开放数据在 |
✨ 它能做什么
| 功能 | 说明 | |
|---|---|---|
| 🏠 | 食谱墙 | 封面、难度、时长、分类浏览，顶部搜索 |
| 🗺️ | 全解图 | 原料 · 工具 · 份量换算 · 步骤总览，一个「开始做饭」 |
| 🔥 | 烹饪模式 | 全屏单步引导、计时器、完成打勾、屏幕常亮 |
| 🎙️ | 语音控制 | 手上有油不用碰屏幕：说「下一步」翻步骤，说「配料表」全屏看用量，本机识别不上传 |
| 🛒 | 购物清单 | 按菜生成，一人食到宴客，份量自动缩放 |
| 🥗 | AI 选菜 | 告诉它冰箱里有什么，帮你配今晚吃什么 |
| 👨🍳 | AI 厨师 | 做菜过程中随时问：火候、替代、这一步怎么理解 |
🍳 烹饪体验
灶台边不想翻密密麻麻的文字。Vibe Cook 把每一道菜拆成闯关：
- 选一道菜 — 卡片墙，像逛菜单
- 看全解图 — 原料、工具、步骤一眼看完
- 开始做饭 — 全屏只显示当前一步，做完打勾进入下一步
- 做完庆祝 — 每一步都有正反馈，整道菜做完有成就感
屏幕常亮、可加到 iPad / 手机主屏，灶台边也能跟。
🎙️ 语音控制
烹饪模式右上角点麦克风，之后直接说：
| 指令 | 可以这么说 |
|---|---|
| 下一步 | 下一步、下一页、下一个、翻一页、往后、向后 |
| 上一步 | 上一步、上一页、上一个、向前、后退、退一步 |
| 暂停 / 继续 | 暂停、停一下、等一下 / 继续、继续计时 |
| 重新计时 | 重新计时、重置时间、计时归零、清零 |
| 再读一遍 | 再读一遍、再说一遍、重复、没听清 |
| 配料表 / 关闭 | 配料表、用料、放多少、加多少 / 关闭、收起、不看了 |
开启时会弹出完整词表。识别用 sherpa-onnx 关键词识别（WebAssembly），全程在本机运行、不上传录音；首次开启下载约 17MB 模型，之后离线可用。「好了」「开始」「回去」这类做饭时随口会说的词不作为指令，避免误触发。
🧬 数据从哪来
HowToCook Markdown → LLM 结构化（JSON 分步 + 生图） → 后端下发 → 前端逐步渲染
菜谱原文来自社区项目 程序员做饭指南 HowToCook（The Unlicense）。本仓库是它的衍生作品：把 Markdown 做成可跟做的 App。
🛠️ 技术栈
| 层 | 选型 |
|---|---|
| 框架 | Next.js 16（App Router）+ TypeScript |
| 样式 | Tailwind CSS v4 + shadcn/ui |
| 动效 | motion |
| 状态 | Zustand |
| 交付 | PWA + MyGo 桌面客户端 + Capacitor 移动客户端 |
| 语音 | sherpa-onnx 关键词识别（WASM，本机运行） |
| Agent | EdgeOne Makers（选菜 / 厨师），模型走 DeepSeek 官方 API |
| 后端 | FastAPI + SQLite |
🚀 本地开发
先启动 后端（默认 http://localhost:8000）。没有后端也可以走 mock。
git clone https://github.com/zkeq/vibe-cook.git
cd vibe-cook
cp .env.example .env.local
.env.local 示例：
# 对接本地后端
NEXT_PUBLIC_API_URL=http://localhost:8000/api/v1
# 没有后端时打开 mock
# NEXT_PUBLIC_USE_MOCK=true
npm install
npm run dev
环境变量
| 变量 | 说明 |
|---|---|
NEXT_PUBLIC_API_URL |
后端 API，例如 http://localhost:8000/api/v1 |
NEXT_PUBLIC_USE_MOCK |
true 时走内置 mock |
NEXT_PUBLIC_RECIPE_AGENT_URL |
Agent 分域部署时填写；同域留空 |
AI_GATEWAY_API_KEY |
DeepSeek 官方 API Key（Agent 服务端使用），配置方法见下方「AI Agent」一节；不要加 NEXT_PUBLIC_ 前缀 |
🤖 AI Agent（可选）
首页有 选菜 Agent，详情 / 烹饪页有带上下文的 厨师 Agent。
edgeone makers link
edgeone makers dev
makers dev 会同时拉起 Web 和 Agent。只跑 npm run dev 没有 Makers 运行时。
配置模型（DeepSeek 官方 API）
两个 Agent 都直接调用 DeepSeek 官方 API，不再经过 EdgeOne AI Gateway。
- 接口：
https://api.deepseek.com - 模型：
deepseek-flash
你只需要准备一个 DeepSeek 的 API Key：
- 打开 platform.deepseek.com，注册并充值，在「API Keys」页创建一个 Key；
- 把它填到环境变量
AI_GATEWAY_API_KEY（变量名沿用旧的，里面装的已经是 DeepSeek 的 Key），二选一：- 部署：在 EdgeOne Makers 项目的「环境变量」设置里添加；
- 本地：写进
.env.local（参见.env.example）；
- 重新部署或重启
makers dev生效。没有配 Key 时 Agent 接口会返回 503，前端其余功能不受影响。
想换模型：改上面两个 index.ts 里的 model 常量即可；AI_GATEWAY_BASE_URL、AI_GATEWAY_MODEL 这两个旧变量已不再使用。
📦 部署
- 静态 / Node：
npm run build - EdgeOne Makers：仓库连到 Makers 项目后
edgeone makers deploy - 后端单独部署 → vibe-cook-backend
- 语音模型：向 CNB 推送
kws-*标签，流水线用native/kws/build.sh编译 sherpa-onnx KWS 的 WASM 并挂到对应 Release；产物放到 COS 的cook/kws/v1/，路径与src/lib/voice-commands.ts中的KWS_BASE_URL对应
📱 客户端
下载页（自动识别设备）· CNB 国内下载 · GitHub Releases
macOS 和 Windows 客户端使用 MyGo 构建，Android 和 iOS 客户端使用 Capacitor 构建。各平台复用本项目的前端，连接现有菜谱与 AI 服务。
🙏 致谢
- 菜谱：Anduin2017/HowToCook — 没有这份指南就没有 Vibe Cook
- 客户端框架：egoist/MyGo 和 Ionic/Capacitor，感谢它们让前端能够跨平台运行。
- 语音识别：k2-fsa/sherpa-onnx（Apache-2.0）及其中文关键词识别模型
- 在线演示：https://cook.corerevive.cn
📄 许可
本项目应用程序代码开源协议为 Business Source License 1.1 © Zkeq。
- 可以查看、修改、再分发，以及非生产使用（学习、本地跑、评测）
- 禁止将本软件或其修改版上架任何应用商店，禁止出售或作为商业产品对外提供
- 生产使用（含上架、售卖、对外提供服务）须向权利人取得商业授权：
admin@icodeq.com - 本版本自 2030-08-19 起改为 GNU GPL v2 或更高版本
结构化菜谱与配图采用 The Unlicense，与 HowToCook 相同，见文首数据集卡片。
如果这个项目让你今晚真的下厨了，欢迎 Star ⭐
