The Problem

Cataloging a physical wardrobe is tedious manual work: photographing each item, cropping it from the background, naming it, and organizing it. Most people abandon the process after a few items. Wardrobe automates the entire pipeline—detection, cutout, modeling, and organization—using OpenAI's vision and image generation APIs, so a user can photograph a pile of clothes and get a searchable, visually consistent catalog.

What This Does

Wardrobe is a React + Express app that ingests photos of clothing, uses the OpenAI Responses API to detect garments, and the Images API to extract clean product cutouts. It can also generate a modeled editorial preview of each item using a reference photo of the user. The result is a local JSON database (data/library.json) plus a gallery UI for browsing, editing, and approving items.

The repo also bundles two Codex skills (.agents/skills/import-clothes/ and .agents/skills/generate-outfits/) that let an AI agent drive the same pipeline from a natural-language prompt. These skills wrap the core scripts and guide the agent through the import and outfit-generation workflows.

How It Is Wired

Execution starts in src/main.jsx, which mounts src/App.jsx. The app's core import logic lives in src/import-flow.jsx, which calls two backend scripts: scripts/import-job-api.mjs (the main import pipeline) and scripts/responsive-image-api.mjs (image resizing). The import pipeline is the hub: it is a 670-line file with 221 branch points, handling everything from API calls to file I/O, and it is the only module that touches the OpenAI APIs and the filesystem. src/OptimizedImage.jsx handles client-side image optimization.

The module graph shows a clean structure: 9 internal modules, 5 import edges, no circular dependencies. The only hub is src/App.jsx (instability 0.67), which imports both the import flow and the image component. The scripts/import-job-api.mjs and scripts/responsive-image-api.mjs are leaf modules that leave the process—they make network calls to OpenAI and write to data/.

The wiring for the CI pipeline is in .github/workflows/ci.yml, which runs on GitHub Actions. There is no database; all state is JSON files under data/.

How To Use It

git clone https://github.com/tandpfun/wardrobe.git
cd wardrobe
npm install
cp .env.example .env
npm run dev

Configuration requires an OPENAI_API_KEY in .env. Optional variables include OPENAI_VISION_MODEL, OPENAI_IMAGE_MODEL, OPENAI_IMAGE_QUALITY, WARDROBE_MODEL_REFERENCE, and WARDROBE_DATA_DIR. The importer stays disabled until the key is set and a reference photo exists at data/model-reference.png. Open localhost:5173 after starting.

Real-World Use

A user photographs a pile of clothes on a table, drags the photos into the browser, and the pipeline detects each garment, creates a clean cutout, and optionally generates a modeled editorial shot using their reference photo. The user reviews each item in the gallery, approves or regenerates, and ends with a browsable JSON catalog. The same flow runs headlessly via Codex with $import-clothes or $generate-outfits prompts.

Code Health & Issues

Static analysis found 4 medium-severity findings across 2 kinds:

  • Medium - Oversized file: scripts/import-job-api.mjs at 670 code lines; a change here ripples widely. Split into cohesive units by responsibility.
  • Medium - High branching density (x3): scripts/import-job-api.mjs, src/import-flow.jsx, and .agents/skills/import-clothes/scripts/import-to-wardrobe.mjs; 221 branch points over 670 lines. Decompose decision-heavy logic.

SDLC observations from the structure:

  • Med - No test files detected - repository-wide, untested code paths.
  • Med - No dependency vulnerability scan in CI - .github/workflows lacks a dependency review action.
  • Med - Checkout keeps credentials in CI - .github/workflows/ci.yml does not set persist-credentials: false.
  • Low - No job timeouts - .github/workflows/ci.yml jobs run to the platform default.
  • Low - Missing convention files - no .editorconfig, .gitattributes, or formatter config.

The Bottom Line

Wardrobe is a well-scoped demo of what agent-driven media pipelines can do, with a clean module graph and a working end-to-end flow. The single 670-line import script is the main maintenance risk, and the complete absence of tests means changes there are unverified. Worth using if you want a working reference for OpenAI-powered image pipelines; not production-ready without test coverage and CI hardening.