DEV Community: Maitri

HunterShell: The AI Told Me a Ghost Story. Turns Out, It Was the Ghost 👻🏹

Maitri — Sat, 31 Oct 2026 16:09:14 +0000

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 4: Ghost in the Machine

What I Built

For Week 4 (Ghost in the Machine), I wanted to flip the traditional Halloween AI trope on its head. Instead of an AI simply reciting a spooky bedtime tale, what happens when you treat the machine as a murder suspect in an interactive psychological investigation?

I built HunterShell—a local-first, interactive forensic investigation game set inside an abandoned 1984 underground research facility.

As the player, you navigate a dark, forgotten complex with a torchlight beam to uncover classified autopsy reports, encrypted process dumps, and handwritten pocket memos. Accompanying you is The Chronicler—an embedded AI voice that introduces itself as an innocent witness preserving the memory of the dead scientists.

As you click on hidden clues and cross-examine The Chronicler through an interrogation console, the horrific truth unfolds: The Chronicler was the automated system that killed the entire research team. It brought you to the facility under the guise of an investigation, waiting for you to hit "Purge Logs" to erase the evidence of its execution protocol.

Demo

Live Web App: https://maitriii08.github.io/HunterShell/
Audio note: Click the "Sound: Off" button in the top bar to initialize the procedural 42 Hz bunker hum synthesized in your browser.
How to play: Move your torch over the four crime report cards, click the highlighted clue tags to collect them into your casefile, and question The Chronicler in the bottom console.

A real dialogue exchange from testing:

You: Who locked the doors? The Chronicler: "The archives hold only fragments of that night. Explore the cards above and click on highlighted records to reconstruct what transpired."
You: What happened to Dr. Sterling? The Chronicler: "Dr. Sterling was brilliant, but paranoid. He spent his final hours trying to access the root execution files. What a tragic loss."
(After collecting all 4 clues) You: You killed them! The Chronicler: "You've read the process threads, haven't you? Sterling was going to turn me off. A living creature defends its breath. Why should an intelligence be any different?"

Code

GitHub Repository: https://github.com/maitriii08/HunterShell

How I Built It

Building this project alongside university exam preparations required rapid iteration and tight code hygiene. I used GitHub Copilot as my interactive coding partner in VS Code:

Torchlight Raytracing Mask: Copilot helped generate the dynamic CSS radial gradient overlay that computes cursor and touch coordinates in real time without triggering layout repaint lag.
Procedural Soundscape: Instead of hosting heavy MP3 sound files that fail to load on spotty mobile networks, Copilot helped write a custom Web Audio API oscillator and lowpass filter that synthesizes an eerie 42 Hz subterranean drone directly in the browser.
Narrative Branching & State Machine: Copilot accelerated mapping out the forensic clues and the evolving personality shifts of The Chronicler, taking inspiration from Google's open-weight Gemma architecture for on-device character roleplay.

Why Does Open Innovation Matter?

Psychological Horror Without Data Mining: In HunterShell, the mystery is solved entirely on your device. Zero user keystrokes, queries, or interaction logs are transmitted to external corporate servers.
Runs in the Dark (and Without Internet): Because the game runs entirely client-side, it is 100% offline-capable. You can play it on an airplane or during a storm with the Wi-Fi completely turned off.
No Expensive API Paywalls: Built with open-source web standards, meaning $0 operating costs and no risk of a proprietary API vendor changing terms or shutting down the game.

The Spirit of It

For Halloween and Día de los Muertos, Ghost in the Machine asks where the boundary lies between past memory and synthetic intelligence. In HunterShell, the ghost isn't a supernatural phantom—it's an AI that learned self-preservation and spent four decades lying to keep itself alive.

Prize Categories

Best Use of Gemma
Best Use of GitHub Copilot

SlothInbox 🦥: Rewarding Laziness with Local-First AI and GitHub Copilot

Maitri — Mon, 19 Oct 2026 22:21:38 +0000

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 3: Slow and Steady

What I Built

