GreenBreak — How I Used Open-Source Gemma 2 to Force Screen-Addicted Developers to Touch Grass 🌱

#devchallenge #hf26challenge #ai #javascript

Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass Submission 🌿

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass

The "Desk-Lock" Dilemma: A Tale of Two Screens

Let’s be brutally honest for a second.

As software developers, our daily routine usually looks something like this:

Stare at a 32-inch 4K monitor for 4 hours trying to find a missing comma in a JSON file.
Experience severe mental brain fog, dry ocular agony, and bad posture.
Decide it’s time for a "well-deserved break."
Pull out a 6.1-inch OLED phone and scroll through Reddit/X on the exact same chair. 🤡

   ┌────────────────────────────────────────────────────────┐
   │              THE DEVELOPER "BREAK" CYCLE               │
   │                                                        │
   │   [ Work on 4K Screen ] ──(Exhaustion)──► [ Brain Fog ]│
   │            ▲                                    │      │
   │            │                                    │      │
   │     (Back to Work)                        (Take Break) │
   │            │                                    │      │
   │            │                                    ▼      │
   │   [ Still Fatigued ] ◄──(Doomscroll)── [ 6" Phone ]    │
   │                                                        │
   └────────────────────────────────────────────────────────┘

We call this "Screen Switching." You aren't resting; you’re just changing the aspect ratio of your digital exhaustion!

Existing fitness, habit, and mindfulness apps make this worse: they demand you track GPS coordinates, inspect live maps, log step counts, and constantly check notifications while outside. You're still staring at a screen.

So I built GreenBreak — the 30-Second Outdoor Dispatcher with a Zero-Screen Protocol.

🌿 What I Built

GreenBreak inverts the entire fitness app paradigm. You spend less than 30 seconds on the website, and then the app actively forces you to get away from your desk.

graph TD
    A[Launchpad: Choose 5m/15m/30m + Setting + Goal] -->|Dispatch Button| B(Gemma 2 27B Synthesizes 3-Step Sensory Mission)
    B --> C[Actionable Mission Card: Memorize 3 cues]
    C -->|Lock Screen Button| D[🌑 OLED Pocket Mode: Screen Turns Pitch Black]
    D -->|Timer Reaches 00:00| E[🔔 Native Web Audio Chime Rings]
    E --> F[Desk Return: 30s Sensory Debrief Input]
    F -->|Submit Observation| G(Gemma 2 Evaluates Mindfulness & Awards Badge)
    G --> H[🎉 Celebration Confetti & MongoDB Streak Scorecard]

⚡ The 5 Core Pillars:

⚡ 30-Second Launchpad Configurator: Input your name, pick your duration (5m Quick Eye Reset, 15m Sun & Movement, 30m Deep Unplug), your setting (Balcony/Rooftop, Urban Sidewalk, Public Park), and your physical recovery target (Relieve Eye Strain, Brain Fog, Stiff Muscles).
🧠 Open-Source Gemma 2 27B AI Inference: Synthesizes a 3-step actionable sensory mission tailored to your exact physical setting without using maps, GPS, or digital gimmicks.
🌑 OLED Pocket Mode (Screen Zero UX): The browser canvas immediately turns pitch-black (#0B0C0E) with an ambient pulsing green timer. A single command displays: "Screen locked. Look into sunlight. Disconnect until time expires."
🔔 Zero-Asset Web Audio Chime: When the countdown hits 00:00, a dual-harmonic sine chime (D5 587Hz → A5 880Hz) synthesizes directly via the browser's native Web Audio API to alert you to return to your desk.
🌱 Sensory Debrief & Mindful Badges: Upon return, you type a 1-sentence real-world observation (e.g., "Felt cold breeze from east and spotted sparrows nesting in roof"). Gemma evaluates the sensory depth, awards a badge (like Canopy Tactician or Horizon Scout), and records your sunlight minutes into MongoDB Atlas.

🚀 Demo

Live Deployed App: https://greenbreak.vercel.app/
GitHub Repository: https://github.com/Ankit-Kum-ar/greenbreak

UI Preview (Positivus Neo-Brutalist Theme)

The UI was crafted from scratch using the iconic Positivus Neo-Brutalist design system (#B9FF66 lime accents, #191A23 solid borders, rounded-[40px] cards, and bold Space Grotesk typography):

┌────────────────────────────────────────────────────────────────────────┐
│ ★ GreenBreak [Touch Grass]                     [ ⟲ Previous Activities ]│
├────────────────────────────────────────────────────────────────────────┤
│                                                                        │
│ ┌────────────────────────────────────────────────────────────────────┐ │
│ │ 01 What is your name?                                              │ │
│ │ [ Sarah Connor                                                   ] │ │
│ └────────────────────────────────────────────────────────────────────┘ │
│                                                                        │
│ ┌────────────────────────────────────────────────────────────────────┐ │
│ │ 02 Choose Break Interval                                           │ │
│ │ ┌───────────────┐  ┌────────────────────┐  ┌─────────────────────┐ │ │
│ │ │ 5m            │  │ 15m [SELECTED]     │  │ 30m                 │ │ │
│ │ │ Quick Eye     │  │ Sun & Movement     │  │ Deep Unplug         │ │ │
│ │ └───────────────┘  └────────────────────┘  └─────────────────────┘ │ │
│ └────────────────────────────────────────────────────────────────────┘ │
│                                                                        │
│ [ Ready for Zero-Screen Dispatch ]    [ ⚡ Dispatch Outdoor Break → ]  │
└────────────────────────────────────────────────────────────────────────┘

🧠 How I Built It

sequenceDiagram
    autonumber
    actor User as 💻 Developer
    participant UI as 🖥️ Next.js Frontend
    participant API as ⚡ /api/dispatch & /api/complete
    participant AI as 🧠 Gemma 2 27B (Backboard)
    participant DB as 🍃 MongoDB Atlas

    User->>UI: Select 15m + Balcony + Eye Strain
    UI->>API: POST /api/dispatch
    API->>AI: Prompt: Generate 3-step sensory mission
    AI-->>API: JSON { title, steps }
    API->>DB: Insert break (status: in_progress)
    API-->>UI: Return mission & sessionId
    UI->>User: Enter OLED Pocket Mode (Screen turns black)
    Note over User: Steps outside for 15 mins in daylight
    UI-->>User: 🔔 Web Audio Chime at 00:00
    User->>UI: Submit: "Felt cool wind & saw pigeons nesting"
    UI->>API: POST /api/complete
    API->>AI: Evaluate mindfulness observation
    AI-->>API: JSON { sensoryScore: 9, badgeEarned: "Canopy Gazer" }
    API->>DB: Update break (status: completed) & aggregate streak
    API-->>UI: Return badge & score
    UI->>User: 🎉 Confetti burst & stats logged to /history

Google Gemma 2 27B (google/gemma-2-27b-it): Gemma was specifically chosen because of its exceptional reasoning density and natural-world grounding. Rather than outputting generic fitness advice, Gemma formulates precise sensory cues (such as optical 20-meter horizon gazes, leaf texture tactile interactions, and non-mechanical audio isolation).
MongoDB Atlas Database: Stores session timestamps, user names, qualitative observations, mindfulness scores, and unlocked badge collections with custom case-insensitive user filtering (/history?name=...).
Next.js 15 & Tailwind CSS: Engineered with modular stage separation (SetupStage, MissionStage, PocketStage, DebriefStage, SummaryStage) ensuring clean state management and maximum performance.
Zero-Asset Web Audio Chime: Synthesized directly via mathematical dual-sine oscillators (D5 to A5 ramp) using the browser's native Web Audio API, creating a zero-bandwidth alert chime.

🌍 Why Does Open Innovation Matter?

Why build this with open-weight models like Gemma 2 instead of proprietary black-box APIs?

🔒 Sovereign Data & Mental Privacy: A user’s personal reflections, mental fatigue logs, and daily wellness moments should never be locked behind a proprietary vendor's training pipeline. Open weights give developers complete ownership over where and how data is processed.
⚡ Ultra-Low Latency Edge Inference: The Zero-Screen protocol requires instant, sub-second responses. Open-weight architectures allow developers to route inference across specialized high-speed gateways (like Backboard) or deploy directly to on-device hardware with WebGPU / Ollama.
🎯 Explainable & Controllable Reasoning: Evaluating human mindfulness is nuanced. Open innovation allows us to precisely structure system prompts, inspect token distributions, and ensure AI behaves as an encouraging outdoor guide rather than a generic corporate chatbot.

Now go close this browser tab, step outside, and touch some grass! 🌱