HackFashion AI

AI wardrobe stylist that auto-categorizes your clothes & creates outfits for any occasion based on the weather/calendar. Voice assistant and fashion recommendations. Your closet, optimized!

Comment

The Story of HackFashion-AI: From Closet Clutter to Digital Stylist ✨

The Spark: A Universal Annoyance

Every morning, the same scene played out: standing in front of a closet full of clothes, yet nothing to wear. This simple, real-life annoyance—the time wasted on daily outfit decisions—was the singular inspiration behind HackFashion-AI. We realized that getting dressed should be easier and a little more fun, transforming a mundane chore into a personalized experience.

How We Built It: A Focus on Polish and UX

The core of our strategy was to deliver a highly polished user experience (UX) right from the start, proving the concept's viability with a beautiful, responsive front-end.

Tech Stack Highlights:

Frontend: We used React + Vite and heavily leveraged Framer Motion and react-spring to create incredibly smooth animations and delightful micro-interactions. The UI feels real and responsive.

Authentication:

Auth0 was wired up client-side to provide an immediate, seamless signup/login/logout and profile experience.

AI Models:

We integrated Gemini for its powerful vision capabilities (for item classification) and chat features (for the conversational stylist), and ElevenLabs for Text-to-Speech (TTS) for future voice interactions.

Core Feature Success: The "Nano Banana" Avatar 🍌

Our greatest success in the prototype was the implementation of the "Nano Banana" Avatar. Once an outfit is suggested, this innovative feature allows the user to see the selected clothes virtually "tried on" by a personalized avatar, providing a realistic, high-fidelity preview of the ensemble. This was a significant step forward in user experience and a key proof point for the project.

What HackFashion-AI Does: Your Personal Digital Wardrobe

HackFashion-AI turns your physical wardrobe into a powerful digital asset and provides a full personal stylist experience, all in one app.

Feature Description

  1. Wardrobe Digitization: Snap photos of your clothes; AI vision (Gemini) automatically tags them (tops, bottoms, outerwear, accessories).
  2. Intelligent Suggestions: Offers complete outfit combinations based on crucial factors like event, weather, mood, and body type.
  3. Conversational Stylist: A conversational UI (currently text, with voice planned via ElevenLabs) that explains recommendations, offers swaps, and acts just like a real stylist. "Nano Banana" Avatar: Provides a virtual try-on experience, letting you see the selected clothes on your personalized avatar.

Challenges and Lessons Learned

While the prototype is fully functional and polished, we ran into several architectural and development challenges that led to crucial learnings.

The Challenges:

Backend Gap: The current repo is primarily a front-end showcase. The secure backend, necessary for permanent uploads, a full wardrobe database, and secure, persistent data storage, is still a work in progress.

Scalability Concerns

Combining vision (Gemini), Large Language Models (LLMs for chat), and TTS (ElevenLabs) brings non-trivial concerns regarding latency, cost, and user privacy that need careful planning for a production environment.

The Lessons Learned:

Prototyping Speed: We learned that you can make a prototype feel incredibly polished fast by focusing on great UI/UX using tools like Framer Motion and small, reusable React hooks.

Auth Strategy:

While Auth0 is excellent for rapid front-end authentication during prototyping, real user data and security mandate building out a proper backend and data persistence layer.

Separation of Concerns:

A strict split between UI and backend responsibilities is critical. The frontend should handle user intent, while the backend should hold secrets and do the heavy processing.

Launch Beta:

Add necessary features like saving user preferences and integrating privacy/consent options, then run a small invite-only beta to gather crucial initial feedback.

Built With

Share this project:

Updates