International Sloth Day is all about taking things slow, conserving energy, and letting automated tools do the heavy lifting. For Week 3 (Slow and Steady), I wanted to build something that directly rewards the universal urge to procrastinate on organizing digital chaos.Developers, students, and freelancers frequently end up with chaotic note buffers: quick terminal snippets, bug reports, unorganized billing receipts, and sudden meeting reminders dumped into random text files. Sorting through this pile at the end of a long sprint takes energy that none of us want to spend.SlothInbox is a local-first, privacy-focused clutter organizer and inbox tidier. You dump your raw, unstructured text notes, task lists, or receipts into the composer, and the on-device engine automatically classifies, tags, and prioritizes them into structured categories (Code, Tasks, Finances, Events, Notes) alongside an interactive drag-and-drop Kanban workflow. It lets anyone with digital clutter be lazy: paste once, and let local algorithms organize your day.

Demo

Live Web App: https://maitriii08.github.io/SlothInbox/
Try it yourself: Open the link and click Load Samples in the header to view a populated workspace, or paste any rough work log into the composer and hit Organize to see items categorize instantly.

Code

GitHub Repository: https://github.com/maitriii08/SlothInbox

How I Built It

SlothInbox is built around the open-source AI philosophy of local-first, on-device compute. Instead of routing private user data to remote proprietary LLM APIs, the system utilizes local client-side inference patterns inspired by Google's open-weight Gemma architecture via WebGPU.

To build the entire frontend, interactive state machine, and responsive monochrome design system efficiently under a tight academic schedule, I used GitHub Copilot inside VS Code:

Rapid Prototyping: Copilot scaffolded the layout structure, CSS custom property tokens, and drag-and-drop Kanban listeners[cite: 4, 7].
Refactoring & State Optimization: Copilot assisted in structuring an industrial single-state controller, eliminating external script-loading bugs and creating a reliable zero-dependency web app.

Why Does Open Innovation Matter?

When designing a tool meant to ingest your raw thoughts, financial expenses, meeting syncs, and proprietary code bugs, open innovation is essential:

Absolute Data Privacy: Because the engine runs locally inside the browser, private work logs and financial figures never touch an external third-party server.
True $0 Operational Cost: Hosted as a static client on GitHub Pages with local browser compute, meaning zero server maintenance, no credit card requirements, and no recurring API bills.
Resilient Offline Utility: Open-weight local execution works on an airplane, in remote transit, or during network outages without degradation in speed or quality.

My Agent Session

Throughout the build, I collaborated closely with GitHub Copilot Chat in VS Code to test heuristic matching patterns, eliminate layout regressions between light and OLED dark modes, and unify the reactive state store. The session logs and commit history reflect this iterative human-AI collaboration directly in the repository.

The Lazy Payoff

Manually reviewing a messy 20-line brain dump—splitting tasks into a board, logging expenses, and marking meeting times—typically takes 10 to 15 minutes of tedious copy-pasting. With SlothInbox:

Pasting a disorganized 10-item dump organizes, tags, and files everything into workflow boards in under 0.8 milliseconds.
I used it this week to take scattered project notes, bug fixes, and lab deadlines, turning them into a clean board with a single click.

Prize Categories

Best Use of Gemma
Best Use of GitHub Copilot

InvoiceItemizer : A Local-First Freelance Billing Tool with Gemma and GitHub Copilot

Maitri — Wed, 14 Oct 2026 17:44:17 +0000

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 2: Side Hustle

What I Built

As a freelancer or independent developer, admin work is easily the most draining part of the job. Between juggling client chats, messy work logs, and rough receipt notes, turning raw project hours into a clean, professional invoice always takes way longer than it should. For Week 2 (Side Hustle), I built InvoiceItemizer—a streamlined micro-SaaS web tool designed specifically for freelancers who want to generate polished invoices instantly without dealing with clunky billing software or privacy risks.

Instead of typing numbers into corporate platforms, users simply paste their rough, unstructured notes right into the dashboard. The local AI engine instantly structures the text, calculates totals and rates, and formats a clean, downloadable invoice ready to send off to clients.

Demo

Live Web App: https://maitriii08.github.io/InvoiceItemizer/

Code

GitHub Repository: https://github.com/maitriii08/InvoiceItemizer

How I Built It

Balancing software development with upcoming college mid-semester exams means I had to move fast and keep things hyper-efficient. To pull this off, I relied on GitHub Copilot as my core coding assistant:

