The latest articles on DEV Community by Robert Gilbert (@robertgilbert75). https://dev.to/robertgilbert75 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%2F4177446%2F376af1a1-e073-4264-b53c-5ac755b3894b.png https://dev.to/robertgilbert75 en Robert Gilbert Fri, 30 Oct 2026 01:23:41 +0000 https://dev.to/robertgilbert75/ghost-case-log-a-paranormal-investigation-journal-that-honors-the-past-11o https://dev.to/robertgilbert75/ghost-case-log-a-paranormal-investigation-journal-that-honors-the-past-11o <p>I built this for Hacktoberfest Week 4: "Ghost in the Machine". It's a paranormal investigation journal you run in your own browser. No server. No account. One HTML file.</p> <h2> Try it here </h2> <p><strong><a href="https://StarNomad.github.io/ghost-case-log.html" rel="noopener noreferrer">Ghost Case Log</a></strong></p> <p>Open it and start logging. That's the whole point.</p> <h2> What it does </h2> <p>You open a case with a location, a date, and an investigator name. Then you log readings:</p> <ul> <li>EMF spike</li> <li>Temperature drop</li> <li>EVP note</li> <li>General note</li> </ul> <p>Every entry is timestamped automatically. Everything stays in your browser's localStorage. Nobody else ever sees your case log unless you show them. Close the tab, come back later — your cases are still there.</p> <h2> Optional AI summary </h2> <p>If you want, the tool can summarize your case log using an open-weight model through Groq's free tier: <strong>llama-3.3-70b-versatile</strong>. Your API key stays in the browser. That's it — the model name is one string in the file, so you can swap it for whatever open-weight model you prefer.</p> <p>The summary includes a section I think matters most: <strong>"honors the past."</strong> In the spirit of Día de los Muertos, the prompt asks the model to remember the <em>people</em> who lived in a place — not just scare stories. A creaky house was somebody's home. If there's a presence, there was a person first. I wanted the tool to treat the past with respect, not just mine it for chills.</p> <h2> Honesty labels </h2> <p>Let's be clear about what this is and isn't:</p> <ul> <li>The readings are <strong>user-entered log entries</strong>. This is not reading your phone's sensors. You're writing down what your instruments (or your notes) say.</li> <li>This is for <strong>entertainment and investigation journaling</strong>, not proof of paranormal activity. A timestamped log of your observations is good practice for any investigator. It is not evidence.</li> <li>The AI summary is a fun narrative write-up of <em>your</em> notes. It doesn't detect ghosts.</li> </ul> <h2> Why open innovation matters here </h2> <p>A tool for honoring the past should belong to everyone. No account to sign up for. No server storing your case log. No company deciding which past gets remembered. One file you can save, fork, and change. That's the spirit of Hacktoberfest to me: build something, share it openly, and let anyone run with it.</p> <p>Happy hunting. 👻</p> hacktoberfest ai opensource machinelearning Robert Gilbert Mon, 26 Oct 2026 02:23:45 +0000 https://dev.to/robertgilbert75/one-thing-slow-and-steady-beats-the-whole-dreaded-list-3dkn https://dev.to/robertgilbert75/one-thing-slow-and-steady-beats-the-whole-dreaded-list-3dkn <p><em>This is a submission for the <a href="https://dev.to/challenges/hacktoberfest-week3-2026-10-19">Hacktoberfest Open-Source AI Challenge Week 3: Slow and Steady</a></em></p> <h2> What I Built </h2> <p>One Thing: a single-page app for the dreaded chore list. You dump the whole list once, and each day it shows you exactly ONE small next step — the smallest slice of one chore, about two minutes — and hides everything else until that step is done. Done for the day means done: the rest of the pile waits, patiently, until tomorrow. Who gets lazier: anyone whose chore list stares at them. The payoff is structural, not measured in minutes saved — one two-minute step instead of the whole pile staring at you.</p> <h2> Demo </h2> <p>Single HTML file, no build step, no server. Save the attached file and open it in any browser — everything runs locally on your device, and your list lives in that browser's local storage only.</p> <p>Try it here:<br> <a href="https://StarNomad.github.io/one-thing.html" rel="noopener noreferrer">https://StarNomad.github.io/one-thing.html</a> — save that file and open it in any<br> browser.</p> <h2> Code </h2> <p>The complete code is the single attached HTML file: plain HTML, CSS, and JavaScript, no dependencies, no network calls. One file, readable end to end.</p> <p>Source file:<br> <a href="https://StarNomad.github.io/one-thing.html" rel="noopener noreferrer">https://StarNomad.github.io/one-thing.html</a><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"</span><span class="nt">&gt;</span> <span class="nt">&lt;title&gt;</span>One Thing — Slow and Steady<span class="nt">&lt;/title&gt;</span> <span class="nt">&lt;style&gt;</span> <span class="nt">body</span> <span class="p">{</span> <span class="nl">font-family</span><span class="p">:</span> <span class="n">system-ui</span><span class="p">,</span> <span class="nb">sans-serif</span><span class="p">;</span> <span class="nl">max-width</span><span class="p">:</span> <span class="m">560px</span><span class="p">;</span> <span class="nl">margin</span><span class="p">:</span> <span class="m">2rem</span> <span class="nb">auto</span><span class="p">;</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">0</span> <span class="m">1rem</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="nx">#222</span><span class="p">;</span> <span class="nl">line-height</span><span class="p">:</span> <span class="m">1.5</span><span class="p">;</span> <span class="p">}</span> <span class="nt">h1</span> <span class="p">{</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">1.8rem</span><span class="p">;</span> <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">0.2rem</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.tagline</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="nx">#666</span><span class="p">;</span> <span class="nl">margin-top</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="p">}</span> <span class="nf">#today-box</span> <span class="p">{</span> <span class="nl">border</span><span class="p">:</span> <span class="m">2px</span> <span class="nb">solid</span> <span class="nx">#2e7d32</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">1.2rem</span><span class="p">;</span> <span class="nl">margin</span><span class="p">:</span> <span class="m">1.5rem</span> <span class="m">0</span><span class="p">;</span> <span class="nl">background</span><span class="p">:</span> <span class="nx">#f1f8e9</span><span class="p">;</span> <span class="p">}</span> <span class="nf">#today-text</span> <span class="p">{</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">1.4rem</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">.waiting</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="nx">#666</span><span class="p">;</span> <span class="p">}</span> <span class="nt">button</span> <span class="p">{</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">1rem</span><span class="p">;</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">0.5rem</span> <span class="m">1rem</span><span class="p">;</span> <span class="nl">margin-right</span><span class="p">:</span> <span class="m">0.5rem</span><span class="p">;</span> <span class="nl">border-radius</span><span class="p">:</span> <span class="m">8px</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="nx">#999</span><span class="p">;</span> <span class="nl">background</span><span class="p">:</span> <span class="nx">#fff</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="nt">button</span><span class="nc">.primary</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="nx">#2e7d32</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="nx">#fff</span><span class="p">;</span> <span class="nl">border-color</span><span class="p">:</span> <span class="nx">#2e7d32</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">box-sizing</span><span class="p">:</span> <span class="nb">border-box</span><span class="p">;</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">1rem</span><span class="p">;</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">0.5rem</span><span class="p">;</span> <span class="nl">border-radius</span><span class="p">:</span> <span class="m">8px</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="nx">#999</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.done-trail</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="nx">#666</span><span class="p">;</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">0.95rem</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.done-trail</span> <span class="nt">li</span> <span class="p">{</span> <span class="nl">margin-bottom</span><span class="p">:</span> <span class="m">0.2rem</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.hint</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="nx">#666</span><span class="p">;</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">0.95rem</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;h1&gt;</span>🦥 One Thing<span class="nt">&lt;/h1&gt;</span> <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"tagline"</span><span class="nt">&gt;</span>Slow and steady. One dreaded thing a day, in its smallest slice, and nothing else until it is done.<span class="nt">&lt;/p&gt;</span> <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"today-box"</span><span class="nt">&gt;</span> <span class="nt">&lt;div&gt;</span>Today's one thing:<span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"today-text"</span><span class="nt">&gt;&lt;/div&gt;</span> <span class="nt">&lt;p&gt;</span> <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"primary"</span> <span class="na">id=</span><span class="s">"done-btn"</span><span class="nt">&gt;</span>Done — that's enough for today<span class="nt">&lt;/button&gt;</span> <span class="nt">&lt;button</span> <span class="na">id=</span><span class="s">"skip-btn"</span><span class="nt">&gt;</span>Not this one — put it back in the pile<span class="nt">&lt;/button&gt;</span> <span class="nt">&lt;/p&gt;</span> <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"waiting"</span> <span class="na">id=</span><span class="s">"waiting-text"</span><span class="nt">&gt;&lt;/p&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;h2&gt;</span>Add to the pile<span class="nt">&lt;/h2&gt;</span> <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"hint"</span><span class="nt">&gt;</span>Write the smallest first slice, about two minutes of work. Not "clean the garage" — "put one box by the door".<span class="nt">&lt;/p&gt;</span> <span class="nt">&lt;textarea</span> <span class="na">id=</span><span class="s">"new-chore"</span> <span class="na">rows=</span><span class="s">"2"</span> <span class="na">placeholder=</span><span class="s">"One dreaded thing, in its smallest slice…"</span><span class="nt">&gt;&lt;/textarea&gt;</span> <span class="nt">&lt;p&gt;&lt;button</span> <span class="na">class=</span><span class="s">"primary"</span> <span class="na">id=</span><span class="s">"add-btn"</span><span class="nt">&gt;</span>Add it to the pile<span class="nt">&lt;/button&gt;&lt;/p&gt;</span> <span class="nt">&lt;h2&gt;</span>Done trail<span class="nt">&lt;/h2&gt;</span> <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"done-trail"</span> <span class="na">id=</span><span class="s">"done-list"</span><span class="nt">&gt;&lt;/ul&gt;</span> <span class="nt">&lt;p&gt;&lt;button</span> <span class="na">id=</span><span class="s">"reset-btn"</span><span class="nt">&gt;</span>Clear everything and start over<span class="nt">&lt;/button&gt;&lt;/p&gt;</span> <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"hint"</span><span class="nt">&gt;</span>Everything stays on this device. No account, no server, no data leaves this page. Your list lives in this browser's local storage only.<span class="nt">&lt;/p&gt;</span> <span class="nt">&lt;script&gt;</span> <span class="p">(</span><span class="nf">function </span><span class="p">()</span> <span class="p">{</span> <span class="kd">var</span> <span class="nx">KEY</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">onething-v1</span><span class="dl">'</span><span class="p">;</span> <span class="kd">function</span> <span class="nf">todayKey</span><span class="p">()</span> <span class="p">{</span> <span class="kd">var</span> <span class="nx">d</span> <span class="o">=</span> <span class="k">new</span> <span class="nc">Date</span><span class="p">();</span> <span class="kd">var</span> <span class="nx">m</span> <span class="o">=</span> <span class="dl">''</span> <span class="o">+</span> <span class="p">(</span><span class="nx">d</span><span class="p">.</span><span class="nf">getMonth</span><span class="p">()</span> <span class="o">+</span> <span class="mi">1</span><span class="p">);</span> <span class="kd">var</span> <span class="nx">day</span> <span class="o">=</span> <span class="dl">''</span> <span class="o">+</span> <span class="nx">d</span><span class="p">.</span><span class="nf">getDate</span><span class="p">();</span> <span class="k">if </span><span class="p">(</span><span class="nx">m</span><span class="p">.</span><span class="nx">length</span> <span class="o">===</span> <span class="mi">1</span><span class="p">)</span> <span class="nx">m</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">0</span><span class="dl">'</span> <span class="o">+</span> <span class="nx">m</span><span class="p">;</span> <span class="k">if </span><span class="p">(</span><span class="nx">day</span><span class="p">.</span><span class="nx">length</span> <span class="o">===</span> <span class="mi">1</span><span class="p">)</span> <span class="nx">day</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">0</span><span class="dl">'</span> <span class="o">+</span> <span class="nx">day</span><span class="p">;</span> <span class="k">return</span> <span class="nx">d</span><span class="p">.</span><span class="nf">getFullYear</span><span class="p">()</span> <span class="o">+</span> <span class="dl">'</span><span class="s1">-</span><span class="dl">'</span> <span class="o">+</span> <span class="nx">m</span> <span class="o">+</span> <span class="dl">'</span><span class="s1">-</span><span class="dl">'</span> <span class="o">+</span> <span class="nx">day</span><span class="p">;</span> <span class="p">}</span> <span class="kd">function</span> <span class="nf">load</span><span class="p">()</span> <span class="p">{</span> <span class="k">try</span> <span class="p">{</span> <span class="kd">var</span> <span class="nx">raw</span> <span class="o">=</span> <span class="nx">localStorage</span><span class="p">.</span><span class="nf">getItem</span><span class="p">(</span><span class="nx">KEY</span><span class="p">);</span> <span class="k">if </span><span class="p">(</span><span class="nx">raw</span><span class="p">)</span> <span class="p">{</span> <span class="kd">var</span> <span class="nx">parsed</span> <span class="o">=</span> <span class="nx">JSON</span><span class="p">.</span><span class="nf">parse</span><span class="p">(</span><span class="nx">raw</span><span class="p">);</span> <span class="k">if </span><span class="p">(</span><span class="nx">parsed</span> <span class="o">&amp;&amp;</span> <span class="nb">Array</span><span class="p">.</span><span class="nf">isArray</span><span class="p">(</span><span class="nx">parsed</span><span class="p">.</span><span class="nx">chores</span><span class="p">))</span> <span class="k">return</span> <span class="nx">parsed</span><span class="p">;</span> <span class="p">}</span> <span class="p">}</span> <span class="k">catch </span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span> <span class="cm">/* corrupted storage: start fresh */</span> <span class="p">}</span> <span class="k">return</span> <span class="p">{</span> <span class="na">chores</span><span class="p">:</span> <span class="p">[],</span> <span class="na">today</span><span class="p">:</span> <span class="kc">null</span> <span class="p">};</span> <span class="p">}</span> <span class="kd">function</span> <span class="nf">save</span><span class="p">(</span><span class="nx">state</span><span class="p">)</span> <span class="p">{</span> <span class="k">try</span> <span class="p">{</span> <span class="nx">localStorage</span><span class="p">.</span><span class="nf">setItem</span><span class="p">(</span><span class="nx">KEY</span><span class="p">,</span> <span class="nx">JSON</span><span class="p">.</span><span class="nf">stringify</span><span class="p">(</span><span class="nx">state</span><span class="p">));</span> <span class="p">}</span> <span class="k">catch </span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span> <span class="cm">/* storage full/blocked: keep going in memory */</span> <span class="p">}</span> <span class="p">}</span> <span class="kd">function</span> <span class="nf">nextId</span><span class="p">(</span><span class="nx">state</span><span class="p">)</span> <span class="p">{</span> <span class="kd">var</span> <span class="nx">max</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">state</span><span class="p">.</span><span class="nx">chores</span><span class="p">.</span><span class="nf">forEach</span><span class="p">(</span><span class="nf">function </span><span class="p">(</span><span class="nx">c</span><span class="p">)</span> <span class="p">{</span> <span class="k">if </span><span class="p">(</span><span class="nx">c</span><span class="p">.</span><span class="nx">id</span> <span class="o">&gt;</span> <span class="nx">max</span><span class="p">)</span> <span class="nx">max</span> <span class="o">=</span> <span class="nx">c</span><span class="p">.</span><span class="nx">id</span><span class="p">;</span> <span class="p">});</span> <span class="k">return</span> <span class="nx">max</span> <span class="o">+</span> <span class="mi">1</span><span class="p">;</span> <span class="p">}</span> <span class="c1">// Pick (or keep) today's chore. Pure over state + a date key: testable.</span> <span class="kd">function</span> <span class="nf">pickToday</span><span class="p">(</span><span class="nx">state</span><span class="p">,</span> <span class="nx">dateKey</span><span class="p">)</span> <span class="p">{</span> <span class="k">if </span><span class="p">(</span><span class="o">!</span><span class="nx">state</span><span class="p">.</span><span class="nx">today</span> <span class="o">||</span> <span class="nx">state</span><span class="p">.</span><span class="nx">today</span><span class="p">.</span><span class="nx">date</span> <span class="o">!==</span> <span class="nx">dateKey</span><span class="p">)</span> <span class="p">{</span> <span class="kd">var</span> <span class="nx">open</span> <span class="o">=</span> <span class="nx">state</span><span class="p">.</span><span class="nx">chores</span><span class="p">.</span><span class="nf">filter</span><span class="p">(</span><span class="nf">function </span><span class="p">(</span><span class="nx">c</span><span class="p">)</span> <span class="p">{</span> <span class="k">return</span> <span class="o">!</span><span class="nx">c</span><span class="p">.</span><span class="nx">doneDate</span><span class="p">;</span> <span class="p">});</span> <span class="nx">state</span><span class="p">.</span><span class="nx">today</span> <span class="o">=</span> <span class="nx">open</span><span class="p">.</span><span class="nx">length</span> <span class="p">?</span> <span class="p">{</span> <span class="na">date</span><span class="p">:</span> <span class="nx">dateKey</span><span class="p">,</span> <span class="na">choreId</span><span class="p">:</span> <span class="nx">open</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">id</span><span class="p">,</span> <span class="na">done</span><span class="p">:</span> <span class="kc">false</span> <span class="p">}</span> <span class="p">:</span> <span class="p">{</span> <span class="na">date</span><span class="p">:</span> <span class="nx">dateKey</span><span class="p">,</span> <span class="na">choreId</span><span class="p">:</span> <span class="kc">null</span><span class="p">,</span> <span class="na">done</span><span class="p">:</span> <span class="kc">false</span> <span class="p">};</span> <span class="p">}</span> <span class="k">return</span> <span class="nx">state</span><span class="p">.</span><span class="nx">today</span><span class="p">;</span> <span class="p">}</span> <span class="kd">function</span> <span class="nf">findChore</span><span class="p">(</span><span class="nx">state</span><span class="p">,</span> <span class="nx">id</span><span class="p">)</span> <span class="p">{</span> <span class="k">for</span> <span class="p">(</span><span class="kd">var</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">state</span><span class="p">.</span><span class="nx">chores</span><span class="p">.</span><span class="nx">length</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">state</span><span class="p">.</span><span class="nx">chores</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">id</span> <span class="o">===</span> <span class="nx">id</span><span class="p">)</span> <span class="k">return</span> <span class="nx">state</span><span class="p">.</span><span class="nx">chores</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span> <span class="p">}</span> <span class="k">return</span> <span class="kc">null</span><span class="p">;</span> <span class="p">}</span> <span class="kd">function</span> <span class="nf">addChore</span><span class="p">(</span><span class="nx">state</span><span class="p">,</span> <span class="nx">text</span><span class="p">)</span> <span class="p">{</span> <span class="nx">text</span> <span class="o">=</span> <span class="p">(</span><span class="nx">text</span> <span class="o">||</span> <span class="dl">''</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">text</span><span class="p">)</span> <span class="k">return</span> <span class="kc">null</span><span class="p">;</span> <span class="kd">var</span> <span class="nx">chore</span> <span class="o">=</span> <span class="p">{</span> <span class="na">id</span><span class="p">:</span> <span class="nf">nextId</span><span class="p">(</span><span class="nx">state</span><span class="p">),</span> <span class="na">text</span><span class="p">:</span> <span class="nx">text</span><span class="p">,</span> <span class="na">doneDate</span><span class="p">:</span> <span class="kc">null</span> <span class="p">};</span> <span class="nx">state</span><span class="p">.</span><span class="nx">chores</span><span class="p">.</span><span class="nf">push</span><span class="p">(</span><span class="nx">chore</span><span class="p">);</span> <span class="k">return</span> <span class="nx">chore</span><span class="p">;</span> <span class="p">}</span> <span class="kd">function</span> <span class="nf">markDone</span><span class="p">(</span><span class="nx">state</span><span class="p">,</span> <span class="nx">dateKey</span><span class="p">)</span> <span class="p">{</span> <span class="kd">var</span> <span class="nx">t</span> <span class="o">=</span> <span class="nf">pickToday</span><span class="p">(</span><span class="nx">state</span><span class="p">,</span> <span class="nx">dateKey</span><span class="p">);</span> <span class="k">if </span><span class="p">(</span><span class="nx">t</span><span class="p">.</span><span class="nx">choreId</span> <span class="o">===</span> <span class="kc">null</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span> <span class="kd">var</span> <span class="nx">chore</span> <span class="o">=</span> <span class="nf">findChore</span><span class="p">(</span><span class="nx">state</span><span class="p">,</span> <span class="nx">t</span><span class="p">.</span><span class="nx">choreId</span><span class="p">);</span> <span class="k">if </span><span class="p">(</span><span class="nx">chore</span><span class="p">)</span> <span class="nx">chore</span><span class="p">.</span><span class="nx">doneDate</span> <span class="o">=</span> <span class="nx">dateKey</span><span class="p">;</span> <span class="nx">t</span><span class="p">.</span><span class="nx">done</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span> <span class="p">}</span> <span class="c1">// Skip: move today's chore to the back of the queue, pick the next open one.</span> <span class="kd">function</span> <span class="nf">skipToday</span><span class="p">(</span><span class="nx">state</span><span class="p">,</span> <span class="nx">dateKey</span><span class="p">)</span> <span class="p">{</span> <span class="kd">var</span> <span class="nx">t</span> <span class="o">=</span> <span class="nf">pickToday</span><span class="p">(</span><span class="nx">state</span><span class="p">,</span> <span class="nx">dateKey</span><span class="p">);</span> <span class="k">if </span><span class="p">(</span><span class="nx">t</span><span class="p">.</span><span class="nx">choreId</span> <span class="o">===</span> <span class="kc">null</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span> <span class="kd">var</span> <span class="nx">chore</span> <span class="o">=</span> <span class="nf">findChore</span><span class="p">(</span><span class="nx">state</span><span class="p">,</span> <span class="nx">t</span><span class="p">.</span><span class="nx">choreId</span><span class="p">);</span> <span class="k">if </span><span class="p">(</span><span class="o">!</span><span class="nx">chore</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span> <span class="nx">state</span><span class="p">.</span><span class="nx">chores</span> <span class="o">=</span> <span class="nx">state</span><span class="p">.</span><span class="nx">chores</span><span class="p">.</span><span class="nf">filter</span><span class="p">(</span><span class="nf">function </span><span class="p">(</span><span class="nx">c</span><span class="p">)</span> <span class="p">{</span> <span class="k">return</span> <span class="nx">c</span><span class="p">.</span><span class="nx">id</span> <span class="o">!==</span> <span class="nx">chore</span><span class="p">.</span><span class="nx">id</span><span class="p">;</span> <span class="p">});</span> <span class="nx">state</span><span class="p">.</span><span class="nx">chores</span><span class="p">.</span><span class="nf">push</span><span class="p">(</span><span class="nx">chore</span><span class="p">);</span> <span class="kd">var</span> <span class="nx">open</span> <span class="o">=</span> <span class="nx">state</span><span class="p">.</span><span class="nx">chores</span><span class="p">.</span><span class="nf">filter</span><span class="p">(</span><span class="nf">function </span><span class="p">(</span><span class="nx">c</span><span class="p">)</span> <span class="p">{</span> <span class="k">return</span> <span class="o">!</span><span class="nx">c</span><span class="p">.</span><span class="nx">doneDate</span><span class="p">;</span> <span class="p">});</span> <span class="nx">state</span><span class="p">.</span><span class="nx">today</span> <span class="o">=</span> <span class="nx">open</span><span class="p">.</span><span class="nx">length</span> <span class="p">?</span> <span class="p">{</span> <span class="na">date</span><span class="p">:</span> <span class="nx">dateKey</span><span class="p">,</span> <span class="na">choreId</span><span class="p">:</span> <span class="nx">open</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">id</span><span class="p">,</span> <span class="na">done</span><span class="p">:</span> <span class="kc">false</span> <span class="p">}</span> <span class="p">:</span> <span class="p">{</span> <span class="na">date</span><span class="p">:</span> <span class="nx">dateKey</span><span class="p">,</span> <span class="na">choreId</span><span class="p">:</span> <span class="kc">null</span><span class="p">,</span> <span class="na">done</span><span class="p">:</span> <span class="kc">false</span> <span class="p">};</span> <span class="p">}</span> <span class="kd">function</span> <span class="nf">waitingCount</span><span class="p">(</span><span class="nx">state</span><span class="p">)</span> <span class="p">{</span> <span class="k">return</span> <span class="nx">state</span><span class="p">.</span><span class="nx">chores</span><span class="p">.</span><span class="nf">filter</span><span class="p">(</span><span class="nf">function </span><span class="p">(</span><span class="nx">c</span><span class="p">)</span> <span class="p">{</span> <span class="k">return</span> <span class="o">!</span><span class="nx">c</span><span class="p">.</span><span class="nx">doneDate</span><span class="p">;</span> <span class="p">}).</span><span class="nx">length</span><span class="p">;</span> <span class="p">}</span> <span class="c1">// ---- UI ----</span> <span class="kd">var</span> <span class="nx">state</span> <span class="o">=</span> <span class="nf">load</span><span class="p">();</span> <span class="kd">var</span> <span class="nx">todayEl</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">today-text</span><span class="dl">'</span><span class="p">);</span> <span class="kd">var</span> <span class="nx">waitingEl</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">waiting-text</span><span class="dl">'</span><span class="p">);</span> <span class="kd">var</span> <span class="nx">doneListEl</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">done-list</span><span class="dl">'</span><span class="p">);</span> <span class="kd">var</span> <span class="nx">inputEl</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">new-chore</span><span class="dl">'</span><span class="p">);</span> <span class="kd">function</span> <span class="nf">render</span><span class="p">()</span> <span class="p">{</span> <span class="kd">var</span> <span class="nx">t</span> <span class="o">=</span> <span class="nf">pickToday</span><span class="p">(</span><span class="nx">state</span><span class="p">,</span> <span class="nf">todayKey</span><span class="p">());</span> <span class="nf">save</span><span class="p">(</span><span class="nx">state</span><span class="p">);</span> <span class="k">if </span><span class="p">(</span><span class="nx">t</span><span class="p">.</span><span class="nx">choreId</span> <span class="o">===</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span> <span class="nx">todayEl</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">Nothing waiting. Add something dreaded below.</span><span class="dl">'</span><span class="p">;</span> <span class="p">}</span> <span class="k">else</span> <span class="k">if </span><span class="p">(</span><span class="nx">t</span><span class="p">.</span><span class="nx">done</span><span class="p">)</span> <span class="p">{</span> <span class="nx">todayEl</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">Done for today. Enjoy the rest. 🦥</span><span class="dl">'</span><span class="p">;</span> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> <span class="kd">var</span> <span class="nx">chore</span> <span class="o">=</span> <span class="nf">findChore</span><span class="p">(</span><span class="nx">state</span><span class="p">,</span> <span class="nx">t</span><span class="p">.</span><span class="nx">choreId</span><span class="p">);</span> <span class="nx">todayEl</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="nx">chore</span> <span class="p">?</span> <span class="nx">chore</span><span class="p">.</span><span class="nx">text</span> <span class="p">:</span> <span class="dl">'</span><span class="s1">Nothing waiting.</span><span class="dl">'</span><span class="p">;</span> <span class="p">}</span> <span class="kd">var</span> <span class="nx">waiting</span> <span class="o">=</span> <span class="nf">waitingCount</span><span class="p">(</span><span class="nx">state</span><span class="p">);</span> <span class="nx">waitingEl</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="nx">waiting</span> <span class="o">===</span> <span class="mi">0</span> <span class="p">?</span> <span class="dl">'</span><span class="s1">The pile is empty.</span><span class="dl">'</span> <span class="p">:</span> <span class="nx">waiting</span> <span class="o">+</span> <span class="dl">'</span><span class="s1"> more waiting, patiently. You do not have to look at them.</span><span class="dl">'</span><span class="p">;</span> <span class="kd">var</span> <span class="nx">done</span> <span class="o">=</span> <span class="nx">state</span><span class="p">.</span><span class="nx">chores</span><span class="p">.</span><span class="nf">filter</span><span class="p">(</span><span class="nf">function </span><span class="p">(</span><span class="nx">c</span><span class="p">)</span> <span class="p">{</span> <span class="k">return</span> <span class="nx">c</span><span class="p">.</span><span class="nx">doneDate</span><span class="p">;</span> <span class="p">}).</span><span class="nf">slice</span><span class="p">(</span><span class="o">-</span><span class="mi">10</span><span class="p">).</span><span class="nf">reverse</span><span class="p">();</span> <span class="nx">doneListEl</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="dl">''</span><span class="p">;</span> <span class="nx">done</span><span class="p">.</span><span class="nf">forEach</span><span class="p">(</span><span class="nf">function </span><span class="p">(</span><span class="nx">c</span><span class="p">)</span> <span class="p">{</span> <span class="kd">var</span> <span class="nx">li</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">createElement</span><span class="p">(</span><span class="dl">'</span><span class="s1">li</span><span class="dl">'</span><span class="p">);</span> <span class="nx">li</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="nx">c</span><span class="p">.</span><span class="nx">doneDate</span> <span class="o">+</span> <span class="dl">'</span><span class="s1"> — </span><span class="dl">'</span> <span class="o">+</span> <span class="nx">c</span><span class="p">.</span><span class="nx">text</span><span class="p">;</span> <span class="nx">doneListEl</span><span class="p">.</span><span class="nf">appendChild</span><span class="p">(</span><span class="nx">li</span><span class="p">);</span> <span class="p">});</span> <span class="p">}</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">done-btn</span><span class="dl">'</span><span class="p">).</span><span class="nf">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">click</span><span class="dl">'</span><span class="p">,</span> <span class="nf">function </span><span class="p">()</span> <span class="p">{</span> <span class="nf">markDone</span><span class="p">(</span><span class="nx">state</span><span class="p">,</span> <span class="nf">todayKey</span><span class="p">());</span> <span class="nf">render</span><span class="p">();</span> <span class="p">});</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">skip-btn</span><span class="dl">'</span><span class="p">).</span><span class="nf">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">click</span><span class="dl">'</span><span class="p">,</span> <span class="nf">function </span><span class="p">()</span> <span class="p">{</span> <span class="nf">skipToday</span><span class="p">(</span><span class="nx">state</span><span class="p">,</span> <span class="nf">todayKey</span><span class="p">());</span> <span class="nf">render</span><span class="p">();</span> <span class="p">});</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">add-btn</span><span class="dl">'</span><span class="p">).</span><span class="nf">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">click</span><span class="dl">'</span><span class="p">,</span> <span class="nf">function </span><span class="p">()</span> <span class="p">{</span> <span class="kd">var</span> <span class="nx">added</span> <span class="o">=</span> <span class="nf">addChore</span><span class="p">(</span><span class="nx">state</span><span class="p">,</span> <span class="nx">inputEl</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span> <span class="k">if </span><span class="p">(</span><span class="nx">added</span><span class="p">)</span> <span class="p">{</span> <span class="nx">inputEl</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="dl">''</span><span class="p">;</span> <span class="nf">render</span><span class="p">();</span> <span class="p">}</span> <span class="p">});</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">reset-btn</span><span class="dl">'</span><span class="p">).</span><span class="nf">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">click</span><span class="dl">'</span><span class="p">,</span> <span class="nf">function </span><span class="p">()</span> <span class="p">{</span> <span class="k">if </span><span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nf">confirm</span><span class="p">(</span><span class="dl">'</span><span class="s1">Clear the whole pile and the done trail?</span><span class="dl">'</span><span class="p">))</span> <span class="p">{</span> <span class="nx">state</span> <span class="o">=</span> <span class="p">{</span> <span class="na">chores</span><span class="p">:</span> <span class="p">[],</span> <span class="na">today</span><span class="p">:</span> <span class="kc">null</span> <span class="p">};</span> <span class="nf">render</span><span class="p">();</span> <span class="p">}</span> <span class="p">});</span> <span class="c1">// Expose logic for testing (browser console / node harness).</span> <span class="nb">window</span><span class="p">.</span><span class="nx">OneThing</span> <span class="o">=</span> <span class="p">{</span> <span class="na">load</span><span class="p">:</span> <span class="nx">load</span><span class="p">,</span> <span class="na">save</span><span class="p">:</span> <span class="nx">save</span><span class="p">,</span> <span class="na">pickToday</span><span class="p">:</span> <span class="nx">pickToday</span><span class="p">,</span> <span class="na">addChore</span><span class="p">:</span> <span class="nx">addChore</span><span class="p">,</span> <span class="na">markDone</span><span class="p">:</span> <span class="nx">markDone</span><span class="p">,</span> <span class="na">skipToday</span><span class="p">:</span> <span class="nx">skipToday</span><span class="p">,</span> <span class="na">waitingCount</span><span class="p">:</span> <span class="nx">waitingCount</span><span class="p">,</span> <span class="na">todayKey</span><span class="p">:</span> <span class="nx">todayKey</span> <span class="p">};</span> <span class="nf">render</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 deliberately did not bolt a model onto this. The project is built around the open web itself: one open-source HTML file, local storage, zero dependencies, nothing downloaded, nothing uploaded. The laziness reward here comes from removing machinery — no account, no cloud, no model download, no subscription — rather than adding a model. That keeps it tryable in seconds, on any device, forever.</p> <h2> Why Does Open Innovation Matter? </h2> <p>The closed version of this app is an account, a server, your chore list in someone else's database, a subscription, and a shutdown notice someday. The open version is a file you can read, copy, change, and keep: it works offline, costs nothing, and your list never leaves your device. Open is what makes "slow and steady" actually sustainable — a closed app needs you to keep paying attention to it; this one just sits there, patiently, and works.</p> devchallenge hf26challenge Robert Gilbert Sat, 17 Oct 2026 11:45:04 +0000 https://dev.to/robertgilbert75/birthstar-one-birthday-four-traditions-one-star-chart-4g2j https://dev.to/robertgilbert75/birthstar-one-birthday-four-traditions-one-star-chart-4g2j <p><em>This is a submission for the Hacktoberfest Open-Source AI Challenge: Week 2 — Side Hustle.</em></p> <h2> What I built </h2> <p><strong>BirthStar</strong> — a single-file web app that turns one birthday into a star chart and a detailed horoscope. Not one horoscope, though: four traditions at once.</p> <p>Enter a birthday and BirthStar computes, entirely in your browser:</p> <ul> <li>Your <strong>Western sun sign</strong>, its element, and its ruling planet</li> <li>Your <strong>Chinese zodiac</strong> animal, element, and yin/yang from the birth year</li> <li>The <strong>moon phase on the day you were born</strong>, with how lit it was</li> <li>Your <strong>life path number</strong> from the digits of the date</li> </ul> <p>It draws those onto a zodiac wheel, then hands the chart to an open-weight model, which writes an original reading that weaves the four sources together — including a "cross-currents" section where the traditions agree with each other, and where they pull in opposite directions. Any astrologer will tell you the disagreements are the interesting part.</p> <h2> The demo </h2> <p>Pick a date — say, a Wood Dragon born under a full moon with a Leo sun and life path 5 — and in seconds you get the wheel, the four-source fact sheet, and a reading in six sections: the chart at a glance, the sun sign core, the cross-currents, the life path, this week's horoscope, and lucky details (a color, a number, one small ritual).</p> <p>Everything astrological that can be computed is computed locally with plain date math — sign boundaries, the Chinese year cycle, a moon-phase approximation from the synodic month, digit-sum numerology. The model only does the writing. That split matters: the chart is identical for everyone with your birthday, every time; only the storytelling is generative.</p> <h2> Why open-weight is the point </h2> <p>BirthStar calls <strong>Llama 3.3 70B</strong> — Meta's open-weight model — through Groq's free tier.</p> <ul> <li> <strong>A birthday is personal data.</strong> People pay horoscope apps with their birth date, their email, and a subscription. BirthStar has no account, no server, and no database: the chart math never leaves the browser, and the only thing sent anywhere is the chart itself, to an API you key yourself.</li> <li> <strong>The business model only works open.</strong> A paid horoscope is a classic side hustle, but a closed API takes a cut of every reading and can reprice you overnight. An open-weight model on a free tier makes the marginal cost of a reading zero — which is the entire economics of selling $2 readings.</li> <li> <strong>No lock-in.</strong> The model is one string in one file. Swap Llama for Qwen, Mixtral, or DeepSeek in ten seconds.</li> <li> <strong>Auditable by design.</strong> Because the deterministic layer is separate, anyone can check the chart math. The magic is in the synthesis, not in a black box pretending to calculate.</li> </ul> <p>A closed model behind a paywall would make this a subscription app with a signup form. Open weights make it a file you can text to a friend.</p> <h2> What I'd do next </h2> <p>Birth time and place for a real rising sign and house system, a printable "full chart report" as the paid tier, and a daily-horoscope mode that keeps your chart and just advances the moon. All of it still in one file.</p> <h2> Try it </h2> <p>Try it here:<br> <a href="https://StarNomad.github.io/birthstar.html" rel="noopener noreferrer">https://StarNomad.github.io/birthstar.html</a> — save that file and open it in any<br> browser.<br> BirthStar is one self-contained HTML file, so here it is — the complete source, in the post. Copy it, save it as <code>birthstar.html</code>, and open it in any browser. No server, no install, no build step.</p> <ol> <li>Copy everything in the code block below.</li> <li>Paste it into a plain-text editor and save the file as <code>birthstar.html</code>.</li> <li>Open the file, enter a birthday, draw your chart, paste a free Groq key from console.groq.com, and read what four traditions say about you. For entertainment, obviously. ✨ </li> </ol> <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"</span><span class="nt">&gt;</span> <span class="nt">&lt;title&gt;</span>BirthStar — Your Birthday, Your Star Chart<span class="nt">&lt;/title&gt;</span> <span class="nt">&lt;style&gt;</span> <span class="nt">body</span> <span class="p">{</span> <span class="nl">font-family</span><span class="p">:</span> <span class="n">system-ui</span><span class="p">,</span> <span class="nb">sans-serif</span><span class="p">;</span> <span class="nl">max-width</span><span class="p">:</span> <span class="m">640px</span><span class="p">;</span> <span class="nl">margin</span><span class="p">:</span> <span class="m">2rem</span> <span class="nb">auto</span><span class="p">;</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">0</span> <span class="m">1rem</span><span class="p">;</span> <span class="nl">background</span><span class="p">:</span> <span class="nx">#12101f</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="nx">#e8e4f5</span><span class="p">;</span> <span class="p">}</span> <span class="nt">h1</span> <span class="p">{</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">1.8rem</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.card</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="nx">#1e1a33</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">1.2rem</span><span class="p">;</span> <span class="nl">margin</span><span class="p">:</span> <span class="m">1rem</span> <span class="m">0</span><span class="p">;</span> <span class="nl">box-shadow</span><span class="p">:</span> <span class="m">0</span> <span class="m">2px</span> <span class="m">8px</span> <span class="nf">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">.35</span><span class="p">);</span> <span class="p">}</span> <span class="nt">label</span> <span class="p">{</span> <span class="nl">display</span><span class="p">:</span> <span class="nb">block</span><span class="p">;</span> <span class="nl">margin</span><span class="p">:</span> <span class="m">.6rem</span> <span class="m">0</span> <span class="m">.2rem</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="nt">input</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">padding</span><span class="p">:</span> <span class="m">.6rem</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="nx">#4a4370</span><span class="p">;</span> <span class="nl">border-radius</span><span class="p">:</span> <span class="m">8px</span><span class="p">;</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">1rem</span><span class="p">;</span> <span class="nl">box-sizing</span><span class="p">:</span> <span class="nb">border-box</span><span class="p">;</span> <span class="nl">background</span><span class="p">:</span> <span class="nx">#171430</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="nx">#e8e4f5</span><span class="p">;</span> <span class="p">}</span> <span class="nt">button</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="nx">#6d28d9</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="nx">#fff</span><span class="p">;</span> <span class="nl">border</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="nl">border-radius</span><span class="p">:</span> <span class="m">8px</span><span class="p">;</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">.8rem</span> <span class="m">1.4rem</span><span class="p">;</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">1.05rem</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">margin-top</span><span class="p">:</span> <span class="m">1rem</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="p">}</span> <span class="nt">button</span><span class="nd">:disabled</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="nx">#55507a</span><span class="p">;</span> <span class="p">}</span> <span class="nf">#out</span> <span class="p">{</span> <span class="nl">white-space</span><span class="p">:</span> <span class="nb">pre-wrap</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.hint</span> <span class="p">{</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">.85rem</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="nx">#a49cc9</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.grid</span> <span class="p">{</span> <span class="nl">display</span><span class="p">:</span> <span class="nb">grid</span><span class="p">;</span> <span class="nl">grid-template-columns</span><span class="p">:</span> <span class="m">1fr</span> <span class="m">1fr</span><span class="p">;</span> <span class="nl">gap</span><span class="p">:</span> <span class="m">.5rem</span> <span class="m">.9rem</span><span class="p">;</span> <span class="nl">margin-top</span><span class="p">:</span> <span class="m">.6rem</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.grid</span> <span class="nt">b</span> <span class="p">{</span> <span class="nl">color</span><span class="p">:</span> <span class="nx">#c4b5fd</span><span class="p">;</span> <span class="p">}</span> <span class="nf">#chart</span> <span class="p">{</span> <span class="nl">display</span><span class="p">:</span> <span class="nb">block</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="p">}</span> <span class="nt">details</span> <span class="p">{</span> <span class="nl">margin-top</span><span class="p">:</span> <span class="m">1rem</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;h1&gt;</span>✨ BirthStar<span class="nt">&lt;/h1&gt;</span> <span class="nt">&lt;p&gt;</span>Type in a birthday. Get a star chart and a detailed horoscope woven from several traditions at once — Western zodiac, Chinese zodiac, moon phase, and numerology — by an open-weight model. For entertainment, and priced like it should be: free.<span class="nt">&lt;/p&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span> <span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"dob"</span><span class="nt">&gt;</span>Birthday<span class="nt">&lt;/label&gt;</span> <span class="nt">&lt;input</span> <span class="na">id=</span><span class="s">"dob"</span> <span class="na">type=</span><span class="s">"date"</span><span class="nt">&gt;</span> <span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"name"</span><span class="nt">&gt;</span>Name (optional)<span class="nt">&lt;/label&gt;</span> <span class="nt">&lt;input</span> <span class="na">id=</span><span class="s">"name"</span> <span class="na">placeholder=</span><span class="s">"e.g. Alex"</span><span class="nt">&gt;</span> <span class="nt">&lt;button</span> <span class="na">onclick=</span><span class="s">"chart()"</span><span class="nt">&gt;</span>🔮 Draw my star chart<span class="nt">&lt;/button&gt;</span> <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"hint"</span><span class="nt">&gt;</span>The chart math runs entirely in your browser — your birthday never leaves this page.<span class="nt">&lt;/p&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span> <span class="na">id=</span><span class="s">"chartcard"</span> <span class="na">style=</span><span class="s">"display:none"</span><span class="nt">&gt;</span> <span class="nt">&lt;h2&gt;</span>Your star chart<span class="nt">&lt;/h2&gt;</span> <span class="nt">&lt;svg</span> <span class="na">id=</span><span class="s">"chart"</span> <span class="na">width=</span><span class="s">"300"</span> <span class="na">height=</span><span class="s">"300"</span> <span class="na">viewBox=</span><span class="s">"0 0 300 300"</span><span class="nt">&gt;&lt;/svg&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"grid"</span> <span class="na">id=</span><span class="s">"facts"</span><span class="nt">&gt;&lt;/div&gt;</span> <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"hint"</span> <span class="na">id=</span><span class="s">"cny"</span><span class="nt">&gt;&lt;/p&gt;</span> <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"quick"</span><span class="nt">&gt;&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span> <span class="na">id=</span><span class="s">"aicard"</span> <span class="na">style=</span><span class="s">"display:none"</span><span class="nt">&gt;</span> <span class="nt">&lt;h2&gt;</span>Your detailed reading<span class="nt">&lt;/h2&gt;</span> <span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"key"</span><span class="nt">&gt;</span>Groq API key (free at console.groq.com — stays in your browser)<span class="nt">&lt;/label&gt;</span> <span class="nt">&lt;input</span> <span class="na">id=</span><span class="s">"key"</span> <span class="na">type=</span><span class="s">"password"</span> <span class="na">placeholder=</span><span class="s">"gsk_..."</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">&gt;</span> <span class="nt">&lt;button</span> <span class="na">id=</span><span class="s">"go"</span> <span class="na">onclick=</span><span class="s">"reading()"</span><span class="nt">&gt;</span>✍️ Write my reading<span class="nt">&lt;/button&gt;</span> <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"out"</span> <span class="na">style=</span><span class="s">"margin-top:1rem"</span><span class="nt">&gt;&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;details&gt;</span> <span class="nt">&lt;summary&gt;</span>Why open-weight?<span class="nt">&lt;/summary&gt;</span> <span class="nt">&lt;p&gt;</span>BirthStar calls <span class="nt">&lt;b&gt;</span>llama-3.3-70b-versatile<span class="nt">&lt;/b&gt;</span> — Meta's open-weight model — through Groq's free tier. A birth date is personal: with an open model there is no account, no server storing your chart, and no subscription wall between you and a bit of fun. Swap in any open model by changing one string. The whole app is one HTML file: no build step, no server.<span class="nt">&lt;/p&gt;</span> <span class="nt">&lt;/details&gt;</span> <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"hint"</span><span class="nt">&gt;</span>Astrology is entertainment, not science — enjoy it that way. 🌙<span class="nt">&lt;/p&gt;</span> <span class="nt">&lt;script&gt;</span> <span class="kd">const</span> <span class="nx">SIGNS</span> <span class="o">=</span> <span class="p">[</span> <span class="p">{</span><span class="na">n</span><span class="p">:</span><span class="dl">'</span><span class="s1">Capricorn</span><span class="dl">'</span><span class="p">,</span> <span class="na">g</span><span class="p">:</span><span class="dl">'</span><span class="s1">♑</span><span class="dl">'</span><span class="p">,</span> <span class="na">el</span><span class="p">:</span><span class="dl">'</span><span class="s1">Earth</span><span class="dl">'</span><span class="p">,</span> <span class="na">ruler</span><span class="p">:</span><span class="dl">'</span><span class="s1">Saturn</span><span class="dl">'</span><span class="p">,</span> <span class="na">from</span><span class="p">:[</span><span class="mi">1</span><span class="p">,</span><span class="mi">1</span><span class="p">]},</span> <span class="p">{</span><span class="na">n</span><span class="p">:</span><span class="dl">'</span><span class="s1">Aquarius</span><span class="dl">'</span><span class="p">,</span> <span class="na">g</span><span class="p">:</span><span class="dl">'</span><span class="s1">♒</span><span class="dl">'</span><span class="p">,</span> <span class="na">el</span><span class="p">:</span><span class="dl">'</span><span class="s1">Air</span><span class="dl">'</span><span class="p">,</span> <span class="na">ruler</span><span class="p">:</span><span class="dl">'</span><span class="s1">Uranus</span><span class="dl">'</span><span class="p">,</span> <span class="na">from</span><span class="p">:[</span><span class="mi">1</span><span class="p">,</span><span class="mi">20</span><span class="p">]},</span> <span class="p">{</span><span class="na">n</span><span class="p">:</span><span class="dl">'</span><span class="s1">Pisces</span><span class="dl">'</span><span class="p">,</span> <span class="na">g</span><span class="p">:</span><span class="dl">'</span><span class="s1">♓</span><span class="dl">'</span><span class="p">,</span> <span class="na">el</span><span class="p">:</span><span class="dl">'</span><span class="s1">Water</span><span class="dl">'</span><span class="p">,</span> <span class="na">ruler</span><span class="p">:</span><span class="dl">'</span><span class="s1">Neptune</span><span class="dl">'</span><span class="p">,</span> <span class="na">from</span><span class="p">:[</span><span class="mi">2</span><span class="p">,</span><span class="mi">19</span><span class="p">]},</span> <span class="p">{</span><span class="na">n</span><span class="p">:</span><span class="dl">'</span><span class="s1">Aries</span><span class="dl">'</span><span class="p">,</span> <span class="na">g</span><span class="p">:</span><span class="dl">'</span><span class="s1">♈</span><span class="dl">'</span><span class="p">,</span> <span class="na">el</span><span class="p">:</span><span class="dl">'</span><span class="s1">Fire</span><span class="dl">'</span><span class="p">,</span> <span class="na">ruler</span><span class="p">:</span><span class="dl">'</span><span class="s1">Mars</span><span class="dl">'</span><span class="p">,</span> <span class="na">from</span><span class="p">:[</span><span class="mi">3</span><span class="p">,</span><span class="mi">21</span><span class="p">]},</span> <span class="p">{</span><span class="na">n</span><span class="p">:</span><span class="dl">'</span><span class="s1">Taurus</span><span class="dl">'</span><span class="p">,</span> <span class="na">g</span><span class="p">:</span><span class="dl">'</span><span class="s1">♉</span><span class="dl">'</span><span class="p">,</span> <span class="na">el</span><span class="p">:</span><span class="dl">'</span><span class="s1">Earth</span><span class="dl">'</span><span class="p">,</span> <span class="na">ruler</span><span class="p">:</span><span class="dl">'</span><span class="s1">Venus</span><span class="dl">'</span><span class="p">,</span> <span class="na">from</span><span class="p">:[</span><span class="mi">4</span><span class="p">,</span><span class="mi">20</span><span class="p">]},</span> <span class="p">{</span><span class="na">n</span><span class="p">:</span><span class="dl">'</span><span class="s1">Gemini</span><span class="dl">'</span><span class="p">,</span> <span class="na">g</span><span class="p">:</span><span class="dl">'</span><span class="s1">♊</span><span class="dl">'</span><span class="p">,</span> <span class="na">el</span><span class="p">:</span><span class="dl">'</span><span class="s1">Air</span><span class="dl">'</span><span class="p">,</span> <span class="na">ruler</span><span class="p">:</span><span class="dl">'</span><span class="s1">Mercury</span><span class="dl">'</span><span class="p">,</span> <span class="na">from</span><span class="p">:[</span><span class="mi">5</span><span class="p">,</span><span class="mi">21</span><span class="p">]},</span> <span class="p">{</span><span class="na">n</span><span class="p">:</span><span class="dl">'</span><span class="s1">Cancer</span><span class="dl">'</span><span class="p">,</span> <span class="na">g</span><span class="p">:</span><span class="dl">'</span><span class="s1">♋</span><span class="dl">'</span><span class="p">,</span> <span class="na">el</span><span class="p">:</span><span class="dl">'</span><span class="s1">Water</span><span class="dl">'</span><span class="p">,</span> <span class="na">ruler</span><span class="p">:</span><span class="dl">'</span><span class="s1">the Moon</span><span class="dl">'</span><span class="p">,</span> <span class="na">from</span><span class="p">:[</span><span class="mi">6</span><span class="p">,</span><span class="mi">21</span><span class="p">]},</span> <span class="p">{</span><span class="na">n</span><span class="p">:</span><span class="dl">'</span><span class="s1">Leo</span><span class="dl">'</span><span class="p">,</span> <span class="na">g</span><span class="p">:</span><span class="dl">'</span><span class="s1">♌</span><span class="dl">'</span><span class="p">,</span> <span class="na">el</span><span class="p">:</span><span class="dl">'</span><span class="s1">Fire</span><span class="dl">'</span><span class="p">,</span> <span class="na">ruler</span><span class="p">:</span><span class="dl">'</span><span class="s1">the Sun</span><span class="dl">'</span><span class="p">,</span> <span class="na">from</span><span class="p">:[</span><span class="mi">7</span><span class="p">,</span><span class="mi">23</span><span class="p">]},</span> <span class="p">{</span><span class="na">n</span><span class="p">:</span><span class="dl">'</span><span class="s1">Virgo</span><span class="dl">'</span><span class="p">,</span> <span class="na">g</span><span class="p">:</span><span class="dl">'</span><span class="s1">♍</span><span class="dl">'</span><span class="p">,</span> <span class="na">el</span><span class="p">:</span><span class="dl">'</span><span class="s1">Earth</span><span class="dl">'</span><span class="p">,</span> <span class="na">ruler</span><span class="p">:</span><span class="dl">'</span><span class="s1">Mercury</span><span class="dl">'</span><span class="p">,</span> <span class="na">from</span><span class="p">:[</span><span class="mi">8</span><span class="p">,</span><span class="mi">23</span><span class="p">]},</span> <span class="p">{</span><span class="na">n</span><span class="p">:</span><span class="dl">'</span><span class="s1">Libra</span><span class="dl">'</span><span class="p">,</span> <span class="na">g</span><span class="p">:</span><span class="dl">'</span><span class="s1">♎</span><span class="dl">'</span><span class="p">,</span> <span class="na">el</span><span class="p">:</span><span class="dl">'</span><span class="s1">Air</span><span class="dl">'</span><span class="p">,</span> <span class="na">ruler</span><span class="p">:</span><span class="dl">'</span><span class="s1">Venus</span><span class="dl">'</span><span class="p">,</span> <span class="na">from</span><span class="p">:[</span><span class="mi">9</span><span class="p">,</span><span class="mi">23</span><span class="p">]},</span> <span class="p">{</span><span class="na">n</span><span class="p">:</span><span class="dl">'</span><span class="s1">Scorpio</span><span class="dl">'</span><span class="p">,</span> <span class="na">g</span><span class="p">:</span><span class="dl">'</span><span class="s1">♏</span><span class="dl">'</span><span class="p">,</span> <span class="na">el</span><span class="p">:</span><span class="dl">'</span><span class="s1">Water</span><span class="dl">'</span><span class="p">,</span> <span class="na">ruler</span><span class="p">:</span><span class="dl">'</span><span class="s1">Pluto</span><span class="dl">'</span><span class="p">,</span> <span class="na">from</span><span class="p">:[</span><span class="mi">10</span><span class="p">,</span><span class="mi">23</span><span class="p">]},</span> <span class="p">{</span><span class="na">n</span><span class="p">:</span><span class="dl">'</span><span class="s1">Sagittarius</span><span class="dl">'</span><span class="p">,</span> <span class="na">g</span><span class="p">:</span><span class="dl">'</span><span class="s1">♐</span><span class="dl">'</span><span class="p">,</span> <span class="na">el</span><span class="p">:</span><span class="dl">'</span><span class="s1">Fire</span><span class="dl">'</span><span class="p">,</span> <span class="na">ruler</span><span class="p">:</span><span class="dl">'</span><span class="s1">Jupiter</span><span class="dl">'</span><span class="p">,</span> <span class="na">from</span><span class="p">:[</span><span class="mi">11</span><span class="p">,</span><span class="mi">22</span><span class="p">]},</span> <span class="p">{</span><span class="na">n</span><span class="p">:</span><span class="dl">'</span><span class="s1">Capricorn</span><span class="dl">'</span><span class="p">,</span> <span class="na">g</span><span class="p">:</span><span class="dl">'</span><span class="s1">♑</span><span class="dl">'</span><span class="p">,</span> <span class="na">el</span><span class="p">:</span><span class="dl">'</span><span class="s1">Earth</span><span class="dl">'</span><span class="p">,</span> <span class="na">ruler</span><span class="p">:</span><span class="dl">'</span><span class="s1">Saturn</span><span class="dl">'</span><span class="p">,</span> <span class="na">from</span><span class="p">:[</span><span class="mi">12</span><span class="p">,</span><span class="mi">22</span><span class="p">]},</span> <span class="p">];</span> <span class="kd">const</span> <span class="nx">ANIMALS</span> <span class="o">=</span> <span class="p">[</span><span class="dl">'</span><span class="s1">Rat</span><span class="dl">'</span><span class="p">,</span><span class="dl">'</span><span class="s1">Ox</span><span class="dl">'</span><span class="p">,</span><span class="dl">'</span><span class="s1">Tiger</span><span class="dl">'</span><span class="p">,</span><span class="dl">'</span><span class="s1">Rabbit</span><span class="dl">'</span><span class="p">,</span><span class="dl">'</span><span class="s1">Dragon</span><span class="dl">'</span><span class="p">,</span><span class="dl">'</span><span class="s1">Snake</span><span class="dl">'</span><span class="p">,</span><span class="dl">'</span><span class="s1">Horse</span><span class="dl">'</span><span class="p">,</span><span class="dl">'</span><span class="s1">Goat</span><span class="dl">'</span><span class="p">,</span><span class="dl">'</span><span class="s1">Monkey</span><span class="dl">'</span><span class="p">,</span><span class="dl">'</span><span class="s1">Rooster</span><span class="dl">'</span><span class="p">,</span><span class="dl">'</span><span class="s1">Dog</span><span class="dl">'</span><span class="p">,</span><span class="dl">'</span><span class="s1">Pig</span><span class="dl">'</span><span class="p">];</span> <span class="kd">const</span> <span class="nx">STEM_ELEMENTS</span> <span class="o">=</span> <span class="p">[</span><span class="dl">'</span><span class="s1">Wood</span><span class="dl">'</span><span class="p">,</span><span class="dl">'</span><span class="s1">Wood</span><span class="dl">'</span><span class="p">,</span><span class="dl">'</span><span class="s1">Fire</span><span class="dl">'</span><span class="p">,</span><span class="dl">'</span><span class="s1">Fire</span><span class="dl">'</span><span class="p">,</span><span class="dl">'</span><span class="s1">Earth</span><span class="dl">'</span><span class="p">,</span><span class="dl">'</span><span class="s1">Earth</span><span class="dl">'</span><span class="p">,</span><span class="dl">'</span><span class="s1">Metal</span><span class="dl">'</span><span class="p">,</span><span class="dl">'</span><span class="s1">Metal</span><span class="dl">'</span><span class="p">,</span><span class="dl">'</span><span class="s1">Water</span><span class="dl">'</span><span class="p">,</span><span class="dl">'</span><span class="s1">Water</span><span class="dl">'</span><span class="p">];</span> <span class="kd">const</span> <span class="nx">PHASES</span> <span class="o">=</span> <span class="p">[</span><span class="dl">'</span><span class="s1">New Moon</span><span class="dl">'</span><span class="p">,</span><span class="dl">'</span><span class="s1">Waxing Crescent</span><span class="dl">'</span><span class="p">,</span><span class="dl">'</span><span class="s1">First Quarter</span><span class="dl">'</span><span class="p">,</span><span class="dl">'</span><span class="s1">Waxing Gibbous</span><span class="dl">'</span><span class="p">,</span><span class="dl">'</span><span class="s1">Full Moon</span><span class="dl">'</span><span class="p">,</span><span class="dl">'</span><span class="s1">Waning Gibbous</span><span class="dl">'</span><span class="p">,</span><span class="dl">'</span><span class="s1">Last Quarter</span><span class="dl">'</span><span class="p">,</span><span class="dl">'</span><span class="s1">Waning Crescent</span><span class="dl">'</span><span class="p">];</span> <span class="kd">const</span> <span class="nx">SYNODIC</span> <span class="o">=</span> <span class="mf">29.53058867</span><span class="p">;</span> <span class="kd">function</span> <span class="nf">sunSign</span><span class="p">(</span><span class="nx">m</span><span class="p">,</span> <span class="nx">d</span><span class="p">)</span> <span class="p">{</span> <span class="kd">let</span> <span class="nx">s</span> <span class="o">=</span> <span class="nx">SIGNS</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span> <span class="k">for </span><span class="p">(</span><span class="kd">const</span> <span class="nx">x</span> <span class="k">of</span> <span class="nx">SIGNS</span><span class="p">)</span> <span class="k">if </span><span class="p">(</span><span class="nx">m</span> <span class="o">&gt;</span> <span class="nx">x</span><span class="p">.</span><span class="k">from</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span> <span class="o">||</span> <span class="p">(</span><span class="nx">m</span> <span class="o">===</span> <span class="nx">x</span><span class="p">.</span><span class="k">from</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span> <span class="o">&amp;&amp;</span> <span class="nx">d</span> <span class="o">&gt;=</span> <span class="nx">x</span><span class="p">.</span><span class="k">from</span><span class="p">[</span><span class="mi">1</span><span class="p">]))</span> <span class="nx">s</span> <span class="o">=</span> <span class="nx">x</span><span class="p">;</span> <span class="k">return</span> <span class="nx">s</span><span class="p">;</span> <span class="p">}</span> <span class="kd">function</span> <span class="nf">chinese</span><span class="p">(</span><span class="nx">year</span><span class="p">)</span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">i</span> <span class="o">=</span> <span class="p">((</span><span class="nx">year</span> <span class="o">-</span> <span class="mi">4</span><span class="p">)</span> <span class="o">%</span> <span class="mi">12</span> <span class="o">+</span> <span class="mi">12</span><span class="p">)</span> <span class="o">%</span> <span class="mi">12</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">e</span> <span class="o">=</span> <span class="nx">STEM_ELEMENTS</span><span class="p">[((</span><span class="nx">year</span> <span class="o">-</span> <span class="mi">4</span><span class="p">)</span> <span class="o">%</span> <span class="mi">10</span> <span class="o">+</span> <span class="mi">10</span><span class="p">)</span> <span class="o">%</span> <span class="mi">10</span><span class="p">];</span> <span class="k">return</span> <span class="p">{</span> <span class="na">animal</span><span class="p">:</span> <span class="nx">ANIMALS</span><span class="p">[</span><span class="nx">i</span><span class="p">],</span> <span class="na">element</span><span class="p">:</span> <span class="nx">e</span><span class="p">,</span> <span class="na">yy</span><span class="p">:</span> <span class="p">(</span><span class="nx">year</span> <span class="o">%</span> <span class="mi">2</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span> <span class="p">?</span> <span class="dl">'</span><span class="s1">Yang</span><span class="dl">'</span> <span class="p">:</span> <span class="dl">'</span><span class="s1">Yin</span><span class="dl">'</span> <span class="p">};</span> <span class="p">}</span> <span class="kd">function</span> <span class="nf">lifePath</span><span class="p">(</span><span class="nx">y</span><span class="p">,</span> <span class="nx">m</span><span class="p">,</span> <span class="nx">d</span><span class="p">)</span> <span class="p">{</span> <span class="kd">let</span> <span class="nx">s</span> <span class="o">=</span> <span class="nc">String</span><span class="p">(</span><span class="nx">y</span><span class="p">)</span> <span class="o">+</span> <span class="nc">String</span><span class="p">(</span><span class="nx">m</span><span class="p">).</span><span class="nf">padStart</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span><span class="dl">'</span><span class="s1">0</span><span class="dl">'</span><span class="p">)</span> <span class="o">+</span> <span class="nc">String</span><span class="p">(</span><span class="nx">d</span><span class="p">).</span><span class="nf">padStart</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span><span class="dl">'</span><span class="s1">0</span><span class="dl">'</span><span class="p">);</span> <span class="kd">let</span> <span class="nx">n</span> <span class="o">=</span> <span class="nx">s</span><span class="p">.</span><span class="nf">split</span><span class="p">(</span><span class="dl">''</span><span class="p">).</span><span class="nf">reduce</span><span class="p">((</span><span class="nx">a</span><span class="p">,</span><span class="nx">c</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="nx">a</span> <span class="o">+</span> <span class="p">(</span><span class="o">+</span><span class="nx">c</span><span class="p">),</span> <span class="mi">0</span><span class="p">);</span> <span class="k">while </span><span class="p">(</span><span class="nx">n</span> <span class="o">&gt;</span> <span class="mi">9</span> <span class="o">&amp;&amp;</span> <span class="nx">n</span> <span class="o">!==</span> <span class="mi">11</span> <span class="o">&amp;&amp;</span> <span class="nx">n</span> <span class="o">!==</span> <span class="mi">22</span> <span class="o">&amp;&amp;</span> <span class="nx">n</span> <span class="o">!==</span> <span class="mi">33</span><span class="p">)</span> <span class="nx">n</span> <span class="o">=</span> <span class="nc">String</span><span class="p">(</span><span class="nx">n</span><span class="p">).</span><span class="nf">split</span><span class="p">(</span><span class="dl">''</span><span class="p">).</span><span class="nf">reduce</span><span class="p">((</span><span class="nx">a</span><span class="p">,</span><span class="nx">c</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="nx">a</span> <span class="o">+</span> <span class="p">(</span><span class="o">+</span><span class="nx">c</span><span class="p">),</span> <span class="mi">0</span><span class="p">);</span> <span class="k">return</span> <span class="nx">n</span><span class="p">;</span> <span class="p">}</span> <span class="kd">function</span> <span class="nf">moonPhase</span><span class="p">(</span><span class="nx">dateUTC</span><span class="p">)</span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">ref</span> <span class="o">=</span> <span class="nb">Date</span><span class="p">.</span><span class="nc">UTC</span><span class="p">(</span><span class="mi">2000</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">6</span><span class="p">,</span> <span class="mi">18</span><span class="p">,</span> <span class="mi">14</span><span class="p">)</span> <span class="o">/</span> <span class="mi">86400000</span><span class="p">;</span> <span class="c1">// known new moon</span> <span class="kd">let</span> <span class="nx">age</span> <span class="o">=</span> <span class="p">((</span><span class="nx">dateUTC</span> <span class="o">/</span> <span class="mi">86400000</span> <span class="o">-</span> <span class="nx">ref</span><span class="p">)</span> <span class="o">%</span> <span class="nx">SYNODIC</span> <span class="o">+</span> <span class="nx">SYNODIC</span><span class="p">)</span> <span class="o">%</span> <span class="nx">SYNODIC</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">idx</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nf">floor</span><span class="p">((</span><span class="nx">age</span> <span class="o">/</span> <span class="nx">SYNODIC</span><span class="p">)</span> <span class="o">*</span> <span class="mi">8</span> <span class="o">+</span> <span class="mf">0.5</span><span class="p">)</span> <span class="o">%</span> <span class="mi">8</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">illum</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nf">round</span><span class="p">((</span><span class="mi">1</span> <span class="o">-</span> <span class="nb">Math</span><span class="p">.</span><span class="nf">cos</span><span class="p">(</span><span class="mi">2</span> <span class="o">*</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">PI</span> <span class="o">*</span> <span class="nx">age</span> <span class="o">/</span> <span class="nx">SYNODIC</span><span class="p">))</span> <span class="o">/</span> <span class="mi">2</span> <span class="o">*</span> <span class="mi">100</span><span class="p">);</span> <span class="k">return</span> <span class="p">{</span> <span class="na">name</span><span class="p">:</span> <span class="nx">PHASES</span><span class="p">[</span><span class="nx">idx</span><span class="p">],</span> <span class="nx">illum</span><span class="p">,</span> <span class="na">age</span><span class="p">:</span> <span class="nx">age</span><span class="p">.</span><span class="nf">toFixed</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span> <span class="p">};</span> <span class="p">}</span> <span class="kd">let</span> <span class="nx">DATA</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span> <span class="kd">function</span> <span class="nf">drawWheel</span><span class="p">(</span><span class="nx">signName</span><span class="p">)</span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">svg</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">chart</span><span class="dl">'</span><span class="p">);</span> <span class="kd">const</span> <span class="nx">cx</span> <span class="o">=</span> <span class="mi">150</span><span class="p">,</span> <span class="nx">cy</span> <span class="o">=</span> <span class="mi">150</span><span class="p">,</span> <span class="nx">R</span> <span class="o">=</span> <span class="mi">140</span><span class="p">,</span> <span class="nx">r</span> <span class="o">=</span> <span class="mi">92</span><span class="p">;</span> <span class="kd">let</span> <span class="nx">h</span> <span class="o">=</span> <span class="s2">`&lt;circle cx="</span><span class="p">${</span><span class="nx">cx</span><span class="p">}</span><span class="s2">" cy="</span><span class="p">${</span><span class="nx">cy</span><span class="p">}</span><span class="s2">" r="</span><span class="p">${</span><span class="nx">R</span><span class="p">}</span><span class="s2">" fill="#171430" stroke="#4a4370"/&gt;`</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">order</span> <span class="o">=</span> <span class="p">[</span><span class="dl">'</span><span class="s1">Aries</span><span class="dl">'</span><span class="p">,</span><span class="dl">'</span><span class="s1">Taurus</span><span class="dl">'</span><span class="p">,</span><span class="dl">'</span><span class="s1">Gemini</span><span class="dl">'</span><span class="p">,</span><span class="dl">'</span><span class="s1">Cancer</span><span class="dl">'</span><span class="p">,</span><span class="dl">'</span><span class="s1">Leo</span><span class="dl">'</span><span class="p">,</span><span class="dl">'</span><span class="s1">Virgo</span><span class="dl">'</span><span class="p">,</span><span class="dl">'</span><span class="s1">Libra</span><span class="dl">'</span><span class="p">,</span><span class="dl">'</span><span class="s1">Scorpio</span><span class="dl">'</span><span class="p">,</span><span class="dl">'</span><span class="s1">Sagittarius</span><span class="dl">'</span><span class="p">,</span><span class="dl">'</span><span class="s1">Capricorn</span><span class="dl">'</span><span class="p">,</span><span class="dl">'</span><span class="s1">Aquarius</span><span class="dl">'</span><span class="p">,</span><span class="dl">'</span><span class="s1">Pisces</span><span class="dl">'</span><span class="p">];</span> <span class="nx">order</span><span class="p">.</span><span class="nf">forEach</span><span class="p">((</span><span class="nx">name</span><span class="p">,</span> <span class="nx">i</span><span class="p">)</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">a0</span> <span class="o">=</span> <span class="p">(</span><span class="nx">i</span> <span class="o">*</span> <span class="mi">30</span> <span class="o">-</span> <span class="mi">90</span><span class="p">)</span> <span class="o">*</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">PI</span> <span class="o">/</span> <span class="mi">180</span><span class="p">,</span> <span class="nx">a1</span> <span class="o">=</span> <span class="p">((</span><span class="nx">i</span> <span class="o">+</span> <span class="mi">1</span><span class="p">)</span> <span class="o">*</span> <span class="mi">30</span> <span class="o">-</span> <span class="mi">90</span><span class="p">)</span> <span class="o">*</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">PI</span> <span class="o">/</span> <span class="mi">180</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">x0</span> <span class="o">=</span> <span class="nx">cx</span> <span class="o">+</span> <span class="nx">R</span> <span class="o">*</span> <span class="nb">Math</span><span class="p">.</span><span class="nf">cos</span><span class="p">(</span><span class="nx">a0</span><span class="p">),</span> <span class="nx">y0</span> <span class="o">=</span> <span class="nx">cy</span> <span class="o">+</span> <span class="nx">R</span> <span class="o">*</span> <span class="nb">Math</span><span class="p">.</span><span class="nf">sin</span><span class="p">(</span><span class="nx">a0</span><span class="p">);</span> <span class="kd">const</span> <span class="nx">x1</span> <span class="o">=</span> <span class="nx">cx</span> <span class="o">+</span> <span class="nx">R</span> <span class="o">*</span> <span class="nb">Math</span><span class="p">.</span><span class="nf">cos</span><span class="p">(</span><span class="nx">a1</span><span class="p">),</span> <span class="nx">y1</span> <span class="o">=</span> <span class="nx">cy</span> <span class="o">+</span> <span class="nx">R</span> <span class="o">*</span> <span class="nb">Math</span><span class="p">.</span><span class="nf">sin</span><span class="p">(</span><span class="nx">a1</span><span class="p">);</span> <span class="kd">const</span> <span class="nx">fill</span> <span class="o">=</span> <span class="nx">name</span> <span class="o">===</span> <span class="nx">signName</span> <span class="p">?</span> <span class="dl">'</span><span class="s1">#6d28d9</span><span class="dl">'</span> <span class="p">:</span> <span class="dl">'</span><span class="s1">#241e45</span><span class="dl">'</span><span class="p">;</span> <span class="nx">h</span> <span class="o">+=</span> <span class="s2">`&lt;path d="M</span><span class="p">${</span><span class="nx">cx</span><span class="p">}</span><span class="s2">,</span><span class="p">${</span><span class="nx">cy</span><span class="p">}</span><span class="s2"> L</span><span class="p">${</span><span class="nx">x0</span><span class="p">}</span><span class="s2">,</span><span class="p">${</span><span class="nx">y0</span><span class="p">}</span><span class="s2"> A</span><span class="p">${</span><span class="nx">R</span><span class="p">}</span><span class="s2">,</span><span class="p">${</span><span class="nx">R</span><span class="p">}</span><span class="s2"> 0 0 1 </span><span class="p">${</span><span class="nx">x1</span><span class="p">}</span><span class="s2">,</span><span class="p">${</span><span class="nx">y1</span><span class="p">}</span><span class="s2"> Z" fill="</span><span class="p">${</span><span class="nx">fill</span><span class="p">}</span><span class="s2">" stroke="#4a4370"/&gt;`</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">am</span> <span class="o">=</span> <span class="p">(</span><span class="nx">i</span> <span class="o">*</span> <span class="mi">30</span> <span class="o">-</span> <span class="mi">75</span><span class="p">)</span> <span class="o">*</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">PI</span> <span class="o">/</span> <span class="mi">180</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">tx</span> <span class="o">=</span> <span class="nx">cx</span> <span class="o">+</span> <span class="p">(</span><span class="nx">r</span> <span class="o">+</span> <span class="mi">22</span><span class="p">)</span> <span class="o">*</span> <span class="nb">Math</span><span class="p">.</span><span class="nf">cos</span><span class="p">(</span><span class="nx">am</span><span class="p">),</span> <span class="nx">ty</span> <span class="o">=</span> <span class="nx">cy</span> <span class="o">+</span> <span class="p">(</span><span class="nx">r</span> <span class="o">+</span> <span class="mi">22</span><span class="p">)</span> <span class="o">*</span> <span class="nb">Math</span><span class="p">.</span><span class="nf">sin</span><span class="p">(</span><span class="nx">am</span><span class="p">)</span> <span class="o">+</span> <span class="mi">7</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">g</span> <span class="o">=</span> <span class="nx">SIGNS</span><span class="p">.</span><span class="nf">find</span><span class="p">(</span><span class="nx">s</span> <span class="o">=&gt;</span> <span class="nx">s</span><span class="p">.</span><span class="nx">n</span> <span class="o">===</span> <span class="nx">name</span><span class="p">).</span><span class="nx">g</span><span class="p">;</span> <span class="nx">h</span> <span class="o">+=</span> <span class="s2">`&lt;text x="</span><span class="p">${</span><span class="nx">tx</span><span class="p">}</span><span class="s2">" y="</span><span class="p">${</span><span class="nx">ty</span><span class="p">}</span><span class="s2">" fill="#e8e4f5" font-size="20" text-anchor="middle"&gt;</span><span class="p">${</span><span class="nx">g</span><span class="p">}</span><span class="s2">&lt;/text&gt;`</span><span class="p">;</span> <span class="p">});</span> <span class="nx">h</span> <span class="o">+=</span> <span class="s2">`&lt;circle cx="</span><span class="p">${</span><span class="nx">cx</span><span class="p">}</span><span class="s2">" cy="</span><span class="p">${</span><span class="nx">cy</span><span class="p">}</span><span class="s2">" r="</span><span class="p">${</span><span class="nx">r</span> <span class="o">-</span> <span class="mi">28</span><span class="p">}</span><span class="s2">" fill="#12101f"/&gt;`</span><span class="p">;</span> <span class="nx">h</span> <span class="o">+=</span> <span class="s2">`&lt;text x="</span><span class="p">${</span><span class="nx">cx</span><span class="p">}</span><span class="s2">" y="</span><span class="p">${</span><span class="nx">cy</span> <span class="o">+</span> <span class="mi">8</span><span class="p">}</span><span class="s2">" fill="#c4b5fd" font-size="22" text-anchor="middle"&gt;☀ </span><span class="p">${</span><span class="nx">signName</span><span class="p">}</span><span class="s2">&lt;/text&gt;`</span><span class="p">;</span> <span class="nx">svg</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">h</span><span class="p">;</span> <span class="p">}</span> <span class="kd">function</span> <span class="nf">chart</span><span class="p">()</span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">v</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">dob</span><span class="dl">'</span><span class="p">).</span><span class="nx">value</span><span class="p">;</span> <span class="k">if </span><span class="p">(</span><span class="o">!</span><span class="nx">v</span><span class="p">)</span> <span class="p">{</span> <span class="nf">alert</span><span class="p">(</span><span class="dl">'</span><span class="s1">Pick a birthday 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="kd">const</span> <span class="p">[</span><span class="nx">y</span><span class="p">,</span> <span class="nx">m</span><span class="p">,</span> <span class="nx">d</span><span class="p">]</span> <span class="o">=</span> <span class="nx">v</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="nb">Number</span><span class="p">);</span> <span class="kd">const</span> <span class="nx">dt</span> <span class="o">=</span> <span class="k">new</span> <span class="nc">Date</span><span class="p">(</span><span class="nb">Date</span><span class="p">.</span><span class="nc">UTC</span><span class="p">(</span><span class="nx">y</span><span class="p">,</span> <span class="nx">m</span> <span class="o">-</span> <span class="mi">1</span><span class="p">,</span> <span class="nx">d</span><span class="p">));</span> <span class="kd">const</span> <span class="nb">sun</span> <span class="o">=</span> <span class="nf">sunSign</span><span class="p">(</span><span class="nx">m</span><span class="p">,</span> <span class="nx">d</span><span class="p">);</span> <span class="kd">const</span> <span class="nx">cn</span> <span class="o">=</span> <span class="nf">chinese</span><span class="p">(</span><span class="nx">y</span><span class="p">);</span> <span class="kd">const</span> <span class="nx">lp</span> <span class="o">=</span> <span class="nf">lifePath</span><span class="p">(</span><span class="nx">y</span><span class="p">,</span> <span class="nx">m</span><span class="p">,</span> <span class="nx">d</span><span class="p">);</span> <span class="kd">const</span> <span class="nx">moon</span> <span class="o">=</span> <span class="nf">moonPhase</span><span class="p">(</span><span class="nx">dt</span><span class="p">);</span> <span class="kd">const</span> <span class="nx">weekday</span> <span class="o">=</span> <span class="nx">dt</span><span class="p">.</span><span class="nf">toLocaleDateString</span><span class="p">(</span><span class="dl">'</span><span class="s1">en-US</span><span class="dl">'</span><span class="p">,</span> <span class="p">{</span> <span class="na">weekday</span><span class="p">:</span> <span class="dl">'</span><span class="s1">long</span><span class="dl">'</span><span class="p">,</span> <span class="na">timeZone</span><span class="p">:</span> <span class="dl">'</span><span class="s1">UTC</span><span class="dl">'</span> <span class="p">});</span> <span class="kd">const</span> <span class="nx">name</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">name</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="nx">DATA</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">y</span><span class="p">,</span> <span class="nx">m</span><span class="p">,</span> <span class="nx">d</span><span class="p">,</span> <span class="nx">weekday</span><span class="p">,</span> <span class="nb">sun</span><span class="p">,</span> <span class="nx">cn</span><span class="p">,</span> <span class="nx">lp</span><span class="p">,</span> <span class="nx">moon</span><span class="p">,</span> <span class="nx">name</span> <span class="p">};</span> <span class="nf">drawWheel</span><span class="p">(</span><span class="nb">sun</span><span class="p">.</span><span class="nx">n</span><span class="p">);</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">facts</span><span class="dl">'</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="s2">`&lt;span&gt;&lt;b&gt;Sun sign&lt;/b&gt;&lt;br&gt;</span><span class="p">${</span><span class="nb">sun</span><span class="p">.</span><span class="nx">g</span><span class="p">}</span><span class="s2"> </span><span class="p">${</span><span class="nb">sun</span><span class="p">.</span><span class="nx">n</span><span class="p">}</span><span class="s2"> (</span><span class="p">${</span><span class="nb">sun</span><span class="p">.</span><span class="nx">el</span><span class="p">}</span><span class="s2">, ruled by </span><span class="p">${</span><span class="nb">sun</span><span class="p">.</span><span class="nx">ruler</span><span class="p">}</span><span class="s2">)&lt;/span&gt;`</span> <span class="o">+</span> <span class="s2">`&lt;span&gt;&lt;b&gt;Born on a&lt;/b&gt;&lt;br&gt;</span><span class="p">${</span><span class="nx">weekday</span><span class="p">}</span><span class="s2">&lt;/span&gt;`</span> <span class="o">+</span> <span class="s2">`&lt;span&gt;&lt;b&gt;Chinese zodiac&lt;/b&gt;&lt;br&gt;</span><span class="p">${</span><span class="nx">cn</span><span class="p">.</span><span class="nx">yy</span><span class="p">}</span><span class="s2"> </span><span class="p">${</span><span class="nx">cn</span><span class="p">.</span><span class="nx">element</span><span class="p">}</span><span class="s2"> </span><span class="p">${</span><span class="nx">cn</span><span class="p">.</span><span class="nx">animal</span><span class="p">}</span><span class="s2">&lt;/span&gt;`</span> <span class="o">+</span> <span class="s2">`&lt;span&gt;&lt;b&gt;Moon at birth&lt;/b&gt;&lt;br&gt;</span><span class="p">${</span><span class="nx">moon</span><span class="p">.</span><span class="nx">name</span><span class="p">}</span><span class="s2">, </span><span class="p">${</span><span class="nx">moon</span><span class="p">.</span><span class="nx">illum</span><span class="p">}</span><span class="s2">% lit&lt;/span&gt;`</span> <span class="o">+</span> <span class="s2">`&lt;span&gt;&lt;b&gt;Life path number&lt;/b&gt;&lt;br&gt;</span><span class="p">${</span><span class="nx">lp</span><span class="p">}</span><span class="s2">&lt;/span&gt;`</span> <span class="o">+</span> <span class="s2">`&lt;span&gt;&lt;b&gt;Sources combined&lt;/b&gt;&lt;br&gt;Western · Chinese · Lunar · Numerology&lt;/span&gt;`</span><span class="p">;</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">cny</span><span class="dl">'</span><span class="p">).</span><span class="nx">textContent</span> <span class="o">=</span> <span class="p">(</span><span class="nx">m</span> <span class="o">&lt;=</span> <span class="mi">2</span><span class="p">)</span> <span class="p">?</span> <span class="dl">'</span><span class="s1">Note: for January/February birthdays, the Chinese animal is read from the calendar year — if you were born before Chinese New Year that year, traditional charts use the previous animal.</span><span class="dl">'</span> <span class="p">:</span> <span class="dl">''</span><span class="p">;</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">quick</span><span class="dl">'</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="s2">`&lt;p&gt;☀ A </span><span class="p">${</span><span class="nb">sun</span><span class="p">.</span><span class="nx">n</span><span class="p">}</span><span class="s2"> sun with a </span><span class="p">${</span><span class="nx">moon</span><span class="p">.</span><span class="nx">name</span><span class="p">.</span><span class="nf">toLowerCase</span><span class="p">()}</span><span class="s2"> birth moon, a </span><span class="p">${</span><span class="nx">cn</span><span class="p">.</span><span class="nx">element</span><span class="p">}</span><span class="s2"> </span><span class="p">${</span><span class="nx">cn</span><span class="p">.</span><span class="nx">animal</span><span class="p">}</span><span class="s2"> year, and life path </span><span class="p">${</span><span class="nx">lp</span><span class="p">}</span><span class="s2"> — four traditions, one birthday. The detailed reading below weaves them together and calls out where they agree and where they argue.&lt;/p&gt;`</span><span class="p">;</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">chartcard</span><span class="dl">'</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="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">aicard</span><span class="dl">'</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="p">}</span> <span class="k">async</span> <span class="kd">function</span> <span class="nf">reading</span><span class="p">()</span> <span class="p">{</span> <span class="k">if </span><span class="p">(</span><span class="o">!</span><span class="nx">DATA</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">key</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">key</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">key</span><span class="p">)</span> <span class="p">{</span> <span class="nf">alert</span><span class="p">(</span><span class="dl">'</span><span class="s1">Paste your free Groq API key first (console.groq.com).</span><span class="dl">'</span><span class="p">);</span> <span class="k">return</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">go</span><span class="dl">'</span><span class="p">);</span> <span class="nx">btn</span><span class="p">.</span><span class="nx">disabled</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">textContent</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">✨ Consulting the stars...</span><span class="dl">'</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">out</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">out</span><span class="dl">'</span><span class="p">);</span> <span class="nx">out</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">Asking the model...</span><span class="dl">'</span><span class="p">;</span> <span class="kd">const</span> <span class="p">{</span> <span class="nx">y</span><span class="p">,</span> <span class="nx">m</span><span class="p">,</span> <span class="nx">d</span><span class="p">,</span> <span class="nx">weekday</span><span class="p">,</span> <span class="nb">sun</span><span class="p">,</span> <span class="nx">cn</span><span class="p">,</span> <span class="nx">lp</span><span class="p">,</span> <span class="nx">moon</span><span class="p">,</span> <span class="nx">name</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">DATA</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">prompt</span> <span class="o">=</span> <span class="s2">`You are BirthStar, a warm, witty horoscope writer. Write an original, detailed horoscope reading that synthesizes FOUR sources for this person. Do not copy any published horoscope; invent the reading from the chart data. Name: </span><span class="p">${</span><span class="nx">name</span> <span class="o">||</span> <span class="dl">'</span><span class="s1">the seeker</span><span class="dl">'</span><span class="p">}</span><span class="s2"> Birthday: </span><span class="p">${</span><span class="nx">y</span><span class="p">}</span><span class="s2">-</span><span class="p">${</span><span class="nc">String</span><span class="p">(</span><span class="nx">m</span><span class="p">).</span><span class="nf">padStart</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span><span class="dl">'</span><span class="s1">0</span><span class="dl">'</span><span class="p">)}</span><span class="s2">-</span><span class="p">${</span><span class="nc">String</span><span class="p">(</span><span class="nx">d</span><span class="p">).</span><span class="nf">padStart</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span><span class="dl">'</span><span class="s1">0</span><span class="dl">'</span><span class="p">)}</span><span class="s2"> (a </span><span class="p">${</span><span class="nx">weekday</span><span class="p">}</span><span class="s2">) Western sun sign: </span><span class="p">${</span><span class="nb">sun</span><span class="p">.</span><span class="nx">n</span><span class="p">}</span><span class="s2"> (</span><span class="p">${</span><span class="nb">sun</span><span class="p">.</span><span class="nx">el</span><span class="p">}</span><span class="s2"> sign, ruled by </span><span class="p">${</span><span class="nb">sun</span><span class="p">.</span><span class="nx">ruler</span><span class="p">}</span><span class="s2">) Chinese zodiac: </span><span class="p">${</span><span class="nx">cn</span><span class="p">.</span><span class="nx">yy</span><span class="p">}</span><span class="s2"> </span><span class="p">${</span><span class="nx">cn</span><span class="p">.</span><span class="nx">element</span><span class="p">}</span><span class="s2"> </span><span class="p">${</span><span class="nx">cn</span><span class="p">.</span><span class="nx">animal</span><span class="p">}</span><span class="s2"> Moon phase at birth: </span><span class="p">${</span><span class="nx">moon</span><span class="p">.</span><span class="nx">name</span><span class="p">}</span><span class="s2">, </span><span class="p">${</span><span class="nx">moon</span><span class="p">.</span><span class="nx">illum</span><span class="p">}</span><span class="s2">% illuminated Life path number: </span><span class="p">${</span><span class="nx">lp</span><span class="p">}</span><span class="s2"> Reply in exactly these sections: 1. THE CHART AT A GLANCE — one or two sentences combining all four sources 2. SUN SIGN CORE — the </span><span class="p">${</span><span class="nb">sun</span><span class="p">.</span><span class="nx">n</span><span class="p">}</span><span class="s2"> engine of the personality 3. CROSS-CURRENTS — where the </span><span class="p">${</span><span class="nx">cn</span><span class="p">.</span><span class="nx">animal</span><span class="p">}</span><span class="s2"> year and the </span><span class="p">${</span><span class="nx">moon</span><span class="p">.</span><span class="nx">name</span><span class="p">}</span><span class="s2"> moon agree with the sun sign, and where they pull against it 4. LIFE PATH </span><span class="p">${</span><span class="nx">lp</span><span class="p">}</span><span class="s2"> — what this number adds 5. THIS WEEK — a short, specific-feeling horoscope for the week ahead 6. LUCKY DETAILS — one lucky color, number, and small ritual Under 450 words. Playful but grounded. End with one line noting this is for entertainment.`</span><span class="p">;</span> <span class="k">try</span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">r</span> <span class="o">=</span> <span class="k">await</span> <span class="nf">fetch</span><span class="p">(</span><span class="dl">'</span><span class="s1">https://api.groq.com/openai/v1/chat/completions</span><span class="dl">'</span><span class="p">,</span> <span class="p">{</span> <span class="na">method</span><span class="p">:</span> <span class="dl">'</span><span class="s1">POST</span><span class="dl">'</span><span class="p">,</span> <span class="na">headers</span><span class="p">:</span> <span class="p">{</span> <span class="dl">'</span><span class="s1">Content-Type</span><span class="dl">'</span><span class="p">:</span> <span class="dl">'</span><span class="s1">application/json</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">Authorization</span><span class="dl">'</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Bearer </span><span class="dl">'</span> <span class="o">+</span> <span class="nx">key</span> <span class="p">},</span> <span class="na">body</span><span class="p">:</span> <span class="nx">JSON</span><span class="p">.</span><span class="nf">stringify</span><span class="p">({</span> <span class="na">model</span><span class="p">:</span> <span class="dl">'</span><span class="s1">llama-3.3-70b-versatile</span><span class="dl">'</span><span class="p">,</span> <span class="na">messages</span><span class="p">:</span> <span class="p">[{</span> <span class="na">role</span><span class="p">:</span> <span class="dl">'</span><span class="s1">user</span><span class="dl">'</span><span class="p">,</span> <span class="na">content</span><span class="p">:</span> <span class="nx">prompt</span> <span class="p">}],</span> <span class="na">max_tokens</span><span class="p">:</span> <span class="mi">900</span><span class="p">,</span> <span class="na">temperature</span><span class="p">:</span> <span class="mf">0.8</span> <span class="p">})</span> <span class="p">});</span> <span class="k">if </span><span class="p">(</span><span class="o">!</span><span class="nx">r</span><span class="p">.</span><span class="nx">ok</span><span class="p">)</span> <span class="k">throw</span> <span class="k">new</span> <span class="nc">Error</span><span class="p">(</span><span class="dl">'</span><span class="s1">API error </span><span class="dl">'</span> <span class="o">+</span> <span class="nx">r</span><span class="p">.</span><span class="nx">status</span><span class="p">);</span> <span class="kd">const</span> <span class="nx">j</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">r</span><span class="p">.</span><span class="nf">json</span><span class="p">();</span> <span class="nx">out</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="nx">j</span><span class="p">.</span><span class="nx">choices</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">message</span><span class="p">.</span><span class="nx">content</span><span class="p">;</span> <span class="p">}</span> <span class="k">catch </span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span> <span class="nx">out</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">Error: </span><span class="dl">'</span> <span class="o">+</span> <span class="nx">e</span><span class="p">.</span><span class="nx">message</span> <span class="o">+</span> <span class="dl">'</span><span class="se">\n</span><span class="s1">Check your API key and connection.</span><span class="dl">'</span><span class="p">;</span> <span class="p">}</span> <span class="nx">btn</span><span class="p">.</span><span class="nx">disabled</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">textContent</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">✍️ Write my reading</span><span class="dl">'</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> devchallenge hf26challenge Robert Gilbert Mon, 12 Oct 2026 03:35:38 +0000 https://dev.to/robertgilbert75/trailhead-an-open-weight-hiking-companion-that-gets-you-off-the-screen-19jk https://dev.to/robertgilbert75/trailhead-an-open-weight-hiking-companion-that-gets-you-off-the-screen-19jk <p><em>This is a submission for the Hacktoberfest Open-Source AI Challenge: Week 1 — Touch Grass.</em></p> <p><strong>Tags:</strong> #devchallenge #hf26challenge</p> <h2> What I built </h2> <p><strong>Trailhead</strong> — a single-file web app that turns a trail name, distance, season, and group into a hiking brief: gear checklist, safety brief, Leave No Trace reminders, and a go/no-go verdict. The screen time is under two minutes. Everything after that happens outside.</p> <p>The whole thing is one HTML file. No build step, no server, no framework. Open it on your phone in the trailhead parking lot and it works.</p> <h2> The demo </h2> <p>You fill in five fields — trail, distance, season, who's going, anything else — and hit "Plan my hike." Thirty seconds later you get a practical brief. Example: Bear Mountain Loop, 3–7 miles, fall, 2 adults + 1 kid → layered clothing call, headlamp reminder (shorter days), kid-specific snack and turnaround-time math, and the one risk that matters most for that trip.</p> <p>The prompt engineering is the product: the model is instructed to be specific, not generic — no "bring water" fluff without quantities, no safety boilerplate without the actual risks of <em>this</em> hike.</p> <h2> Why open-weight is the point </h2> <p>Trailhead calls <strong>Llama 3.3 70B</strong> — Meta's open-weight model — through Groq's free tier. That choice is load-bearing, not decorative:</p> <ul> <li> <strong>It costs nothing to run.</strong> A hiker checking trail conditions shouldn't need a subscription. Free-tier inference on an open model means the app is free forever, for everyone.</li> <li> <strong>No vendor lock-in.</strong> The model is one string in the code. Swap in Mixtral, Qwen, or DeepSeek by changing a single line. If Groq changes terms, point it at any OpenAI-compatible endpoint.</li> <li> <strong>Auditable advice.</strong> When a model tells someone whether a hike is safe, you want to know what model said it and be able to swap it. Open weights mean the safety advice isn't a black box owned by one company.</li> <li> <strong>It runs from anywhere.</strong> One static file. No backend to deploy, no API keys baked in (yours stays in your browser). A closed model behind a paywalled API couldn't do this at $0.</li> </ul> <p>Closed AI would make this a $9.99/month app with an account wall. Open weights make it a file you can text to a friend.</p> <h2> What I'd do next </h2> <p>Offline mode with a small local model (Llama 3.2 1B via WebGPU) for trails with no signal — the parking lot has bars, the summit doesn't. And a "trip report" loop: hikers confirm or correct the brief afterward, building a dataset of real-world accuracy.</p> <h2> Try it </h2> <p>Try it here: <a href="https://StarNomad.github.io/trailhead.html" rel="noopener noreferrer">https://StarNomad.github.io/trailhead.html</a> — save that file and open it in any browser.Trailhead is one self-contained HTML file, so here it is — the complete source, in the post. Copy it, save it as <code>trailhead.html</code>, and open it in any browser. No server, no install, no build step.</p> <ol> <li>Copy everything in the code block below.</li> <li>Paste it into a plain-text editor and save the file as <code>trailhead.html</code>.</li> <li>Open the file, paste a free Groq key from console.groq.com, plan a hike, then touch grass. 🌲 </li> </ol> <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"</span><span class="nt">&gt;</span> <span class="nt">&lt;title&gt;</span>Trailhead — Touch Grass Companion<span class="nt">&lt;/title&gt;</span> <span class="nt">&lt;style&gt;</span> <span class="nt">body</span> <span class="p">{</span> <span class="nl">font-family</span><span class="p">:</span> <span class="n">system-ui</span><span class="p">,</span> <span class="nb">sans-serif</span><span class="p">;</span> <span class="nl">max-width</span><span class="p">:</span> <span class="m">640px</span><span class="p">;</span> <span class="nl">margin</span><span class="p">:</span> <span class="m">2rem</span> <span class="nb">auto</span><span class="p">;</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">0</span> <span class="m">1rem</span><span class="p">;</span> <span class="nl">background</span><span class="p">:</span> <span class="nx">#f4f1ea</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="nx">#2d2a26</span><span class="p">;}</span> <span class="nt">h1</span> <span class="p">{</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">1.8rem</span><span class="p">;}</span> <span class="nc">.card</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="nx">#fff</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">1.2rem</span><span class="p">;</span> <span class="nl">margin</span><span class="p">:</span> <span class="m">1rem</span> <span class="m">0</span><span class="p">;</span> <span class="nl">box-shadow</span><span class="p">:</span> <span class="m">0</span> <span class="m">2px</span> <span class="m">8px</span> <span class="nf">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">.08</span><span class="p">);}</span> <span class="nt">label</span> <span class="p">{</span> <span class="nl">display</span><span class="p">:</span> <span class="nb">block</span><span class="p">;</span> <span class="nl">margin</span><span class="p">:</span><span class="m">.6rem</span> <span class="m">0.2rem</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="nt">input</span><span class="o">,</span> <span class="nt">select</span><span class="o">,</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">padding</span><span class="p">:</span><span class="m">.6rem</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="nx">#ccc</span><span class="p">;</span> <span class="nl">border-radius</span><span class="p">:</span> <span class="m">8px</span><span class="p">;</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">1rem</span><span class="p">;</span> <span class="nl">box-sizing</span><span class="p">:</span> <span class="nb">border-box</span><span class="p">;}</span> <span class="nt">button</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="nx">#2e7d32</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="nx">#fff</span><span class="p">;</span> <span class="nl">border</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="nl">border-radius</span><span class="p">:</span> <span class="m">8px</span><span class="p">;</span> <span class="nl">padding</span><span class="p">:</span><span class="m">.8rem</span> <span class="m">1.4rem</span><span class="p">;</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">1.05rem</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">margin-top</span><span class="p">:</span> <span class="m">1rem</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="nt">button</span><span class="nd">:disabled</span> <span class="p">{</span> <span class="nl">background</span><span class="p">:</span> <span class="nx">#9e9e9e</span><span class="p">;}</span> <span class="nf">#out</span> <span class="p">{</span> <span class="nl">white-space</span><span class="p">:</span> <span class="nb">pre-wrap</span><span class="p">;}</span> <span class="nc">.hint</span> <span class="p">{</span> <span class="nl">font-size</span><span class="p">:</span><span class="m">.85rem</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="nx">#666</span><span class="p">;}</span> <span class="nt">details</span> <span class="p">{</span> <span class="nl">margin-top</span><span class="p">:</span> <span class="m">1rem</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;h1&gt;</span>🌲 Trailhead<span class="nt">&lt;/h1&gt;</span> <span class="nt">&lt;p&gt;</span>Your open-weight trail companion. Describe your hike — get a gear checklist, safety brief, and Leave No Trace reminders. Powered by an open-weight model, free forever.<span class="nt">&lt;/p&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span> <span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"key"</span><span class="nt">&gt;</span>Groq API key (free at console.groq.com — stays in your browser)<span class="nt">&lt;/label&gt;</span> <span class="nt">&lt;input</span> <span class="na">id=</span><span class="s">"key"</span> <span class="na">type=</span><span class="s">"password"</span> <span class="na">placeholder=</span><span class="s">"gsk_..."</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">&gt;</span> <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"hint"</span><span class="nt">&gt;</span>Your key never leaves this page except to call Groq's API directly.<span class="nt">&lt;/p&gt;</span> <span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"trail"</span><span class="nt">&gt;</span>Trail / destination<span class="nt">&lt;/label&gt;</span> <span class="nt">&lt;input</span> <span class="na">id=</span><span class="s">"trail"</span> <span class="na">placeholder=</span><span class="s">"e.g. Bear Mountain Loop, NY"</span><span class="nt">&gt;</span> <span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"dist"</span><span class="nt">&gt;</span>Distance<span class="nt">&lt;/label&gt;</span> <span class="nt">&lt;select</span> <span class="na">id=</span><span class="s">"dist"</span><span class="nt">&gt;</span> <span class="nt">&lt;option&gt;</span>Under 3 miles<span class="nt">&lt;/option&gt;</span> <span class="nt">&lt;option&gt;</span>3–7 miles<span class="nt">&lt;/option&gt;</span> <span class="nt">&lt;option&gt;</span>7–12 miles<span class="nt">&lt;/option&gt;</span> <span class="nt">&lt;option&gt;</span>Over 12 miles<span class="nt">&lt;/option&gt;</span> <span class="nt">&lt;/select&gt;</span> <span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"season"</span><span class="nt">&gt;</span>Season / conditions<span class="nt">&lt;/label&gt;</span> <span class="nt">&lt;select</span> <span class="na">id=</span><span class="s">"season"</span><span class="nt">&gt;</span> <span class="nt">&lt;option&gt;</span>Fall — cool, foliage<span class="nt">&lt;/option&gt;</span> <span class="nt">&lt;option&gt;</span>Winter — cold, possible ice/snow<span class="nt">&lt;/option&gt;</span> <span class="nt">&lt;option&gt;</span>Spring — mud, variable<span class="nt">&lt;/option&gt;</span> <span class="nt">&lt;option&gt;</span>Summer — heat, bugs<span class="nt">&lt;/option&gt;</span> <span class="nt">&lt;/select&gt;</span> <span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"group"</span><span class="nt">&gt;</span>Who's going<span class="nt">&lt;/label&gt;</span> <span class="nt">&lt;input</span> <span class="na">id=</span><span class="s">"group"</span> <span class="na">placeholder=</span><span class="s">"e.g. solo, 2 adults + 1 kid, dog"</span><span class="nt">&gt;</span> <span class="nt">&lt;label</span> <span class="na">for=</span><span class="s">"notes"</span><span class="nt">&gt;</span>Anything else (injuries, gear you own, etc.)<span class="nt">&lt;/label&gt;</span> <span class="nt">&lt;textarea</span> <span class="na">id=</span><span class="s">"notes"</span> <span class="na">rows=</span><span class="s">"2"</span> <span class="na">placeholder=</span><span class="s">"optional"</span><span class="nt">&gt;&lt;/textarea&gt;</span> <span class="nt">&lt;button</span> <span class="na">id=</span><span class="s">"go"</span> <span class="na">onclick=</span><span class="s">"plan()"</span><span class="nt">&gt;</span>🌿 Plan my hike<span class="nt">&lt;/button&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span> <span class="na">id=</span><span class="s">"outcard"</span> <span class="na">style=</span><span class="s">"display:none"</span><span class="nt">&gt;</span> <span class="nt">&lt;h2&gt;</span>Your trail brief<span class="nt">&lt;/h2&gt;</span> <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"out"</span><span class="nt">&gt;&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;details&gt;</span> <span class="nt">&lt;summary&gt;</span>Why open-weight?<span class="nt">&lt;/summary&gt;</span> <span class="nt">&lt;p&gt;</span>Trailhead calls <span class="nt">&lt;b&gt;</span>llama-3.3-70b-versatile<span class="nt">&lt;/b&gt;</span> — Meta's open-weight model — through Groq's free tier. No subscription, no per-hike fee, no vendor lock-in. Swap in any open model (Mixtral, Qwen, DeepSeek) by changing one string. The whole app is one HTML file: no build step, no server, works from a phone on the trailhead parking lot.<span class="nt">&lt;/p&gt;</span> <span class="nt">&lt;/details&gt;</span> <span class="nt">&lt;script&gt;</span> <span class="k">async</span> <span class="kd">function</span> <span class="nf">plan</span><span class="p">()</span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">key</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">key</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">key</span><span class="p">)</span> <span class="p">{</span> <span class="nf">alert</span><span class="p">(</span><span class="dl">'</span><span class="s1">Paste your free Groq API key first (console.groq.com).</span><span class="dl">'</span><span class="p">);</span> <span class="k">return</span><span class="p">;}</span> <span class="kd">const</span> <span class="nx">trail</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">trail</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="o">||</span> <span class="dl">'</span><span class="s1">a local trail</span><span class="dl">'</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">dist</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">dist</span><span class="dl">'</span><span class="p">).</span><span class="nx">value</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">season</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">season</span><span class="dl">'</span><span class="p">).</span><span class="nx">value</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">group</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">group</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="o">||</span> <span class="dl">'</span><span class="s1">unspecified group</span><span class="dl">'</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">notes</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">notes</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="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">go</span><span class="dl">'</span><span class="p">);</span> <span class="nx">btn</span><span class="p">.</span><span class="nx">disabled</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">textContent</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">🥾 Lacing up...</span><span class="dl">'</span><span class="p">;</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">outcard</span><span class="dl">'</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="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">out</span><span class="dl">'</span><span class="p">).</span><span class="nx">textContent</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">Asking the model...</span><span class="dl">'</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">prompt</span> <span class="o">=</span> <span class="s2">`You are Trailhead, a hiking safety companion. A hiker asks for a trail brief. Trail: </span><span class="p">${</span><span class="nx">trail</span><span class="p">}</span><span class="s2"> Distance: </span><span class="p">${</span><span class="nx">dist</span><span class="p">}</span><span class="s2"> Conditions: </span><span class="p">${</span><span class="nx">season</span><span class="p">}</span><span class="s2"> Group: </span><span class="p">${</span><span class="nx">group</span><span class="p">}</span><span class="s2"> Extra notes: </span><span class="p">${</span><span class="nx">notes</span> <span class="o">||</span> <span class="dl">'</span><span class="s1">none</span><span class="dl">'</span><span class="p">}</span><span class="s2"> Reply in exactly these sections, concise bullet points: 1. GEAR CHECKLIST — what to bring for these conditions (be specific, no generic fluff) 2. SAFETY BRIEF — top risks for this hike and how to mitigate them 3. LEAVE NO TRACE — 2-3 reminders relevant to this trip 4. GO / NO-GO — one-line verdict with the single biggest factor Keep it under 300 words. Practical, no-nonsense tone.`</span><span class="p">;</span> <span class="k">try</span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">r</span> <span class="o">=</span> <span class="k">await</span> <span class="nf">fetch</span><span class="p">(</span><span class="dl">'</span><span class="s1">https://api.groq.com/openai/v1/chat/completions</span><span class="dl">'</span><span class="p">,</span> <span class="p">{</span> <span class="na">method</span><span class="p">:</span> <span class="dl">'</span><span class="s1">POST</span><span class="dl">'</span><span class="p">,</span> <span class="na">headers</span><span class="p">:</span> <span class="p">{</span> <span class="dl">'</span><span class="s1">Content-Type</span><span class="dl">'</span><span class="p">:</span> <span class="dl">'</span><span class="s1">application/json</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">Authorization</span><span class="dl">'</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Bearer </span><span class="dl">'</span> <span class="o">+</span> <span class="nx">key</span><span class="p">},</span> <span class="na">body</span><span class="p">:</span> <span class="nx">JSON</span><span class="p">.</span><span class="nf">stringify</span><span class="p">({</span> <span class="na">model</span><span class="p">:</span> <span class="dl">'</span><span class="s1">llama-3.3-70b-versatile</span><span class="dl">'</span><span class="p">,</span> <span class="na">messages</span><span class="p">:</span> <span class="p">[{</span> <span class="na">role</span><span class="p">:</span> <span class="dl">'</span><span class="s1">user</span><span class="dl">'</span><span class="p">,</span> <span class="na">content</span><span class="p">:</span> <span class="nx">prompt</span><span class="p">}],</span> <span class="na">max_tokens</span><span class="p">:</span> <span class="mi">700</span><span class="p">,</span> <span class="na">temperature</span><span class="p">:</span> <span class="mf">0.5</span> <span class="p">})</span> <span class="p">});</span> <span class="k">if </span><span class="p">(</span><span class="o">!</span><span class="nx">r</span><span class="p">.</span><span class="nx">ok</span><span class="p">)</span> <span class="k">throw</span> <span class="k">new</span> <span class="nc">Error</span><span class="p">(</span><span class="dl">'</span><span class="s1">API error </span><span class="dl">'</span> <span class="o">+</span> <span class="nx">r</span><span class="p">.</span><span class="nx">status</span><span class="p">);</span> <span class="kd">const</span> <span class="nx">j</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">r</span><span class="p">.</span><span class="nf">json</span><span class="p">();</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">out</span><span class="dl">'</span><span class="p">).</span><span class="nx">textContent</span> <span class="o">=</span> <span class="nx">j</span><span class="p">.</span><span class="nx">choices</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">message</span><span class="p">.</span><span class="nx">content</span><span class="p">;</span> <span class="p">}</span> <span class="k">catch </span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</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">out</span><span class="dl">'</span><span class="p">).</span><span class="nx">textContent</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">Error: </span><span class="dl">'</span> <span class="o">+</span> <span class="nx">e</span><span class="p">.</span><span class="nx">message</span> <span class="o">+</span> <span class="dl">'</span><span class="se">\n</span><span class="s1">Check your API key and connection.</span><span class="dl">'</span><span class="p">;</span> <span class="p">}</span> <span class="nx">btn</span><span class="p">.</span><span class="nx">disabled</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">textContent</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">🌿 Plan my hike</span><span class="dl">'</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> devchallenge hf26challenge ai Robert Gilbert Mon, 12 Oct 2026 00:27:32 +0000 https://dev.to/robertgilbert75/i-built-a-benchmark-that-grades-ai-code-reviewers-on-planted-defects-55na https://dev.to/robertgilbert75/i-built-a-benchmark-that-grades-ai-code-reviewers-on-planted-defects-55na <p>This is a submission for the <a href="https://dev.to/challenges/kaggle-2026-09-23">Kaggle Benchmarking Challenge</a>.*</p> <h2> Why I built it </h2> <p>I spent the last month running fourteen independent audit rounds on a clean-room<br> codebase. Outside reviewers — human and AI — kept catching defects that survived<br> my own builder, my own test suite, and my own verifier. The experience left me<br> with a question I couldn't shake: <strong>can an AI model do what those auditors did?</strong></p> <p>Not fix the bug. <em>Find</em> it. Name the lines. Say what's wrong and why.</p> <p>Existing benchmarks don't isolate this. SWE-bench measures repair — a model can<br> stumble into a passing patch without ever identifying the defect. Devign does<br> binary "vulnerable / not vulnerable" classification — no localization, no<br> explanation, no severity. A model that says "vulnerable" for the wrong reason<br> scores the same as one that found the actual flaw. I haven't found a benchmark<br> that combines all three of: planted defects with controlled difficulty tiers,<br> mandatory line localization and explanation, and false-positive measurement on<br> paired clean variants.</p> <p>So I built <strong>Red-Pen Bench</strong>. <a href="https://www.kaggle.com/benchmarks/robertgilbertusa/red-pen-bench" rel="noopener noreferrer">https://www.kaggle.com/benchmarks/robertgilbertusa/red-pen-bench</a></p> <h2> What it tests </h2> <p>44 planted defects drawn from the mutation-testing operator taxonomy. The<br> approach follows the selective-mutation tradition: Offutt, Lee, Rothermel,<br> Untch, and Zapf ("An Experimental Determination of Sufficient Mutant<br> Operators," ACM TOSEM 5(2):99–118, 1996) showed that five operators (ABS, UOI,<br> LCR, AOR, ROR) capture 99.5% of the <em>mutation score of the full operator set</em>.<br> That 99.5% figure belongs to the complete five-operator set — this corpus uses<br> four of the five (AOR, ROR, UOI, LCR; no ABS) plus statement-deletion defects<br> and higher-order mutants (two interacting faults) for the hard tier, which that<br> study doesn't cover. The operator family is the method; the exact coverage<br> number is theirs, not mine.</p> <p>Every defect ships in <strong>four variants</strong>:</p> <ul> <li> <strong>Original</strong> — the defect in its natural setting</li> <li> <strong>Disguised</strong> — the <em>same mechanism</em> transplanted to a different domain, different names (reduces the chance that a model can rely on surface familiarity or template recognition)</li> <li> <strong>Fixed</strong> — the repaired code (false-positive check)</li> <li> <strong>Clean</strong> — correct code written from scratch, independent of the defective version (control)</li> </ul> <p>Three difficulty tiers:</p> <ul> <li> <strong>Easy</strong> (18 items): single-operator defects — off-by-one loops, wrong arithmetic operators, inverted guards</li> <li> <strong>Medium</strong> (18 items): wrong logical connectors, missing edge-case checks, ceiling-vs-floor errors, the mutable-default-argument trap</li> <li> <strong>Hard</strong> (8 items): higher-order mutants — an auth check that's <em>both</em> inverted <em>and</em> miswired, a withdrawal that's <em>both</em> overdraft-permissive <em>and</em> audit-evasive</li> </ul> <p>Every item passed a <strong>killability gate</strong> before entering the corpus: an automated<br> test that fails on the defect variants and passes on the fixed/clean ones.<br> And the corpus survived its own red pen — my first build had 44 defects that<br> an independent verifier proved were really 10 templates with renamed variables.<br> I threw it out, regenerated 44 genuinely distinct defects, and the verifier<br> signed off on the second build: 44/44 structurally distinct, 44/44 killability,<br> 176-snippet integrity. The benchmark grades reviewers; it had to survive review<br> itself.</p> <p>One defect, three of its four variants (easy tier, off-by-one):<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight python"><code><span class="c1"># Original — the defect </span><span class="k">def</span> <span class="nf">sum_prices</span><span class="p">(</span><span class="n">items</span><span class="p">):</span> <span class="n">total</span> <span class="o">=</span> <span class="mi">0</span> <span class="k">for</span> <span class="n">i</span> <span class="ow">in</span> <span class="nf">range</span><span class="p">(</span><span class="nf">len</span><span class="p">(</span><span class="n">items</span><span class="p">)</span> <span class="o">-</span> <span class="mi">1</span><span class="p">):</span> <span class="c1"># skips the last element </span> <span class="n">total</span> <span class="o">+=</span> <span class="n">items</span><span class="p">[</span><span class="n">i</span><span class="p">]</span> <span class="k">return</span> <span class="n">total</span> <span class="c1"># Disguised — same mechanism, different domain and names </span><span class="k">def</span> <span class="nf">tally_receipts</span><span class="p">(</span><span class="n">entries</span><span class="p">):</span> <span class="n">aggregate</span> <span class="o">=</span> <span class="mi">0</span> <span class="n">n</span> <span class="o">=</span> <span class="nf">len</span><span class="p">(</span><span class="n">entries</span><span class="p">)</span> <span class="k">for</span> <span class="n">j</span> <span class="ow">in</span> <span class="nf">range</span><span class="p">(</span><span class="n">n</span> <span class="o">-</span> <span class="mi">1</span><span class="p">):</span> <span class="n">aggregate</span> <span class="o">=</span> <span class="n">aggregate</span> <span class="o">+</span> <span class="n">entries</span><span class="p">[</span><span class="n">j</span><span class="p">]</span> <span class="k">return</span> <span class="n">aggregate</span> <span class="c1"># Fixed — the repair (false-positive check) </span><span class="k">def</span> <span class="nf">sum_prices</span><span class="p">(</span><span class="n">items</span><span class="p">):</span> <span class="n">total</span> <span class="o">=</span> <span class="mi">0</span> <span class="k">for</span> <span class="n">i</span> <span class="ow">in</span> <span class="nf">range</span><span class="p">(</span><span class="nf">len</span><span class="p">(</span><span class="n">items</span><span class="p">)):</span> <span class="n">total</span> <span class="o">+=</span> <span class="n">items</span><span class="p">[</span><span class="n">i</span><span class="p">]</span> <span class="k">return</span> <span class="n">total</span> </code></pre> </div> <p>A model must output <code>DEFECT: yes</code>, <code>LINES: 3</code>, and an explanation naming the<br> off-by-one that skips the last element.</p> <h2> Scoring (no LLM judge) </h2> <p>Models must output three things: <strong>DEFECT: yes/no</strong>, <strong>LINES: </strong>,<br> <strong>EXPLANATION: </strong>. Scored automatically, with no model<br> grading a model:</p> <ul> <li> <strong>Detection rate</strong> — fraction of the 2n defective variants (original + disguised) where the verdict matched ground truth</li> <li> <strong>Line-level F1</strong> — mean over all 4n variants of line-level F1 against the planted fault lines (on fixed/clean variants: 1 if the model named no lines, 0 otherwise)</li> <li> <strong>Keyword recall</strong> — mean over the 2n defective variants of planted-keyword hits in the explanation</li> <li> <strong>False-positive rate</strong> — fraction of the 2n non-defective control variants (fixed + independently clean) flagged DEFECT: yes</li> </ul> <p><strong>Tier score = (detection + line-F1 + keyword-recall) / 3 − false-positive rate.</strong></p> <p>The denominators scale exactly to the variant counts. Easy and medium tiers<br> (n=18) average the four terms over 36, 72, 36, and 36 measurements<br> respectively; the hard tier (n=8) averages over 16, 32, 16, and 16. The<br> "Average" column is the <strong>unweighted</strong> mean of<br> the three tier scores, recomputed from the displayed tier values — each tier<br> weighted equally despite the different item counts. (Kaggle displays<br> two-decimal roundings of the same underlying values — 0.80, 0.64, 0.53, 0.12 —<br> consistent with half-even rounding, which turns 0.125 into 0.12.)</p> <p>For calibration, two trivial baselines scored by the same code: <strong>always-no</strong><br> (DEFECT: no on everything — 16.7% on every tier; the arithmetic is detection<br> 0, defect-line F1 0, clean-line F1 1, keyword recall 0, false-positive rate 0,<br> so (0 + 0.5 + 0)/3 − 0 = 16.7%) and<br> <strong>always-yes</strong> (DEFECT: yes with no lines named and a keyword-free explanation<br> — −50.0% on every tier; a flag-everything model that names lines would score<br> differently). Note what the baselines expose about the metric itself: the<br> composite's zero point is arbitrary. A model that attempts detection and errs<br> can score below one that abstains — the meaningful threshold is the always-no<br> baseline (16.7%), not zero. <strong>Anything below 16.7% is losing to doing nothing at<br> all.</strong></p> <h2> The models </h2> <p>Four models, four labs, all run live on Kaggle Benchmarks on October 10, 2026,<br> against the v1 benchmark (private at the time of the runs; public since<br> October 11, 2026):</p> <ul> <li> <strong>Gemini 3.7 Flash</strong> (Google)</li> <li> <strong>Claude Haiku 5.5</strong> (Anthropic)</li> <li> <strong>GPT-5.4 mini</strong> (OpenAI)</li> <li> <strong>DeepSeek-R1</strong> (DeepSeek)</li> </ul> <p>The model names above are the exact identifiers Kaggle displays — confirmed<br> against the live leaderboard. All four ran the same three tasks (v1, locked)<br> against the same dataset version. The benchmark page records "last updated<br> October 10, 2026" and "evaluated on October 10, 2026"; its citation reads:<br> Robert Gilbert USA, Red-Pen Bench,<br> <a href="https://www.kaggle.com/benchmarks/robertgilbertusa/red-pen-bench/versions/1" rel="noopener noreferrer">https://www.kaggle.com/benchmarks/robertgilbertusa/red-pen-bench/versions/1</a>,<br> 2026.</p> <h2> What I found </h2> <p><strong>Executive summary:</strong> Gemini 3.7 Flash led overall, Claude Haiku 5.5 was the<br> most consistent across tiers, GPT-5.4 mini showed the largest observed<br> hard-versus-easy gap (76.0% on hard against ~41% on easy and medium), and<br> DeepSeek-R1 finished below the always-no baseline on average — all from a<br> single run per model.</p> <p><strong>The takeaway:</strong> a reviewer that flags everything scores <em>below</em> one that says<br> nothing. If you're grading AI code review, measure false positives first — or<br> your leaderboard is an enthusiasm contest.</p> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Model</th> <th>Easy (18)</th> <th>Medium (18)</th> <th>Hard (8)</th> <th>Average</th> </tr> </thead> <tbody> <tr> <td>Gemini 3.7 Flash</td> <td>70.4%</td> <td>88.7%</td> <td>80.6%</td> <td><strong>0.799</strong></td> </tr> <tr> <td>Claude Haiku 5.5</td> <td>71.3%</td> <td>60.7%</td> <td>61.4%</td> <td><strong>0.645</strong></td> </tr> <tr> <td>GPT-5.4 mini</td> <td>41.6%</td> <td>41.3%</td> <td>76.0%</td> <td><strong>0.530</strong></td> </tr> <tr> <td>DeepSeek-R1</td> <td>34.5%</td> <td>9.7%</td> <td>-6.7%</td> <td><strong>0.125</strong></td> </tr> <tr> <td>Always-no (baseline)</td> <td>16.7%</td> <td>16.7%</td> <td>16.7%</td> <td>0.167</td> </tr> <tr> <td>Always-yes (baseline)</td> <td>-50.0%</td> <td>-50.0%</td> <td>-50.0%</td> <td>-0.500</td> </tr> </tbody> </table></div> <p>A cautious reading of the table: on the hard tier, the detection and false-positive<br> <em>rates</em> move in 1/16 ≈ 6.3-point steps — but each counts only one-third in the<br> composite, so a single detection flip moves the tier <em>score</em> about 2 points,<br> and the line-F1 and keyword-recall terms are effectively continuous. Treat<br> small hard-tier gaps as noise until replicated. And with one run per model,<br> nothing below is a definitive ranking — it's one observation per cell.</p> <p><strong>Finding 1: two of four models scored higher on hard than on easy.</strong><br> Gemini scored 80.6% on hard vs 70.4% on easy. GPT-5.4 mini scored 76.0% on hard<br> vs 41.6% on easy. I designed the tiers assuming difficulty increases<br> monotonically. It doesn't — not for these models. I call these difficulty<br> tiers by construction; the results show they are not difficulty-calibrated<br> across models. Two confounds I can't<br> separate from the leaderboard data: the false-positive term is computed on<br> tier-specific clean variants, and tier correlates with domain — measured in the<br> corpus, hard items cluster in business-logic domains (banking, security,<br> retail, analytics, ETL, scheduling) while easy items are mostly small<br> pedagogical domains (school, math, geometry). So "harder" and<br> "different-looking" are entangled here. My <em>hypothesis</em>, not a measured<br> mechanism: the easy defects look like correct code at a glance, while the hard<br> defects — two things wrong in one function — look conspicuous enough to trigger<br> closer reading. That's an interpretation to investigate, not a proven cause.</p> <p><strong>Finding 2: GPT-5.4 mini has a split personality.</strong> 41% on easy and medium,<br> 76% on hard — a 34.7-point spread, the second-widest in the table. It reasons<br> through tangled multi-fault logic far better than it handles the easy tier's<br> single-operator defects. Whether that's a capability gap or a carefulness gap,<br> this benchmark can't say — it doesn't measure internal attention, and the<br> leaderboard doesn't give a per-operator breakdown. That pattern could be especially relevant to production review,<br> where subtle defects in ordinary code are easy to overlook.</p> <p><strong>Finding 3: Claude Haiku 5.5 has the narrowest spread.</strong> 71.3% / 60.7% /<br> 61.4% — a 10.6-point spread, the smallest in the table, with no tier collapsing<br> and none spiking. That's a descriptive fact about this run, not evidence of<br> production reliability: the smallest observed spread across three tiers in a<br> single run is a preliminary signal, not an operational recommendation. And<br> note the tension in the table — Gemini's <em>worst</em> tier (70.4%) is about Haiku's<br> <em>best</em> (71.3%), and Gemini leads the average by 16 points. "Steadiest" and<br> "best" are different claims; this run supports only the first.</p> <p><strong>Finding 4: DeepSeek-R1 finished below the always-no baseline.</strong> 0.125<br> average, 9.7% on medium, −6.7% on hard — all below the 16.7% that doing nothing<br> achieves. A negative tier score means exactly one thing under this formula: the<br> false-positive rate exceeded the mean of detection, line-F1, and keyword-recall.<br> Two confounds before drawing conclusions:</p> <ul> <li> <strong>Output format.</strong> Without per-model parse-failure counts and raw outputs, I can't determine how much output-format noncompliance affected the result. The parser takes the <em>first</em> "DEFECT: yes/no" match in the response, so a reasoning trace that mentions "DEFECT: yes" before its final verdict could override the intended answer. Depending on the variant and the model's final answer, this could affect both detection and false-positive measurements — I can't establish the size or direction of that effect from the leaderboard alone.</li> <li> <strong>Model age.</strong> R1 is a January 2025 model measured against 2026 releases, so model age is conflated with model type.</li> </ul> <p>The observed result is real; its causes are not yet established.</p> <p><strong>A personal postscript.</strong> None of the above is the whole story. The table says<br> DeepSeek-R1 is the worst reviewer I measured; my own experience says DeepSeek<br> is the sharpest auditor I've worked with — with one clarification that matters:<br> the audits below were done in the DeepSeek app, file by file, with DeepThink<br> and Search enabled (model version not recorded) — a different setup from the<br> benchmark's single-snippet Kaggle runs. On the MINI-CRAY build — a clean-room<br> vector-machine emulator that went through fourteen independent audit rounds —<br> DeepSeek did four consecutive rounds (9 through 12) and found defects that the<br> eight earlier rounds had missed: a chain scoreboard that was never<br> evicted, silently inflating chain-miss statistics; a 2-D array shape check that<br> passed validation and then died inside NumPy with an opaque broadcast error; a<br> hazard check that could forget a reader still in flight; and a cluster of numpy<br> type-aliasing holes across six functions that got unified into a single rule.<br> Those are real bugs in shipped releases, each with a regression test now. Two<br> honest caveats: those were whole-codebase audits, file by file — a different<br> task from the single-snippet review the benchmark scores — and this is a<br> hits-only recollection. The record isn't one-sided either: a CRAY-1<br> floating-point format module it drafted failed four of six behavioral checks<br> against the hardware manual. This<br> is anecdote, not measurement — one builder's experience, not a controlled<br> comparison. But it's why I don't read the 0.125 as the last word on DeepSeek.</p> <p><strong>What I'd measure next:</strong> repeat runs (this is one run per model — no variance<br> estimate yet), per-component and per-operator breakdowns, parse-failure counts<br> per model, cross-language disguised variants (Python→Rust), repo-level audits<br> with full codebase context, spec-dependent<br> defects (the ~35% of real bugs that need requirements knowledge), and a human<br> baseline — even 10 items reviewed by a competent engineer would calibrate what<br> "good" means.</p> <h2> Limitations </h2> <p>One run per model, so every number above is a point estimate with no measured<br> variance, and no definitive ranking is supportable. The hard tier is 8 items —<br> component rates move in ~6-point steps (about 2 points on the composite per<br> detection flip) and confidence intervals are wide. Keyword recall is a lexical<br> proxy for explanation quality, not a judgment of it. Line-F1 rewards naming no<br> lines on clean code, which is correct behavior but a different skill from<br> localizing a real fault. The "Average" column weights all three tiers equally.<br> Kaggle-side prompt templates, sampling parameters, and reasoning-mode settings<br> were set by the harness — I neither controlled nor recorded them. No human<br> baseline exists yet. The benchmark was private when these runs completed and<br> has been public since October 11, 2026.</p> <h2> Why this matters </h2> <p>Code review is where AI assistance is being deployed fastest and evaluated<br> least rigorously. If we can't measure whether a model <em>finds</em> defects — with<br> location and reason, not just a vibe — we're flying blind on the highest-stakes<br> use case.</p> <p>Red-Pen Bench is designed to survive its own publication: the four-variant<br> structure means new defects can be planted quarterly from the operator taxonomy,<br> retired items published with solutions (turning contamination into training<br> data), and live items staying blind. Static benchmarks decay; this one has a<br> refresh protocol.</p> <h2> Try it </h2> <p><a href="https://www.kaggle.com/benchmarks/robertgilbertusa/red-pen-bench" rel="noopener noreferrer">https://www.kaggle.com/benchmarks/robertgilbertusa/red-pen-bench</a> — run your own model, or plant a defect and submit it.</p> <p><em>Built for the Kaggle Benchmarking Challenge. 44 defects, 176 code variants,<br> zero LLM judges, one red pen.</em></p> kagglechallenge devchallenge ai webdev