AI StudyFocus: Build a Focus Tracker With Computer Vision on a Raspberry Pi

by Max Drahomaretskyi in Circuits > Raspberry Pi

28 Views, 0 Favorites, 0 Comments

AI StudyFocus: Build a Focus Tracker With Computer Vision on a Raspberry Pi

photo_2026-06-18_05-40-09.jpg
photo_2026-06-18_11-53-34.jpg
photo_2026-06-18_11-53-43.jpg

AI StudyFocus is a real-time focus analysis system for students. It uses a USB webcam and a YOLO26 computer vision model to detect different study behaviours. The system transforms these detections into a focus score and shows live feedback in a Gradio app and on the custom-made laser cut box.


The prototype combines AI, software, hardware and a maker part. A Raspberry Pi runs the system and connects to a webcam, LCD display, RGB LED, buzzer, microphone, and start/stop session button. The Gradio dashboard shows the live camera input, AI detection result, focus score, warnings, data visualisation, and debugging tools.


I created this project because many students believe they are studying effectively, while in reality they may often be distracted by their phone, noise, pets or other habits. AI StudyFocus gives students an opportunity to reflect on their study sessions using live predictions, warnings, session statistics and focus graphs.

Supplies

Hardware

Raspberry Pi 5 + MicroSD card with Raspberry Pi OS

Power supply for Raspberry Pi

Freenove Project Board

USB webcam

Microphone / USB microphone / webcam microphone

Push button


Maker part

Plywood 4 mm thickness (preferably 450x600 mm)

2x Box Hinges (60x35 mm)

8 or 12x Screws (12 mm)

Strong wood glue

Laser cutter is preferred


Note: Freenove Project Board includes a lot of hardware parts, such as LCD display with I2C module, active buzzer, RGB LED, jumper wires and built-in pull-up-down resistors.


Total cost: ~186.33 €

Downloads

Prepare the Parts and Files

Before building, prepare:

  1. all hardware from the BOM
  2. Raspberry Pi OS on the microSD card
  3. the project code
  4. the trained YOLO model file
  5. the enclosure files
  6. the 3D print file for the camera holder
  7. the wiring diagram

Build the Enclosure

photo_2026-06-18_05-43-54.jpg
photo_2026-06-18_05-29-53.jpg
photo_2026-06-18_05-44-29.jpg

For my project I used both Laser cutting and 3D printing.


I used Laser cutting to create the actual enclosure, the box that will contain all the electronics.

  1. For that I used 4mm plywood and cut it according to the file I attached below.
  2. You need the wood glue to assemble each part firmly. After the glue has dried, check that none of the parts are loose.
  3. Now you need to check how the Project Board and all the electronics fit inside the enclosure. If something doesn't fit/holes too big/engraved text wrongly placed - then you may fix and recut it again.
  4. If everything is fine then the next step will be to screw the hinges to the back of the enclosure. This part is tricky and requires precision.
  5. If the lid opens and closes normally - congratulations! You have assembled the box.

I used 3D printing to create the camera holder that will be mounted in the cut-outs on the back of the enclosure.

  1. Use the .stl file attached below.
  2. Set infill to 25% gyroid
  3. Set wall count to 6
  4. Set support to Tree
  5. Print the part and remove the supports carefully.

Connect the Electronics

photo_2026-06-18_05-46-30.jpg
photo_2026-06-18_05-45-03.jpg

For this part you need these electronic parts:

  1. Raspberry Pi
  2. Freenove Project Board (LCD display, RGB LED, buzzer, 20 cm F-F Jumper wires are included)
  3. Webcam (preferably with microphone)
  4. Push button
  5. 4x 30 cm F-F Jumper wires (for LCD)
  6. 2x 30 cm M-F Jumper wires (for button)

Connect the components just like shown below:

  1. LCD I2C -> SDA, SCL, VCC, GND
  2. RGB LED -> GPIO pins + 3.3V
  3. Button -> GPIO pin + GND
  4. Microphone -> USB or audio input
  5. Webcam -> USB or camera connector

I chose those pins for them:

  1. LCD address: 0x27
  2. Button GPIO: 14
  3. Buzzer GPIO: 12
  4. RGB LED pins: 5, 6, 13

Assembling Everything Together

photo_2026-06-18_06-24-58.jpg

Follow these steps to complete the hardware part:

  1. Place the Project Board with pre-mounted Raspberry Pi inside the box
  2. Connect the button to GND and a GPIO pin
  3. Connect the LCD to corresponding pins
  4. Connect RGB LED to corresponding pins
  5. Pass the USB cable of the webcam through the cut-out in the back of the box and connect the webcam to RPi
  6. Mount the webcam on the stand and place the stand into the holder.
  7. Mount the holder into the special cut-outs on the back of the box (mount in left cut-outs if box will lay on the right of you and vice-versa)
  8. Connect Raspberry Pi to the power supply

Done. You have to end up with the same result as on the picture above.

Dataset and AI Model

photo_2026-06-18_07-11-46.jpg

I created my own dataset using a webcam in simulated study situations. I annotated the data in Roboflow.

Classes:

  1. focused
  2. looking_away
  3. phone
  4. phone_usage
  5. eyes_closed
  6. head_down
  7. yawning
  8. talking

*Note: phone_usage is a derived class. The system detects it when a phone is visible together with distracted behaviour such as looking away or head down.

The images were manually annotated with bounding boxes and exported in YOLO26 format.

After preparing the dataset, I trained a YOLO object detection model. The trained model file was saved as best.pt and used inside the Python application.

Backend and Database

photo_2026-06-18_07-16-19.jpg

The project uses a FastAPI backend and PostgreSQL database to store the study session data.

  1. FastAPI enables communication between the backend and the frontend.
  2. Database makes it possible to later view useful data, such as session history, hardware logs or detection events.

Gradio Frontend

изображение_2026-06-18_044028910.png
изображение_2026-06-18_044051857.png
изображение_2026-06-18_044111849.png

The Gradio dashboard is the main user interface of the project.

User work flow in steps:

  1. User first lands on the About & Onboarding page. This page explains what the project does, how the system works, and what each detection class means.
  2. After reading the necessary information, the user can go to the Operating page.This page is used during a study session. A user now may start a study session, view live camera input, detected behaviour, their current focus score and possibly warnings that may occur while the study session.
  3. After ending the study session, the user can go to the Data page. This page shows saved session information. The information is shown in cards and graphs, which makes it easy to understand.
  4. The Gradio app also has a Debugging page. This page helps test hardware and system components and mainly used by the developer.

How to Test It Yourself

At this point you might want to test it yourself. If so, then follow these steps:

1. Clone the repository.

git clone https://github.com/howest-mct/2025-26-projectone-ctai-DrahomaretskyiMax.git
cd Project

2. Start the backend.

cd backend
python3 -m venv .venv-backend
source .venv-backend/bin/activate
pip install -r requirements.txt
docker compose up --build -d

3. Start the Gradio frontend.

cd ../frontend
python3 -m venv .venv-frontend
source .venv-frontend/bin/activate
pip install -r requirements.txt
python app.py

4. Open the dashboard in the browser.

http://127.0.0.1:7860

If running on Raspberry Pi from another device, use:

http://[raspberry-pi-ip-address]:7860

Final Result

After you have done all those steps, the full system is ready to use. You can start a study session, sit in front of the webcam and receive feedback through the dashboard or hardware components.

That's it! Have fun!