Personalised Dashboard
Welcome to the Personalised Dashboard! This project combines Computer Vision, Deep Learning, and modern web technologies to create a comprehensive solution for real-time face recognition and drowsiness detection. The system is designed to enhance safety and security, particularly in environments like driving, by monitoring users' faces and alerting them when signs of drowsiness or distraction are detected.
🚀 Key Features
Face Recognition
- Real-Time Face Scanning and Recognition: Utilizes FaceAPI.js for accurate face detection and recognition.
- User-Friendly Interface: Displays recognized faces with bounding boxes and confidence scores.
Drowsiness Detection
- Eye State Tracking: Monitors the user's eye state to detect drowsiness or excessive blinking.
- Gaze Direction Tracking: Tracks the user's gaze to identify distractions.
- Head Pose Estimation: Analyzes head orientation to detect abnormal movements or drowsiness.
- Alert System: Plays an alarm sound and displays visual alerts when drowsiness or distraction is detected.
🛠️ Technologies Used
Frontend
- React: For building the user interface.
- Tailwind CSS: For styling and responsive design.
- FaceAPI.js: For face detection and recognition.
Backend
- Flask: For drowsiness detection and API communication.
- OpenCV: For face and eye detection.
- MediaPipe: For gaze and head pose tracking.
- Keras: For the deep learning model used to classify eye state.
🚀 Setup and Installation
1. Backend Setup
Prerequisites
- Python Version: Python 3.7 - 3.9 (Python < 3.10 required)
- Webcam for real-time monitoring.
Steps
Set Up the Environment:
Install Dependencies:
pip install -r requirements.txt
pip install opencv-python protobuf==3.20.0
Run the Backend:
- For standalone drowsiness detection:
python test.py
- To start the backend server:
python app.py
2. Frontend Setup
Prerequisites
- Node.js and npm installed.
Steps
Navigate to the frontend directory:
cd frontend
Install dependencies:
npm install
Run the frontend:
npm run dev
Open your browser and navigate to:
http://localhost:3000
🖥️ How It Works
Face Recognition
- The frontend uses FaceAPI.js to detect and recognize faces in real-time.
- The webcam feed is processed to identify faces, and the results are displayed with bounding boxes and confidence scores.
Drowsiness Detection
- The frontend communicates with the Flask backend to monitor the user's eye state, gaze direction, and head pose.
- If drowsiness is detected, the backend sends an alert to the frontend, which displays a visual warning and plays an alarm sound.
🛠️ Troubleshooting
Backend Issues
Frontend Issues
- FaceAPI.js not working: Ensure the model files for FaceAPI.js are correctly loaded and accessible.
- Backend connection issues: Verify that the Flask backend is running and the API endpoints are correctly configured.
- Dependency issues: Ensure all dependencies are installed by running:
npm install
🐛 Reporting Issues and Contributing
Reporting Errors or Bugs
- Check Existing Issues: Search existing GitHub issues to avoid duplicates.
- Create a Detailed Bug Report:
- Include:
- Description of the error
- Steps to reproduce
- Environment details (OS, Python/Node.js version, etc.)
- Screenshots or error logs (if applicable)
Contributing
We welcome contributions! Follow these steps:
- Fork the repository.
- Create a new branch for your changes.
- Commit your changes.
- Push your changes and create a pull request.
📜 License
This project is licensed under the MIT License - see the LICENSE file for details.
🙏 Acknowledgments
- FaceAPI.js: For face detection and recognition.
- OpenCV: For face and eye detection.
- MediaPipe: For gaze and head pose tracking.
- Keras: For the deep learning model used to classify eye state.
- React: For building the user interface.
- Tailwind CSS: For styling and responsive design.
- Flask: For backend drowsiness detection.
Get started today and experience the power of Face Recognition and Drowsiness Detection! 🚗💤🚨