FocusPixie

Inspiration

We wanted to create an AI-powered tool to help students and professionals stay focused by detecting distractions in real time, inspired by the struggle to maintain concentration in a digital world.

What it does

FocusPixie uses facial analysis to detect signs of distraction (e.g., looking away, yawning) and provides real-time feedback through alerts, pop-ups, or sound notifications to help users stay on track.

How we built it

We used Face API.js (TensorFlow.js) for facial expression detection, JavaScript & HTML/CSS for the frontend, and we incorporated real-time alerts using JavaScript.

Challenges we ran into

We found it hard to implement the Face API.js into our project and especially connect it to our pomodoro timer. Additionally, it was challenging to make the canvas update regularly to provide real-time feedback.

Accomplishments that we're proud of

• Successfully implementing real-time AI-based distraction detection.
• Creating an intuitive and lightweight user experience.
• Learning how to optimize Face API.js for web-based applications.

What we learned

• How to integrate AI-powered facial recognition into a web app.
• The importance of user experience when delivering focus feedback.
• Optimizing real-time AI processing without overloading performance.

What's next for FocusPixie

• Adding customizable alerts for different distraction types.
• Implementing focus analytics & reports to track improvement.
• Exploring browser extensions for seamless productivity boosts.

Built With

• css
• faceapi.js
• html
• javascript
• vscode