FOCUS AI is an AI-powered, browser-based system designed to help teachers monitor student attention in real time.
It analyzes body posture and facial orientation to estimate focus levels, providing useful insights to improve classroom engagement.
⚡ Runs completely in the browser — no server or backend required.
- Multi-person detection using MoveNet
- Head orientation & posture tracking
- Nose deviation-based focus scoring
- Adjustable strictness control
- Smooth real-time processing
- FPS monitor for performance
- Live student count
- Focus percentage tracking
- Color-coded attention status
- Auto-updating logs
- Record sessions using MediaRecorder
- Save recordings (WebM → MP4 supported)
- Export data as CSV or JSON
- Add and manage students
- Store student images locally
- Data saved using IndexedDB
- Clean card-based UI
- Light/Dark mode toggle
- Responsive design (TailwindCSS)
- Smooth animations & transitions
- Sidebar navigation system
AI & Processing
- TensorFlow.js
- MoveNet (MultiPose)
- Custom attention detection logic
- Kalman tracking
Frontend
- HTML, CSS (TailwindCSS)
- JavaScript
- Canvas + Video Processing
Storage
- IndexedDB (local database)
/
├── index.html # Home page
├── run.html # AI dashboard
├── students.html # Student database
├── Web.html # Experimental version
├── assets/ # Images & sounds
└── README.md
- Download or clone the repository
- Open the project folder
- Run:
index.html
👉 Make sure to allow camera access in your browser.
- Modern browser (Chrome recommended)
- Camera-enabled device
- JavaScript enabled
- Face recognition system
- Automatic student identification
- Attention heatmaps
- Teacher login system
- Cloud sync & analytics dashboard
This project aims to assist teachers by providing real-time insights into student engagement using AI, helping improve learning efficiency in classrooms.