我开源了一个AI脑洞画布，Cloudflare一键部署
这是一个基于 Cloudflare 生态（Pages + Functions + R2 + KV）构建的全栈 AI 文生图应用。它无需服务器，零成本，fork即可部署，非常适合学习练手。
项目亮点
- 多风格预设：内置黑板画、云彩、课本铅笔画等风格，支持后台无限扩展。
- 九宫格选择：直观的缩略图展示，所见即所得。
- BYOK 模式：支持用户自带 Key (Bring Your Own Key)，降低运营成本。
- 持久化存储：生成的图片自动保存到 Cloudflare R2，永久访问。
- 可视化后台：内置管理后台，可在线管理提示词、API、缩略图。
- 极简部署：依托 Cloudflare Pages，无需购买服务器。
部署教程 (保姆级)
只需 10 分钟，你就能拥有自己的 AI 绘图站。
准备工作
- 一个 GitHub 账号
- 一个 Cloudflare 账号 (免费版即可)
- Google Gemini付费层级 API Key （
https://aistudio.google.com/app/api-keys获取）
获取代码
- 访问项目仓库：GitHub - AI-Chalkboard-Art
https://github.com/keenturbo/AI-Chalkboard-Art - 点击 Fork 叉子按钮，将代码复刻到你的 GitHub 账号下。
创建 R2 存储桶 (用于存图)
- 登录 Cloudflare Dashboard。
- 左侧菜单点
存储和数据库→ R2对象存储→概述。 - 点击 创建存储桶，起个名字（例如
my-ai-art），点击创建。记住名字。 - 进入刚创建的 存储桶，点击 设置 → 公共开发 URL → 启用。
- 绑定一个你的二级域名，这很重要，后续图片都通过这个域名访问。自定义域→添加→你托管在Cloudflare上的域名的二级域名（例如
pic.yourdomain.com）
创建 KV 命名空间 (用于存配置)
- 左侧菜单点击
存储和数据库→ Workers KV。 - 点击右上角 Create instance创建 KV 命名空间。
- 起个名字（例如
AI_ART_CONFIG），点击 Add。记住这个名字。
部署到 Pages
-
左侧菜单点击
计算和AI→Workers & Pages →创建应用程序。 -
底部小字
Looking to deploy Pages? Get started，点击Get started选择导入现有 Git 存储库→开始使用。 -
选择你刚才 Fork 的仓库，点击 开始设置。你的GitHub 帐户如果还没有关联Cloudflare点击
添加帐户。 -
配置构建设置 (关键步骤)：
- 项目名称: 随便起 (例如
ai-canvas) - 生产分支:
main(默认不要动) - 预设框架: 默认留空
- 构建命令: (默认留空，不要填！)
- ** 构建输出目录**:
public(必须填这个！)
- 项目名称: 随便起 (例如
-
保存并部署等待部署完成
- 绑定 R2 和 KV
- 部署完成后，进入该 Pages 项目的 设置 → 绑定 ，点击添加。
- 点击 R2 存储桶:
- 变量名称:
R2_BUCKET(必须完全一致) - R2 bucket: 选择你在第步创建的 存储桶名字，例如
my-ai-art，保存。
- 变量名称:
- 回到上一步
绑定添加，找到 KV 命名空间 → 点击。- 变量名称:
ADMIN_KV(必须完全一致) - KV 命名空间: 选择你在第步创建的 KV（例如
AI_ART_CONFIG）
- 变量名称:
-
配置环境变量 (设置 → 变量和机密)：
- 点击 添加 以下变量。
- 变量名称：
R2_PUBLIC_DOMAIN，下面的值填你在第步绑定的域名 (例如 https://pic.yourdomain.com，带上 https://)保存 - 变量名称
GEMINI_API_KEY: (可选) 填入你的 Google Gemini T1层级API Key，作为公共兜底 Key。如果不填，使用你网站的用户必须自带 Key 才能生成。保存。
-
重新部署：
- 配置完绑定和环境变量后，去
部署标签页。 - 点击最新的那次部署右边的三个点 →
重试部署。这样刚刚的绑定（R2、KV、变量和机密）才能生效。 - 等待部署成功！
- 配置完绑定和环境变量后，去
如何使用
访问网站
打开 Cloudflare 分配给你的 *.pages.dev 域名，建议你绑定自定义域名。你将看到不同风格选择界面。
点击右上角
进入管理后台
或者直接访问 https://你的域名/admin。
- 默认账号：
admin - 默认密码：
admin
(强烈建议首次登录后在后台基础设置修改密码)
后台功能
-
图片管理：可以添加删除网站生成结果区的示例图，这些图片是用户等待生成时随机动态展示用的。
-
API 配置：可以添加第三方 OpenAI 兼容接口（如 Grok, DeepSeek 等）作为绘图源。OpenAI兼容模式的第三方要类型选择
Grok。 -
提示词管理：可以修改现有风格的提示词、缩略图 URL，或者添加新风格，全部字段按要求填写。
避坑指南
-
图片无法显示？
- 检查环境变量
R2_PUBLIC_DOMAIN是否配置正确（要有https://）。 - 检查 R2 bucket 是否开启了
公共开发 URL。
- 检查环境变量
-
生成失败？
- 如果环境变量没有配置
GEMINI_API_KEY，用户可在前端点击“添加自己的 Key”填入有效 Key。 - Gemini 官方接口有时会 503 过载，可以稍后再试。
- 如果环境变量没有配置
-
九宫格图片不显示？
- 去后台“提示词管理”，给每个风格填入一个有效的图片 URL ，R2存储桶中查看图片可得到URL，填入(
thumbnail_url)。
- 去后台“提示词管理”，给每个风格填入一个有效的图片 URL ，R2存储桶中查看图片可得到URL，填入(
参与贡献
如果你觉得这个项目好用，欢迎：
- Star 本仓库支持一下！
- Fork 仓库进行二创。
- 提交 PR 分享更多有趣的提示词风格。
Happy Generating! 