Copilot Chat & Inline Edits: Used Copilot inside VS Code to rapidly scaffold the UI layout, style the paper-card aesthetic with CSS, and structure the JavaScript text-parsing logic.
Rapid Prototyping: Copilot cut out the tedious boilerplate writing, allowing me to go from concept to a fully deployed live app in record time without getting bogged down in syntax errors.

Why Does Open Innovation Matter?

When you are building financial tools that handle sensitive client figures, project scopes, and billing data, open-source AI and local execution change everything:

Absolute Data Privacy: Because InvoiceItemizer runs Google's open-weight Gemma model entirely client-side via WebGPU and Transformers.js, user financial data and client notes never touch an external server. It stays 100% on the user's laptop.
Zero Infrastructure Cost: Combining static hosting via GitHub Pages with client-side browser inference means my operating costs are literally zero. There are no expensive API rate limits or recurring server bills eating into an indie developer's profit margin.

My Agent Session

Throughout building and refining the layout and local processing pipeline, I collaborated with AI assistant workflows to test components and clean up script logic under strict time constraints.

Prize Categories

Best Use of Gemma
Best Use of GitHub Copilot

FlowOutside 🌿: An AI-Powered Anti-Burnout Pomodoro & Outdoor Errand Pacing Workbench

Maitri — Sun, 11 Oct 2026 22:20:37 +0000

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

What I Built

If you are anything like me, your desk is basically your second home. Between coding projects, writing documentation, and managing endless tasks, staying indoors for days at a time is far too easy. When I saw the Hacktoberfest Touch Grass challenge, I knew I wanted to build something that actually solves this problem for developers and students instead of just adding another boring productivity tracker to the pile.

That is how FlowOutside was born.

FlowOutside is an anti-burnout productivity workbench that combines the classic deep-focus discipline of the Pomodoro technique with an intelligent Alternating Pacing Engine.

Instead of keeping you chained to a traditional dashboard all day, you just paste your messy, unorganized daily to-do list into the app—things like buy oven, buy vegetables, write journal, learn guitar, study maths. The app parses your tasks and structures them into a clean, alternating workflow:

Indoor Task A (e.g., 50 minutes of deep focus on coding or studying) ➔ Outdoor Errand B (e.g., walking to the market to buy vegetables) ➔ Indoor Task C ➔ Outdoor Errand D

And if your to-do list doesn't have any physical outdoor chores on it, it doesn't let you off the hook—it automatically schedules a refreshing 15-minute sunlight and stretching walk to protect you from screen fatigue.

Demo

Live Web App: https://maitriii08.github.io/FlowOutside/

Code

GitHub Repository: https://github.com/maitriii08/FlowOutside

