push

WARDROBE_FEATURE_FLOW.md

@@ -0,0 +1,358 @@
+# StyleGPT Wardrobe Feature - Complete Flow
+
+## Overview
+The wardrobe feature allows users to upload clothing items, automatically classify them using AI, organize them by categories, and get personalized outfit suggestions based on their actual wardrobe.
+
+---
+
+## 1. Upload Flow
+
+### 1.1 User Initiates Upload
+- **User Action**: Navigates to Upload page
+- **UI**: Shows file upload area with style selection dropdown
+- **User Selects**:
+  - Images (1-20 files)
+  - Style: Casual, Formal, Streetwear, or Sportswear
+
+### 1.2 Image Processing Pipeline
+
+#### Step 1: Background Removal
+```
+User uploads image → Background Remover API
+→ Returns: Image with transparent background (PNG)
+→ Purpose: Better accuracy for FashionClip classification
+```
+
+#### Step 2: FashionClip Identification
+```
+Background-removed image → FashionClip /identify endpoint
+→ Returns: {
+  precise_identification: [
+    { label: "bape", score: 0.82, type: "brand" },
+    { label: "t-shirt", score: 0.61, type: "item" },
+    { label: "brown", score: 0.53, type: "color" }
+  ],
+  detected_components: {
+    top_brands: [{ brand: "bape", score: 0.82 }],
+    top_colors: [{ color: "brown", score: 0.53 }],
+    top_items: [{ item: "t-shirt", score: 0.61 }]
+  }
+}
+```
+
+#### Step 3: Category Normalization
+```
+FashionClip item label → Category Normalizer
+Examples:
+- "t-shirt", "shirt", "polo shirt" → "shirts"
+- "pants", "jeans", "trousers" → "pants"
+- "sneakers", "boots", "heels" → "shoes"
+```
+
+#### Step 4: Item Name Generation
+```
+Brand + Color + Category = Item Name
+Example: "bape" + "brown" + "t-shirt" = "bape brown t-shirt"
+```
+
+#### Step 5: Storage
+```
+Original image (with background) → Cloudinary
+→ Stored with public_id: "wardrobe/bape_brown_t_shirt_[timestamp]"
+
+Database Record:
+{
+  imageUrl: "https://cloudinary.../wardrobe/bape_brown_t_shirt_...",
+  category: "shirts",  // normalized
+  style: "streetwear", // user-selected
+  name: "bape brown t-shirt",
+  brand: "bape",
+  color: "brown",
+  userId: [user_id]
+}
+```
+
+---
+
+## 2. Wardrobe Organization Flow
+
+### 2.1 Category-Based Display
+- **User Action**: Opens Wardrobe page
+- **System**: Groups items by normalized category
+- **UI Shows**:
+  - Category buttons (e.g., "Shirts (5)", "Pants (3)", "Shoes (2)")
+  - All items grid (default view)
+
+### 2.2 Category Selection
+- **User Action**: Clicks a category button (e.g., "Shirts")
+- **Animation**: Items slide out from left with staggered delay
+- **UI Shows**: Only items from selected category
+- **Display**: Each item shows:
+  - Image (original with background)
+  - Item name (e.g., "bape brown t-shirt")
+  - Style badge (Casual/Formal/Streetwear/Sportswear)
+  - Delete button (on hover)
+
+### 2.3 Filtering & Search
+- **User Can**:
+  - Search by category name
+  - Filter by style (Casual/Formal/Streetwear/Sportswear)
+  - Clear filters to see all items
+
+---
+
+## 3. AI Suggestion Flow
+
+### 3.1 User Requests Suggestion
+- **User Action**: Types message in Chat (e.g., "Suggest an elegant outfit for dinner")
+- **System**: Authenticates user and fetches their wardrobe
+
+### 3.2 Wardrobe Data Preparation
+```
+User's Wardrobe Items → Formatted for AI:
+Item 1: "bape brown t-shirt" - shirts (streetwear style)
+Item 2: "zara black pants" - pants (casual style)
+Item 3: "nike white sneakers" - shoes (sportswear style)
+...
+
+Available categories: shirts, pants, shoes, jackets, ...
+```
+
+### 3.3 AI Prompt Construction
+```
+Prompt to AI:
+"User Wardrobe (X items total):
+Item 1: "bape brown t-shirt" - shirts (streetwear style)
+Item 2: "zara black pants" - pants (casual style)
+...
+
+Available categories: shirts, pants, shoes, ...
+
+User request: Suggest an elegant outfit for dinner
+
+IMPORTANT INSTRUCTIONS:
+1. Use ONLY items listed above
+2. Reference items by EXACT names (e.g., "the black zara pants", "brown shoes")
+3. Use brand, color, and category when available
+4. Only suggest from available categories
+5. Make response natural and fluid, mentioning specific item names"
+```
+
+### 3.4 AI Response Processing
+```
+AI Response: "For an elegant dinner, I suggest pairing the black zara pants 
+with a crisp white shirt and brown leather shoes. This creates a sophisticated 
+look that balances formal and casual elements..."
+
+System Extracts:
+- Mentions "pants" → Matches to "zara black pants" (pants category)
+- Mentions "shirt" → Matches to available shirt items
+- Mentions "shoes" → Matches to available shoe items
+```
+
+### 3.5 Item Matching Algorithm
+```
+1. Parse AI response for category keywords
+2. Match keywords to user's wardrobe categories
+3. Select best matching item from each category
+4. Return selected items with images
+```
+
+### 3.6 Response Display
+```
+Chat UI Shows:
+1. AI text response (formatted)
+2. Selected items grid with images:
+   - "zara black pants" (image)
+   - "white shirt" (image)
+   - "brown shoes" (image)
+3. "Suggest Another Outfit" button
+```
+
+### 3.7 Multiple Suggestions
+- **User Action**: Clicks "Suggest Another Outfit" or types new request
+- **System**: Removes previous suggestion, generates new one
+- **Behavior**: Only one suggestion visible at a time
+
+---
+
+## 4. Data Flow Diagram
+
+```
+┌─────────────┐
+│ User Upload │
+│   Images    │
+└──────┬──────┘
+       │
+       ▼
+┌──────────────────┐
+│ Background       │
+│ Removal API      │
+└──────┬───────────┘
+       │
+       ▼
+┌──────────────────┐
+│ FashionClip     │
+│ /identify       │
+│ (brand, color,  │
+│  item detection)│
+└──────┬───────────┘
+       │
+       ▼
+┌──────────────────┐
+│ Category         │
+│ Normalization    │
+│ (t-shirt → shirts)│
+└──────┬───────────┘
+       │
+       ▼
+┌──────────────────┐
+│ Name Generation  │
+│ (brand+color+cat)│
+└──────┬───────────┘
+       │
+       ▼
+┌──────────────────┐
+│ Cloudinary       │
+│ (store original) │
+└──────┬───────────┘
+       │
+       ▼
+┌──────────────────┐
+│ Database         │
+│ (save metadata)  │
+└──────┬───────────┘
+       │
+       ▼
+┌──────────────────┐
+│ Wardrobe UI      │
+│ (categorized)    │
+└──────┬───────────┘
+       │
+       ▼
+┌──────────────────┐
+│ AI Suggestion    │
+│ (uses item names)│
+└──────────────────┘
+```
+
+---
+
+## 5. Key Features
+
+### 5.1 User-Selected Style
+- **Purpose**: Better organization and filtering
+- **Options**: Casual, Formal, Streetwear, Sportswear
+- **Applied**: To all items in upload batch
+
+### 5.2 Item Naming
+- **Format**: `[brand] [color] [category]`
+- **Examples**:
+  - "bape brown t-shirt"
+  - "zara black pants"
+  - "nike white sneakers"
+  - "louis vuitton white shirt"
+
+### 5.3 Category Organization
+- **Normalized Categories**: shirts, pants, shoes, jackets, dresses, etc.
+- **Visual**: Category buttons with item counts
+- **Interaction**: Click to filter, animation on selection
+
+### 5.4 AI Integration
+- **Context**: Full wardrobe with item names
+- **Response Style**: Natural, references actual items
+- **Item Matching**: Keyword-based extraction from AI response
+- **Visual Display**: Shows selected items with images
+
+### 5.5 Item Management
+- **View**: By category or all items
+- **Delete**: Hover to reveal delete button
+- **Search**: By category name
+- **Filter**: By style
+
+---
+
+## 6. User Journey Example
+
+### Scenario: User wants elegant dinner outfit
+
+1. **Upload Phase**:
+   - User uploads 5 items (shirt, pants, shoes, jacket, watch)
+   - Selects "Formal" style
+   - System processes: removes backgrounds, identifies items, stores with names
+
+2. **Organization Phase**:
+   - Wardrobe shows: "Shirts (1)", "Pants (1)", "Shoes (1)", etc.
+   - User clicks "Pants" → sees "zara black pants" with animation
+
+3. **Suggestion Phase**:
+   - User types: "Suggest an elegant outfit for dinner"
+   - AI receives: Full wardrobe with item names
+   - AI responds: "I suggest the black zara pants with a crisp white shirt..."
+   - System extracts: Matches "pants" and "shirt" to user's items
+   - UI displays: AI response + images of selected items
+
+4. **Refinement Phase**:
+   - User clicks "Suggest Another Outfit"
+   - System generates new suggestion with different items
+   - Previous suggestion removed, new one displayed
+
+---
+
+## 7. Technical Components
+
+### Backend
+- `src/routes/upload.ts`: Handles image upload and processing
+- `src/routes/suggest.ts`: Generates AI suggestions
+- `src/routes/wardrobe.ts`: Manages wardrobe CRUD operations
+- `src/utils/backgroundRemoval.ts`: Background removal service
+- `src/utils/hfClient.ts`: FashionClip API client
+- `src/utils/categoryNormalizer.ts`: Category normalization logic
+
+### Frontend
+- `stylegptUI/src/pages/Upload.jsx`: Upload interface with style selection
+- `stylegptUI/src/pages/Wardrobe.jsx`: Category-based wardrobe display
+- `stylegptUI/src/pages/Chat.jsx`: AI suggestion interface
+- `stylegptUI/src/utils/api.js`: API communication
+
+### Database
+- `WardrobeItem` entity: Stores item metadata
+- Fields: imageUrl, category, style, name, brand, color, userId
+
+---
+
+## 8. Data Flow Summary
+
+```
+Upload → Background Removal → FashionClip → Normalization → Storage
+                                                              ↓
+Wardrobe UI ← Category Grouping ← Database Query ← User Request
+     ↓
+Category Selection → Animation → Item Display
+     ↓
+Chat Request → AI Prompt (with item names) → AI Response → Item Extraction → Display
+```
+
+---
+
+## 9. Key Design Decisions
+
+1. **Store Original Images**: Users see items with original backgrounds
+2. **Background Removal for Classification**: Better AI accuracy
+3. **User-Selected Style**: More accurate than auto-detection
+4. **Category Normalization**: Consistent organization
+5. **Full Item Names**: AI can reference items naturally
+6. **One Suggestion at a Time**: Cleaner UI, less confusion
+7. **Category Animation**: Better UX, visual feedback
+
+---
+
+## 10. Future Enhancements
+
+- Outfit saving/favorites
+- Style mixing suggestions
+- Seasonal wardrobe organization
+- Item tagging (favorite, worn recently)
+- Outfit history tracking
+- Social sharing of outfits
+

