feat: 初始化项目,并且接近完成 ozon 部分

This commit is contained in:
Joey
2026-08-15 22:19:27 +08:00
commit 1591d5e35a
46 changed files with 9827 additions and 0 deletions
+92
View File
@@ -0,0 +1,92 @@
# 电商套图工作台(image-suite-studio
Chrome 插件 + Python 后端:采集 Ozon / 1688 / 淘宝 / 天猫 商品页的图片与信息(标题、描述、规格、尺寸),
基于采集素材**一键生成电商套图**(可设 5 种风格、7 种图类型、中英文案),生成后导出 ZIP。
参考并复用了 [ozon-seller-kit](../ozon-seller-kit) 的采集引擎(extension-v1/v2)与
[ecommerce-image-suite](../ecommerce-image-suite) 的生图 Prompt 架构。
## 架构
```
Chrome 插件(WXT + React + antd Python 后端(FastAPI + SQLite
┌────────────────────────────┐ ┌──────────────────────────────┐
│ Side Panel │ │ POST /api/materials │
│ ① 扫描商品页(四站点) │ ──上传──▶ │ → 落库 + 后台转存图片 │
│ ② 勾选/编辑素材 │ │ POST /api/products/{id}/suites│
│ ③ 选风格提交生成 │ ──提交──▶ │ → 套图任务(后台逐张生图) │
│ ④ 轮询进度 → 导出 ZIP │ ◀─轮询── │ GET /api/suites/{id} │
└────────────────────────────┘ │ GET /api/suites/{id}/zip │
└──────────────────────────────┘
```
### 采集引擎(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* 同步)
## 快速开始
### 1. 后端
```bash
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. 插件
```bash
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/materials` | 采集上传(文本 + 图片 URL),异步转存 |
| GET | `/api/products` / `/api/products/{id}` | 商品列表/详情 |
| POST | `/api/products/{id}/suites` | 创建套图任务 `{style_set, types, lang, provider?}` |
| GET | `/api/suites/{id}` | 任务状态 + 已生成图 URL |
| GET | `/api/suites/{id}/zip` | 导出 ZIP |
| GET | `/api/health` | 健康检查 + provider 配置状态 |
## 说明与限制
- 单用户本地部署,未做鉴权(如需暴露公网请自行加 token 校验)
- 生图依赖付费 API(豆包 Seedream / 通义万相),任务逐张串行生成,一张约 10-60 秒
- 淘宝/天猫页面改版频繁,选择器失效时优先检查 `profiles/taobao.ts``[class*="xx--"]` 前缀
- 模特图(两阶段生成)与视频生成暂未实现,可参考 ecommerce-image-suite 后续扩展