企业官网建设流程全解析

Wardrobe入门指南：拖拽/粘贴照片批量导入，三步走完AI识别与审批流程

【免费下载链接】wardrobeYour clothes, extracted and organized with gpt-image.项目地址: https://gitcode.com/gh_mirrors/wardro/wardrobe

Wardrobe 是一款本地优先的 AI 衣橱管理工具：通过拖拽或粘贴即可批量导入服装照片，由 OpenAI 自动完成服装检测与抠图，再经过三步审批流程，帮你建立一套分类整齐的数字衣橱。本文是面向新手的完整入门指南。

一、Wardrobe 能帮你做什么？

• 📸照片识别：用 OpenAI 视觉模型检测照片中的每一件服装（上衣、外套、下装、配饰、鞋子）
• ✂️一键抠图：生成干净的透明背景商品抠图
• 🧍模特穿着预览：可选生成服装穿在模特身上的编辑级大图
• 💾本地数据存储：照片、任务记录、生成图片与 JSON 数据库全部保存在本地data/目录
• ✅全流程审批：支持拖拽、粘贴、编辑、审核、重新生成与批准

画廊页顶部按类别筛选（Tops / Jackets / Bottoms / Accessories / Shoes），所有抠图以网格整齐陈列，左上角显示当前件数。

二、三步安装并运行 Wardrobe

第 1 步：获取项目

git clone https://gitcode.com/gh_mirrors/wardro/wardrobe cd wardrobe

第 2 步：安装依赖并配置环境

npm install cp .env.example .env

根据 README.md 的说明，还有两件事必须完成，否则导入功能会保持禁用状态：

1. 在.env中填入OPENAI_API_KEY；
2. 将一张你自己的 PNG 参考照片放到data/model-reference.png，它会用于生成模特穿着图。

主要环境变量如下：

第 3 步：启动并打开页面

npm run dev

浏览器访问localhost:5173。空画廊会提示“Drop, paste, or add a photo to import your first piece.”，随时可以开始导入。

三、批量导入照片：拖拽与粘贴的两种方式

Wardrobe 把拖拽和剪贴板粘贴做成了全局快捷键，页面上任意位置都生效：

• 拖拽：把一张或多张图片拖进页面，拖入时会显示全屏提示“Drop clothing images”
• 粘贴：截图或复制图片后直接按Ctrl/Cmd + V
• 手动选择：点击左下角的+按钮，打开系统文件选择器

单件服装照和整套穿搭照都可以，AI 会自动拆分成独立单品。粘贴与拖拽的全局事件监听在 src/import-flow.jsx，服务端导入任务 API 见 scripts/import-job-api.mjs。

💡 如果提示“No clothing detected”，换一张更清晰、取景更紧的照片再试。

四、三步走完 AI 识别与审批流程

上传后，每张照片会经历三个阶段，每一步都可以批准、拒绝或重新生成：

第 1 步：确认识别裁剪（crop）

视觉模型先检测照片中的服装并逐件裁剪。检查裁剪框是否包含完整单品，点击Use crop进入下一步。

第 2 步：确认服装抠图（garment）

图像模型生成透明背景的商品抠图，这一步同时填写单品资料：

• Name：服装名称
• Category：Tops / Jackets / Bottoms / Accessories / Shoes
• Primary / Secondary color：主色、辅色，支持直接从图片上点选取色
• Details：如 casual、cotton、striped 等细节标签

对抠图不满意可以填写指令后Regenerate，例如“保留拉链原样、去掉吊牌”。若边缘清理不够干净，还能在本地微调清理强度并实时预览，无需重新调用模型。

第 3 步：生成并批准模特穿着图（modeled）

抠图批准后，Wardrobe 自动生成模特穿着的编辑级大图，批准后会挂到对应单品上；也可以补充场景描述后 Regenerate。

各任务的阶段状态（如“Crop ready for review”“Styling modeled image”）由 src/import-flow.jsx 推导，审核与编辑界面如下：

五、整理衣橱：分类浏览与单品编辑

单品进入画廊后，日常整理很简单：

• 分类筛选：顶部按钮切换类别视图，筛选逻辑见 src/App.jsx
• 详情编辑：点击任意单品打开编辑面板，可改名、改分类、从图片取色、增删标签
• 删除：单品与导入任务都支持随时删除

所有数据存放在本地data/目录（数据库library.json与imported/图片），完全掌握在你自己手中。

六、常见问题快速排查

七、相关项目文件

• README.md：快速上手、配置表与 Codex 集成说明
• src/import-flow.jsx：导入队列与三阶段审批前端逻辑
• src/App.jsx：画廊、分类筛选与详情编辑
• scripts/import-job-api.mjs：导入任务 API 与抠图处理
• vite.config.mjs：开发服务器与 API 挂载配置
• docs/screenshots/：画廊与编辑器截图

【免费下载链接】wardrobeYour clothes, extracted and organized with gpt-image.项目地址: https://gitcode.com/gh_mirrors/wardro/wardrobe