项目简介

输入任意美食名称，AI 自动生成纯黑背景的垂直分层解构海报：食材逐层悬浮、金色双语标注、竖排书法背景、8K 写实风格。

在线演示：https://cook.snippet.pp.ua/

开源仓库：https://github.com/keenturbo/food-deconstruction-poster

---

功能特性

特性	说明
Gemini 驱动	调用 Google Gemini 多模态模型生成图片
BYOK 模式	支持用户填入自己的 Gemini API Key，存本地不上传
每日限额	未填 Key 时每日免费 3 次（localStorage 计数）
无限使用	填入自己的 Key 后不限次数
Base64 直出	图片直接返回浏览器，无需配置存储
一键部署	Cloudflare Pages 零配置部署

---

技术架构

┌─────────────────┐      POST /api/generate       ┌─────────────────┐
│                 │  ───────────────────────────► │                 │
│   index.html    │   {food_name, customKey}      │   generate.ts   │
│   (前端单页)     │                               │  (CF Functions) │
│                 │  ◄─────────────────────────── │                 │
└─────────────────┘      {image_url: base64}      └────────┬────────┘
                                                           │
                                                           ▼
                                                  ┌─────────────────┐
                                                  │   Gemini API    │
                                                  │ (图片生成模型)   │
                                                  └─────────────────┘

---

部署步骤（保姆级）

第一步：准备工作

必需：

• Cloudflare 账号（免费注册：https://dash.cloudflare.com/sign-up）
• GitHub 账号

可选：

• Gemini API Key（用于提供公共体验额度）
• 获取地址：https://aistudio.google.com/apikey
• 注意：免费 Key 无法使用gemini-3.0-pro-preview，建议使用付费层级

第二步：Fork 仓库

1. 打开 https://github.com/keenturbo/food-deconstruction-poster
2. 点击右上角 Fork 按钮
3. 确认 Fork 到你的账号

第三步：Cloudflare Pages 部署

方式一：一键部署（推荐）

点击下方按钮，按提示操作：

方式二：手动部署

1. 登录 Cloudflare Dashboard
2. 左侧菜单：Workers & Pages → Create
3. 选择 Pages → Connect to Git
4. 授权 GitHub，选择你 Fork 的仓库
5. 配置构建设置：

配置项	值
Project name	自定义（如 food-poster）
Production branch	main
Build command	留空
Build output directory	public

6. 点击 Save and Deploy

第四步：配置环境变量（可选）

部署完成后，进入项目设置：

Settings → Environment variables → Add variable

变量名	必填	说明
GEMINI_API_KEY	否	你的 Gemini API Key（提供公共体验额度）
AI_MODEL_NAME	否	模型名称，推荐 gemini-3.0-pro-preview
AI_MODEL_URL	否	自定义 API 地址，一般留空

重要说明：

• 如果不配置 GEMINI_API_KEY，网站仍可运行，但用户必须填入自己的 Key 才能使用
• 这是推荐的零成本运营方式：让用户 BYOK（Bring Your Own Key）

添加变量后，点击 Deployments → 最新部署右侧 ⋮ → Retry deployment 使变量生效。

第五步：绑定自定义域名（可选）

1. Custom domains → Set up a custom domain
2. 输入你的域名（如 cook.example.com）
3. 按提示在域名 DNS 添加 CNAME 记录
4. 等待 SSL 证书自动签发（通常几分钟）

---

使用说明

普通用户

1. 打开网站
2. 输入美食名称（如”佛跳墙”）
3. 点击”生成分层海报”
4. 等待 10-30 秒，查看生成结果
5. 点击”下载图片”保存

免费额度

• 每日 3 次免费体验（浏览器本地计数）
• 清除浏览器缓存会重置计数
• 超出后弹窗提示：可选择打赏、自己部署、或添加 Key

添加自己的 Key（推荐）

1. 点击”添加自己的 key”按钮
2. 在弹窗中填入你的 Gemini API Key
3. 点击”保存 Key”
4. Key 存储在浏览器本地，不会上传服务器
5. 有自己的 Key 后，不限使用次数

---

常见问题与避坑

Q1: 部署后访问 404

原因：Build output directory 配置错误

解决：确保设置为 public（不是根目录 /）

Q2: 生成报错 500

可能原因：

1. 未配置 GEMINI_API_KEY 且用户未填 Key
2. API Key 无效或额度耗尽
3. 模型不支持图片输出

解决：

• 检查环境变量是否正确
• 使用支持图片输出的模型（如 gemini-3.0-pro-preview）
• 引导用户添加自己的 Key

Q3: 生成的图片效果不好

可能原因：模型版本不支持高质量图片生成

解决：在环境变量中设置 AI_MODEL_NAME 为 gemini-2.0-flash-preview-image-generation 或更高版本

Q4: 如何修改示例背景图

编辑 public/index.html，找到 sampleImages 数组，替换为你的图片 URL：

const sampleImages = [
  'https://your-domain.com/sample1.jpeg',
  'https://your-domain.com/sample2.jpeg',
  // ...
];

Q5: 如何修改每日免费次数

编辑 public/index.html，修改 FREE_LIMIT 常量：

const FREE_LIMIT = 5; // 改为 5 次

Q6: 如何修改提示词

编辑 functions/api/generate.ts，修改 buildPrompt 函数中的提示词模板。

---

运营建议

零成本模式（推荐）

1. 不配置 GEMINI_API_KEY
2. 网站作为 Demo 展示
3. 用户必须 BYOK 才能使用
4. 你的成本 = 0

体验模式

1. 配置 GEMINI_API_KEY（付费层级）
2. 提供每日 3 次免费体验
3. 超出后引导用户打赏或 BYOK
4. 适合小范围推广

商业模式（进阶）

1. 接入支付系统（Stripe/微信）
2. 付费解锁更多次数或去水印
3. 需要额外开发

---