Add presentation materials for technical talk on transformer training
Five standalone HTML visuals covering the RSA pipeline, training pipeline, gate decomposition, dataset anatomy, and model tier sizing. Slide deck brief describing a 35-slide two-act deck for a data science audience. Handoff note documenting what was created this session. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
135
presentations/visual_model_tiers.html
Normal file
135
presentations/visual_model_tiers.html
Normal file
@@ -0,0 +1,135 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Model Tiers</title>
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { background: #0f1117; font-family: 'Segoe UI', system-ui, sans-serif; display: flex; align-items: center; justify-content: center; min-height: 100vh; }
|
||||
.slide { width: 960px; padding: 56px 72px; }
|
||||
h2 { color: #e2e8f0; font-size: 1.5rem; font-weight: 400; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 8px; text-align: center; }
|
||||
.subtitle { text-align: center; color: #6b7280; font-size: 0.88rem; margin-bottom: 48px; }
|
||||
|
||||
.tiers { display: flex; align-items: flex-end; gap: 20px; margin-bottom: 40px; }
|
||||
.tier { flex: 1; border-radius: 10px 10px 0 0; display: flex; flex-direction: column; justify-content: flex-end; position: relative; }
|
||||
|
||||
.tier-inner { padding: 20px 16px 24px; border-radius: 10px; border: 1.5px solid; }
|
||||
.tier.det .tier-inner { background: #0d1f16; border-color: #22c55e; }
|
||||
.tier.tiny .tier-inner { background: #0c1a30; border-color: #3b82f6; }
|
||||
.tier.med .tier-inner { background: #12122a; border-color: #8b5cf6; }
|
||||
.tier.large .tier-inner { background: #2a1100; border-color: #f59e0b; }
|
||||
.tier.llm .tier-inner { background: #2a0f0f; border-color: #ef4444; }
|
||||
|
||||
.tier-badge { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; margin-bottom: 8px; }
|
||||
.det .tier-badge { color: #4ade80; }
|
||||
.tiny .tier-badge { color: #60a5fa; }
|
||||
.med .tier-badge { color: #a78bfa; }
|
||||
.large .tier-badge { color: #fbbf24; }
|
||||
.llm .tier-badge { color: #f87171; }
|
||||
|
||||
.tier-name { font-size: 0.95rem; font-weight: 600; color: #e2e8f0; margin-bottom: 10px; line-height: 1.3; }
|
||||
.tier-params { font-size: 0.8rem; margin-bottom: 8px; font-weight: 600; }
|
||||
.det .tier-params { color: #4ade80; }
|
||||
.tiny .tier-params { color: #60a5fa; }
|
||||
.med .tier-params { color: #a78bfa; }
|
||||
.large .tier-params { color: #fbbf24; }
|
||||
.llm .tier-params { color: #f87171; }
|
||||
|
||||
.tier-detail { font-size: 0.76rem; color: #6b7280; line-height: 1.5; }
|
||||
|
||||
.marker { position: absolute; top: -32px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 0.7rem; color: #4ade80; background: #052e16; border: 1px solid #166534; padding: 3px 10px; border-radius: 20px; }
|
||||
.marker.current { color: #60a5fa; background: #0c1a30; border-color: #1e3a5f; }
|
||||
|
||||
.axis { display: flex; align-items: center; margin-bottom: 8px; }
|
||||
.axis-line { flex: 1; height: 2px; background: linear-gradient(90deg, #22c55e, #3b82f6, #8b5cf6, #f59e0b, #ef4444); border-radius: 1px; }
|
||||
.axis-label-left { font-size: 0.7rem; color: #4ade80; margin-right: 12px; white-space: nowrap; }
|
||||
.axis-label-right { font-size: 0.7rem; color: #ef4444; margin-left: 12px; white-space: nowrap; }
|
||||
|
||||
.axis-labels { display: flex; justify-content: space-between; margin-bottom: 32px; }
|
||||
.axis-labels span { font-size: 0.7rem; color: #4a5568; }
|
||||
|
||||
.hypothesis { background: #1a1f2e; border: 1px solid #2d3748; border-radius: 10px; padding: 24px 28px; }
|
||||
.hyp-title { font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: #6b7280; margin-bottom: 12px; }
|
||||
.hyp-rule { font-size: 0.88rem; color: #94a3b8; line-height: 1.8; font-family: 'Courier New', monospace; }
|
||||
.hyp-rule .dim { color: #4a5568; }
|
||||
.hyp-rule .hi { color: #22d3ee; font-weight: 600; }
|
||||
.hyp-rule .note { color: #6b7280; font-family: 'Segoe UI', sans-serif; font-size: 0.8rem; margin-top: 10px; display: block; font-style: italic; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="slide">
|
||||
<h2>Entropy → Model Tier</h2>
|
||||
<div class="subtitle">The smallest model that clears the quality target for a given gate's entropy budget</div>
|
||||
|
||||
<div class="tiers">
|
||||
<div class="tier det" style="position:relative;">
|
||||
<div class="marker">← already valid</div>
|
||||
<div class="tier-inner">
|
||||
<div class="tier-badge">Tier 0</div>
|
||||
<div class="tier-name">Deterministic Rules</div>
|
||||
<div class="tier-params">0 params</div>
|
||||
<div class="tier-detail">Perfect when input–output mapping is explicit and stable. No training cost. Fully auditable.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tier tiny" style="position:relative;">
|
||||
<div class="marker current">← trained baseline</div>
|
||||
<div class="tier-inner">
|
||||
<div class="tier-badge">Tier 1 · current</div>
|
||||
<div class="tier-name">Tiny Specialist (Fabricate)</div>
|
||||
<div class="tier-params">~213K params · ~800KB</div>
|
||||
<div class="tier-detail">Binary/multiclass classifiers. Local, fast, inspectable. Target for bounded gates with sufficient entropy.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tier med">
|
||||
<div class="tier-inner">
|
||||
<div class="tier-badge">Tier 2 · planned</div>
|
||||
<div class="tier-name">Medium Specialist</div>
|
||||
<div class="tier-params">~10× tier 1 · ~2–3M params</div>
|
||||
<div class="tier-detail">For gates where tiny tier misses due to higher label boundary fuzziness or longer context dependence.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tier large">
|
||||
<div class="tier-inner">
|
||||
<div class="tier-badge">Tier 3 · planned</div>
|
||||
<div class="tier-name">Large Specialist</div>
|
||||
<div class="tier-params">~16× tier 1 · ~3–4M params</div>
|
||||
<div class="tier-detail">For gates with high lexical variation, world-knowledge dependence, or complex slot interdependence.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tier llm">
|
||||
<div class="tier-inner">
|
||||
<div class="tier-badge">Tier 4 · escalation</div>
|
||||
<div class="tier-name">SLM / LLM</div>
|
||||
<div class="tier-params">billions of params</div>
|
||||
<div class="tier-detail">Only when the gate is genuinely open-ended. Not a default. Escalation when specialists abstain.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="axis">
|
||||
<span class="axis-label-left">low entropy</span>
|
||||
<div class="axis-line"></div>
|
||||
<span class="axis-label-right">high entropy</span>
|
||||
</div>
|
||||
<div class="axis-labels">
|
||||
<span>simple lookup</span>
|
||||
<span>binary classification</span>
|
||||
<span>slot filling</span>
|
||||
<span>complex routing</span>
|
||||
<span>open reasoning</span>
|
||||
</div>
|
||||
|
||||
<div class="hypothesis">
|
||||
<div class="hyp-title">Current sizing hypothesis</div>
|
||||
<div class="hyp-rule">
|
||||
<span class="dim">if</span> entropy <span class="hi"><= A</span> <span class="dim">→</span> deterministic<br>
|
||||
<span class="dim">if</span> entropy <span class="hi"><= B</span> <span class="dim">→</span> tiny specialist (~213K params)<br>
|
||||
<span class="dim">if</span> entropy <span class="hi"><= C</span> <span class="dim">→</span> medium specialist (~2–3M params)<br>
|
||||
<span class="dim">if</span> entropy <span class="hi">> C</span> <span class="dim">→</span> large specialist or escalate to SLM/LLM
|
||||
<span class="note">Before moving up a tier: check schema, label set, missing context, and factorization options first.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user