Tab: Overview - Save and Edit your Profile
Window: Edit ypu Avatar
Tab: Statistics - shows No. of sessions joined and Avg. focus score
Tab: Library - Upload files here
Tab: Study Sessions - Start your own session by choosing space and duration or join a session by using session code
Window: Session - shows a live session , with focus score, session code and chat room

Focus Room

Inspiration

Studying online has become more connected than ever, yet many students still struggle to stay focused. Video calls feel formal, Discord servers become distractions, and productivity apps often measure only time spent rather than actual attention.

What inspired us was a simple observation: people tend to work better when they can see others working. Libraries, cafes, and study halls create a subtle form of accountability that helps us stay on task. We wanted to recreate that feeling digitally while solving an even bigger problem: how do we know if someone is actually focused?

This question led us to combine a cozy multiplayer study environment with a custom machine learning model capable of estimating attention in real time. Instead of merely tracking minutes, Focus Room encourages meaningful focus through social presence and gentle accountability.

What it does

Focus Room is a multiplayer virtual study space where users can join themed environments such as cafes, libraries, gardens, dorms, and trains to study together.

Users can:

Join friends through a room code
Select seats inside a 2.5D isometric environment
Create custom pixel avatars
Chat in real time with emoji reactions
Share tasks, notes, and PDFs
Study together using synchronized sessions
View a live Focus Score generated by our machine learning system

Unlike traditional productivity tools, Focus Room does not simply count study time. Our CNN model continuously estimates a user's attention level and converts it into a dynamic focus score that appears above their avatar, creating a friendly and motivating form of accountability.

The score is generated from a real-time computer vision pipeline:

[Focus Score = p_focused\95 + p_distracted\35 + p_closed\5]

where the probabilities are predicted by our custom-trained convolutional neural network.

How we built it

Frontend & Platform

Stack :

Layer	Technology
Frontend	React + TanStack Start
Styling	Tailwind CSS + shadcn/ui
Backend	Supabase
Database	PostgreSQL
Authentication	Supabase Auth
Realtime Sync	Supabase Realtime
Storage	Supabase Storage

The virtual room system uses a 2.5D isometric tile grid where users can select seats, interact through chat, and collaborate in shared study sessions.

Machine Learning Pipeline

The most important part of the project was the focus detection system.

Our pipeline consists of five stages:

Face Detection using OpenCV Haar Cascades
Eye Region Extraction
Image Normalization (32×32 grayscale)
CNN-based Eye State Classification
Real-time Focus Score Generation

The workflow is:

Raw Camera Feed → Face Detection → Eye Crop → CNN Prediction → Focus Score

To train the model, we labeled data from several scenarios:

Looking at the screen
Looking away from the workspace
Blinking or closing eyes

Frames were labeled and split using:

80% training data
20% testing data

We trained a lightweight CNN containing Separable Convolution layers for approximately 50 epochs. The final model classifies eye states into:

Focused
Distracted
Closed

The resulting probabilities are converted into a live focus score that is broadcast through Supabase Realtime and displayed to all room participants.

Our final model achieved approximately 98.2% classification accuracy on the test dataset.

Realtime Collaboration

Every seat change, chat message, reaction, task update, and focus score update is synchronized through Supabase Realtime channels, allowing users to experience a truly shared study environment.

Challenges we ran into

Building and Combining Datasets

One of the biggest challenges was obtaining training data that could accurately represent different attention states.For this, we combined multiple publicly available datasets to build a focus-detection pipeline.

For eye-state classification, we used the MRL Eye Dataset, which provides labeled examples of open and closed eyes across different users and conditions. To represent distracted behavior, we incorporated a Roboflow gaze-direction dataset, allowing the model to learn when a user was looking away from their workspace.

The challenge was ensuring these datasets, collected under different conditions and labeling schemes, could be combined into a consistent three-class problem: Focused, Distracted, and Closed. We also had to preprocess and normalize the images so the model could generalize across varying lighting conditions, camera angles, and users.

Balancing Accuracy and Performance

The model needed to be accurate while remaining lightweight enough for real-time usage. Larger architectures improved performance but introduced latency. We ultimately redesigned the network using efficient convolutional layers to maintain responsiveness.

Converting Predictions into Meaningful Feedback

A raw classification output is not very motivating for users. We experimented with several approaches before designing a weighted focus score that feels intuitive, stable, and useful rather than overly sensitive.

Creating Presence Without Distraction

Ironically, a study platform can become distracting if overloaded with features. We spent significant time balancing social interaction, realtime updates, and visual design so that the platform remained calming rather than overwhelming.

Realtime Synchronization

Keeping focus scores, room presence, chat messages, reactions, and tasks synchronized across multiple users required careful handling of realtime events and state management.

Accomplishments that we're proud of

Successfully integrating a custom machine learning model into a multiplayer study platform.
Achieving approximately 98.2% accuracy on our focus detection classifier.
Building a complete end-to-end computer vision pipeline from data collection to deployment.
Creating a realtime virtual study space that feels warm, social, and motivating.
Combining ML, social accountability, and productivity into a single cohesive experience.
Designing a privacy-conscious system that focuses on attention signals rather than storing user recordings.
Delivering a polished 2.5D environment with live avatars, collaboration tools, and realtime focus updates.

What we learned

Throughout this project we learned that building machine learning systems involves much more than training a model.

We learned:

Data collection and labeling often take more effort than model training.
User experience is just as important as model accuracy.
Small, efficient models can outperform larger models when realtime performance matters.
Realtime systems become significantly more complex as user counts increase.
Social accountability can be a powerful motivator when implemented positively.

Most importantly, we learned how to bridge the gap between machine learning research and a real-world product that people can genuinely enjoy using.

What's next for Focus Room

Our vision for Focus Room extends far beyond the current prototype.

Smarter Focus Detection

Attention trend analysis
Adaptive sensitivity based on user preferences
Avatar state detection where unfocused users automatically appear as sleeping, providing a gentle visual cue without being intrusive

Better Study Experiences

Scheduled study sessions with calendar integration and room reservations
Pre-session reminders encouraging users to hydrate, prepare snacks, and get ready before a study session begins
Synchronized Pomodoro sessions
Built-in break management so users can take structured breaks without disrupting group sessions
Ambient soundscapes for each room
Friends, groups, and recurring study sessions
Public study rooms organized by subjects
Focus streak celebrations that cheer users on with a "Yuhooooo!" animation and notification when they surpass important focus milestones

AI-Powered Learning Tools

Automatic flashcard generation from uploaded PDFs, notes, and study materials
Personalized productivity reports
Focus pattern analytics
Intelligent break suggestions
Post-session quizzes generated from uploaded documents and study content to reinforce learning and measure retention

Community & Moderation

Room administrators with moderation controls
Ability for admins to remove disruptive users who are spamming, trolling, or sharing irrelevant content
Improved community guidelines and reporting systems to maintain productive study environments

Expanded Collaboration

Shared whiteboards
Collaborative note-taking
Study group workspaces
Cross-platform mobile support

Our long-term goal is to create the world's most engaging virtual study environment—one that combines the comfort of a favorite café, the accountability of studying with friends, and the intelligence of modern machine learning.

Focus Room combines machine learning, realtime collaboration, and immersive virtual environments to create a study experience where friends can stay accountable, motivated, and genuinely focused together. By blending AI-powered attention tracking with the social energy of shared study spaces, we aim to make productive learning more engaging, effective, and enjoyable.