Inspiration

We wanted to create a web experience that’s truly personal. Everyone has a different mood throughout the day, and music/video can help regulate or amplify those emotions. We thought—what if a website could read your emotions through the camera and recommend YouTube music/videos based on how you feel? That’s how Moodify was born: a bridge between AI, emotion recognition, and entertainment.

What it does

Moodify captures your facial expression using your webcam and analyzes your emotion using deep learning. Then, it uses your detected mood and finds matching YouTube music/videos tailored to how you feel ad suggests them to you.

How we built it

Frontend: Built with HTML, CSS, and JavaScript. It uses the webcam API to capture a photo and send it to the backend in base64 format.

Backend: A Flask server handles the image data.

It uses:

  • DeepFace to analyze the emotion.
  • YouTube Data API to fetch relevant videos based on the emotion and user prompt.

Challenges we ran into

Camera access issues: Handling permissions and browser compatibility was tricky at first. Base64 image conversion: Ensuring that the captured image was correctly formatted for DeepFace. Integration: Combining frontend and backend to create a working site.

Accomplishments that we're proud of

  • We got real-time emotion detection working from a live webcam feed!
  • Integrated YouTube results in a smart way using detected mood.
  • It’s a web-based solution—no need for mobile apps or installations.

What we learned

  • How to use and optimize DeepFace for emotion recognition.
  • Real-world usage of Flask APIs and YouTube’s developer tools.
  • How to communicate between frontend and backend securely and efficiently.
  • How impactful personalized content can be when powered by AI.

What's next for Moodify - Where emotion meets motion

🤖 Voice prompts: Let users talk instead of type. 📷 Emotion timeline: Track your emotional state over time through pictures. 🧠 Advanced AI: Use emotion + facial attributes (age, gender) for hyper-personalized results.

Built With

  • deepface
  • flaskapi
  • googlegemini
  • googlegeminiapi
  • youtubeapi
Share this project:

Updates