EmotionResonate: AI Mood Avatar

Intuitive welcome screen for Emotion Resonate—choose User or Admin to get started.
Select Text, Face, or Voice Analysis for instant emotion detection with AI.
Emotion Resonate keeps your data private—choose your preferred analysis mode.
Live face analysis detects and reflects your mood with empathetic avatar feedback.
Voice-based mood detection provides supportive feedback and empathy.

Inspiration

In a world where emotions are often misunderstood, dismissed, or judged, I felt compelled to create something different—a safe, empathetic digital space where people's feelings can be seen, heard, and respected without bias or stigma. Emotion Resonate was born from the belief that technology can be a force for emotional empowerment, not judgment.

This project aims to address the growing need for emotional intelligence tools that help individuals understand their own feelings and connect with others in meaningful, stigma-free ways.

What it does

Emotion Resonate is an AI-driven web application that detects and analyzes emotional intelligence through three input modalities:

Text Analysis: Reads the sentiment behind words using natural language processing. Facial Expression Recognition: Interprets emotions from live video or captured photos using face-api.js. Voice Analysis: Understands emotional tone and inflection from voice input.

The app provides users with real-time feedback about their detected mood, offering personalized, empathetic responses that encourage self-awareness and emotional growth—all in a judgment-free zone.

How we built it

Tech Stack Frontend: React.js AI/ML Libraries: face-api.js for facial expression recognition Sentiment.js for text sentiment analysis Web Speech API for voice input Deployment: Netlify Development Tools: CRACO for custom Webpack configuration

Architecture: Text Mode: Users type their thoughts, and the app analyzes sentiment polarity and scores. Face Mode: Real-time webcam or photo capture detects facial landmarks and expressions using pre-trained deep learning models. Voice Mode: Voice input is transcribed and analyzed for emotional tone and sentiment. The app dynamically displays mood-driven avatars and personalized empathetic messages based on the detected emotion.

Challenges we ran into

Building Emotion Resonate was a journey of technical and emotional growth: Webpack 5 Module Errors: Struggled with polyfill issues for Node.js modules in React (e.g., crypto, stream). Solved using CRACO and custom Webpack configurations. face-api.js Compatibility: Encountered model loading errors and compatibility issues between face-api.js and @vladmandic/face-api. Debugged by carefully matching model formats and loading methods. TensorFlow.js Integration: Ensuring TensorFlow.js loaded correctly before initializing AI models required precise async handling and error debugging. Deployment Hurdles: Netlify builds initially failed due to ESLint warnings and missing dependencies. Fixed by adjusting build settings and cleaning up warnings. Each obstacle mirrored the complexity of emotions themselves—challenging, layered, but ultimately rewarding.

Accomplishments that we're proud of

Successfully integrated three AI modalities (text, face, voice) into a single cohesive application. Deployed a fully functional MVP on Netlify that works across multiple devices and browsers. Overcame significant technical challenges with AI model loading, Webpack configuration, and deployment. Created a meaningful, empathetic user experience that prioritizes emotional well-being over judgment.

What we learned

Deep learning model integration: Hands-on experience with face-api.js, TensorFlow.js, and model loading strategies. React ecosystem mastery: Advanced understanding of React hooks, state management, and custom build configurations with CRACO. Empathic design principles: How to build technology that respects and uplifts human emotions. Debugging and persistence: The importance of systematic troubleshooting and never giving up when facing complex technical issues.

What's next for EmotionResonate: AI Mood Avatar

We envision evolving Emotion Resonate into a platform that enables: Continuous, real-time conversations: Face-to-face, text, or voice interactions that adapt to users emotional states. Personalized emotional coaching: AI-driven suggestions for emotional regulation and mental well-being. Multi-user support: Group emotion analysis for team collaboration and empathy-building. Mobile app development: Expanding to iOS and Android for broader accessibility. Integration with mental health platforms: Partnering with therapists and wellness apps to provide professional support.

Our ultimate goal is to build technology that respects, empowers, and uplifts emotional intelligence for a kinder, more inclusive digital future.