-
-
Expression detection
-
Data charts
-
Full UI
-
Interface before access of web cam
Inspiration:
In today's digital advertising world, most ads are static and ignore user emotions. We wondered: What if ads could read faces and adapt instantly? Our hypothesis challenged the status quo – that emotion-aware advertising could boost click-through rates by 50%. This project explores the intersection of AI, psychology, and marketing to create more empathetic, effective advertising.
What it does:
MoodSync Ads is an AI-powered web application that: Uses real-time facial emotion detection to identify user moods (happy, sad, angry, neutral) Dynamically swaps ad content to match detected emotions Provides personalized advertising experiences Includes A/B testing to scientifically validate the 50% click boost hypothesis Features interactive statistics, data export, and accessibility options The app demonstrates how AI can make advertising more human-centered and effective.
How we built it:
Tech Stack:
Frontend: HTML5, CSS3, JavaScript with modern ES6+ features AI/ML: face-api.js for facial expression recognition Visualization: Chart.js for real-time data charts UI/UX: Custom CSS with 3D effects, gradients, and animations
Key Implementation:
Real-time webcam processing with emotion detection every 2 seconds Confidence-based emotion smoothing to reduce false positives Dual-mode operation (AI-powered + demo fallback) Comprehensive statistics tracking with A/B testing framework Responsive design with accessibility features
Challenges we ran into
AI Model Loading: Face-api.js models are large (~10MB) and slow to load over poor connections Emotion Detection Accuracy: Pre-trained models sometimes misclassify expressions due to lighting, angles, or facial features Browser Compatibility: Ensuring consistent performance across different browsers and devices Real-time Performance: Balancing detection frequency with smooth user experience Fallback Handling: Creating a convincing demo mode when AI models fail to load
Accomplishments that we're proud of:
Scientific Rigor: Implemented proper A/B testing framework for hypothesis validation Extraordinary UI: Created a visually stunning interface with 3D effects and animations Robust Architecture: Built-in error handling, accessibility, and cross-browser compatibility Complete Solution: From emotion detection to data analysis and export Innovation: Pioneering emotion-aware advertising technology User Experience: Intuitive interface with voice feedback, emoji reactions, and progress tracking
What we learned:
AI Integration: How to implement computer vision in web applications Emotion Psychology: The complexity of facial expression interpretation Scientific Method: Importance of controlled experiments and statistical validation User Experience: Balancing technical innovation with intuitive design Performance Optimization: Techniques for real-time web applications Accessibility: Making AI-powered features inclusive for all users
What's next for AI-mood-detector-ad hypothesis:
Enhanced AI Models: Custom-trained emotion detection for better accuracy Multi-Platform: Mobile apps and integration with existing ad platforms Advanced Personalization: Combining emotions with browsing history and preferences Privacy-First: Implementing federated learning for on-device processing Real-World Testing: Partnering with brands for large-scale A/B testing Ethical Framework: Developing guidelines for responsible emotion-aware advertising
Log in or sign up for Devpost to join the conversation.