Thanks to visit codestin.com
Credit goes to github.com

Skip to content

A React Native mobile app that lets users capture, upload, and organize their wardrobe, enabling dynamic outfit generation, fashion recommendation, enabled customer focused ads and opens up a whole new marketplace focused on clothing + reuse and sustainability.

Notifications You must be signed in to change notification settings

DeboJp/DresserToGo

Repository files navigation

DresserToGo 👕👖👟

DresserToGo is a full-stack AI-powered wardrobe assistant built during CheeseHacks 2024. The system integrates a React Native mobile frontend, multiple Node.js/Flask backend servers, and AI-driven computer vision models to let users capture clothing images, upload them seamlessly to Google Drive, classify apparel, and dynamically generate personalized outfit recommendations for purposes such as what to wear, buy, recommend, etc.

Project Vision

Most wardrobes are underutilized because clothing is hard to organize and visualize at scale. DresserToGo solves this by combining AI object detection, cloud storage, and a mobile-first UI to automatically categorize outfits, reshuffle them like a digital closet, and even let users "like" clothing combos for inspiration or purchase.

Features

Mobile Frontend (React Native)

  • Camera Capture: Integrated with expo-camera to capture clothing images, preview, and auto-upload to the backend.
  • Image Uploads: Immediate upload to a Google Drive–backed server via a dedicated server2.js API endpoint (/upload).
  • Collections Browser: Users can navigate Drive folders via the Collection and FolderBrowser components, fetching file metadata through backend APIs.
  • Favorites: Dedicated screen to view curated "liked" outfits from Drive’s stitched folder.
  • Dynamic Carousels: Clothing categories (Head, Top, Pants, Shoes) displayed via react-native-reanimated-carousel. Reshuffle or "like" entire outfit combos in HomeWindow and Marketplace.
  • UI Components: Modularized FolderCard, FolderBrowser, and BadgerNewsItemCard for reusable and responsive layouts.

Backend Integration

  • Google Drive + Firestore: Hybrid setup where images are uploaded to Drive (server2.js), with metadata stored in Firestore (firestore_utils.py).
  • Flask API (server.py): Handles AI classification routes, Drive utilities (drive_utils.py), and Firestore operations (firestore_utils.py).
  • Node.js APIs:
    • server.js: Monitors Drive folders, triggers ML scripts, downloads new files, and runs classification pipelines.
    • google-drive-server/server2.js: Upload endpoint for mobile app (handles multipart/form-data uploads).
    • google-drive-server/server3.js: Handles "likes," stitches images into collages (stitch.py), and uploads results back to Drive.

AI/ML Pipeline

  • HumanClothesDetectionPipeline:
    • Uses HuggingFace’s hustvl/yolos-tiny (human detection) and valentinafeve/yolos-fashionpedia (clothing detection).
    • Post-processes bounding boxes with IoU filtering and proportional adjustments (utils.py) for robust segmentation.
  • Classification Flow:
    • Uploaded images processed by ml_module/main.py.
    • Cropped clothing images uploaded into category-specific Drive folders: Head, Top, Pants, Shoes.
  • Outfit Stitches: Liked outfits stitched together (stitch.py) into composite images, with black pixels replaced by majority color for cleaner outputs.
  • Similarity Searcher: Prototype support for ViT-based feature embedding (AutoImageProcessor + AutoModel) for future outfit similarity retrieval【main.py】.

Technologies

Frontend

  • React Native (expo-camera, react-native-reanimated-carousel, react-native-paper)
  • Expo FileSystem for local image management
  • Modular component-based design

Backend

  • Node.js (express, googleapis, multer) for Drive integration
  • Flask for AI-serving routes
  • Firebase Firestore for metadata persistence
  • Google Drive API for file uploads, metadata, and stitched outputs

AI/ML

  • HuggingFace transformers (YOLOS, Fashionpedia)
  • PyTorch (torch, torchvision)
  • OpenCV (cv2) for cropping, bounding-box manipulation
  • Albumentations for resizing
  • Custom post-processing (iou, finalize_predictions, correct_clothing_bounding_boxes)

System Workflow

DresserToGoPipeline

  1. Capture: User snaps a clothing photo in the mobile app.
  2. Upload: App sends the image to server2.js, which uploads to Google Drive.
  3. AI Processing:
    • Drive monitor (server.js) downloads new files.
    • AI pipeline (main.py) detects human + clothing regions, crops items, and re-uploads them into category folders.
  4. Frontend Display:
    • Collections (Collection.jsx, FolderBrowser.jsx) fetch categorized folders from Drive.
    • Carousels (HomeWindow, Marketplace) assemble cross-category outfits.
  5. User Interaction:
    • "Like" sends outfit metadata to server3.js.
    • Outfits stitched (stitch.py) and saved in Drive for retrieval in Favorites.
  6. Feedback Loop: Firestore metadata tracks parsing/liked state, enabling future personalization.

Future Extensions

  • Outfit similarity search (Vision Transformer embeddings).
  • User preference learning from likes.
  • Marketplace integration for purchasing matched items.
  • Targetted Advertisement for clothing.
  • etc.

Contributions

Frontend (React Native): Full UI implementation, camera capture, collections, favorites, outfit carousels.

Backend Integration: Built Google Drive upload pipeline, guided server integration, and product vision.

AI/ML & Server Logic: Developed in collaboration with team members (YOLOS + Fashionpedia pipelines).

Find Rest of the Team work/project submission on: CheeseHacks24': DressertoGo's Collaboration Github

About

A React Native mobile app that lets users capture, upload, and organize their wardrobe, enabling dynamic outfit generation, fashion recommendation, enabled customer focused ads and opens up a whole new marketplace focused on clothing + reuse and sustainability.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published