Focus

A site which helps you stay focused. A built in timer automatically gives you breaks and AI face tracking detects how focused you are when you're working.

Comment

Inspiration

With how much of our homework is online, we realize how easy it is to get distracted, procrastinate, and get no work done. We wanted to come up with some way to solve this problem, which is what inspired us to create this project.

What it does

There are two main portions of our app: the break scheduling system and the attention tracking system. The break scheduling system has a timer which automatically times out focus periods and break periods. These are both shown in a clean timer UI on the site. During the break periods, it gives you a game that you can play to relax. Research has shown that introducing timed breaks into your work is an effective way to stay focused. The other component is an AI system which tracks your face and determines if you are focused on your screen. It keeps track of this throughout the focus sections and tells you how focused you were at the end.

How we built it

We built the site in React, after first designing it in Figma. We hosted the site on Firebase. Our first step was to analyze the video from the webcam, which we did using a program called FaceMesh which maps 465 facial features onto an image of a face. We used these points to display the face and wrote a custom algorithm to estimate where the user is looking at the screen. Next, we designed the UI portion of the app. We made a home page, created a timer system, and integrated the face tracking with the UI.

Challenges we ran into

Finding a good method to track the user’s face was very difficult, and we had to search for a while until we found facemesh. Even after finding it, it was difficult to implement it on the site. Although FaceMesh gave us the points, it was very difficult to come up with a way to take these points and predict where the face was looking, and it took a lot of debugging and fine tuning. Finally, getting all the visuals to look good was challenging.

Accomplishments that we're proud of

We are very proud of how well the screen tracking works for us. It is very cool to be able to look at the screen and see the circle appear where we’re looking, and have the screen turn red when we’re looking away. We were surprised that we could get it working that well with just a camera, since the face tracking setups we’ve seen before typically use a special camera with two lenses to detect depth. We are also really happy with the overall appearance and feel of the site, since that is something we’ve wanted to improve from past hackathons.

What we learned

We learned how to use Figma to plan out the design of a site beforehand. We learned how to use FaceMesh and how to display coordinate information using a camera. We also learned how gaze tracking generally works.

What's next for Focus

In the future, we want to continue developing Focus. The next step would be adding more calibration and precision to the face tracking, since we were only able to get it so well in the limited time frame. We also want to add more game options, more customizability in the timing, and a leaderboard for focus score to create more of an incentive to use the site.

Built With

Share this project:

Updates