Inspiration We wanted to create something fun that combines AI with internet culture. Everyone relates to memes, so why not use facial recognition to match people with memes that capture their exact mood? The idea of turning awkward webcam faces into shareable content felt like the perfect hackathon challenge. What it does MemeMirror analyzes your facial expression through your webcam using AI and instantly matches you with a meme. Make a happy, sad, shocked, or surprised face, and the app detects your emotion by reading facial blendshapes (smile intensity, jaw movement, eyebrow position). It then displays the matching meme and auto-generates three captions in your chosen tone: Delulu, Brutal, Corporate, or Faith. How we built it We used Python Flask for the backend, MediaPipe for facial landmark detection, and OpenCV for image processing. The frontend uses vanilla JavaScript to capture webcam frames and send them to the server. MediaPipe analyzes 52 facial blendshapes to classify emotions with a stability buffer to smooth out detection. The Flask API returns the matched meme and triggers caption generation based on the selected tone. Challenges we ran into
Port conflicts: macOS AirPlay Receiver occupied port 5000, forcing us to switch to 5001 Static file serving: Flask's static folder configuration caused 404 errors initially CORS issues: Cross-origin requests between frontend and backend needed proper configuration Emotion detection accuracy: Tuning the thresholds for different facial expressions to get reliable results Camera permissions: Handling browser security restrictions for webcam access
Accomplishments that we're proud of We built a fully functional AI-powered web app from scratch in limited time! The real-time emotion detection actually works, the UI looks polished with a dark-mode aesthetic, and the caption generation adds personality. Getting MediaPipe integrated and working smoothly was a huge win. What we learned
How to integrate MediaPipe's facial landmark detection into a web application Real-time computer vision processing and optimizing for performance Flask API design and proper static file handling Frontend-backend communication with webcam data Debugging browser security restrictions and CORS policies
What's next for MemeMirror
Add more emotions (angry, confused, disgusted) Implement AI-powered caption generation using Claude API instead of pre-written captions Allow users to upload custom memes Add social sharing features Deploy to the web for public use Create a mobile app version
Tech Stack: Python, Flask, MediaPipe, OpenCV, JavaScript, HTML/CSS Built by: NGAChain
Log in or sign up for Devpost to join the conversation.