企业官网建设流程全解析

Wardrobe如何一眼找出照片里所有衣服？OpenAI视觉API结构化输出实现原理

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

Wardrobe 是一个开源的 AI 衣橱整理工具：拖入一张穿搭照片，它就能通过 OpenAI 视觉 API 自动识别出照片里的每一件衣服，裁出干净的单品图，并归档进本地 JSON 数据库。本文带你用零代码理解它"一眼找出所有衣服"背后的结构化输出原理。

先看效果：一张照片进，整面衣橱出

先看最终成果。一张照片里的所有衣服处理完后，会以网格形式出现在这样的衣橱库里，支持按上装、外套、裤装、鞋子等分类筛选：

Wardrobe 的核心能力包括：

• 🧍全量识别：用 OpenAI Responses API 检测照片中的每一件衣物
• ✂️单品提取：调用 OpenAI Images API 生成电商级干净单品裁切图
• 📸模特成片：可选生成"模特上身"的时尚大片预览
• 💾数据本地：原图、任务、生成图片和 JSON 数据库全部保存在本地data/目录

核心原理：用 JSON Schema 让模型"按格式说话"

AI 图像识别常见的坑是：模型返回的"答案"很随意——这次是散文，下次是坏掉的 JSON。Wardrobe 的解法是利用 OpenAI 的结构化输出能力：调用前先声明一份严格的 JSON Schema，让模型只返回符合格式的数据。

在 scripts/import-job-api.mjs 的openAIAnalyze函数中，模型同时收到两样东西：

1. 任务描述（文本）："找出图中每一件独立可穿衣物，每件给一条记录，并用 1000×1000 归一化坐标给出紧密包围框"；
2. JSON Schema（契约）：定义返回值的精确格式。

这份 Schema 的关键点非常直观：

配合strict: true，模型连多余字段都不能多写。这意味着无论照片多复杂，返回结果永远是一份可以直接消费的结构化数组——不需要脆弱的文本解析，也不会"这次认了 3 件、下次只认 1 件还带格式错误"。

从坐标到裁切：bounding box 如何落地

模型说清了"衣服在哪"，那怎么把它切出来？

服务端逻辑很简单，见 cropDetectedItem：

1. 先用sharp把图片规范化（自动旋转、统一 sRGB、输出 PNG）；
2. 把 0–999 的 x、y、width、height 换算成真实像素；
3. 在包围框四周自动外扩约 8% 的留白，避免切掉领口或下摆；
4. 执行裁剪保存为crop.png，推入人工审核队列。

如果模型给出了越界坐标，normalizeBoundingBox 会悄悄把它收敛到合法区间——这是"健壮性"设计的第一道保险。

裁剪完成后，就会进入下图界面里的"人工审核"环节：确认单品图完整无误后，在右侧面板编辑名称、颜色、标签，再生成模特大片：

这套"机器先认、人工再确认"的流程（状态机实现见 import-flow.jsx），是 Wardrobe 不"翻车"的最大原因。它把整条流水线拆成三步，每一步都有审核卡点：

1. crop（裁剪）：审核模型检测出的裁切；
2. garment（单品重绘）：调用 gpt-image 重绘一张正面电商级单品图，指定随机"色键"背景色，再在本地抠成透明 PNG 并自动校验残留色点；
3. modeled（模特成片）：把单品与你自己上传的参考照合成一张 3:2 时尚大片。

快速上手：如何本地跑起 Wardrobe

环境要求很低，Node 22+ 即可：

git clone https://gitcode.com/gh_mirrors/wardro/wardrobe cd wardrobe npm install cp .env.example .env npm run dev

⚠️ 注意：导入功能有两个"开关"，缺一个都会保持禁用——

• 在.env里写入OPENAI_API_KEY；
• 把一张你自己的 PNG 参考照放到data/model-reference.png。

启动后访问localhost:5173即可。关键配置项整理自 README.md：

小结：结构化输出为什么值得学

Wardrobe"一眼找出所有衣服"的原理，其实是一套可以迁移到任何 AI 项目的通用思路：

• 文本描述任务、Schema 约束格式：让模型的创造力和工程的可靠性各司其职；
• 坐标归一化到 0–999：让模型输出小整数，比真实像素值准得多；
• 关键步骤加人工卡点：识别并非百分百确定，一个审核环节就能兜住大部分失败。

核心实现集中在 scripts/import-job-api.mjs，一次就能读完整条"识别 → 裁切 → 重绘 → 成片"的流水线。

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