AI-Powered Virtual Wardrobe

Flask backend (Vercel serverless) + vanilla JS frontend. HuggingFace CLIP se clothing categorize hoti hai (type/color/season), Cloudinary images store karta hai, MongoDB Atlas data store karta hai.

1. Free accounts banao (sab 5 min ka kaam, mobile browser se ho jayega)

Service	Kya karna hai	Link
MongoDB Atlas	Free M0 cluster banao, connection string copy karo	https://cloud.mongodb.com
Cloudinary	Free account, dashboard se cloud_name/api_key/api_secret copy karo	https://cloudinary.com
HuggingFace	Account banao → Settings → Access Tokens → naya "Read" token banao	https://huggingface.co/settings/tokens

MongoDB me: Database Access me user banao, Network Access me 0.0.0.0/0 allow karo (Vercel ke liye zaroori, IP fixed nahi hota).

2. Project ko GitHub pe daalo (mobile se Termux/SSH se)

cd virtual-wardrobe
git init
git add .
git commit -m "Initial commit: AI virtual wardrobe"
git branch -M main
git remote add origin https://github.com/<your-username>/virtual-wardrobe.git
git push -u origin main

GitHub repo pehle web pe (mobile browser) bana lena, empty rakhna.

3. Vercel pe deploy karo

Sabse aasan: https://vercel.com pe jao, GitHub se login karo, "Import Project" pe apna repo select karo. Vercel khud vercel.json padh ke sahi build karega.

Environment Variables section me ye sab daalo (Vercel dashboard → Project → Settings → Environment Variables):

MONGO_URI=<tera mongodb connection string>
CLOUDINARY_CLOUD_NAME=<tera cloud name>
CLOUDINARY_API_KEY=<tera api key>
CLOUDINARY_API_SECRET=<tera api secret>
HF_API_TOKEN=<tera huggingface token>
JWT_SECRET=<koi bhi random 32+ character string>
HF_MODEL=openai/clip-vit-base-patch32

Deploy button dabao. 1-2 minute me live ho jayega, Vercel ek URL dega (your-project.vercel.app).

4. CLI se deploy (agar Termux me Node hai)

npm i -g vercel
vercel login
vercel --prod

CLI bhi env vars ke liye poochega, ya vercel env add MONGO_URI se manually daal sakta hai.

File structure

virtual-wardrobe/
├── api/
│   └── index.py          # Saare Flask routes (auth, items, outfits, recommendations)
├── utils/
│   ├── db.py              # MongoDB connection
│   ├── auth.py            # JWT + password hashing
│   ├── storage.py         # Cloudinary upload/delete
│   └── ai_categorize.py   # HuggingFace CLIP categorization
├── public/
│   ├── index.html         # Frontend UI
│   └── app.js             # Frontend logic
├── vercel.json             # Routing config
├── requirements.txt
└── .env.example

Important notes

• Cold start: Vercel serverless functions cold start lete hain (~1-2 sec pehli request pe). DB connection reuse hota hai across warm invocations.
• HF API free tier: Pehli request slow ho sakti hai (model load hota hai HuggingFace ke server pe). Agar HF_API_TOKEN nahi diya, app fallback categorization use karega (uncategorized tags) — crash nahi hoga.
• Image limit: Vercel serverless function body size limit ~4.5MB hai. Bahut badi photos (>4MB) upload nahi hongi — frontend me resize add kar sakta hai future me.
• Local testing (VPS pe bhi chal sakta hai):

  pip install -r requirements.txt --break-system-packages
  export MONGO_URI=... CLOUDINARY_CLOUD_NAME=... # etc, sab env vars
  cd api && python index.py

  Phir public/index.html ko kisi static server se serve karo, ya seedhe Flask se bhi serve kar sakta hai agar static folder config kare.

Next improvements (jab chahe add kar sakta hai)

• Image resize/compress before upload (browser-side, Canvas API se)
• Social sharing (outfit ko public link banake share karna)
• Body-type aware recommendations (NLP wala part abhi simple rule-based hai)
• Multi-image outfits drag-drop builder