powered by TensorFlow.js and 478 MediaPipe Facial Landmarks. Detects driver & user drowsiness in real-time right inside the browser with !
概览
powered by TensorFlow.js and 478 MediaPipe Facial Landmarks. Detects driver & user drowsiness in real-time right inside the browser with ! - : Hardware-accelerated machine learning engine running directly in the browser via WebGL. - : Google's MediaPipe 3D FaceMesh model tracking . - : UI component architecture. - : Type-safe development. - : Ultra-fast build tool and development server with Hot Module Replacement (HMR). - : Modern utility-first CSS styling and dark mode UI. - : Micro client-side router (/, /drowsiness, /login, /builder, /screener). - : Modern iconography. - : Asynchronous state management. - : Browser-native sound frequency synthesizer for real-time alarm generation. - : Lightweight, high-performance REST API backend. - : Server bundling and fast execution engine. - : Database ORM and session store. - : Authentication strategy supporting local accounts and Google OAuth2. - : Cloud Web Service deployment configuration.
README
以下为原文 README 节选，完整内容请查看原文。
👁️ AI-Powered Drowsiness Detection System
🚗💤➡️😊 Stay Awake, Stay Safe, Save Lives!
Real-Time WebRTC Eye Tracking & AI Drowsiness Alert System powered by TensorFlow.js and 478 MediaPipe Facial Landmarks. Detects driver & user drowsiness in real-time right inside the browser with 100% on-device privacy!
🌟 Key Highlights & Features
| Feature | Description |
|---|---|
| 👁️ Real-Time Eye Tracking | Tracks 478 3D facial landmarks at 30 FPS using MediaPipe Face Mesh & TensorFlow.js. |
| 📐 Scientific EAR Calculation | Computes the Eye Aspect Ratio (EAR) using Euclidean distance between vertical and horizontal eye coordinates. |
| 🚨 Multi-Stage Alert System | Triggers visual warning pulses and synthesized audio alarms when eyes stay closed for more than 2 seconds (customizable to 5s). |
| 🔒 100% On-Device Privacy | All computer vision processing happens locally in your browser via WebGL. No video feed ever leaves your device. |
| ⚡ High Performance | Hardware-accelerated GPU inference via TensorFlow.js WebGL backend. |
| 🚀 1-Click Cloud Deployment | Pre-configured render.yaml for seamless deployment on Render. |
🏗️ System Architecture & Data Flow
flowchart TD
A[📹 WebRTC Camera Feed 640x480] --> B[🎨 HTML5 Canvas 2D Rendering]
B --> C[🤖 TensorFlow.js WebGL Backend]
C --> D[👁️ MediaPipe 478-Landmark FaceMesh]
D --> E[🧮 Compute Eye Aspect Ratio - EAR]
E --> F{Is EAR < 0.21?}
F -- No: Eyes Open --> G[🟢 Status: Awake / Resets Closed Duration]
F -- Yes: Eyes Closed --> H[⏱️ Increment Closed Eyes Duration]
H --> I{Duration >= 2 seconds?}
I -- No --> J[🟡 Warning Glow Indicator]
I -- Yes --> K[🚨 TRIGGER ALARM!]
K --> L[🔊 Web Audio API Synthesizer Beep]
K --> M[🔴 Flashing Red Visual Overlay]
🛠️ Comprehensive Tech Stack & Tools Used
🧠 Computer Vision & AI Models
@tensorflow/tfjs(v4.22): Hardware-accelerated machine learning engine running directly in the browser via WebGL.
推荐工具
换一个关键词，或者移除筛选条件。
安装
npx skillfish add atharv-m-patil/drowsiness-detection-system