src/index.ts

@@ -49,7 +49,6 @@ app.get("/", (req, res) => {
       "Express.js",
       "PostgreSQL",
       "TypeORM",
-      "Cloudinary",
       "Hugging Face Fashion-CLIP",
       "JWT Authentication"
     ]

src/routes/profile.ts

@@ -1,6 +1,5 @@
 import express from "express";
 import multer from "multer";
-import cloudinary from "../utils/cloudinary";
 import { AppDataSource } from "../utils/dataSource";
 import { User } from "../entity/User";
 import { authenticateToken, AuthRequest } from "../middleware/auth";
@@ -136,48 +135,24 @@ router.put("/", authenticateToken, upload.single("profilePicture"), async (req:
     }
 
     // Handle profile picture removal (check if removePicture flag is set)
-    if (req.body.removePicture === "true" && user.profilePicture) {
-      const publicId = user.profilePicture.split("/").slice(-2).join("/").split(".")[0];
-      try {
-        await cloudinary.uploader.destroy(`profile-pictures/${publicId}`);
-      } catch (deleteError) {
-        console.error("Error deleting old profile picture:", deleteError);
-      }
+    if (req.body.removePicture === "true") {
       user.profilePicture = undefined;
     }
     
     // Handle profile picture upload
     if (file) {
       try {
-        // Convert buffer to base64
+        // Convert buffer to base64 data URL
         const base64Image = `data:${file.mimetype};base64,${file.buffer.toString("base64")}`;
         
-        // Upload to Cloudinary
-        const uploadResult = await cloudinary.uploader.upload(base64Image, {
-          folder: "profile-pictures",
-          resource_type: "image",
-          transformation: [
-            { width: 400, height: 400, crop: "fill", gravity: "face" },
-            { quality: "auto" },
-          ],
-        });
-
-        // Delete old profile picture if exists
-        if (user.profilePicture) {
-          const publicId = user.profilePicture.split("/").slice(-2).join("/").split(".")[0];
-          try {
-            await cloudinary.uploader.destroy(`profile-pictures/${publicId}`);
-          } catch (deleteError) {
-            console.error("Error deleting old profile picture:", deleteError);
-          }
-        }
-
-        user.profilePicture = uploadResult.secure_url;
+        // Store base64 directly in database
+        user.profilePicture = base64Image;
+        console.log("✅ Profile picture converted to base64 and stored");
       } catch (uploadError: any) {
         console.error("Profile picture upload error:", uploadError);
         return res.status(500).json({
           success: false,
-          error: "Failed to upload profile picture",
+          error: "Failed to process profile picture",
         });
       }
     }

src/routes/suggest.ts

@@ -118,7 +118,7 @@ function extractSelectedItems(aiResponse: string, wardrobe: WardrobeItem[]): War
  */
 router.post("/", authenticateToken, async (req: AuthRequest, res) => {
   try {
-    const { message, session_id } = req.body;
+    const { message, session_id, images } = req.body;
     const userId = req.userId!;
 
     if (!message) {
@@ -158,13 +158,20 @@ router.post("/", authenticateToken, async (req: AuthRequest, res) => {
 
     console.log(`[Suggest] Sending structured wardrobe data with ${wardrobe.length} items`);
 
+    const requestBody: any = {
+      message: message,
+      session_id: session_id || `user_${userId}`,
+      wardrobe: wardrobeArray,
+    };
+
+    if (images && Array.isArray(images) && images.length > 0) {
+      requestBody.images = images;
+      console.log(`[Suggest] Sending ${images.length} image(s) with request`);
+    }
+
     const response = await axios.post(
       process.env.CHAT_ENDPOINT!,
-      {
-        message: message,
-        session_id: session_id || `user_${userId}`,
-        wardrobe: wardrobeArray,
-      },
+      requestBody,
       { headers: { "Content-Type": "application/json" } }
     );
 

src/routes/upload.ts

@@ -1,6 +1,5 @@
 import express from "express";
 import multer from "multer";
-import cloudinary from "../utils/cloudinary";
 import { classifyFashionImage, identifyFashionItem } from "../utils/hfClient";
 import { removeBackground } from "../utils/backgroundRemoval";
 import { AppDataSource } from "../utils/dataSource";
@@ -144,21 +143,18 @@ router.post("/", authenticateToken, upload.array("image", 20), async (req: AuthR
         nameParts.push(itemLabel);
         const itemName = nameParts.join(" ");
 
-        const sanitizedName = itemName.replace(/[^a-zA-Z0-9\s]/g, "").replace(/\s+/g, "_").toLowerCase();
-        const publicId = `wardrobe/${sanitizedName}_${Date.now()}`;
-        
         const base64Image = `data:${file.mimetype};base64,${file.buffer.toString("base64")}`;
-        const uploadResult = await cloudinary.uploader.upload(base64Image, {
-          public_id: publicId,
-          resource_type: "image",
-        });
-        console.log(`✅ Original image uploaded: ${itemName}`);
+        const processedBase64Image = processedBuffer 
+          ? `data:image/png;base64,${processedBuffer.toString("base64")}`
+          : undefined;
+
+        console.log(`✅ Image converted to base64: ${itemName}`);
 
         const style = selectedStyle;
 
         const newItem = itemRepo.create({
-          imageUrl: uploadResult.secure_url,
-          processedImageUrl: undefined,
+          imageUrl: base64Image,
+          processedImageUrl: processedBase64Image,
           category: normalizedCategory,
           style: style,
           name: itemName,