GuardAI: Neural Wellness System

GuardAI's avatar visualizes fatigue through interactive feedback, demonstrating how AI-powered wellness breaks could prevent student burnout in real-time.

Comment

Inspiration

Every student knows the feeling - you've been studying for hours, but the last hour feels wasted. Your eyes are tired, your mind is foggy, and you're not retaining anything. Yet you keep pushing because "I need to study more."

Burnout is the silent killer of academic performance.

Studies show students lose up to 40% of learning efficiency in the final hour of study because they simply don't notice their own fatigue. Traditional study tools only track time - they don't track focus or energy levels. Students need a system that tells them when to take a break, not just how long they've been studying.

That's why I built GuardAI - to give students a visual, empathetic reminder that their energy matters as much as their study time.

What it does

GuardAI is a neural wellness system that uses an empathetic avatar to visualize student fatigue in real-time. The avatar changes expression based on energy levels - from energized 🧑‍💻 to tired 😫 to exhausted 😴.

Key Features: Focus Timer - Customizable study sessions with pause/resume functionality Energy Avatar - Visual fatigue representation that evolves with your energy Smart Alert System - Triggers at 75% fatigue with sound notifications Wellness Interventions - Power Nap, Box Breathing, Movement breaks Lockdown Protection - Forces a break after 3 ignored alerts Wellness Dashboard - Tracks fatigue patterns and burnout risk over time

How we built it

HTML5- Structure and layout CSS3- Glassmorphism UI, animations, responsive design JavaScript (ES6)- Application logic, timer, avatar system Chart.js- Wellness data visualization Web Audio API- Alert sound effects LocalStorage- Data persistence and study logs Google Gemini API- To overcome bugs and errors

Challenges we ran into

  1. Camera Integration (The Biggest Challenge)

I initially wanted real-time eye detection using MediaPipe and Face-API.js. The goal was to detect eye closure automatically and trigger fatigue alerts without manual input.

What went wrong:

a. MediaPipe models wouldn't load reliably from CDN b. Face-API.js required downloading models (200MB+) which failed on slow connections c. Lighting conditions affected detection accuracy

How I pivoted: I shifted focus to what matters most - the intervention logic and user experience. The avatar, alerts, wellness suggestions, and lockdown system work identically whether triggered by a button or real biometrics. We designed the system to be easily upgradable with actual detection in the future.

  1. Timer State Management

Managing timer state (running, paused, resumed) with the alert system was tricky.

Solution: Centralized state management with the app object and clear separation of timer and alert logic.

  1. Responsive Design

Making the glassmorphism UI work on both desktop and mobile.

Solution: CSS Grid and media queries with mobile-first approach.

  1. Chart.js Integration

Dynamically updating charts with new data.

Solution: Destroy and recreate charts on each update rather than mutating existing ones.

Accomplishments that we're proud of

a. Complete Working Prototype - Timer, avatar, alerts, and dashboard all working together b. Beautiful UI - Glassmorphism design with professional animations c. Smart Intervention System - Progressive escalation from alert to lockdown d. Data Persistence - Study logs saved locally e. Positive User Experience - Engaging, empathetic, and easy to use f. Scalable Architecture - Designed to integrate real biometric detection g. Zero External Dependencies - Only Chart.js for visualizations

What we learned

  1. Hackathons Are About Pivoting

The camera feature didn't work, but instead of giving up, I focused on what did work - and the result is better than expected.

  1. User Experience > Technical Complexity

A beautiful, working prototype beats a half-finished complex system every time.

  1. The Power of Empathy in Design

The avatar creates an emotional connection that timers can't. Users care about their avatar's well-being, making them more likely to take breaks.

  1. Progressive Escalation Works

The 3-strike system (alert → warning → lockdown) creates a sense of urgency without being too aggressive.

  1. Presentation Matters

A beautiful UI with smooth animations makes people believe in the product.

What's next for GuardAI: Neural Wellness System

Short Term:

a. Real Camera Integration - Implementing eye tracking with TensorFlow.js or MediaPipe for automatic detection b. Mobile App - React Native version for iOS and Android c. Custom Avatars - More avatar options and customization d. AI-Powered Recommendations - Personalized wellness suggestions based on study patterns

Medium Term:

a. Wearable Integration - Connect with smartwatches to track heart rate and sleep b. Machine Learning - Predict fatigue patterns based on historical data c. Multi-language Support - Localization for different regions

Long Term:

a. Educational Integration - School and university partnerships b. Social Features - Study groups with collective wellness tracking c. Research Partnerships - Validate effectiveness with academic studies

Built With

Share this project:

Updates