✨ Inspiration

Shopping for clothes can be inconvenient...crowded stores, long lines, and the tiring process of trying on outfits. Even at home, trying on clothes can leave behind piles of mess. We wanted to make it easier and more enjoyable to experiment with outfits. That’s how we came up with Looksy, a simple tool that lets users try on clothes virtually using a webcam! With online shopping growing every day, we wanted to make it as fun as shopping in person. Looksy helps users see how clothes will look on them before they buy, removing the guesswork from tricky size charts. It transforms online shopping into a more personal, fun, and confident experience!

πŸ‘• What it does

Looksy is a web app that lets users try on different clothing designs in real time using their webcam. It tracks body movements to position the shirt correctly, adjusting the size and fit dynamically. Users can switch between designs, see how the shirts look on them, take screenshots, and even save them to create their own virtual wardrobe.

🌟 Use cases

πŸ›’ Virtual Shopping: Looksy is perfect for online shoppers who want to see how clothes look on them before buying. It eliminates the hassle of returns and trying to guess the right size or style.

β™Ώ Accessibility for People with Disabilities: Looksy makes shopping more accessible for people with disabilities. They can try on clothes virtually without the need to physically visit stores, making the process simpler and more inclusive.

πŸ‘— Personalized Wardrobes: With Looksy, users can create their own virtual wardrobe by trying on and saving different outfits. This feature helps users mix and match styles, reducing the need for unnecessary purchases and promoting mindful fashion choices.

πŸŽ‰ Fun Fashion Challenges: Looksy can be used to host virtual fashion challenges with friends. Players can try on different outfits and compete to create the best looks, all from the comfort of their homes.

πŸ‘« Remote Fashion Collaboration: Looksy allows users to share their virtual try-ons with friends or family for feedback in real time. Whether it’s deciding on an outfit for an event or just having fun, Looksy makes it easy to collaborate remotely.

πŸ”§ How we built it

  • Authentication: Used Auth0 with Google OAuth integration for secure user login/signup. Enabled Single Sign-On (SSO) through Google accounts to simplify the login process.
  • Pose Detection: Used Mediapipe to track body landmarks like shoulders and torso for accurate clothing placement.
  • Image Processing: Used OpenCV and CVZone to resize and overlay clothing images onto the live webcam feed in real time.
  • Web Hosting: Flask was used to connect the webcam feed with the try-on feature.
  • Frontend: Designed the user interface with Canva and then built it with HTML, CSS, and JavaScript.
  • Backend: Used Flask and Firebase for managing user-uploaded clothing images and data.

πŸ›  Challenges we ran into

  • Getting the t-shirts to align properly with the body landmarks was tricky, especially for different poses.
  • Maintaining smooth performance while processing real-time webcam frames took some trial and error.
  • Combining the backend with the frontend and keeping the webcam stream consistent was a challenge.

πŸŽ‰ Accomplishments that we're proud of

  • Built a functional app that detects poses and overlays clothing designs in real time.
  • Kept the app simple and easy to use for anyone.
  • Solved issues with shirt alignment and made switching designs seamless.

πŸ“š What we learned

We learned how to use pose detection tools to track body landmarks accurately. We also figured out techniques to process and overlay images on live video feeds effectively. Finally, we combined Python tools like OpenCV and Flask to build a functional and interactive app.

πŸš€ What's next for Looksy

  • Add more clothing options, like dresses and jackets.
  • Create a mobile version for easier access.
  • Work with online stores to connect users with outfits they try on.

Built With

+ 23 more
Share this project:

Updates