DistractoBreako

Inspiration

The inspiration behind DistractoBreako stems from the "5-second rule," a well-known productivity hack that encourages individuals to overcome procrastination by starting their tasks within five seconds of deciding to act. While effective for many, this technique has a significant limitation: people often get started but quickly lose focus due to distractions like YouTube, Instagram, or other non-essential websites.

I wanted to address this challenge by creating a tool tailored for tech-savvy students and professionals who need to stay focused. The idea was simple yet powerful: ensure users remain on task by automatically closing irrelevant websites. This is made possible by leveraging AI to analyze screen activity and identify distracting content, allowing users to maintain focus on what truly matters.

What it does

DistractoBreako offers a straightforward, user-friendly solution to combat digital distractions:

Users activate the extension and input their focus topic. Behind the scenes, the extension monitors browsing activity to ensure alignment with the task. Here’s how it works:

The browser’s web navigation data is stored in an IndexedDB via Chrome's storage API. Each open webpage’s document title and body are parsed and analyzed. This data is fed into the Gemini Nano model, downloaded locally in the browser. The AI assigns a relevance score (ranging from 0 to 1) based on how closely the webpage aligns with the focus topic. It also generates a summary and explanation of the score for transparency. Pages with a relevance score below 0.5 are deemed irrelevant and automatically blocked, leaving users with only pertinent content to support their task. This ensures distractions are minimized while maintaining user control and clarity.

How we built it

DistractoBreako was developed using:

JavaScript and HTML for the extension interface and functionality. Chrome's Web Navigation and Storage APIs to monitor and store browsing data. The Gemini Nano model for analyzing webpage content and relevance scoring, all running locally to ensure privacy and speed. Integrating these technologies required a thoughtful approach to seamlessly connect user inputs, data processing, and AI analysis for effective distraction management.

Challenges we ran into

Building DistractoBreako was not without its hurdles:

Relevance Scoring Accuracy: Initially, the Gemini Nano model struggled to provide consistent relevance scores. However, after extensive experimentation with prompt engineering, we achieved significantly better results. Data Storage and Retrieval: Managing and syncing data between user inputs, IndexedDB, and the AI model was a technical challenge that required careful debugging and optimization. Seamless User Experience: Ensuring the extension worked smoothly across different browsing scenarios took additional effort and testing.

Accomplishments that we're proud of

Effective AI Integration: We successfully fine-tuned the Gemini Nano model to achieve a 99% accuracy rate in determining webpage relevance, ensuring users stay focused without unnecessary interruptions. Practical Functionality: The extension performs reliably and is intuitive to use, making it accessible to a broad audience. Positive Impact: The tool addresses a common pain point for students and professionals, fostering productivity in a world filled with digital distractions.

What we learned

The journey of building DistractoBreako offered valuable insights, including:

Gaining a deep understanding of Chrome DevTools and extension development. Exploring and utilizing IndexedDB for efficient data storage and retrieval. Experimenting with prompt engineering to enhance AI model performance.

What's next for DistractoBreako

We aim to evolve DistractoBreako into a full-fledged productivity tool that goes beyond being a simple Chrome extension. Our vision includes:

Laptop-Wide Monitoring: Utilizing computer vision to analyze the entire screen, ensuring distractions are managed across all applications, not just the browser.

Comprehensive Productivity Dashboard:

Detailed analytics to track focus time, distractions avoided, and productivity trends. Visual insights to help users understand and improve their work habits. Timers and Reminders:

Built-in focus timers to encourage deep work sessions. Custom reminders for task deadlines and breaks to promote healthy work rhythms. Integrated Chatbot:

A conversational AI assistant to help users set up tasks, provide focus tips, and adjust preferences seamlessly. By combining these features, DistractoBreako will become an indispensable tool for students, professionals, and anyone seeking to achieve their goals with maximum focus and efficiency.

Built With

• chrome
• css
• gemini
• html5
• indexeddb
• javascript