# Apparel Designer

T-shirt customization editor with drag-and-drop design, background removal, and high-resolution export.

## Features

- **Canvas Editor** — React-Konva based drag/drop/resize/rotate for images and text
- **Background Removal** — Client-side AI using Transformers.js (RMBG-1.4, 8-bit quantized)
- **Photo Pre-Editor** — Filerobot integration for crop, filters, and adjustments
- **Stickers** — 140+ emoji stickers across 6 categories
- **Text Tool** — 20 Google Fonts, sizes, and colors
- **Templates** — 8 pre-designed templates across various categories
- **Undo/Redo** — Full history with keyboard shortcuts (Ctrl+Z / Ctrl+Shift+Z)
- **High-Res Export** — 4500×4500px PNG @ 300 DPI (15"×15" print size)
- **PWA Support** — Offline caching for models, fonts, and assets

## Tech Stack

| Layer | Choice |
|-------|--------|
| Frontend | React 19, Vite, react-konva 19, Konva 10 |
| Background Removal | @huggingface/transformers, RMBG-1.4 (q8) |
| Photo Editor | Filerobot Image Editor |
| PWA | Workbox via vite-plugin-pwa |
| Server | Express, Multer, Sharp |
| Export | node-canvas (4500×4500 server-side render) |

## Getting Started

```bash
# Install dependencies
npm install

# Start development (client on :3000, server on :3001)
npm run dev

# macOS Sharp fix is built into the dev script
# On Windows use:
npm run dev:win
```

## Docker

```bash
docker compose up --build
```

## Project Structure

```
apparel-designer/
├── server.js              # Express API (upload, export, health)
├── vite.config.js         # Vite + PWA config
├── package.json           # Single package — all deps
├── index.html             # Entry HTML with Google Fonts
├── src/
│   ├── main.jsx           # React entry + SW registration
│   ├── App.jsx            # Root layout (sidebar / canvas / properties)
│   ├── App.css
│   ├── index.css          # Design tokens + layout styles
│   ├── components/
│   │   ├── canvas/        # DesignCanvas, ImageElement, TextElement, TShirtSVG, TemplateLayer, SlotPlaceholder
│   │   ├── sidebar/       # Sidebar, UploadTab, StickersTab, TextTab, TemplatesTab, BackgroundRemovalButton
│   │   ├── panels/        # LayersPanel, PropertiesPanel
│   │   ├── editor/        # PhotoPreEditor (Filerobot wrapper)
│   │   ├── PWAInstall.jsx
│   │   └── OfflineIndicator.jsx
│   ├── hooks/             # useDesignEditor, useBackgroundRemoval, useExport, useTemplate
│   └── constants/         # fonts, stickers, templates
├── public/                # Favicon, PWA icons
├── uploads/               # User uploads (gitignored)
├── exports/               # Exported PNGs (gitignored)
├── docs/                  # Template JSON schema
├── Dockerfile
└── docker-compose.yml
```

## API Endpoints

| Method | Endpoint | Description |
|--------|----------|-------------|
| GET | `/api/health` | Health check |
| POST | `/api/upload` | Upload image (20MB max, JPEG/PNG/WebP) |
| POST | `/api/export` | Export design as 4500×4500 PNG |
| GET | `/api/download/:filename` | Download exported file |

## License

MIT