Stealth Focus

Inspiration

As students, we all struggle to balance study time and enjoyment, let alone study effectively. To make this engaging, we the creators pulled inspiration from the iconic James Bond and his relentless yet efficient process to create an effective study tool. As goes with all life, wanting to balance work and fun life also leads us to concern about maximizing our time. Naturally, a tool that keeps us on track within a dedicated study time became the idea we went for, and that's how Stealth Focus was made. No mission is impossible with the right tools.

What it does

Stealth Focus is a spy-themed Chrome extension that empowers you to dedicate your full focus to a dedicated mission. Using tools like Gemma 4 and LangChain, the extension allows you to time-box an objective and helps you stay on task. If you get distracted or go off topic, the extension refocuses you back to the task at hand by rerouting you to the last relevant. At the end of your session, it lets you know how well you focused and allows you to start a new task.

How we built it

Stealth Focus is a front-end heavy application that strongly depends on HTML/CSS and Javascript. Much of the logic control comes from event listeners and asynchronous functions handled by and associated with multiple UI components. The hero of the entire app is the control logic for determining what tabs are actualy productive, and which ones aren't. This central task is handled both by front-end and back-end, with integrations made possible by a Flask server and RESTful services. For this task, front-end tab listeners identify what website you're on and quickly classify your current tab as either on-topic or off-topic. If the front-end is unsure, it renders the entire HTML body as a byte64 and sends a POST request to the Flask server and uses LangChain to let Gemma decide.

Challenges we ran into

Throughout the development phase of Stealth Focus, we encountered several challenges ranging from the UI design to back-end unit testing. For our designers, it took some time to pull references together to develop a cohesive theme, from the color palette to the feel of the UI features. Similarly, several decisions over UI layout took considerable deliberation and diverse solutions, from the dashboard to the popups. Additionally for the backend, ensuring Gemma 4 could work alongside LangChain and image processing libraries was a signficant hurdle that took quite some time to find a solution towards. Most of all, integrating all the popups and dashboards with the control logic, both front-end and back-end, was the most difficult, Up to 30% of the project development timeline was spent on systems integration, speaking volumes on the difficulty of creating cohesive systems.

Accomplishments that we're proud of

Overall, we're very proud of the app in general. One of our biggest points of pride though lays both in our cohesive UI feel as well as how well our modules and components integrate with one another. Developing StealthFocus really deepened our appreciation for creating full-stack projects.

What we learned

As mentioned earlier, developing this app was a big learning lesson in software architecture and design. Additionally, we had a unique opportunity about learning to integrate external image processing with agentic tools like Gemma 4.

What's next for Stealth Focus

If we had slightly more time, Stealth Focus would be an even more robust extension where you can revisit past sessions, restart stock sessions, and analyze trends in your ability to focus.

Built With

• chrome
• flask
• gemma
• html/css
• javascript
• langchain
• python
• restful