A sophisticated web application that performs real-time facial recognition and emotion analysis using advanced machine learning models. Built with React, TypeScript, and TensorFlow.js.
- Detects multiple faces in real-time from webcam or uploaded images
- Estimates age and gender with confidence percentages
- Recognizes 7 different emotions (happy, sad, angry, etc.)
- Tracks analytics over time periods
- Everything runs locally in your browser (no data sent to servers)
- React 18 + TypeScript
- Redux Toolkit for state management
- face-api.js for the ML models
- Tailwind CSS for styling
- Vite for building
- Clone the repo:
git clone https://github.com/whoisaldo/real-time-face-analytics.git
cd real-time-face-analytics- Install dependencies:
npm install- Run the dev server:
npm run dev- Open http://localhost:5173 (or whatever port it forwards to) and click "Start Camera"
npm run build
npm run preview # to test the build🌐 Live Application: https://whoisaldo.github.io/real-time-face-analytics/
The application is automatically deployed to GitHub Pages on every push to the main branch.
This project is configured for automatic deployment to GitHub Pages. No backend is required as all processing happens client-side using:
- face-api.js for ML models
- TensorFlow.js for tensor operations
- Browser APIs for camera access
Alternative deployment options:
- Vercel:
vercel deploy - Netlify: Connect your GitHub repository
- Any static hosting: Build with
npm run buildand serve thedist/folder
src/
├── components/ # UI components
├── hooks/ # Custom hooks
├── store/ # Redux store
├── types/ # TypeScript types
└── utils/ # Helper functions
Works on Chrome, Firefox, Safari, and Edge. Needs camera permissions to function.
MIT
This project demonstrates advanced web development skills and AI/ML integration for real-time facial analysis applications.
Developer: Ali Younes
GitHub: @whoisaldo
LinkedIn: Ali Younes
Education: Northeastern University - Computer Engineering
Built with React, TypeScript, and TensorFlow.js