EmoVision Real-Time Facial Emotion Recognition

A computer vision application that detects and classifies human facial expressions in real-time, powered by a custom-trained deep learning model running entirely in the browser.

Live Demo Try it in your Browser

---

Overview

EmoVision is a real-time emotion detection system that uses your webcam to analyse facial expressions and predict emotional states no server required. The entire inference pipeline runs client-side in the browser using TensorFlow.js, making it fast, private, and accessible from any device.

The underlying CNN model was trained from scratch on labelled facial expression datasets and then ported to TensorFlow.js for browser-native execution. This project demonstrates the full cycle from model training to production deployment of a computer vision system.

---

Detected Emotions

Emotion	Description
😊 Happy	Smiling or joyful expression
😢 Sad	Downturned features, visible distress
😠 Angry	Furrowed brows, tense expression
😲 Surprised	Wide eyes, open mouth
😐 Neutral	Resting face with no dominant emotion
😨 Fearful	Raised brows, wide eyes
🤢 Disgusted	Nose wrinkle, curled lip

---

System Architecture

Webcam Input
      │
      ▼
┌─────────────────────┐
│   Face Detection     │  ← react-use-face-detection
└──────────┬──────────┘
           │
           ▼
┌─────────────────────┐
│  Frame Extraction   │  ← Real-time canvas capture
└──────────┬──────────┘
           │
           ▼
┌─────────────────────┐
│   CNN Inference     │  ← TensorFlow.js (browser-side)
└──────────┬──────────┘
           │
           ▼
┌─────────────────────┐
│  Emotion Output     │  ← Classified label + confidence
└─────────────────────┘

---

Tech Stack

Layer	Technology
Frontend Framework	React.js
ML Runtime	TensorFlow.js
Model Architecture	Convolutional Neural Network (CNN)
Face Detection	react-use-face-detection
Deployment	Vercel
Package Manager	Yarn

---

Key Highlights

• Fully client-side inference — no data is sent to any server. All processing happens locally in the browser.
• Custom-trained CNN model — the emotion recognition model was trained from scratch, not a pre-built wrapper.
• Real-time performance — processes live webcam frames continuously with low latency.
• Zero installation for end users — accessible directly via browser with a single link.

---

Getting Started

Prerequisites

• Node.js 16+
• Yarn

1. Clone the Repository

git clone https://github.com/ahmedrazakhann/emovision.git
cd emovision

2. Install Dependencies

yarn install

3. Run Locally

yarn run start

Open http://localhost:3000 in your browser and allow webcam access when prompted.

4. Production Build

yarn run build

---

How It Works

1. The webcam feed is captured and streamed to a canvas element in real-time.
2. A face detection layer locates and isolates the facial region from each frame.
3. The cropped face region is preprocessed and passed to the TensorFlow.js CNN model.
4. The model returns a probability distribution across all emotion classes.
5. The highest-confidence prediction is displayed as the current emotional state.

---

Model Details

The CNN was trained independently on a multi-class facial expression dataset. The trained model was exported and converted to TensorFlow.js format for browser-native execution using @tensorflow/tfjs. This eliminates the need for any backend inference server.

---

Live Demo

The application is deployed and publicly accessible. No account, installation, or setup required.

👉 emotion-detect-six.vercel.app

---

Author

Ahmed Raza Khan — Full-Stack Engineer · AWS Certified ML Associate

theahmedraza.com · LinkedIn · ahmed@theahmedraza.com

---

_{Built at the intersection of computer vision and the open web.}