-
-
sleep detector ai while working/studying
Inspiration
Sleep deprivation and tiredness can make it difficult to stay focused, especially during long study sessions. We wanted to explore how AI and computer vision could help people become more aware of their alertness. This inspired us to build SleepGuard AI, a browser-based tool that monitors visible signs of eye closure and provides configurable alerts.
What it does
SleepGuard AI uses a webcam and AI-powered face landmarks to estimate signs of drowsiness in real time. When prolonged eye closure is detected, it can trigger an alert to help the user regain attention. Users can customize alert settings and cooldown intervals. The project is designed to process camera frames locally in the browser rather than uploading or saving them.
How we built it
We built SleepGuard AI using HTML, CSS, and JavaScript, with MediaPipe's vision tools for face landmark detection. The interface combines a live camera preview, a monitoring dashboard, alert controls, and a privacy-focused design. Browser-based audio features provide alerts without requiring a separate application installation.
Challenges we faced
One of the main challenges was combining real-time camera processing with a responsive interface and alert logic. We also had to consider repeated alerts, browser audio permissions, and the importance of keeping the experience simple to use. We focused on making the prototype lightweight and configurable.
What we learned
This project helped us explore computer vision in the browser, real-time facial landmark processing, JavaScript event handling, and user-centered interface design. It also taught us that AI-based indicators need to be treated carefully: eye closure is only an estimate of drowsiness, not a medical diagnosis.
What's next
We hope to improve detection reliability across different lighting conditions, add more flexible alert options, and test the experience with more users. SleepGuard AI is an experimental awareness tool, not a substitute for adequate sleep or safe driving practices.
Built With
- css
- html
- javascript
- mediapipe
