Project Info

focusr ai

Inspiration

Staying engaged during a lecture isn’t always easy. A brief lapse in focus—whether due to distractions, fatigue, or simply a wandering mind—can mean missing a key concept, making it harder to follow along with the rest of the lesson. In fast-paced courses, those small moments of disengagement add up, leaving students struggling to catch up. For those with learning disabilities, this is even more so the case. We built focusr.ai to help bridge that gap. By tracking engagement in real-time through eye movement, our tool identifies when a student zones out and ensures that missed topics get extra emphasis in the AI-generated summary. Instead of rewatching an entire lecture or sifting through lengthy PowerPoints, our users can quickly review exactly what they need to stay on track. This project isn’t about forcing focus—it’s about helping students learn more effectively, even when attention slips.

How we built it

We built focusr.ai as a web application that tracks engagement, transcribes lectures, and generates AI-powered summaries to help students stay on top of their learning. The frontend uses React and Tailwind CSS, while the backend, built with Flask, handles audio processing, AI interactions, and engagement tracking. To detect focus lapses, we use Gemini’s multimodal processing, analyzing eye movement patterns. OpenAI Whisper transcribes lectures, and Perplexity AI creates context-aware summaries, prioritizing missed sections. An interactive engagement chart visualizes attention levels, helping students quickly review key moments. Hosted on Vercel with cloud/local storage, focusr.ai ensures that distractions don’t become setbacks, making learning more adaptive and accessible.

Challenges we ran into

A major challenge we faced was engagement tracking for long lectures. Using OpenCV and MediaPipe for eye-tracking was too slow for extended recordings. We switched to Gemini and used images rather than videos, which efficiently analyzed video input directly, eliminating the need for uploading unnecessarily large files. This drastically improved speed and accuracy, making real-time engagement tracking viable for full-length lectures.

Accomplishments we're proud of

We as a team all contributed to this project, and we are thrilled at the intuitive way in which the UI/UX has come together. We’re proud of how we streamlined the entire learning workflow—instead of just transcribing audio, our system prioritizes the moments when a student loses focus, ensuring they can efficiently catch up without rewatching everything. We originally thought about going with another project idea because we thought we wouldn't be able to learn and finish everything on time for focusr.ai, but we successfully brought it all together into a working product that makes reviewing lectures more effective.

What we learned

All team members gained a much deeper understanding of the languages, libraries, and implementation techniques in their respective area of building focusr. The members: Ishan - frontend, Tyler - backend (engagement analysis), and Isabella - backend (transcript generation); all leaped into React.js, Flask, Git/Github, as well as component integration. Every member of our team worked with a language, technology, or library they hadn't previously worked with before, so we're proud to have learned while creating something we're all proud of.

What's next

for focusr.ai? We see focusr.ai expanding its impact on both students and educators. From a teacher’s perspective, implementing this system across multiple students in a class could provide valuable insights into engagement trends. If a significant percentage of students consistently lose focus at the same point in a lecture, instructors could identify and refine less engaging sections to improve overall learning outcomes. For students, we want to move beyond video uploads and explore live engagement tracking during lectures. This could allow real-time feedback, helping students refocus before they fall too far behind. Expanding in this direction also opens the door to making focusr.ai a Zoom app, extending its use beyond in-person lectures to online meetings, virtual classrooms, and remote work settings, making it a more versatile engagement tool.

focusr.ai

humans lose focus; we bring it back

Overview

focusr.ai is a web app designed to track student engagement during lectures. It allows students to record or upload lecture videos, analyzes their engagement levels using eye-tracking software, and generates AI-enhanced lecture summaries that emphasize sections where the student was distracted.

Features

Upload or Record Lecture Audio/Video: Supports MP4, WAV, M4A, and WebM file formats.
Eye Tracking for Engagement Analysis: Uses Google Gemini to detect eye movement and identify disengagement.
AI-Powered Summarization: Integrates OpenAI Whisper and Perplexity Sonar to generate detailed lecture summaries.
Visualized Engagement Data: Provides an interactive chart displaying engagement trends over time.
Web-Based Interface: Built with React & Flask for seamless user experience.

Tech Stack

Frontend (React + Tailwind CSS)

React.js (UI Components)
React Router (Navigation)
Chart.js (Engagement Visualization)
Tailwind CSS (Styling)

Backend (Flask API + Python)

Flask (REST API for file processing & AI interactions)
OpenAI Whisper (Audio transcription)
Perplexity - Sonar (lecture summarization)
Gemini Vision (engagement detection)

Cloud & Storage

Vercel (Frontend Deployment)
Flask (Backend Hosting)

Installation & Setup

Clone our repo

git clone https://github.com/yourusername/focusr-ai.git
cd focusr-ai

Backend Setup (Flask API)

cd backend
python -m venv venv
source venv/bin/activate  # (Windows: venv\Scripts\activate)
pip install -r requirements.txt

Set Up API Keys in .env file (create one if missing):

OPENAI_API_KEY=your-openai-api-key
PERPLEXITY_API_KEY=your-perplexity-api-key

Run the Flask server:

python app.py

Frontend Setup (React App)

cd ../frontend
npm install
npm start  # should run on http://localhost:3000

Usage

Go to the upload page and upload a lecture video or audio file.
The system transcribes and analyzes engagement levels based on eye movement.
AI generates a customized summary emphasizing areas of disengagement.
Review the engagement chart to visualize focus levels throughout the lecture.

Deployment

Frontend Deployment (Vercel)

cd frontend
vercel

Backend Deployment (Render / Flask on a Cloud Server)

Ensure all dependencies are installed.
Deploy via Render / DigitalOcean / AWS Lambda, etc.

Future Improvements

Live Eye Tracking via Webcam
Support for Real-Time Audio Processing
Integration with Learning Management Systems (LMS)
Zoom app and API Integration for online classes

Happy learning! ʕ•ᴥ•ʔ

Analysis

Compare with all teams

View

Metric

Figures cover GitHub contributors during the hackathon window. A co-authored commit counts in full for each author, so per-member totals add up to more than the whole-team figures.

Technology

Found in codeClaimed only

CSSIn code
FlaskIn code
HTMLIn code
JavaScriptIn code
OpenAIIn code
PythonIn code
ReactIn code
Google GeminiClaimed
VercelClaimed

7 of 9 appear in the indexed code. 2 claimed on Devpost could not be matched to code, which may simply mean the tool leaves no trace in the repository.

AI coding agents

No AI coding agent signals were found in this repository.

Detected from committed agent config files and commit authorship. Absence of a signal is not proof an agent was unused.

Codebase size

Source size

31 KB

Source files

Counts recognized source files only; vendored directories, binaries and lockfiles are excluded, so this is smaller than the repository on disk.