电商套图工作台（image-suite-studio）

Chrome 插件 + Python 后端：采集 Ozon / 1688 / 淘宝 / 天猫 商品页的图片与信息（标题、描述、规格、尺寸）， 基于采集素材一键生成电商套图（可设 5 种风格、7 种图类型、中英文案），生成后导出 ZIP。

参考并复用了 ozon-seller-kit 的采集引擎（extension-v1/v2）与 ecommerce-image-suite 的生图 Prompt 架构。

架构

Chrome 插件（WXT + React + antd）          Python 后端（FastAPI + SQLite）
┌────────────────────────────┐            ┌──────────────────────────────┐
│ Side Panel                 │            │ POST /api/plan               │
│  ① 扫描商品页（四站点）      │ ─规划──▶ │   → DeepSeek 出图方案          │
│  ② 勾选/编辑素材            │ ◀─方案── │ POST /api/generate（无状态）   │
│  ③ 出图方案（默认/AI规划）    │ ──提交──▶ │   → 方案展开 → 逐张生图        │
│  ④ 轮询进度 → 导出 ZIP      │ ◀─轮询── │ GET  /api/suites/{id}[/zip]  │
└────────────────────────────┘            │ GET  /api/proxy-image        │
                                          └──────────────────────────────┘

采集引擎（extension/src）

• 声明式 SiteProfile（选择器 + srcProps + 去重/排除规则），加站点只需加一个 profile：
  • profiles/ozon.ts — data-widget 选择器（DOM 兜底）
  • profiles/1688.ts — 多套画廊选择器变体 + CSS 背景图 SKU
  • profiles/taobao.ts — CSS Modules 前缀匹配，淘宝/天猫一份 profile
• 多路径采集（collector/scan.ts 统一编排）：
  • Ozon：SSR data-state（白名单）→ JSON-LD → 页面 JSON API → DOM，多源合并
  • 淘宝/天猫：window.__ICE_APP_CONTEXT__ SSR 主路径 + DOM 补充详情图
  • 1688：纯 DOM（懒加载属性降级 + 占位图过滤 + 组内去重）
• 图片 URL 自动还原原图（阿里 _400x400 后缀 / Ozon /wc\d+/ 路径段）

套图生成（server/services）

• prompt.py：7 种图类型 × 5 套风格模板，公共组件 QUALITY / PRODUCT_REF_LOCK（商品一致性锁）/ TEXT_RENDER
  • 图类型：白底主图 / 核心卖点图 / 卖点图 / 材质图 / 场景展示图 / 多场景拼图 / 电商详情图
  • 风格：经典商拍 / 生活杂志 / 极简高冷 / 活力爆款 / 暗调质感
  • 卖点从采集的参数表/卖点文本自动提炼
• generator.py：图像 provider（图生图，参考图 = 采集主图）
  • doubao：火山方舟 Seedream（默认，ARK_API_KEY）
  • tongyi：通义万相/千问（DASHSCOPE_API_KEY，wan* 异步轮询 / qwen* 同步）
  • rightapi：gpt-image-2（OpenAI 兼容中转 RIGHTAPI_API_KEY，edits 参考图 / generations 同步）
  • 插件只传模型名，服务端按模型名自动路由到对应 provider

快速开始

1. 后端

cd server
python3 -m venv .venv && source .venv/bin/activate
pip install -r requirements.txt

# 配置 API Key（二选一，豆包为默认）
cp ../.env.example ../.env
# 编辑 ../.env 填入 ARK_API_KEY 或 DASHSCOPE_API_KEY

python main.py   # http://127.0.0.1:3300

2. 插件

cd extension
pnpm install
pnpm build        # 产物在 .output/chrome-mv3
# Chrome → chrome://extensions → 开发者模式 → 加载已解压的扩展程序 → 选 .output/chrome-mv3

3. 使用

1. 打开 Ozon / 1688 / 淘宝 / 天猫 的商品详情页，滚动到底部（详情图懒加载）后点击插件图标
2. Side Panel：扫描 → 检查/勾选素材（默认全选主图+SKU）→ 保存到服务端
3. 选择风格 / 图类型 / 文案语言 → 一键生成 → 完成后「导出 ZIP」

API 一览

方法	路径	说明
POST	/api/plan	DeepSeek 出图方案规划（{texts, sku_variants, image_stats, platform}）
POST	/api/generate	无状态一键生成（{texts, images, plan, style_set, platform}，不落商品库）
GET	/api/suites/{id}	任务状态 + 已生成图 URL
GET	/api/suites/{id}/zip	导出 ZIP（按方案标题命名）
GET	/api/proxy-image?url=	图片代理（绕源站防盗链）
GET	/api/health	健康检查 + provider 配置状态

说明与限制

• 单用户本地部署，未做鉴权（如需暴露公网请自行加 token 校验）
• 生图依赖付费 API（豆包 Seedream / 通义万相），任务逐张串行生成，一张约 10-60 秒
• 淘宝/天猫页面改版频繁，选择器失效时优先检查 profiles/taobao.ts 的 [class*="xx--"] 前缀
• 模特图（两阶段生成）与视频生成暂未实现，可参考 ecommerce-image-suite 后续扩展