Skip to content

A mockup full stack app built with React, FastAPI, MongoDB, and Docker, powered by AWS Rekognition & CLIP for multi-tagging and clothing recommendations

License

Notifications You must be signed in to change notification settings

attarmau/StyleCLIP

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

FastMCP_RecSys

This is a CLIP-Based Fashion Recommender with MCP.

πŸ“Œ Sample Components for UI

  1. Image upload
  2. Submit button
  3. Display clothing tags + recommendations

Mockup

A user uploads a clothing image β†’ YOLO detects clothing β†’ CLIP encodes β†’ Recommend similar

Screenshot 2025-04-26 at 10 26 13β€―AM

Folder Structure

/project-root
β”‚
β”œβ”€β”€ /backend
β”‚   β”œβ”€β”€ Dockerfile            
β”‚   β”œβ”€β”€ /app
β”‚   β”œβ”€β”€ /aws
β”‚   β”‚   β”‚   └── rekognition_wrapper.py         # AWS Rekognition logic
β”‚   β”‚   β”œβ”€β”€ /utils
β”‚   β”‚   β”‚   └── image_utils.py                 # Bounding box crop utils
β”‚   β”‚   β”œβ”€β”€ /controllers
β”‚   β”‚   β”‚   └── clothing_detector.py           # Coordinates Rekognition + cropping
β”‚   β”‚   β”œβ”€β”€ /tests
β”‚   β”‚   β”‚   β”œβ”€β”€ test_rekognition_wrapper.py
β”‚   β”‚   β”‚   └── test_clothing_tagging.py
β”‚   β”‚   β”œβ”€β”€ server.py                    # FastAPI app code
β”‚   β”‚   β”œβ”€β”€ /routes
β”‚   β”‚   β”‚   └── clothing_routes.py
β”‚   β”‚   β”œβ”€β”€ /controllers
β”‚   β”‚   β”‚   β”œβ”€β”€ clothing_controller.py
β”‚   β”‚   β”‚   β”œβ”€β”€ clothing_tagging.py
β”‚   β”‚   β”‚   └── tag_extractor.py         # Pending: define core CLIP functionality
β”‚   β”‚   β”œβ”€β”€ schemas/
β”‚   β”‚   β”‚   └── clothing_schemas.py
β”‚   β”‚   β”œβ”€β”€ config/
β”‚   β”‚   β”‚   β”œβ”€β”€ tag_list_en.py           $ Tool for mapping: https://jsoncrack.com/editor
β”‚   β”‚   β”‚   β”œβ”€β”€ database.py       
β”‚   β”‚   β”‚   β”œβ”€β”€ settings.py       
β”‚   β”‚   β”‚   └── api_keys.py     
β”‚   β”‚   └── requirements.txt      
β”‚   └── .env                      
β”‚                      
β”œβ”€β”€ /frontend 
β”‚   β”œβ”€β”€ Dockerfile        
β”‚   β”œβ”€β”€ package.json              
β”‚   β”œβ”€β”€ package-lock.json         
β”‚   β”œβ”€β”€ /public
β”‚   β”‚   └── index.html            
β”‚   β”œβ”€β”€ /src
β”‚   β”‚   β”œβ”€β”€ /components            
β”‚   β”‚   β”‚   β”œβ”€β”€ ImageUpload.jsx    
β”‚   β”‚   β”‚   β”œβ”€β”€ DetectedTags.jsx   
β”‚   β”‚   β”‚   └── Recommendations.jsx 
β”‚   β”‚   β”œβ”€β”€ /utils
β”‚   β”‚   β”‚   └── api.js             
β”‚   β”‚   β”œβ”€β”€ App.js                    # Main React component
β”‚   β”‚   β”œβ”€β”€ index.js
β”‚   β”‚   β”œβ”€β”€ index.css            
β”‚   β”‚   β”œβ”€β”€ tailwind.config.js        
β”‚   β”‚   └── postcss.config.js                    
β”‚   └── .env                                
β”œβ”€β”€ docker-compose.yml                     
└── README.md 

Quick Start Guide

Step 1: Clone the GitHub Project

Step 2: Set Up the Python Environment

python -m venv venv
source venv/bin/activate  # On macOS or Linux
venv\Scripts\activate     # On Windows

Step 3: Install Dependencies

pip install -r requirements.txt

Step 4: Start the FastAPI Server (Backend)

uvicorn backend.app.server:app --reload

Once the server is running and the database is connected, you should see the following message in the console:

Database connected
INFO:     Application startup complete.
Screenshot 2025-04-25 at 1 15 45β€―AM

Step 5: Install Dependencies

Database connected INFO: Application startup complete.

npm install

Step 6: Start the Development Server (Frontend)

npm start

Once running, the server logs a confirmation and opens the app in your browser: http://localhost:3000/

Screenshot 2025-04-25 at 9 08 50β€―PM

What’s completed so far:

  1. FastAPI server is up and running (24 Apr)
  2. Database connection is set up (24 Apr)
  3. Backend architecture is functional (24 Apr)
  4. Basic front-end UI for uploading picture (25 Apr)

5. Mock Testing for AWS Rekognition -> bounding box (15 May)

PYTHONPATH=. pytest backend/app/tests/test_rekognition_wrapper.py
Screenshot 2025-05-20 at 4 58 14β€―PM
  • Tested Rekognition integration logic independently using a mock β†’ verified it correctly extracts bounding boxes only when labels match the garment set
  • Confirmed the folder structure and PYTHONPATH=. works smoothly with pytest from root

6. Mock Testing for AWS Rekognition -> CLIP (20 May)

PYTHONPATH=. pytest backend/app/tests/test_clothing_tagging.py
Screenshot 2025-05-21 at 9 25 33β€―AM
  • Detecting garments using AWS Rekognition

  • Cropping the image around detected bounding boxes

  • Tagging the cropped image using CLIP

7. Mock Testing for full image tagging pipeline (Image bytes β†’ AWS Rekognition (detect garments) β†’ Crop images β†’ CLIP (predict tags) + Error Handling

Negative Test Case Description
No Detection Result AWS doesn't detect any garments β€” should return an empty list.
Image Not Clothing CLIP returns vague or empty tags β€” verify fallback behavior.
AWS Returns Exception Simulate rekognition.detect_labels throwing an error β€” check try-except.
Corrupted Image File Simulate a broken (non-JPEG) image β€” verify it raises an error or gives a hint.
PYTHONPATH=. pytest backend/app/tests/test_clothing_tagging.py
Screenshot 2025-05-21 at 11 19 47β€―AM
  • detect_garments: simulates AWS Rekognition returning one bounding box: {"Left": 0.1, "Top": 0.1, "Width": 0.5, "Height": 0.5}
  • crop_by_bounding_box: simulates the cropping step returning a dummy "cropped_image" object
  • get_tags_from_clip: simulates CLIP returning a list of tags: ["T-shirt", "Cotton", "Casual"]

Next Step:

  1. Evaluate CLIP’s tagging accuracy on sample clothing images
  2. Fine-tune the tagging system for better recommendations
  3. Test the backend integration with real-time user data
  4. Set up monitoring for model performance
  5. Front-end demo

About

A mockup full stack app built with React, FastAPI, MongoDB, and Docker, powered by AWS Rekognition & CLIP for multi-tagging and clothing recommendations

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •