FashionAId

The ultimate fashion advisor for your looksmaxxing needs.

Comment

FashionAId

Hashim Bukhtiar | Andrew De Rango | Ahsan Muzammil | Nehad Shikh Trab

Effortlessly enhance your style and build connections through fashion.
FashionAId combines the power of Vertex AI and advanced algorithms to analyze your wardrobe and recommend visually appealing outfits, elevating your style and confidence.

About the Project

Inspiration

The motivation behind FashionAId stems from the desire to simplify the art of dressing well while improving self-confidence and mental health. Many individuals struggle with putting together stylish outfits due to a lack of understanding of color theory or trends. FashionAId provides an AI-powered solution that enables anyone to unlock their fashion potential effortlessly.

What It Does

FashionAId allows users to:

  • Upload images of clothing items or full outfits for analysis.
  • Receive AI-generated suggestions for outfit improvements, focusing on ideal color combinations from their wardrobe.
  • Add and organize items in a digital wardrobe through intuitive tabs for upper wear, bottom wear, and accessories.
  • Securely log in and manage their wardrobe and suggestions with Firebase Authentication.

Key Features

  • Generative AI Outfit Analysis: Analyze uploaded images to identify articles of clothing and dominant colors, then suggest enhancements.
  • Wardrobe Management: Seamlessly add and organize clothing items for future outfit suggestions.
  • Secure Authentication: Users can safely log in and manage their data using Firebase Authentication.

How We Built It

Technologies Used

  • Languages: JavaScript, Python, HTML, CSS
  • Frontend: React.js (UI/UX), Axios (API integration)
  • Backend: Express.js (server), Flask (Python-based AI integration)
  • AI: Vertex AI Gemini 1.0 Flash model for image analysis and natural language processing
  • Cloud Services: Firebase Authentication for secure user management
  • Image Processing: Python-based algorithms to parse and analyze user-uploaded images

Architecture Overview

  1. Frontend: React.js creates an intuitive interface for uploading images, managing wardrobes, and receiving recommendations.
  2. AI Integration: Python scripts process images using Vertex AI, generating JSON outputs with outfit suggestions based on color combinations.
  3. Backend: Express.js connects the frontend to Flask, which handles AI processing and algorithms.
  4. Authentication: Firebase Authentication ensures secure user login and data management.

Challenges We Faced

  • AI Accuracy: Training and calibrating the AI to balance fashion-forward suggestions with practicality required extensive testing and fine-tuning.
  • Frontend-Backend Integration: Debugging communication between React.js, Express.js, and Flask consumed significant time but provided valuable experience.
  • Secure Authentication: Implementing Firebase Authentication required overcoming API nuances to ensure robust user management.

Accomplishments We're Proud Of

  • Seamless AI Integration: Successfully deployed Vertex AI to deliver actionable and personalized fashion advice.
  • User-Friendly Design: Built an interface that makes managing wardrobes and receiving recommendations simple and enjoyable.
  • Secure Authentication: Implemented a reliable and robust user authentication system.

What We Learned

  • AI Fashion Analysis: Gained deep insights into AI-driven image processing, color analysis, and natural language interpretation.
  • Tech Stack Synergy: Learned how to integrate React.js, Express.js, Flask, and Firebase into a cohesive system.
  • Secure Web Applications: Understood the importance of secure authentication and user management in modern web development.

What's Next for FashionAId

  1. Style Trend Analysis: Incorporate real-time trend analysis to recommend outfits aligned with current fashion.
  2. Community Platform: Build a feature for users to share their outfits and get feedback from others.
  3. Personalized Recommendations: Add machine learning to tailor suggestions based on user preferences and history.

Tech Stack

  • Languages: JavaScript, Python, HTML, CSS
  • Frontend: React.js, Axios
  • Backend: Express.js, Flask
  • AI Frameworks: Vertex AI Gemini 1.0 Flash
  • Authentication: Firebase
  • Styling: CSS
  • APIs: Firebase, Vertex AI

Video Demo

Watch the Demo

Share this project:

Updates