bill/whetstone_RSA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
39e060349e5550b2a4de8d3e56252e3b559d504b
whetstone_RSA/presentations/whetstoneRSA_fast_deck.html

815 lines
24 KiB
HTML
Raw Normal View History

Add fast WhetstoneRSA presentation deck
2026-04-30 15:48:01 +00:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WhetstoneRSA - Tiny Models For Bounded NLP Decisions</title>
<style>
:root {
--bg: #0f1117;
--panel: #161b27;
--panel-2: #1e2433;
--text: #e2e8f0;
--muted: #94a3b8;
--dim: #64748b;
--line: #2d3748;
--blue: #60a5fa;
--cyan: #22d3ee;
--green: #4ade80;
--amber: #fbbf24;
--red: #fb7185;
}
* { box-sizing: border-box; }
html, body {
margin: 0;
min-height: 100%;
background: var(--bg);
color: var(--text);
font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
body {
overflow: hidden;
}
.deck {
width: 100vw;
height: 100vh;
position: relative;
}
.slide {
position: absolute;
inset: 0;
display: none;
padding: 5.5vh 7vw;
overflow: hidden;
}
.slide.active {
display: grid;
grid-template-rows: auto 1fr auto;
gap: 28px;
}
.kicker {
color: var(--dim);
font-size: 0.78rem;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 700;
}
h1, h2 {
margin: 0;
letter-spacing: 0;
font-weight: 680;
}
h1 {
font-size: clamp(3rem, 7vw, 6.6rem);
line-height: 0.98;
max-width: 1050px;
}
h2 {
font-size: clamp(2.4rem, 5.5vw, 5.2rem);
line-height: 1.02;
max-width: 980px;
}
.subtitle {
color: var(--muted);
font-size: clamp(1.2rem, 2.2vw, 2rem);
line-height: 1.35;
max-width: 900px;
}
.body {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 0;
}
.center { align-items: center; text-align: center; }
.center h1, .center h2, .center .subtitle { margin-left: auto; margin-right: auto; }
.bigline {
font-size: clamp(2rem, 4.2vw, 4.4rem);
line-height: 1.08;
font-weight: 650;
}
.stack {
display: flex;
flex-direction: column;
gap: 18px;
max-width: 960px;
}
.bullets {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 18px;
max-width: 900px;
}
.bullets li {
position: relative;
padding-left: 34px;
color: var(--text);
font-size: clamp(1.55rem, 2.8vw, 3rem);
line-height: 1.13;
font-weight: 560;
}
.bullets li::before {
content: "";
position: absolute;
left: 0;
top: 0.46em;
width: 12px;
height: 12px;
border-radius: 999px;
background: var(--cyan);
}
.small-bullets li {
font-size: clamp(1.25rem, 2.1vw, 2.15rem);
}
code {
color: var(--cyan);
background: rgba(34, 211, 238, 0.08);
border: 1px solid rgba(34, 211, 238, 0.16);
border-radius: 6px;
padding: 0.08em 0.28em;
font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
font-size: 0.9em;
}
pre {
margin: 0;
background: #111827;
border: 1px solid var(--line);
border-radius: 8px;
padding: 28px;
color: var(--text);
font-size: clamp(1.25rem, 2.1vw, 2.2rem);
line-height: 1.35;
overflow: hidden;
}
pre code {
background: none;
border: 0;
padding: 0;
color: var(--text);
font-size: 1em;
}
.flow {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
align-items: stretch;
width: min(1100px, 100%);
}
.flow.three { grid-template-columns: repeat(3, 1fr); }
.flow.two { grid-template-columns: repeat(2, 1fr); }
.box {
border: 1px solid var(--line);
background: var(--panel);
border-radius: 8px;
padding: 24px;
min-height: 140px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 12px;
}
.box .label {
color: var(--dim);
font-size: 0.72rem;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 800;
}
.box .main {
font-size: clamp(1.35rem, 2.3vw, 2.35rem);
line-height: 1.1;
font-weight: 650;
}
.box.blue { border-color: rgba(96, 165, 250, 0.65); }
.box.cyan { border-color: rgba(34, 211, 238, 0.65); }
.box.green { border-color: rgba(74, 222, 128, 0.65); }
.box.amber { border-color: rgba(251, 191, 36, 0.65); }
.box.red { border-color: rgba(251, 113, 133, 0.65); }
.comparison {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
width: min(1000px, 100%);
}
.metric {
display: inline-flex;
align-items: baseline;
gap: 12px;
margin-right: 22px;
}
.metric strong {
font-size: clamp(3rem, 6vw, 6rem);
color: var(--cyan);
line-height: 1;
}
.metric span {
color: var(--muted);
font-size: clamp(1rem, 1.6vw, 1.5rem);
}
.bars {
width: min(920px, 100%);
display: grid;
gap: 26px;
}
.bar-label {
display: flex;
justify-content: space-between;
color: var(--muted);
font-size: clamp(1.1rem, 1.8vw, 1.6rem);
margin-bottom: 10px;
}
.bar-track {
height: 42px;
background: #111827;
border: 1px solid var(--line);
border-radius: 6px;
overflow: hidden;
}
.bar-fill {
height: 100%;
background: linear-gradient(90deg, var(--blue), var(--cyan));
}
.footer {
display: flex;
justify-content: space-between;
align-items: center;
color: var(--dim);
font-size: 0.88rem;
}
.progress {
position: fixed;
left: 0;
bottom: 0;
height: 4px;
background: var(--cyan);
width: 0;
transition: width 120ms ease-out;
z-index: 10;
}
.notes {
position: fixed;
right: 18px;
bottom: 22px;
width: min(520px, calc(100vw - 36px));
max-height: 34vh;
overflow: auto;
background: rgba(15, 17, 23, 0.96);
border: 1px solid var(--line);
border-radius: 8px;
padding: 16px 18px;
color: var(--muted);
font-size: 0.95rem;
line-height: 1.45;
display: none;
z-index: 20;
}
.notes.visible { display: block; }
.notes strong { color: var(--text); }
.hint {
position: fixed;
top: 16px;
right: 18px;
color: var(--dim);
font-size: 0.8rem;
z-index: 11;
}
.accent { color: var(--cyan); }
.green-text { color: var(--green); }
.amber-text { color: var(--amber); }
.red-text { color: var(--red); }
@media (max-width: 800px) {
.slide { padding: 5vh 6vw; }
.flow, .flow.three, .flow.two, .comparison { grid-template-columns: 1fr; }
.box { min-height: 96px; }
.hint { display: none; }
}
@media print {
body { overflow: visible; }
.deck { height: auto; }
.slide, .slide.active {
position: relative;
display: grid;
page-break-after: always;
height: 100vh;
}
.hint, .progress, .notes { display: none !important; }
}
</style>
</head>
<body>
<div class="deck" id="deck">
<section class="slide active" data-notes="This talk is about a middle layer between regex and LLMs.">
<div class="kicker">whetstone_RSA</div>
<div class="body center">
<h1>Tiny Models For Bounded NLP Decisions</h1>
<p class="subtitle">Turning messy user requests into deterministic tool calls</p>
</div>
<div class="footer"><span>1</span><span>RSA: contract layer, not chatbot</span></div>
</section>
<section class="slide" data-notes="This shows up all over software.">
<div class="kicker">A common shape</div>
<div class="body center">
<h2>Users type messy things.</h2>
<p class="subtitle">Software needs clean actions.</p>
</div>
<div class="footer"><span>2</span><span>messy input -> clean action</span></div>
</section>
<section class="slide" data-notes="That middle combination is the important one.">
<div class="kicker">The gap</div>
<div class="body">
<ul class="bullets">
<li>fuzzy input</li>
<li>bounded output</li>
<li>deterministic execution</li>
</ul>
</div>
<div class="footer"><span>3</span><span>the shape RSA targets</span></div>
</section>
<section class="slide" data-notes="Most teams bounce between brittle and oversized.">
<div class="kicker">Today&apos;s options</div>
<div class="body center">
<div class="flow three">
<div class="box"><div class="label">cheap</div><div class="main">regex</div></div>
<div class="box"><div class="label">inspectable</div><div class="main">rules</div></div>
<div class="box"><div class="label">flexible</div><div class="main">LLM prompt</div></div>
</div>
</div>
<div class="footer"><span>4</span><span>brittle vs oversized</span></div>
</section>
<section class="slide" data-notes="This is why people keep reaching for rules.">
<div class="kicker">Regex is cheap</div>
<div class="body">
<ul class="bullets">
<li>fast</li>
<li>local</li>
<li>inspectable</li>
</ul>
</div>
<div class="footer"><span>5</span><span>rules have real advantages</span></div>
</section>
<section class="slide" data-notes="The moment users say the same thing many ways, rules get ugly.">
<div class="kicker">Regex is also annoying</div>
<div class="body">
<ul class="bullets">
<li>brittle</li>
<li>tedious</li>
<li>bad at paraphrases</li>
</ul>
</div>
<div class="footer"><span>6</span><span>variation breaks brittle rules</span></div>
</section>
<section class="slide" data-notes="This is why people like them.">
<div class="kicker">LLMs feel great</div>
<div class="body">
<ul class="bullets">
<li>flexible</li>
<li>natural-language friendly</li>
<li>good with paraphrases</li>
</ul>
</div>
<div class="footer"><span>7</span><span>large models are useful</span></div>
</section>
<section class="slide" data-notes="A lot of current usage is more model than the task actually needs.">
<div class="kicker">LLMs are often overkill</div>
<div class="body">
<ul class="bullets">
<li>expensive</li>
<li>heavy</li>
<li>hard to control</li>
</ul>
</div>
<div class="footer"><span>8</span><span>bounded tasks do not need open-ended machinery</span></div>
</section>
<section class="slide" data-notes="That middle layer is what RSA is for.">
<div class="kicker">The missing middle</div>
<div class="body center">
<div class="bigline">regex <span class="accent">-> RSA -></span> LLM</div>
</div>
<div class="footer"><span>9</span><span>a middle layer for bounded semantics</span></div>
</section>
<section class="slide" data-notes="Not a chatbot. Not a search engine. A decision contract layer.">
<div class="kicker">What RSA is</div>
<div class="body center">
<h2>A contract layer for bounded semantic decisions.</h2>
</div>
<div class="footer"><span>10</span><span>contract, not conversation</span></div>
</section>
<section class="slide" data-notes="The schema is what keeps it narrow.">
<div class="kicker">What RSA takes</div>
<div class="body">
<ul class="bullets">
<li>messy input</li>
<li>bounded schema</li>
<li>optional context</li>
</ul>
</div>
<div class="footer"><span>11</span><span>schema narrows the task</span></div>
</section>
<section class="slide" data-notes="The output is structured, not freeform prose.">
<div class="kicker">What RSA returns</div>
<div class="body">
<ul class="bullets">
<li>action</li>
<li>slots</li>
<li>confidence</li>
<li>abstain or escalate</li>
</ul>
</div>
<div class="footer"><span>12</span><span>structured result</span></div>
</section>
<section class="slide" data-notes="The model interprets. The software executes.">
<div class="kicker">The core pattern</div>
<div class="body center">
<div class="flow">
<div class="box"><div class="label">1</div><div class="main">Natural language</div></div>
<div class="box blue"><div class="label">2</div><div class="main">Semantic interpretation</div></div>
<div class="box cyan"><div class="label">3</div><div class="main">Bounded contract</div></div>
<div class="box green"><div class="label">4</div><div class="main">Deterministic software</div></div>
</div>
</div>
<div class="footer"><span>13</span><span>model at the boundary only</span></div>
</section>
<section class="slide" data-notes="This is the kind of input users naturally want to type.">
<div class="kicker">Example query</div>
<div class="body center">
<h2><code>show me the failed builds from yesterday</code></h2>
</div>
<div class="footer"><span>14</span><span>messy but bounded</span></div>
</section>
<section class="slide" data-notes="This is not generation. It is semantic interpretation into a contract.">
<div class="kicker">Example contract</div>
<div class="body">
<pre><code>action: search_builds
status: failed
date: yesterday
confidence: 0.93</code></pre>
</div>
<div class="footer"><span>15</span><span>typed shape, not prose</span></div>
</section>
<section class="slide" data-notes="Once the contract exists, it is just normal software again.">
<div class="kicker">Example execution</div>
<div class="body">
<ul class="bullets">
<li>run the query</li>
<li>render the results</li>
<li>log the action</li>
</ul>
</div>
<div class="footer"><span>16</span><span>ordinary software after the contract</span></div>
</section>
<section class="slide" data-notes="The model does not need to generate arbitrary text.">
<div class="kicker">Why this can stay tiny</div>
<div class="body center">
<h2>The output is bounded.</h2>
</div>
<div class="footer"><span>17</span><span>small output surface, small policy</span></div>
</section>
<section class="slide" data-notes="This is not a toy example. These are real pipeline decisions.">
<div class="kicker">First real target</div>
<div class="body center">
<h2><code>whetstone_DSL</code></h2>
<p class="subtitle">AST-first codegen pipeline</p>
</div>
<div class="footer"><span>18</span><span>the case study</span></div>
</section>
<section class="slide" data-notes="The gate decides what must happen before execution.">
<div class="kicker">The initial gate</div>
<div class="body center">
<h2><code>prereq_op_selector</code></h2>
<p class="subtitle">Decides prerequisite operations before a taskitem executes.</p>
</div>
<div class="footer"><span>19</span><span>one bounded pipeline decision</span></div>
</section>
<section class="slide" data-notes="The model sees the compact decision context, not the whole world.">
<div class="kicker">Gate input</div>
<div class="body">
<ul class="bullets">
<li>title</li>
<li>requirements</li>
<li>acceptance criteria</li>
<li>constraints</li>
</ul>
</div>
<div class="footer"><span>20</span><span>compact context</span></div>
</section>
<section class="slide" data-notes="This is the bounded contract surface.">
<div class="kicker">Gate output</div>
<div class="body">
<ul class="bullets small-bullets">
<li><code>needs_resolve_dependencies</code></li>
<li><code>needs_architect_review</code></li>
<li><code>needs_validate_intake</code></li>
</ul>
</div>
<div class="footer"><span>21</span><span>three booleans</span></div>
</section>
<section class="slide" data-notes="The point is extracting supervision from actual pipeline behavior.">
<div class="kicker">Source corpus</div>
<div class="body center">
<div class="metric"><strong>1000</strong><span>pipeline runs</span></div>
<p class="subtitle">JSON artifacts with real decision logs</p>
</div>
<div class="footer"><span>22</span><span>real pipeline artifacts</span></div>
</section>
<section class="slide" data-notes="Each row isolates one decision.">
<div class="kicker">Extraction</div>
<div class="body center">
<h2><code>extract_gate_rows.py</code></h2>
<p class="subtitle">run artifacts -> per-gate rows</p>
</div>
<div class="footer"><span>23</span><span>isolate supervision by gate</span></div>
</section>
<section class="slide" data-notes="Bad rows get rejected instead of quietly poisoning the gate.">
<div class="kicker">Clean rows</div>
<div class="body center">
<div>
<div class="metric"><strong>1321</strong><span>total rows</span></div>
<div class="metric"><strong class="red-text">24</strong><span>schema drift rejected</span></div>
<div class="metric"><strong class="green-text">1297</strong><span>clean rows</span></div>
</div>
</div>
<div class="footer"><span>24</span><span>reject bad evidence</span></div>
</section>
<section class="slide" data-notes="A label with zero variance is not learnable. It is a constant.">
<div class="kicker">The surprise</div>
<div class="body center">
<h2><code>needs_validate_intake</code></h2>
<p class="subtitle">was always true: <span class="accent">1297 / 1297</span></p>
</div>
<div class="footer"><span>25</span><span>constant, not gate</span></div>
</section>
<section class="slide" data-notes="The data changed the gate shape. That is the process working.">
<div class="kicker">Gate decomposition</div>
<div class="body center">
<div class="flow two">
<div class="box cyan"><div class="label">Gate 1</div><div class="main">resolve dependencies</div></div>
<div class="box blue"><div class="label">Gate 2</div><div class="main">architect review</div></div>
</div>
</div>
<div class="footer"><span>26</span><span>one bundled gate became two gates</span></div>
</section>
<section class="slide" data-notes="The size is small because the decision surface is small.">
<div class="kicker">Tiny specialists</div>
<div class="body center">
<div>
<div class="metric"><strong>213K</strong><span>parameters</span></div>
<div class="metric"><strong>800KB</strong><span>on disk</span></div>
</div>
<p class="subtitle">one specialist per gate</p>
</div>
<div class="footer"><span>27</span><span>small model for small decision surface</span></div>
</section>
<section class="slide" data-notes="These are not victory-lap numbers. They are diagnostic numbers.">
<div class="kicker">First results</div>
<div class="body center">
<div class="bars">
<div>
<div class="bar-label"><span>resolve dependencies</span><span>69.4%</span></div>
<div class="bar-track"><div class="bar-fill" style="width: 69.4%"></div></div>
</div>
<div>
<div class="bar-label"><span>architect review</span><span>75.0%</span></div>
<div class="bar-track"><div class="bar-fill" style="width: 75%"></div></div>
</div>
</div>
</div>
<div class="footer"><span>28</span><span>baseline accuracy at 4000 steps</span></div>
</section>
<section class="slide" data-notes="More rows from the same shape do not create richer signal.">
<div class="kicker">Honest diagnosis</div>
<div class="body center">
<h2>1297 rows</h2>
<p class="subtitle">but only about <span class="accent">17 unique text patterns</span></p>
</div>
<div class="footer"><span>29</span><span>row count is not diversity</span></div>
</section>
<section class="slide" data-notes="The fix is improving the contract upstream, not pretending the weak model is good.">
<div class="kicker">The fix</div>
<div class="body">
<ul class="bullets small-bullets">
<li>architecture surface</li>
<li>cross-component deps</li>
<li>security sensitivity</li>
<li>uncertainty score</li>
</ul>
</div>
<div class="footer"><span>30</span><span>better input, better gate</span></div>
</section>
<section class="slide" data-notes="The goal is the smallest model that clears the quality bar.">
<div class="kicker">Model sizing</div>
<div class="body center">
<h2>Match model size to gate entropy.</h2>
</div>
<div class="footer"><span>31</span><span>smallest passing tier</span></div>
</section>
<section class="slide" data-notes="These are the factors that should predict model tier.">
<div class="kicker">What makes a gate hard?</div>
<div class="body">
<ul class="bullets small-bullets">
<li>more labels</li>
<li>class imbalance</li>
<li>wider context</li>
<li>fuzzy boundaries</li>
<li>slot interactions</li>
</ul>
</div>
<div class="footer"><span>32</span><span>entropy factors</span></div>
</section>
<section class="slide" data-notes="The repo is not just notes. There is a runtime scaffold.">
<div class="kicker">Runtime scaffold</div>
<div class="body">
<ul class="bullets small-bullets">
<li>gate definitions</li>
<li>evidence</li>
<li>diagnosis</li>
<li>probes</li>
</ul>
</div>
<div class="footer"><span>33</span><span>C++ deployment layer</span></div>
</section>
<section class="slide" data-notes="Keep the claim narrow. That makes it harder to knock down.">
<div class="kicker">Careful claim</div>
<div class="body center">
<h2>RSA does not replace all LLM reasoning.</h2>
<p class="subtitle">RSA replaces <span class="accent">bounded semantic decisions</span>.</p>
</div>
<div class="footer"><span>34</span><span>narrow and defensible</span></div>
</section>
<section class="slide" data-notes="Do not make the model own the whole task when it only needs to own the ambiguous boundary.">
<div class="kicker">Closing</div>
<div class="body center">
<div class="stack">
<div class="bigline">Fuzzy input in.</div>
<div class="bigline"><span class="accent">Typed contract out.</span></div>
<div class="bigline">Deterministic software after that.</div>
</div>
</div>
<div class="footer"><span>35</span><span>the whole point</span></div>
</section>
</div>
<div class="hint">Click / arrows: navigate · N: notes · F: fullscreen</div>
<div class="notes" id="notes"></div>
<div class="progress" id="progress"></div>
<script>
const slides = Array.from(document.querySelectorAll(".slide"));
const notes = document.getElementById("notes");
const progress = document.getElementById("progress");
let index = 0;
let notesVisible = false;
function indexFromHash() {
const raw = window.location.hash.replace("#", "");
const requested = Number(raw);
if (Number.isInteger(requested) && requested >= 1 && requested <= slides.length) {
index = requested - 1;
}
}
function render(updateHash = true) {
slides.forEach((slide, i) => slide.classList.toggle("active", i === index));
progress.style.width = `${((index + 1) / slides.length) * 100}%`;
notes.innerHTML = `<strong>Speaker notes:</strong><br>${slides[index].dataset.notes || ""}`;
notes.classList.toggle("visible", notesVisible);
document.title = `(${index + 1}/${slides.length}) WhetstoneRSA`;
if (updateHash) {
history.replaceState(null, "", `#${index + 1}`);
}
}
function next() {
index = Math.min(slides.length - 1, index + 1);
render();
}
function prev() {
index = Math.max(0, index - 1);
render();
}
document.addEventListener("click", (event) => {
if (event.target.closest(".notes")) return;
next();
});
document.addEventListener("keydown", (event) => {
if (event.key === "ArrowRight" || event.key === "PageDown" || event.key === " ") {
event.preventDefault();
next();
} else if (event.key === "ArrowLeft" || event.key === "PageUp" || event.key === "Backspace") {
event.preventDefault();
prev();
} else if (event.key.toLowerCase() === "n") {
notesVisible = !notesVisible;
render();
} else if (event.key.toLowerCase() === "f") {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
} else {
document.exitFullscreen();
}
} else if (/^[0-9]$/.test(event.key)) {
const value = Number(event.key);
if (value === 0) {
index = slides.length - 1;
} else {
index = Math.min(slides.length - 1, value - 1);
}
render();
}
});
window.addEventListener("hashchange", () => {
indexFromHash();
render(false);
});
indexFromHash();
render(false);
</script>
</body>
</html>
Reference in New Issue Copy Permalink