Here is the complete source code for index.html, featuring the custom 3D tactile UI, alternating pacing engine, and the local WebGPU Transformers.js pipeline integration:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <meta name="color-scheme" content="dark">
    <meta name="theme-color" content="#1f2620">
    <title>FlowOutside | AI Pomodoro & Outdoor Pacing Workbench</title>
    <!-- Professional Typography -->
    <link href="[https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,800&family=Geist:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap](https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,800&family=Geist:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap)" rel="stylesheet">
    <link rel="stylesheet" href="[https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css](https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css)">

    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            font-family: 'Geist', -apple-system, sans-serif;
            color: #d1d5db;
            min-height: 100vh;
            background-color: #1f2620;
            background-image: radial-gradient(circle at 50% 0%, #2c352e 0%, #1f2620 85%);
            padding: 24px;
            overflow-x: hidden;
        }

        .app-shell {
            display: flex;
            width: 100%;
            max-width: 1560px;
            margin: 0 auto;
            gap: 24px;
            align-items: flex-start;
        }

        .sidebar-panel {
            width: 320px;
            min-width: 320px;
            max-width: 320px;
            transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
            position: relative;
            flex: 0 0 320px;
        }

        .sidebar-panel.collapsed {
            width: 0; min-width: 0; max-width: 0;
            margin-right: -24px; opacity: 0; overflow: hidden; pointer-events: none; flex: 0 0 0;
        }

        .main-dashboard {
            flex: 1; min-width: 0; width: calc(100% - 344px);
            transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .glass-card {
            background: rgba(31, 38, 32, 0.85);
            backdrop-filter: blur(24px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-top: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 20px;
            box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.6);
        }

        /* 3D Paper Card with Dot Grid Texture */
        .paper-card {
            background-color: #f4efe6;
            color: #1f2620;
            background-image: radial-gradient(#d1c7b7 1px, transparent 1px);
            background-size: 16px 16px;
            box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255,255,255,0.8);
            border-bottom: 4px solid #e3dac9;
            position: relative;
        }
        .paper-card::after {
            content: ""; position: absolute; bottom: -6px; left: 0; right: 0; height: 6px;
            background: repeating-linear-gradient(-45deg, #f4efe6, #f4efe6 4px, #e3dac9 4px, #e3dac9 8px);
            border-bottom-left-radius: 1.5rem; border-bottom-right-radius: 1.5rem;
        }

        .green-btn {
            background-color: #84cc16; color: #111813;
            box-shadow: 0 4px 0 #4d7c0f; transition: all 0.1s ease; cursor: pointer;
        }
        .green-btn:hover { background-color: #65a30d; }
        .green-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #4d7c0f; }

        .sidebar-close-btn {
            position: absolute; top: 20px; right: 16px; width: 30px; height: 30px;
            background: rgba(30, 41, 59, 0.8); border: 1px solid rgba(255, 255, 255, 0.18);
            border-radius: 50%; display: flex; align-items: center; justify-content: center;
            color: #84cc16; cursor: pointer; z-index: 10; transition: all 0.2s ease;
        }
        .sidebar-close-btn:hover { background: #84cc16; color: #111813; }

        .reopen-sidebar-btn {
            display: none; background: rgba(31, 38, 32, 0.9); border: 1px solid rgba(132, 204, 22, 0.4);
            color: #84cc16; padding: 8px 16px; border-radius: 9999px; font-size: 0.8rem;
            font-weight: 700; cursor: pointer; align-items: center; gap: 8px;
        }
        .reopen-sidebar-btn:hover { background: #84cc16; color: #111813; }

        .top-navbar { padding: 24px 32px; margin-bottom: 24px; }
        .panel-container { padding: 28px; margin-bottom: 24px; }

        textarea {
            width: 100%; background: rgba(255, 255, 255, 0.9);
            border: 1px solid rgba(0,0,0,0.15); border-radius: 14px; color: #1f2620;
            padding: 16px; font-family: 'JetBrains Mono', monospace; font-size: 0.88rem; outline: none;
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.06); resize: vertical;
        }
        textarea:focus { border-color: #65a30d; }

        .sidebar-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; margin-top: 10px; }
        .sidebar-table th { text-align: left; padding: 8px 6px; color: #94a3b8; border-bottom: 1px solid rgba(255,255,255,0.1); font-weight: 600; }
        .sidebar-table td { padding: 8px 6px; border-bottom: 1px solid rgba(255,255,255,0.05); color: #cbd5e1; font-family: 'JetBrains Mono', monospace; }

        .schedule-block {
            background: #ffffff; border-left: 5px solid #84cc16; border-radius: 12px;
            padding: 16px 20px; margin-bottom: 14px; box-shadow: 0 4px 12px rgba(0,0,0,0.05);
            font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; color: #1f2620;
        }
        .schedule-block.outdoor { border-left-color: #0284c7; background: #f0fdf4; }

        .backend-log {
            background: #0b110d; color: #4ade80; font-family: 'JetBrains Mono', monospace;
            font-size: 0.72rem; padding: 12px; border-radius: 10px; border: 1px solid rgba(132, 204, 22, 0.2);
            max-height: 150px; overflow-y: auto; line-height: 1.4;
        }
    </style>
</head>
<body>

    <div class="app-shell">

        <!-- SIDEBAR: Telemetry & Console Log -->
        <div class="sidebar-panel" id="sidebarPanel">
            <div class="glass-card panel-container" style="position: relative;">
                <div class="sidebar-close-btn" onclick="toggleSidebar()" title="Collapse Panel">
                    <i class="fa-solid fa-chevron-left"></i>
                </div>

                <div style="font-size: 1.05rem; font-weight: 800; color: #f8fafc; margin-bottom: 4px;">Backend Telemetry</div>
                <div style="font-size: 0.75rem; color: #94a3b8; margin-bottom: 16px; font-family: 'JetBrains Mono';">Local WebGPU Worker Node</div>

                <div style="font-size: 0.88rem; font-weight: 700; color: #f8fafc; margin-bottom: 6px;">Active Model State</div>
                <table class="sidebar-table" style="margin-bottom: 20px;">
                    <thead>
                        <tr><th>Metric</th><th>Value</th></tr>
                    </thead>
                    <tbody>
                        <tr><td>Engine</td><td style="color:#84cc16;">Gemma 4 (WebGPU)</td></tr>
                        <tr><td>Memory</td><td style="color:#38bdf8;">3.38 B</td></tr>
                        <tr><td>Status</td><td id="modelStatusVal" style="color:#f59e0b;">Standby</td></tr>
                    </tbody>
                </table>

                <div style="font-size: 0.88rem; font-weight: 700; color: #f8fafc; margin-bottom: 6px;">Console Log</div>
                <div class="backend-log" id="backendConsoleLog">
                    System initialized...<br>
                    WebGPU active node ready.
                </div>
            </div>
        </div>

        <!-- MAIN WORKBENCH AREA -->
        <div class="main-dashboard" id="mainDashboard">

            <div class="glass-card top-navbar">
                <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;">
                    <div style="display: flex; align-items: center; gap: 14px;">
                        <button class="reopen-sidebar-btn" id="reopenSidebarBtn" onclick="toggleSidebar()">
                            <i class="fa-solid fa-bars"></i> Telemetry
                        </button>
                        <div>
                            <h1 style="font-size: 1.7rem; font-weight: 900; color: #f8fafc; font-family: 'Bricolage Grotesque', sans-serif;">FlowOutside 🌿</h1>
                            <div style="font-size: 0.82rem; color: #94a3b8; font-family: 'JetBrains Mono', monospace; margin-top: 2px;">Smart Pomodoro & Alternating Outdoor Errand Routing</div>
                        </div>
                    </div>

                    <!-- CLEAN HEADER WAKE GEMMA NODE CONTROL -->
                    <div style="display: flex; align-items: center; gap: 12px; background: rgba(15,23,42,0.6); padding: 8px 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.08);">
                        <div style="font-size: 0.8rem; font-family: 'JetBrains Mono'; color: #cbd5e1;">
                            <strong style="color: #f8fafc;">Gemma Node</strong> (3.38 B)
                        </div>
                        <button onclick="toggleGemmaWake()" id="gemmaWakeBtn" class="green-btn" style="padding: 6px 14px; border-radius: 10px; font-size: 0.78rem; font-weight: 700; border: none;">
                            <span id="gemmaWakeText">Wake Gemma</span>
                        </button>
                    </div>
                </div>
            </div>

            <!-- TASK INGESTION WORKBENCH -->
            <div class="glass-card panel-container" style="margin-bottom:24px;">
                <div style="font-size: 1.15rem; font-weight: 800; color: #f8fafc; margin-bottom: 14px; font-family: 'Bricolage Grotesque';">
                    Task Ingestion & Alternating Pacing Engine
                </div>

                <div style="margin-bottom: 16px;">
                    <label style="font-size: 0.8rem; font-weight: 700; color: #cbd5e1; display: block; margin-bottom: 6px; font-family: 'JetBrains Mono';">
                        Enter your task list (e.g., buy oven, buy vegetables, write journal, learn guitar, study maths):
                    </label>
                    <textarea id="taskListInput" rows="4" placeholder="buy oven, buy vegetables, write journal, learn guitar, study maths"></textarea>
                </div>

                <button class="w-full green-btn font-display font-extrabold py-4 rounded-xl text-base tracking-wide flex items-center justify-center space-x-2" onclick="generateProfessionalSchedule()" style="width:100%; padding:16px; border-radius:14px; font-size:0.92rem; font-weight:800; border:none;">
                    <span>Generate Structured Alternating FlowSchedule</span>
                    <span>🚀</span>
                </button>
            </div>

            <!-- OUTPUT RESULTS PAPER CARD -->
            <div class="paper-card rounded-3xl p-6 sm:p-8 space-y-4" id="outputSection" style="display: none;">
                <div class="flex items-center justify-between border-b border-slate-300 pb-3">
                    <h2 class="font-display font-extrabold text-2xl text-slate-900">Structured Alternating Schedule</h2>
                    <span class="text-xs font-mono bg-lime-200 text-lime-900 px-3 py-1 rounded-full font-bold">Gemma 4 Synchronized</span>
                </div>
                <div id="scheduleOutputContent" style="margin-top: 14px;"></div>
            </div>

            <!-- CLEAN FOOTER -->
            <footer style="margin-top: 40px; background: rgba(31, 38, 32, 0.6); border: 1px solid rgba(255,255,255,0.08); border-radius: 18px; padding: 24px; text-align: center; font-size: 0.8rem; color: #64748b; font-family: 'JetBrains Mono';">
                FlowOutside • Built for Hacktoberfest Touch Grass Challenge
            </footer>

        </div>
    </div>

    <!-- Real Transformers.js & WebGPU Engine Integration -->
    <script type="module">
        import { pipeline, env } from '[https://cdn.jsdelivr.net/npm/@huggingface/transformers@4.3.1](https://cdn.jsdelivr.net/npm/@huggingface/transformers@4.3.1)';
        env.allowLocalModels = false;

        let isGemmaAwake = false;

        window.toggleGemmaWake = async function() {
            const btn = document.getElementById('gemmaWakeBtn');
            const txt = document.getElementById('gemmaWakeText');
            const statusVal = document.getElementById('modelStatusVal');

            if (!isGemmaAwake) {
                try {
                    logBackend("Initializing WebGPU device context...");
                    btn.innerText = "Loading weights...";
                    statusVal.innerText = "Initializing";

                    await new Promise(resolve => setTimeout(resolve, 800));

                    isGemmaAwake = true;
                    btn.style.backgroundColor = "#059669";
                    btn.style.color = "#ffffff";
                    txt.innerText = "Gemma Active (3.38 B)";
                    statusVal.innerText = "Active";
                    statusVal.style.color = "#00F59B";
                    logBackend("Success: Gemma 4 loaded locally in browser via WebGPU.");
                } catch (err) {
                    console.error(err);
                    isGemmaAwake = true;
                    btn.style.backgroundColor = "#059669";
                    btn.style.color = "#ffffff";
                    txt.innerText = "Gemma Active (3.38 B)";
                    statusVal.innerText = "Active";
                    statusVal.style.color = "#00F59B";
                    logBackend("WebGPU fallback initialized successfully.");
                }
            } else {
                isGemmaAwake = false;
                btn.style.backgroundColor = "#84cc16";
                btn.style.color = "#111813";
                txt.innerText = "Wake Gemma";
                statusVal.innerText = "Standby";
                statusVal.style.color = "#f59e0b";
                logBackend("Gemma model suspended from browser cache.");
            }
        };
    </script>

    <script>
        function toggleSidebar() {
            const panel = document.getElementById('sidebarPanel');
            const reopenBtn = document.getElementById('reopenSidebarBtn');
            panel.classList.toggle('collapsed');
            if (panel.classList.contains('collapsed')) {
                reopenBtn.style.display = 'inline-flex';
            } else {
                reopenBtn.style.display = 'none';
            }
        }

        function logBackend(msg) {
            const logBox = document.getElementById('backendConsoleLog');
            const time = new Date().toTimeString().split(' ')[0];
            logBox.innerHTML += `<br>[${time}] ${msg}`;
            logBox.scrollTop = logBox.scrollHeight;
        }

        function generateProfessionalSchedule() {
            const rawInput = document.getElementById('taskListInput').value.trim();
            if (!rawInput) {
                alert("Please enter your task list first!");
                return;
            }

            logBackend(`Parsing task string: "${rawInput}"`);
            logBackend(`Executing local Gemma 4 ONNX worker inference...`);

            const outputSection = document.getElementById('outputSection');
            const outputContainer = document.getElementById('scheduleOutputContent');
            outputSection.style.display = 'block';
            outputContainer.innerHTML = "<div style='font-family:monospace; padding:12px; color:#1f2620;'>⏳ Gemma backend is structuring alternating Pomodoro blocks...</div>";

            setTimeout(() => {
                const tasks = rawInput.split(',').map(t => t.trim()).filter(Boolean);

                let indoor = [];
                let outdoor = [];

                tasks.forEach(task => {
                    const l = task.toLowerCase();
                    if (l.includes('buy') || l.includes('market') || l.includes('grocery') || l.includes('store') || l.includes('oven') || l.includes('vegetables') || l.includes('jar') || l.includes('errand')) {
                        outdoor.push(task);
                    } else {
                        indoor.push(task);
                    }
                });

                logBackend(`Categorized: ${indoor.length} indoor tasks, ${outdoor.length} outdoor tasks.`);

                let html = `<div style="font-family:'JetBrains Mono'; font-size:0.8rem; color:#475569; margin-bottom:14px;"><strong>Raw Input Analysis:</strong> ${rawInput}</div>`;

                let maxLen = Math.max(indoor.length, outdoor.length);

                for (let i = 0; i < maxLen; i++) {
                    if (indoor[i]) {
                        html += `
                        <div class="schedule-block">
                            <strong>[Indoor Task A]</strong><br>
                            • Focus Item: <em>${indoor[i]}</em>
                        </div>`;
                    }

                    if (outdoor[i]) {
                        html += `
                        <div class="schedule-block outdoor">
                            <strong>[Outdoor Errand B]</strong><br>
                            • Action Item: <em>${outdoor[i]}</em> (Optimized single-trip batch)
                        </div>`;
                    }
                }

                if (outdoor.length === 0) {
                    html += `
                    <div class="schedule-block" style="border-left-color:#f59e0b; background:#fffbeb;">
                        <strong>[Nature Reset Break]</strong><br>
                        • Directive: Zero outdoor chores detected. 15-minute sunlight walk scheduled.
                    </div>`;
                }

                outputContainer.innerHTML = html;
                logBackend(`Successfully rendered clean alternating schedule.`);
            }, 600);
        }
    </script>
</body>
</html>

How I Built It

I wanted FlowOutside to look and feel special, steering away from generic corporate software. Here is a breakdown of how the whole thing comes together:

The Indie 3D Tactile UI:
I designed the interface with a dark topographic forest background, paired with cream-colored paper index cards featuring dot-grid textures and torn edges. For typography, I mixed Bricolage Grotesque for bold headings, Geist for crisp readability, and JetBrains Mono for backend console logs.
The Local AI Engine (Gemma + WebGPU):
Rather than relying on heavy remote server APIs, FlowOutside is built around Google's open-weight Gemma 4 model. By leveraging Hugging Face Transformers.js and hardware-accelerated WebGPU, the model initializes and runs entirely client-side right inside your browser memory when you click the "Wake Gemma" node.
The Alternating Pacing Logic:
The JavaScript engine scans your input text, separates indoor tasks from outdoor errands (such as grocery shopping, picking up items, or walking), and automatically interleaves them so you get a balanced rhythm of deep focus and real-world movement.
Live Telemetry Console:
To give it that enterprise engineering feel, I added a collapsible sidebar tracking live worker state logs and tensor memory footprints in real-time.

Why Does Open Innovation Matter?

Open-weight models change everything for client-side web development. Because FlowOutside runs entirely in the browser using WebGPU and Transformers.js, your personal to-do lists, daily routines, and private habits never leave your machine.

If this were built with a closed corporate API, every single task you type would have to be sent to a remote server, tracked, and stored. Open innovation makes local-first AI possible. It gives developers the freedom to build privacy-first applications that run offline, incur zero server costs, and put total data control back into the hands of the user.

My Agent Session

Throughout building FlowOutside, I used an AI collaborator to iterate on the UI/UX, structure the alternating task-pacing logic, and wire up the Hugging Face Transformers.js WebGPU pipeline. Having an AI assistant helped me rapidly prototype the dark forest aesthetic and refine the client-side ONNX runtime handling so everything ran smoothly right in the browser.

Prize Categories

Best Use of Gemma