lonely-dance-lab / cover-studio

# Cover Studio
**从一个想法，到每一个图层。**
一个集 AI 生图、图片拆层和图层编辑于一体的轻量网页工作台。
**在线访问：https://cover.aigce.com/**
在线体验 · 快速开始 · Cloudflare 部署 · 数据与隐私
---
输入提示词生成封面或海报，将图片拆成透明图层，再拖动、缩放、调整叠放顺序，导出最终作品。支持 Python 本地运行与 Cloudflare Workers 部署，无需前端构建。
> 不填写 API Key 也可以点击「载入示例」，体验已有海报的 7 个图层。生成新图或重新拆层需要具备对应模型权限的蚂蚁数科 MaaS API Key。
## 功能特性
- **四个创作板块**：封面图、小红书、电商海报、自由创作，各自保留独立提示词与设置。
- **风格与模板**：集成 Punk 封面风格规则与 PONYO 小红书封面模板，支持查看、修改编译后的提示词。
- **生成与拆层**：从文字生成图片，或上传 PNG、JPEG、WebP 图片进行拆层，上传上限为 20 MB。
- **图层编辑**：拖动、等比缩放、显示与隐藏、锁定、重命名、拖拽排序，以及撤销和重做。
- **多比例导出**：支持原图、合成 PNG、单层 PNG 和原始图层 ZIP 下载。
- **素材库**：保存生成与拆层结果，支持筛选、重新载入、删除及当前页面撤销删除。
- **两种运行方式**：本地 Python 服务，或 Cloudflare Workers + Static Assets。
## 作品示例
仓库内附有这张海报及对应的 7 个拆分图层。载入后即可体验组合预览、拖动和导出，无需调用模型。
## 快速开始
### 环境要求
| 环境 | 用途 |
| --- | --- |
| Python 3.10+ | 本地服务，仅使用标准库，无需安装 Python 依赖 |
| Node.js 20+ 与 npm | 运行 JavaScript 检查及 Wrangler 部署 |
| MaaS API Key | 调用生图与拆层模型；查看内置示例无需 Key |
### 本地运行
下载仓库并解压，进入项目目录后执行：
 [code] 
打开 http://127.0.0.1:8765，在右上角「API 设置」填写自己的 Key。
自动打开浏览器，或指定其他端口：
 [code] 
macOS 也可以双击仓库内的 `启动.command`。本地服务仅监听 `127.0.0.1`，公网部署请使用下面的 Workers 方案。
### 使用流程
1. **生成**：选择创作品类，填写提示词或载入预设，选择比例后生成图片。
2. **拆解**：点击「继续拆解图层」，也可以上传已有图片；确认图层规划后开始拆解。
3. **编辑**：在画布中选择图层，拖动位置、缩放大小，在右侧调整显隐和叠放顺序。
4. **导出**：下载原图、编辑后的合成 PNG、单层 PNG，或原始图层 ZIP。
## 图层操作
| 操作 | 使用方式 |
| --- | --- |
| 选择图层 | 点击画布中的元素，或右侧图层行 |
| 移动 | 拖动画布中的图层；按住 Alt 可关闭原位吸附 |
| 微调 | 方向键移动 1 px，Shift + 方向键移动 10 px |
| 缩放 | 拖动选框角点，或输入 10%–400% 的缩放比例 |
| 调整叠放 | 拖动图层行左侧手柄；右键菜单支持置顶、上移、下移和置底 |
| 显隐与锁定 | 点击图层行的眼睛或锁图标；Delete 可隐藏选中图层 |
| 撤销 / 重做 | macOS：⌘Z / ⇧⌘Z；Windows：Ctrl+Z / Ctrl+Shift+Z |
| 复位 | 使用「复位选中」或「全部复位」恢复位置与大小 |
图层列表上方覆盖下方。完整背景默认锁定，解锁后可以移动。导出合成图使用当前编辑状态，原始图层 ZIP 保留模型输出。
支持 `1:1`、`9:16`、`16:9`、`5:2`、`4:3`、`3:4` 等比例。切换导出比例会等比适配完整画面，比例不一致时留白，不拉伸图片。
## Cloudflare 部署
使用 **Workers + Static Assets** 同时提供网页与 API 转发。仅上传静态文件不能提供生图和拆层接口。
### 1. 登录并预览
在项目根目录执行：
 [code] 
### 2. 发布
 [code] 
发布完成后，通过终端返回的地址访问。每位使用者在网页内填写自己的 MaaS Key，无需在 Worker 中配置统一的站长 Key。
### 3. 可选：指定账户与自定义域名
仓库中的 `wrangler.jsonc` 不包含个人账户或域名绑定。登录了多个账户时，添加自己的 `account_id`；需要绑定域名时，在原配置中添加：
 [code] 
域名需要由所选 Cloudflare 账户管理。修改后重新运行 `npx wrangler deploy`。
## 数据与隐私
| 项目 | Python 本地模式 | Cloudflare 模式 |
| --- | --- | --- |
| API Key | 当前页面内存；可从本机 `.local-key` 载入 | 当前页面内存，刷新后需要重新填写 |
| 模型请求 | 由本地 Python 服务转发给 MaaS | 由 Worker 转发给 MaaS |
| 作品与任务记录 | 项目目录下的 `output/` | 当前浏览器的 IndexedDB |
| 跨设备同步 | 不支持 | 不支持 |
- API Key 不写入素材记录。Worker 不保存或回显 Key，仓库默认关闭 Worker 可观测日志。
- `.local-key`、`output/`、`.env` 和 `.dev.vars` 等本地文件已加入 `.gitignore`，不要将真实凭据提交到仓库。
- 线上作品没有设置自动到期时间。清理网站数据、使用其他浏览器或更换设备后，无法读取原浏览器中的作品；重要作品请及时下载。
- 素材库保存模型原始输出，拖动、缩放和显隐等编辑状态暂不自动保存到历史。请导出合成 PNG 保存编辑结果。
- 本地作品不会随部署上传到线上，浏览器素材库也不会自动同步到服务器。
## 模型接入
当前接入蚂蚁数科 MaaS 的两个图片模型：
| 能力 | 模型 | 上游接口 |
| --- | --- | --- |
| 文字生图 | `ming-image-0.1-design` | `POST /v1/images/generations` |
| 图片拆层 | `ming-image-0.1-design-layer` | `POST /v1/images/edits` |
接口地址为 `https://maas-api.antdigital.com`。本地实现位于 `server.py`，Cloudflare 实现位于 `cloudflare/worker.mjs`。更换服务商需要同时适配请求和响应格式。
生成和重新拆层会调用 M