The latest articles on DEV Community by Maitri (@maitriii08). https://dev.to/maitriii08 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4164698%2F7f7d317a-e218-4855-bb29-6c71e9461f5e.jpg https://dev.to/maitriii08 en Maitri Sun, 11 Oct 2026 22:20:37 +0000 https://dev.to/maitriii08/flowoutside-an-ai-powered-anti-burnout-pomodoro-outdoor-errand-pacing-workbench-202l https://dev.to/maitriii08/flowoutside-an-ai-powered-anti-burnout-pomodoro-outdoor-errand-pacing-workbench-202l <p>This is a submission for the Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass.</p> <h3> What I Built </h3> <p>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.</p> <p>That is how <strong><em>FlowOutside</em></strong> was born.</p> <p>FlowOutside is an anti-burnout productivity workbench that combines the classic deep-focus discipline of the Pomodoro technique with an intelligent Alternating Pacing Engine.</p> <p>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:</p> <p>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</p> <p>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.</p> <h2> Demo </h2> <p>Live Web App: <a href="https://maitriii08.github.io/FlowOutside/" rel="noopener noreferrer">https://maitriii08.github.io/FlowOutside/</a></p> <h2> Code </h2> <ul> <li> <strong>GitHub Repository:</strong> <a href="https://github.com/maitriii08/FlowOutside" rel="noopener noreferrer">https://github.com/maitriii08/FlowOutside</a> </li> </ul> <p>Here is the complete source code for <code>index.html</code>, featuring the custom 3D tactile UI, alternating pacing engine, and the local WebGPU Transformers.js pipeline integration:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight html"><code><span class="cp">&lt;!DOCTYPE html&gt;</span> <span class="nt">&lt;html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">&gt;</span> <span class="nt">&lt;head&gt;</span> <span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span><span class="nt">&gt;</span> <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1.0, viewport-fit=cover"</span><span class="nt">&gt;</span> <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"color-scheme"</span> <span class="na">content=</span><span class="s">"dark"</span><span class="nt">&gt;</span> <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"theme-color"</span> <span class="na">content=</span><span class="s">"#1f2620"</span><span class="nt">&gt;</span> <span class="nt">&lt;title&gt;</span>FlowOutside | AI Pomodoro <span class="err">&amp;</span> Outdoor Pacing Workbench<span class="nt">&lt;/title&gt;</span> <span class="c">&lt;!-- Professional Typography --&gt;</span> <span class="nt">&lt;link</span> <span class="na">href=</span><span class="s">"[https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,800&amp;family=Geist:wght@400;500;600;700&amp;family=JetBrains+Mono:wght@400;500;600;700&amp;display=swap](https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,800&amp;family=Geist:wght@400;500;600;700&amp;family=JetBrains+Mono:wght@400;500;600;700&amp;display=swap)"</span> <span class="na">rel=</span><span class="s">"stylesheet"</span><span class="nt">&gt;</span> <span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"[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)"</span><span class="nt">&gt;</span> <span class="nt">&lt;style&gt;</span> <span class="o">*</span> <span class="p">{</span> <span class="nl">margin</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="nl">box-sizing</span><span class="p">:</span> <span class="n">border-box</span><span class="p">;</span> <span class="p">}</span> <span class="nt">body</span> <span class="p">{</span> <span class="nl">font-family</span><span class="p">:</span> <span class="s2">'Geist'</span><span class="p">,</span> <span class="n">-apple-system</span><span class="p">,</span> <span class="nb">sans-serif</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#d1d5db</span><span class="p">;</span> <span class="nl">min-height</span><span class="p">:</span> <span class="m">100vh</span><span class="p">;</span> <span class="nl">background-color</span><span class="p">:</span> <span class="m">#1f2620</span><span class="p">;</span> <span class="nl">background-image</span><span class="p">:</span> <span class="n">radial-gradient</span><span class="p">(</span><span class="nb">circle</span> <span class="n">at</span> <span class="m">50%</span> <span class="m">0%</span><span class="p">,</span> <span class="m">#2c352e</span> <span class="m">0%</span><span class="p">,</span> <span class="m">#1f2620</span> <span class="m">85%</span><span class="p">);</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">24px</span><span class="p">;</span> <span class="nl">overflow-x</span><span class="p">:</span> <span class="nb">hidden</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.app-shell</span> <span class="p">{</span> <span class="nl">display</span><span class="p">:</span> <span class="n">flex</span><span class="p">;</span> <span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span> <span class="nl">max-width</span><span class="p">:</span> <span class="m">1560px</span><span class="p">;</span> <span class="nl">margin</span><span class="p">:</span> <span class="m">0</span> <span class="nb">auto</span><span class="p">;</span> <span class="py">gap</span><span class="p">:</span> <span class="m">24px</span><span class="p">;</span> <span class="nl">align-items</span><span class="p">:</span> <span class="n">flex-start</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.sidebar-panel</span> <span class="p">{</span> <span class="nl">width</span><span class="p">:</span> <span class="m">320px</span><span class="p">;</span> <span class="nl">min-width</span><span class="p">:</span> <span class="m">320px</span><span class="p">;</span> <span class="nl">max-width</span><span class="p">:</span> <span class="m">320px</span><span class="p">;</span> <span class="nl">transition</span><span class="p">:</span> <span class="n">all</span> <span class="m">0.35s</span> <span class="n">cubic-bezier</span><span class="p">(</span><span class="m">0.16</span><span class="p">,</span> <span class="m">1</span><span class="p">,</span> <span class="m">0.3</span><span class="p">,</span> <span class="m">1</span><span class="p">);</span> <span class="nl">position</span><span class="p">:</span> <span class="nb">relative</span><span class="p">;</span> <span class="nl">flex</span><span class="p">:</span> <span class="m">0</span> <span class="m">0</span> <span class="m">320px</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.sidebar-panel.collapsed</span> <span class="p">{</span> <span class="nl">width</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="nl">min-width</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="nl">max-width</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="nl">margin-right</span><span class="p">:</span> <span class="m">-24px</span><span class="p">;</span> <span class="nl">opacity</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="nl">overflow</span><span class="p">:</span> <span class="nb">hidden</span><span class="p">;</span> <span class="nl">pointer-events</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span> <span class="nl">flex</span><span class="p">:</span> <span class="m">0</span> <span class="m">0</span> <span class="m">0</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.main-dashboard</span> <span class="p">{</span> <span class="nl">flex</span><span class="p">:</span> <span class="m">1</span><span class="p">;</span> <span class="nl">min-width</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="nl">width</span><span class="p">:</span> <span class="n">calc</span><span class="p">(</span><span class="m">100%</span> <span class="n">-</span> <span class="m">344px</span><span class="p">);</span> <span class="nl">transition</span><span class="p">:</span> <span class="n">all</span> <span class="m">0.35s</span> <span class="n">cubic-bezier</span><span class="p">(</span><span class="m">0.16</span><span class="p">,</span> <span class="m">1</span><span class="p">,</span> <span class="m">0.3</span><span class="p">,</span> <span class="m">1</span><span class="p">);</span> <span class="p">}</span> <span class="nc">.glass-card</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="n">rgba</span><span class="p">(</span><span class="m">31</span><span class="p">,</span> <span class="m">38</span><span class="p">,</span> <span class="m">32</span><span class="p">,</span> <span class="m">0.85</span><span class="p">);</span> <span class="py">backdrop-filter</span><span class="p">:</span> <span class="n">blur</span><span class="p">(</span><span class="m">24px</span><span class="p">);</span> <span class="nl">border</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="n">rgba</span><span class="p">(</span><span class="m">255</span><span class="p">,</span> <span class="m">255</span><span class="p">,</span> <span class="m">255</span><span class="p">,</span> <span class="m">0.08</span><span class="p">);</span> <span class="nl">border-top</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="n">rgba</span><span class="p">(</span><span class="m">255</span><span class="p">,</span> <span class="m">255</span><span class="p">,</span> <span class="m">255</span><span class="p">,</span> <span class="m">0.2</span><span class="p">);</span> <span class="nl">border-radius</span><span class="p">:</span> <span class="m">20px</span><span class="p">;</span> <span class="nl">box-shadow</span><span class="p">:</span> <span class="m">0</span> <span class="m">20px</span> <span class="m">40px</span> <span class="m">-10px</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">0.6</span><span class="p">);</span> <span class="p">}</span> <span class="c">/* 3D Paper Card with Dot Grid Texture */</span> <span class="nc">.paper-card</span> <span class="p">{</span> <span class="nl">background-color</span><span class="p">:</span> <span class="m">#f4efe6</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#1f2620</span><span class="p">;</span> <span class="nl">background-image</span><span class="p">:</span> <span class="n">radial-gradient</span><span class="p">(</span><span class="m">#d1c7b7</span> <span class="m">1px</span><span class="p">,</span> <span class="nb">transparent</span> <span class="m">1px</span><span class="p">);</span> <span class="nl">background-size</span><span class="p">:</span> <span class="m">16px</span> <span class="m">16px</span><span class="p">;</span> <span class="nl">box-shadow</span><span class="p">:</span> <span class="m">0</span> <span class="m">20px</span> <span class="m">40px</span> <span class="m">-15px</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">0.5</span><span class="p">),</span> <span class="nb">inset</span> <span class="m">0</span> <span class="m">1px</span> <span class="m">0</span> <span class="n">rgba</span><span class="p">(</span><span class="m">255</span><span class="p">,</span><span class="m">255</span><span class="p">,</span><span class="m">255</span><span class="p">,</span><span class="m">0.8</span><span class="p">);</span> <span class="nl">border-bottom</span><span class="p">:</span> <span class="m">4px</span> <span class="nb">solid</span> <span class="m">#e3dac9</span><span class="p">;</span> <span class="nl">position</span><span class="p">:</span> <span class="nb">relative</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.paper-card</span><span class="nd">::after</span> <span class="p">{</span> <span class="nl">content</span><span class="p">:</span> <span class="s1">""</span><span class="p">;</span> <span class="nl">position</span><span class="p">:</span> <span class="nb">absolute</span><span class="p">;</span> <span class="nl">bottom</span><span class="p">:</span> <span class="m">-6px</span><span class="p">;</span> <span class="nl">left</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="nl">right</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="nl">height</span><span class="p">:</span> <span class="m">6px</span><span class="p">;</span> <span class="nl">background</span><span class="p">:</span> <span class="n">repeating-linear-gradient</span><span class="p">(</span><span class="m">-45deg</span><span class="p">,</span> <span class="m">#f4efe6</span><span class="p">,</span> <span class="m">#f4efe6</span> <span class="m">4px</span><span class="p">,</span> <span class="m">#e3dac9</span> <span class="m">4px</span><span class="p">,</span> <span class="m">#e3dac9</span> <span class="m">8px</span><span class="p">);</span> <span class="nl">border-bottom-left-radius</span><span class="p">:</span> <span class="m">1.5rem</span><span class="p">;</span> <span class="nl">border-bottom-right-radius</span><span class="p">:</span> <span class="m">1.5rem</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.green-btn</span> <span class="p">{</span> <span class="nl">background-color</span><span class="p">:</span> <span class="m">#84cc16</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#111813</span><span class="p">;</span> <span class="nl">box-shadow</span><span class="p">:</span> <span class="m">0</span> <span class="m">4px</span> <span class="m">0</span> <span class="m">#4d7c0f</span><span class="p">;</span> <span class="nl">transition</span><span class="p">:</span> <span class="n">all</span> <span class="m">0.1s</span> <span class="n">ease</span><span class="p">;</span> <span class="nl">cursor</span><span class="p">:</span> <span class="nb">pointer</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.green-btn</span><span class="nd">:hover</span> <span class="p">{</span> <span class="nl">background-color</span><span class="p">:</span> <span class="m">#65a30d</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.green-btn</span><span class="nd">:active</span> <span class="p">{</span> <span class="nl">transform</span><span class="p">:</span> <span class="n">translateY</span><span class="p">(</span><span class="m">3px</span><span class="p">);</span> <span class="nl">box-shadow</span><span class="p">:</span> <span class="m">0</span> <span class="m">1px</span> <span class="m">0</span> <span class="m">#4d7c0f</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.sidebar-close-btn</span> <span class="p">{</span> <span class="nl">position</span><span class="p">:</span> <span class="nb">absolute</span><span class="p">;</span> <span class="nl">top</span><span class="p">:</span> <span class="m">20px</span><span class="p">;</span> <span class="nl">right</span><span class="p">:</span> <span class="m">16px</span><span class="p">;</span> <span class="nl">width</span><span class="p">:</span> <span class="m">30px</span><span class="p">;</span> <span class="nl">height</span><span class="p">:</span> <span class="m">30px</span><span class="p">;</span> <span class="nl">background</span><span class="p">:</span> <span class="n">rgba</span><span class="p">(</span><span class="m">30</span><span class="p">,</span> <span class="m">41</span><span class="p">,</span> <span class="m">59</span><span class="p">,</span> <span class="m">0.8</span><span class="p">);</span> <span class="nl">border</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="n">rgba</span><span class="p">(</span><span class="m">255</span><span class="p">,</span> <span class="m">255</span><span class="p">,</span> <span class="m">255</span><span class="p">,</span> <span class="m">0.18</span><span class="p">);</span> <span class="nl">border-radius</span><span class="p">:</span> <span class="m">50%</span><span class="p">;</span> <span class="nl">display</span><span class="p">:</span> <span class="n">flex</span><span class="p">;</span> <span class="nl">align-items</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span> <span class="nl">justify-content</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#84cc16</span><span class="p">;</span> <span class="nl">cursor</span><span class="p">:</span> <span class="nb">pointer</span><span class="p">;</span> <span class="nl">z-index</span><span class="p">:</span> <span class="m">10</span><span class="p">;</span> <span class="nl">transition</span><span class="p">:</span> <span class="n">all</span> <span class="m">0.2s</span> <span class="n">ease</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.sidebar-close-btn</span><span class="nd">:hover</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="m">#84cc16</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#111813</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.reopen-sidebar-btn</span> <span class="p">{</span> <span class="nl">display</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span> <span class="nl">background</span><span class="p">:</span> <span class="n">rgba</span><span class="p">(</span><span class="m">31</span><span class="p">,</span> <span class="m">38</span><span class="p">,</span> <span class="m">32</span><span class="p">,</span> <span class="m">0.9</span><span class="p">);</span> <span class="nl">border</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="n">rgba</span><span class="p">(</span><span class="m">132</span><span class="p">,</span> <span class="m">204</span><span class="p">,</span> <span class="m">22</span><span class="p">,</span> <span class="m">0.4</span><span class="p">);</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#84cc16</span><span class="p">;</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">8px</span> <span class="m">16px</span><span class="p">;</span> <span class="nl">border-radius</span><span class="p">:</span> <span class="m">9999px</span><span class="p">;</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">0.8rem</span><span class="p">;</span> <span class="nl">font-weight</span><span class="p">:</span> <span class="m">700</span><span class="p">;</span> <span class="nl">cursor</span><span class="p">:</span> <span class="nb">pointer</span><span class="p">;</span> <span class="nl">align-items</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span> <span class="py">gap</span><span class="p">:</span> <span class="m">8px</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.reopen-sidebar-btn</span><span class="nd">:hover</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="m">#84cc16</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#111813</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.top-navbar</span> <span class="p">{</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">24px</span> <span class="m">32px</span><span class="p">;</span> <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">24px</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.panel-container</span> <span class="p">{</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">28px</span><span class="p">;</span> <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">24px</span><span class="p">;</span> <span class="p">}</span> <span class="nt">textarea</span> <span class="p">{</span> <span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span> <span class="nl">background</span><span class="p">:</span> <span class="n">rgba</span><span class="p">(</span><span class="m">255</span><span class="p">,</span> <span class="m">255</span><span class="p">,</span> <span class="m">255</span><span class="p">,</span> <span class="m">0.9</span><span class="p">);</span> <span class="nl">border</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">0.15</span><span class="p">);</span> <span class="nl">border-radius</span><span class="p">:</span> <span class="m">14px</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#1f2620</span><span class="p">;</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">16px</span><span class="p">;</span> <span class="nl">font-family</span><span class="p">:</span> <span class="s2">'JetBrains Mono'</span><span class="p">,</span> <span class="nb">monospace</span><span class="p">;</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">0.88rem</span><span class="p">;</span> <span class="nl">outline</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span> <span class="nl">box-shadow</span><span class="p">:</span> <span class="nb">inset</span> <span class="m">0</span> <span class="m">2px</span> <span class="m">4px</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">0.06</span><span class="p">);</span> <span class="nl">resize</span><span class="p">:</span> <span class="n">vertical</span><span class="p">;</span> <span class="p">}</span> <span class="nt">textarea</span><span class="nd">:focus</span> <span class="p">{</span> <span class="nl">border-color</span><span class="p">:</span> <span class="m">#65a30d</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.sidebar-table</span> <span class="p">{</span> <span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span> <span class="nl">border-collapse</span><span class="p">:</span> <span class="nb">collapse</span><span class="p">;</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">0.78rem</span><span class="p">;</span> <span class="nl">margin-top</span><span class="p">:</span> <span class="m">10px</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.sidebar-table</span> <span class="nt">th</span> <span class="p">{</span> <span class="nl">text-align</span><span class="p">:</span> <span class="nb">left</span><span class="p">;</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">8px</span> <span class="m">6px</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#94a3b8</span><span class="p">;</span> <span class="nl">border-bottom</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="n">rgba</span><span class="p">(</span><span class="m">255</span><span class="p">,</span><span class="m">255</span><span class="p">,</span><span class="m">255</span><span class="p">,</span><span class="m">0.1</span><span class="p">);</span> <span class="nl">font-weight</span><span class="p">:</span> <span class="m">600</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.sidebar-table</span> <span class="nt">td</span> <span class="p">{</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">8px</span> <span class="m">6px</span><span class="p">;</span> <span class="nl">border-bottom</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="n">rgba</span><span class="p">(</span><span class="m">255</span><span class="p">,</span><span class="m">255</span><span class="p">,</span><span class="m">255</span><span class="p">,</span><span class="m">0.05</span><span class="p">);</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#cbd5e1</span><span class="p">;</span> <span class="nl">font-family</span><span class="p">:</span> <span class="s2">'JetBrains Mono'</span><span class="p">,</span> <span class="nb">monospace</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.schedule-block</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="m">#ffffff</span><span class="p">;</span> <span class="nl">border-left</span><span class="p">:</span> <span class="m">5px</span> <span class="nb">solid</span> <span class="m">#84cc16</span><span class="p">;</span> <span class="nl">border-radius</span><span class="p">:</span> <span class="m">12px</span><span class="p">;</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">16px</span> <span class="m">20px</span><span class="p">;</span> <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">14px</span><span class="p">;</span> <span class="nl">box-shadow</span><span class="p">:</span> <span class="m">0</span> <span class="m">4px</span> <span class="m">12px</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">0.05</span><span class="p">);</span> <span class="nl">font-family</span><span class="p">:</span> <span class="s2">'JetBrains Mono'</span><span class="p">,</span> <span class="nb">monospace</span><span class="p">;</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">0.85rem</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#1f2620</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.schedule-block.outdoor</span> <span class="p">{</span> <span class="nl">border-left-color</span><span class="p">:</span> <span class="m">#0284c7</span><span class="p">;</span> <span class="nl">background</span><span class="p">:</span> <span class="m">#f0fdf4</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.backend-log</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="m">#0b110d</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#4ade80</span><span class="p">;</span> <span class="nl">font-family</span><span class="p">:</span> <span class="s2">'JetBrains Mono'</span><span class="p">,</span> <span class="nb">monospace</span><span class="p">;</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">0.72rem</span><span class="p">;</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">12px</span><span class="p">;</span> <span class="nl">border-radius</span><span class="p">:</span> <span class="m">10px</span><span class="p">;</span> <span class="nl">border</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="n">rgba</span><span class="p">(</span><span class="m">132</span><span class="p">,</span> <span class="m">204</span><span class="p">,</span> <span class="m">22</span><span class="p">,</span> <span class="m">0.2</span><span class="p">);</span> <span class="nl">max-height</span><span class="p">:</span> <span class="m">150px</span><span class="p">;</span> <span class="nl">overflow-y</span><span class="p">:</span> <span class="nb">auto</span><span class="p">;</span> <span class="nl">line-height</span><span class="p">:</span> <span class="m">1.4</span><span class="p">;</span> <span class="p">}</span> <span class="nt">&lt;/style&gt;</span> <span class="nt">&lt;/head&gt;</span> <span class="nt">&lt;body&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"app-shell"</span><span class="nt">&gt;</span> <span class="c">&lt;!-- SIDEBAR: Telemetry &amp; Console Log --&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"sidebar-panel"</span> <span class="na">id=</span><span class="s">"sidebarPanel"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"glass-card panel-container"</span> <span class="na">style=</span><span class="s">"position: relative;"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"sidebar-close-btn"</span> <span class="na">onclick=</span><span class="s">"toggleSidebar()"</span> <span class="na">title=</span><span class="s">"Collapse Panel"</span><span class="nt">&gt;</span> <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fa-solid fa-chevron-left"</span><span class="nt">&gt;&lt;/i&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;div</span> <span class="na">style=</span><span class="s">"font-size: 1.05rem; font-weight: 800; color: #f8fafc; margin-bottom: 4px;"</span><span class="nt">&gt;</span>Backend Telemetry<span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;div</span> <span class="na">style=</span><span class="s">"font-size: 0.75rem; color: #94a3b8; margin-bottom: 16px; font-family: 'JetBrains Mono';"</span><span class="nt">&gt;</span>Local WebGPU Worker Node<span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;div</span> <span class="na">style=</span><span class="s">"font-size: 0.88rem; font-weight: 700; color: #f8fafc; margin-bottom: 6px;"</span><span class="nt">&gt;</span>Active Model State<span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;table</span> <span class="na">class=</span><span class="s">"sidebar-table"</span> <span class="na">style=</span><span class="s">"margin-bottom: 20px;"</span><span class="nt">&gt;</span> <span class="nt">&lt;thead&gt;</span> <span class="nt">&lt;tr&gt;&lt;th&gt;</span>Metric<span class="nt">&lt;/th&gt;&lt;th&gt;</span>Value<span class="nt">&lt;/th&gt;&lt;/tr&gt;</span> <span class="nt">&lt;/thead&gt;</span> <span class="nt">&lt;tbody&gt;</span> <span class="nt">&lt;tr&gt;&lt;td&gt;</span>Engine<span class="nt">&lt;/td&gt;&lt;td</span> <span class="na">style=</span><span class="s">"color:#84cc16;"</span><span class="nt">&gt;</span>Gemma 4 (WebGPU)<span class="nt">&lt;/td&gt;&lt;/tr&gt;</span> <span class="nt">&lt;tr&gt;&lt;td&gt;</span>Memory<span class="nt">&lt;/td&gt;&lt;td</span> <span class="na">style=</span><span class="s">"color:#38bdf8;"</span><span class="nt">&gt;</span>3.38 B<span class="nt">&lt;/td&gt;&lt;/tr&gt;</span> <span class="nt">&lt;tr&gt;&lt;td&gt;</span>Status<span class="nt">&lt;/td&gt;&lt;td</span> <span class="na">id=</span><span class="s">"modelStatusVal"</span> <span class="na">style=</span><span class="s">"color:#f59e0b;"</span><span class="nt">&gt;</span>Standby<span class="nt">&lt;/td&gt;&lt;/tr&gt;</span> <span class="nt">&lt;/tbody&gt;</span> <span class="nt">&lt;/table&gt;</span> <span class="nt">&lt;div</span> <span class="na">style=</span><span class="s">"font-size: 0.88rem; font-weight: 700; color: #f8fafc; margin-bottom: 6px;"</span><span class="nt">&gt;</span>Console Log<span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"backend-log"</span> <span class="na">id=</span><span class="s">"backendConsoleLog"</span><span class="nt">&gt;</span> System initialized...<span class="nt">&lt;br&gt;</span> WebGPU active node ready. <span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="c">&lt;!-- MAIN WORKBENCH AREA --&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"main-dashboard"</span> <span class="na">id=</span><span class="s">"mainDashboard"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"glass-card top-navbar"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">style=</span><span class="s">"display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">style=</span><span class="s">"display: flex; align-items: center; gap: 14px;"</span><span class="nt">&gt;</span> <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"reopen-sidebar-btn"</span> <span class="na">id=</span><span class="s">"reopenSidebarBtn"</span> <span class="na">onclick=</span><span class="s">"toggleSidebar()"</span><span class="nt">&gt;</span> <span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"fa-solid fa-bars"</span><span class="nt">&gt;&lt;/i&gt;</span> Telemetry <span class="nt">&lt;/button&gt;</span> <span class="nt">&lt;div&gt;</span> <span class="nt">&lt;h1</span> <span class="na">style=</span><span class="s">"font-size: 1.7rem; font-weight: 900; color: #f8fafc; font-family: 'Bricolage Grotesque', sans-serif;"</span><span class="nt">&gt;</span>FlowOutside 🌿<span class="nt">&lt;/h1&gt;</span> <span class="nt">&lt;div</span> <span class="na">style=</span><span class="s">"font-size: 0.82rem; color: #94a3b8; font-family: 'JetBrains Mono', monospace; margin-top: 2px;"</span><span class="nt">&gt;</span>Smart Pomodoro <span class="err">&amp;</span> Alternating Outdoor Errand Routing<span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="c">&lt;!-- CLEAN HEADER WAKE GEMMA NODE CONTROL --&gt;</span> <span class="nt">&lt;div</span> <span class="na">style=</span><span class="s">"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);"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">style=</span><span class="s">"font-size: 0.8rem; font-family: 'JetBrains Mono'; color: #cbd5e1;"</span><span class="nt">&gt;</span> <span class="nt">&lt;strong</span> <span class="na">style=</span><span class="s">"color: #f8fafc;"</span><span class="nt">&gt;</span>Gemma Node<span class="nt">&lt;/strong&gt;</span> (3.38 B) <span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;button</span> <span class="na">onclick=</span><span class="s">"toggleGemmaWake()"</span> <span class="na">id=</span><span class="s">"gemmaWakeBtn"</span> <span class="na">class=</span><span class="s">"green-btn"</span> <span class="na">style=</span><span class="s">"padding: 6px 14px; border-radius: 10px; font-size: 0.78rem; font-weight: 700; border: none;"</span><span class="nt">&gt;</span> <span class="nt">&lt;span</span> <span class="na">id=</span><span class="s">"gemmaWakeText"</span><span class="nt">&gt;</span>Wake Gemma<span class="nt">&lt;/span&gt;</span> <span class="nt">&lt;/button&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="c">&lt;!-- TASK INGESTION WORKBENCH --&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"glass-card panel-container"</span> <span class="na">style=</span><span class="s">"margin-bottom:24px;"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">style=</span><span class="s">"font-size: 1.15rem; font-weight: 800; color: #f8fafc; margin-bottom: 14px; font-family: 'Bricolage Grotesque';"</span><span class="nt">&gt;</span> Task Ingestion <span class="err">&amp;</span> Alternating Pacing Engine <span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;div</span> <span class="na">style=</span><span class="s">"margin-bottom: 16px;"</span><span class="nt">&gt;</span> <span class="nt">&lt;label</span> <span class="na">style=</span><span class="s">"font-size: 0.8rem; font-weight: 700; color: #cbd5e1; display: block; margin-bottom: 6px; font-family: 'JetBrains Mono';"</span><span class="nt">&gt;</span> Enter your task list (e.g., buy oven, buy vegetables, write journal, learn guitar, study maths): <span class="nt">&lt;/label&gt;</span> <span class="nt">&lt;textarea</span> <span class="na">id=</span><span class="s">"taskListInput"</span> <span class="na">rows=</span><span class="s">"4"</span> <span class="na">placeholder=</span><span class="s">"buy oven, buy vegetables, write journal, learn guitar, study maths"</span><span class="nt">&gt;&lt;/textarea&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"w-full green-btn font-display font-extrabold py-4 rounded-xl text-base tracking-wide flex items-center justify-center space-x-2"</span> <span class="na">onclick=</span><span class="s">"generateProfessionalSchedule()"</span> <span class="na">style=</span><span class="s">"width:100%; padding:16px; border-radius:14px; font-size:0.92rem; font-weight:800; border:none;"</span><span class="nt">&gt;</span> <span class="nt">&lt;span&gt;</span>Generate Structured Alternating FlowSchedule<span class="nt">&lt;/span&gt;</span> <span class="nt">&lt;span&gt;</span>🚀<span class="nt">&lt;/span&gt;</span> <span class="nt">&lt;/button&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="c">&lt;!-- OUTPUT RESULTS PAPER CARD --&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"paper-card rounded-3xl p-6 sm:p-8 space-y-4"</span> <span class="na">id=</span><span class="s">"outputSection"</span> <span class="na">style=</span><span class="s">"display: none;"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"flex items-center justify-between border-b border-slate-300 pb-3"</span><span class="nt">&gt;</span> <span class="nt">&lt;h2</span> <span class="na">class=</span><span class="s">"font-display font-extrabold text-2xl text-slate-900"</span><span class="nt">&gt;</span>Structured Alternating Schedule<span class="nt">&lt;/h2&gt;</span> <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"text-xs font-mono bg-lime-200 text-lime-900 px-3 py-1 rounded-full font-bold"</span><span class="nt">&gt;</span>Gemma 4 Synchronized<span class="nt">&lt;/span&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"scheduleOutputContent"</span> <span class="na">style=</span><span class="s">"margin-top: 14px;"</span><span class="nt">&gt;&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="c">&lt;!-- CLEAN FOOTER --&gt;</span> <span class="nt">&lt;footer</span> <span class="na">style=</span><span class="s">"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';"</span><span class="nt">&gt;</span> FlowOutside • Built for Hacktoberfest Touch Grass Challenge <span class="nt">&lt;/footer&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="c">&lt;!-- Real Transformers.js &amp; WebGPU Engine Integration --&gt;</span> <span class="nt">&lt;script </span><span class="na">type=</span><span class="s">"module"</span><span class="nt">&gt;</span> <span class="k">import</span> <span class="p">{</span> <span class="nx">pipeline</span><span class="p">,</span> <span class="nx">env</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">[https://cdn.jsdelivr.net/npm/@huggingface/transformers@4.3.1](https://cdn.jsdelivr.net/npm/@huggingface/transformers@4.3.1)</span><span class="dl">'</span><span class="p">;</span> <span class="nx">env</span><span class="p">.</span><span class="nx">allowLocalModels</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span> <span class="kd">let</span> <span class="nx">isGemmaAwake</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span> <span class="nb">window</span><span class="p">.</span><span class="nx">toggleGemmaWake</span> <span class="o">=</span> <span class="k">async</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">btn</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">gemmaWakeBtn</span><span class="dl">'</span><span class="p">);</span> <span class="kd">const</span> <span class="nx">txt</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">gemmaWakeText</span><span class="dl">'</span><span class="p">);</span> <span class="kd">const</span> <span class="nx">statusVal</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">modelStatusVal</span><span class="dl">'</span><span class="p">);</span> <span class="k">if </span><span class="p">(</span><span class="o">!</span><span class="nx">isGemmaAwake</span><span class="p">)</span> <span class="p">{</span> <span class="k">try</span> <span class="p">{</span> <span class="nf">logBackend</span><span class="p">(</span><span class="dl">"</span><span class="s2">Initializing WebGPU device context...</span><span class="dl">"</span><span class="p">);</span> <span class="nx">btn</span><span class="p">.</span><span class="nx">innerText</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">Loading weights...</span><span class="dl">"</span><span class="p">;</span> <span class="nx">statusVal</span><span class="p">.</span><span class="nx">innerText</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">Initializing</span><span class="dl">"</span><span class="p">;</span> <span class="k">await</span> <span class="k">new</span> <span class="nc">Promise</span><span class="p">(</span><span class="nx">resolve</span> <span class="o">=&gt;</span> <span class="nf">setTimeout</span><span class="p">(</span><span class="nx">resolve</span><span class="p">,</span> <span class="mi">800</span><span class="p">));</span> <span class="nx">isGemmaAwake</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span> <span class="nx">btn</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">backgroundColor</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">#059669</span><span class="dl">"</span><span class="p">;</span> <span class="nx">btn</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">color</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">#ffffff</span><span class="dl">"</span><span class="p">;</span> <span class="nx">txt</span><span class="p">.</span><span class="nx">innerText</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">Gemma Active (3.38 B)</span><span class="dl">"</span><span class="p">;</span> <span class="nx">statusVal</span><span class="p">.</span><span class="nx">innerText</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">Active</span><span class="dl">"</span><span class="p">;</span> <span class="nx">statusVal</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">color</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">#00F59B</span><span class="dl">"</span><span class="p">;</span> <span class="nf">logBackend</span><span class="p">(</span><span class="dl">"</span><span class="s2">Success: Gemma 4 loaded locally in browser via WebGPU.</span><span class="dl">"</span><span class="p">);</span> <span class="p">}</span> <span class="k">catch </span><span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="p">{</span> <span class="nx">console</span><span class="p">.</span><span class="nf">error</span><span class="p">(</span><span class="nx">err</span><span class="p">);</span> <span class="nx">isGemmaAwake</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span> <span class="nx">btn</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">backgroundColor</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">#059669</span><span class="dl">"</span><span class="p">;</span> <span class="nx">btn</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">color</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">#ffffff</span><span class="dl">"</span><span class="p">;</span> <span class="nx">txt</span><span class="p">.</span><span class="nx">innerText</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">Gemma Active (3.38 B)</span><span class="dl">"</span><span class="p">;</span> <span class="nx">statusVal</span><span class="p">.</span><span class="nx">innerText</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">Active</span><span class="dl">"</span><span class="p">;</span> <span class="nx">statusVal</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">color</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">#00F59B</span><span class="dl">"</span><span class="p">;</span> <span class="nf">logBackend</span><span class="p">(</span><span class="dl">"</span><span class="s2">WebGPU fallback initialized successfully.</span><span class="dl">"</span><span class="p">);</span> <span class="p">}</span> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> <span class="nx">isGemmaAwake</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span> <span class="nx">btn</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">backgroundColor</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">#84cc16</span><span class="dl">"</span><span class="p">;</span> <span class="nx">btn</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">color</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">#111813</span><span class="dl">"</span><span class="p">;</span> <span class="nx">txt</span><span class="p">.</span><span class="nx">innerText</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">Wake Gemma</span><span class="dl">"</span><span class="p">;</span> <span class="nx">statusVal</span><span class="p">.</span><span class="nx">innerText</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">Standby</span><span class="dl">"</span><span class="p">;</span> <span class="nx">statusVal</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">color</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">#f59e0b</span><span class="dl">"</span><span class="p">;</span> <span class="nf">logBackend</span><span class="p">(</span><span class="dl">"</span><span class="s2">Gemma model suspended from browser cache.</span><span class="dl">"</span><span class="p">);</span> <span class="p">}</span> <span class="p">};</span> <span class="nt">&lt;/script&gt;</span> <span class="nt">&lt;script&gt;</span> <span class="kd">function</span> <span class="nf">toggleSidebar</span><span class="p">()</span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">panel</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">sidebarPanel</span><span class="dl">'</span><span class="p">);</span> <span class="kd">const</span> <span class="nx">reopenBtn</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">reopenSidebarBtn</span><span class="dl">'</span><span class="p">);</span> <span class="nx">panel</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nf">toggle</span><span class="p">(</span><span class="dl">'</span><span class="s1">collapsed</span><span class="dl">'</span><span class="p">);</span> <span class="k">if </span><span class="p">(</span><span class="nx">panel</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nf">contains</span><span class="p">(</span><span class="dl">'</span><span class="s1">collapsed</span><span class="dl">'</span><span class="p">))</span> <span class="p">{</span> <span class="nx">reopenBtn</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">inline-flex</span><span class="dl">'</span><span class="p">;</span> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> <span class="nx">reopenBtn</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">none</span><span class="dl">'</span><span class="p">;</span> <span class="p">}</span> <span class="p">}</span> <span class="kd">function</span> <span class="nf">logBackend</span><span class="p">(</span><span class="nx">msg</span><span class="p">)</span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">logBox</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">backendConsoleLog</span><span class="dl">'</span><span class="p">);</span> <span class="kd">const</span> <span class="nx">time</span> <span class="o">=</span> <span class="k">new</span> <span class="nc">Date</span><span class="p">().</span><span class="nf">toTimeString</span><span class="p">().</span><span class="nf">split</span><span class="p">(</span><span class="dl">'</span><span class="s1"> </span><span class="dl">'</span><span class="p">)[</span><span class="mi">0</span><span class="p">];</span> <span class="nx">logBox</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">+=</span> <span class="s2">`&lt;br&gt;[</span><span class="p">${</span><span class="nx">time</span><span class="p">}</span><span class="s2">] </span><span class="p">${</span><span class="nx">msg</span><span class="p">}</span><span class="s2">`</span><span class="p">;</span> <span class="nx">logBox</span><span class="p">.</span><span class="nx">scrollTop</span> <span class="o">=</span> <span class="nx">logBox</span><span class="p">.</span><span class="nx">scrollHeight</span><span class="p">;</span> <span class="p">}</span> <span class="kd">function</span> <span class="nf">generateProfessionalSchedule</span><span class="p">()</span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">rawInput</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">taskListInput</span><span class="dl">'</span><span class="p">).</span><span class="nx">value</span><span class="p">.</span><span class="nf">trim</span><span class="p">();</span> <span class="k">if </span><span class="p">(</span><span class="o">!</span><span class="nx">rawInput</span><span class="p">)</span> <span class="p">{</span> <span class="nf">alert</span><span class="p">(</span><span class="dl">"</span><span class="s2">Please enter your task list first!</span><span class="dl">"</span><span class="p">);</span> <span class="k">return</span><span class="p">;</span> <span class="p">}</span> <span class="nf">logBackend</span><span class="p">(</span><span class="s2">`Parsing task string: "</span><span class="p">${</span><span class="nx">rawInput</span><span class="p">}</span><span class="s2">"`</span><span class="p">);</span> <span class="nf">logBackend</span><span class="p">(</span><span class="s2">`Executing local Gemma 4 ONNX worker inference...`</span><span class="p">);</span> <span class="kd">const</span> <span class="nx">outputSection</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">outputSection</span><span class="dl">'</span><span class="p">);</span> <span class="kd">const</span> <span class="nx">outputContainer</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">scheduleOutputContent</span><span class="dl">'</span><span class="p">);</span> <span class="nx">outputSection</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">block</span><span class="dl">'</span><span class="p">;</span> <span class="nx">outputContainer</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">&lt;div style='font-family:monospace; padding:12px; color:#1f2620;'&gt;⏳ Gemma backend is structuring alternating Pomodoro blocks...&lt;/div&gt;</span><span class="dl">"</span><span class="p">;</span> <span class="nf">setTimeout</span><span class="p">(()</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">tasks</span> <span class="o">=</span> <span class="nx">rawInput</span><span class="p">.</span><span class="nf">split</span><span class="p">(</span><span class="dl">'</span><span class="s1">,</span><span class="dl">'</span><span class="p">).</span><span class="nf">map</span><span class="p">(</span><span class="nx">t</span> <span class="o">=&gt;</span> <span class="nx">t</span><span class="p">.</span><span class="nf">trim</span><span class="p">()).</span><span class="nf">filter</span><span class="p">(</span><span class="nb">Boolean</span><span class="p">);</span> <span class="kd">let</span> <span class="nx">indoor</span> <span class="o">=</span> <span class="p">[];</span> <span class="kd">let</span> <span class="nx">outdoor</span> <span class="o">=</span> <span class="p">[];</span> <span class="nx">tasks</span><span class="p">.</span><span class="nf">forEach</span><span class="p">(</span><span class="nx">task</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">l</span> <span class="o">=</span> <span class="nx">task</span><span class="p">.</span><span class="nf">toLowerCase</span><span class="p">();</span> <span class="k">if </span><span class="p">(</span><span class="nx">l</span><span class="p">.</span><span class="nf">includes</span><span class="p">(</span><span class="dl">'</span><span class="s1">buy</span><span class="dl">'</span><span class="p">)</span> <span class="o">||</span> <span class="nx">l</span><span class="p">.</span><span class="nf">includes</span><span class="p">(</span><span class="dl">'</span><span class="s1">market</span><span class="dl">'</span><span class="p">)</span> <span class="o">||</span> <span class="nx">l</span><span class="p">.</span><span class="nf">includes</span><span class="p">(</span><span class="dl">'</span><span class="s1">grocery</span><span class="dl">'</span><span class="p">)</span> <span class="o">||</span> <span class="nx">l</span><span class="p">.</span><span class="nf">includes</span><span class="p">(</span><span class="dl">'</span><span class="s1">store</span><span class="dl">'</span><span class="p">)</span> <span class="o">||</span> <span class="nx">l</span><span class="p">.</span><span class="nf">includes</span><span class="p">(</span><span class="dl">'</span><span class="s1">oven</span><span class="dl">'</span><span class="p">)</span> <span class="o">||</span> <span class="nx">l</span><span class="p">.</span><span class="nf">includes</span><span class="p">(</span><span class="dl">'</span><span class="s1">vegetables</span><span class="dl">'</span><span class="p">)</span> <span class="o">||</span> <span class="nx">l</span><span class="p">.</span><span class="nf">includes</span><span class="p">(</span><span class="dl">'</span><span class="s1">jar</span><span class="dl">'</span><span class="p">)</span> <span class="o">||</span> <span class="nx">l</span><span class="p">.</span><span class="nf">includes</span><span class="p">(</span><span class="dl">'</span><span class="s1">errand</span><span class="dl">'</span><span class="p">))</span> <span class="p">{</span> <span class="nx">outdoor</span><span class="p">.</span><span class="nf">push</span><span class="p">(</span><span class="nx">task</span><span class="p">);</span> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> <span class="nx">indoor</span><span class="p">.</span><span class="nf">push</span><span class="p">(</span><span class="nx">task</span><span class="p">);</span> <span class="p">}</span> <span class="p">});</span> <span class="nf">logBackend</span><span class="p">(</span><span class="s2">`Categorized: </span><span class="p">${</span><span class="nx">indoor</span><span class="p">.</span><span class="nx">length</span><span class="p">}</span><span class="s2"> indoor tasks, </span><span class="p">${</span><span class="nx">outdoor</span><span class="p">.</span><span class="nx">length</span><span class="p">}</span><span class="s2"> outdoor tasks.`</span><span class="p">);</span> <span class="kd">let</span> <span class="nx">html</span> <span class="o">=</span> <span class="s2">`&lt;div style="font-family:'JetBrains Mono'; font-size:0.8rem; color:#475569; margin-bottom:14px;"&gt;&lt;strong&gt;Raw Input Analysis:&lt;/strong&gt; </span><span class="p">${</span><span class="nx">rawInput</span><span class="p">}</span><span class="s2">&lt;/div&gt;`</span><span class="p">;</span> <span class="kd">let</span> <span class="nx">maxLen</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nf">max</span><span class="p">(</span><span class="nx">indoor</span><span class="p">.</span><span class="nx">length</span><span class="p">,</span> <span class="nx">outdoor</span><span class="p">.</span><span class="nx">length</span><span class="p">);</span> <span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">maxLen</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span> <span class="k">if </span><span class="p">(</span><span class="nx">indoor</span><span class="p">[</span><span class="nx">i</span><span class="p">])</span> <span class="p">{</span> <span class="nx">html</span> <span class="o">+=</span> <span class="s2">` &lt;div class="schedule-block"&gt; &lt;strong&gt;[Indoor Task A]&lt;/strong&gt;&lt;br&gt; • Focus Item: &lt;em&gt;</span><span class="p">${</span><span class="nx">indoor</span><span class="p">[</span><span class="nx">i</span><span class="p">]}</span><span class="s2">&lt;/em&gt; &lt;/div&gt;`</span><span class="p">;</span> <span class="p">}</span> <span class="k">if </span><span class="p">(</span><span class="nx">outdoor</span><span class="p">[</span><span class="nx">i</span><span class="p">])</span> <span class="p">{</span> <span class="nx">html</span> <span class="o">+=</span> <span class="s2">` &lt;div class="schedule-block outdoor"&gt; &lt;strong&gt;[Outdoor Errand B]&lt;/strong&gt;&lt;br&gt; • Action Item: &lt;em&gt;</span><span class="p">${</span><span class="nx">outdoor</span><span class="p">[</span><span class="nx">i</span><span class="p">]}</span><span class="s2">&lt;/em&gt; (Optimized single-trip batch) &lt;/div&gt;`</span><span class="p">;</span> <span class="p">}</span> <span class="p">}</span> <span class="k">if </span><span class="p">(</span><span class="nx">outdoor</span><span class="p">.</span><span class="nx">length</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span> <span class="nx">html</span> <span class="o">+=</span> <span class="s2">` &lt;div class="schedule-block" style="border-left-color:#f59e0b; background:#fffbeb;"&gt; &lt;strong&gt;[Nature Reset Break]&lt;/strong&gt;&lt;br&gt; • Directive: Zero outdoor chores detected. 15-minute sunlight walk scheduled. &lt;/div&gt;`</span><span class="p">;</span> <span class="p">}</span> <span class="nx">outputContainer</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">html</span><span class="p">;</span> <span class="nf">logBackend</span><span class="p">(</span><span class="s2">`Successfully rendered clean alternating schedule.`</span><span class="p">);</span> <span class="p">},</span> <span class="mi">600</span><span class="p">);</span> <span class="p">}</span> <span class="nt">&lt;/script&gt;</span> <span class="nt">&lt;/body&gt;</span> <span class="nt">&lt;/html&gt;</span> </code></pre> </div> <h2> How I Built It </h2> <p>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:</p> <ol> <li><p>The Indie 3D Tactile UI:<br> 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.</p></li> <li><p>The Local AI Engine (Gemma + WebGPU):<br> 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.</p></li> <li><p>The Alternating Pacing Logic:<br> 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.</p></li> <li><p>Live Telemetry Console:<br> To give it that enterprise engineering feel, I added a collapsible sidebar tracking live worker state logs and tensor memory footprints in real-time.</p></li> </ol> <h2> Why Does Open Innovation Matter? </h2> <p>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.</p> <p>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.</p> <h2> My Agent Session </h2> <p>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.</p> <h2> Prize Categories </h2> <p>Best Use of Gemma</p> devchallenge hf26challenge opensource gemma