mirror of
https://github.com/harvard-edge/cs249r_book.git
synced 2026-05-08 02:28:25 -05:00
b6a2c94053
# Conflicts: # interviews/paper/references.bib # interviews/staffml/src/components/Nav.tsx # periodic-table/paper/paper.tex # periodic-table/paper/references.bib
767 lines
52 KiB
HTML
767 lines
52 KiB
HTML
<!DOCTYPE html>
|
|
<!--
|
|
AUTO-GENERATED — DO NOT EDIT THIS FILE DIRECTLY.
|
|
Source of truth: periodic-table/table.yml
|
|
Build: cd periodic-table && node scripts/build-html.mjs
|
|
Manual edits will be overwritten on the next build.
|
|
-->
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>The Periodic Table of ML Systems</title>
|
|
<style>
|
|
:root {
|
|
--bg: #0f1117; --surface: #1a1d27; --surface2: #222636;
|
|
--text: #e8e8ed; --text-dim: #8b8fa3; --text-dimmer: #5d6177;
|
|
--border: #2d3044; --accent: #4fc3f7;
|
|
--represent: #42a5f5; --compute: #ef6c00; --communicate: #26a69a;
|
|
--control: #fdd835; --measure: #78909c; --frontier: #ffb74d;
|
|
}
|
|
* { margin:0; padding:0; box-sizing:border-box; }
|
|
body { font-family:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif; background:var(--bg); color:var(--text); line-height:1.6; }
|
|
.container { max-width:1100px; margin:0 auto; padding:0 1.5rem; }
|
|
|
|
/* Hero */
|
|
.hero { text-align:center; padding:2.5rem 1rem 1rem; }
|
|
.hero-badge { display:inline-block; background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:.25rem .8rem; font-size:.65rem; color:var(--accent); text-transform:uppercase; letter-spacing:.1em; font-weight:600; margin-bottom:.8rem; }
|
|
.hero h1 { font-size:2rem; font-weight:700; letter-spacing:-.03em; margin-bottom:.3rem; }
|
|
.hero h1 em { font-style:normal; color:var(--accent); }
|
|
.hero .lead { color:var(--text-dim); font-size:.92rem; max-width:660px; margin:0 auto; }
|
|
|
|
/* Concept */
|
|
.concept { padding:1.2rem 0 1.5rem; }
|
|
.concept h2 { font-size:1.05rem; font-weight:700; margin-bottom:.5rem; }
|
|
.concept p { color:var(--text-dim); font-size:.82rem; margin-bottom:.7rem; }
|
|
.concept strong { color:var(--text); }
|
|
.axes-box { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; margin:1.2rem 0; }
|
|
.axis-card { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:1rem 1.2rem; }
|
|
.axis-card h3 { font-size:.82rem; font-weight:700; margin-bottom:.4rem; display:flex; align-items:center; gap:.4rem; }
|
|
.axis-card h3 .arr { color:var(--accent); }
|
|
.axis-card p { font-size:.75rem; color:var(--text-dim); margin-bottom:.4rem; }
|
|
.axis-rows { font-size:.7rem; color:var(--text-dim); line-height:1.7; }
|
|
.axis-rows span { color:var(--text); font-weight:600; }
|
|
.proof-box { background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:8px; padding:.9rem 1.1rem; margin:1.2rem 0; }
|
|
.proof-box strong { color:var(--text); }
|
|
.proof-box p { font-size:.78rem; color:var(--text-dim); margin-bottom:.3rem; }
|
|
.proof-box p:last-child { margin-bottom:0; }
|
|
|
|
/* Controls */
|
|
.controls { display:flex; justify-content:center; padding:.3rem 1rem .6rem; }
|
|
.search-box { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:.45rem .9rem; color:var(--text); font-size:.82rem; width:280px; outline:none; }
|
|
.search-box:focus { border-color:var(--accent); }
|
|
.search-box::placeholder { color:var(--text-dimmer); }
|
|
.block-legend { display:flex; justify-content:center; gap:.8rem; padding:0 1rem .8rem; flex-wrap:wrap; }
|
|
.bl-item { display:flex; align-items:center; gap:.3rem; font-size:.7rem; color:var(--text-dim); cursor:pointer; padding:.2rem .5rem; border-radius:4px; user-select:none; }
|
|
.bl-item:hover,.bl-item.active { background:var(--surface); }
|
|
.bl-dot { width:10px; height:10px; border-radius:2px; }
|
|
|
|
/* Table */
|
|
.table-wrap { display:flex; justify-content:center; overflow-x:auto; padding:0 .5rem; }
|
|
.table-outer { display:flex; gap:0; }
|
|
.y-labels { display:flex; flex-direction:column; gap:3px; margin-right:6px; padding-top:26px; }
|
|
.y-lbl { height:58px; display:flex; align-items:center; justify-content:flex-end; padding-right:5px; font-size:.52rem; color:var(--text-dimmer); font-weight:600; text-transform:uppercase; letter-spacing:.04em; text-align:right; white-space:nowrap; }
|
|
.y-lbl-spacer { height:16px; }
|
|
.block-headers { display:flex; gap:3px; margin-bottom:2px; }
|
|
.bh { text-align:center; font-size:.5rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:3px 0; border-radius:3px 3px 0 0; }
|
|
.periodic-grid { display:grid; grid-template-columns:repeat(15,58px); grid-template-rows:repeat(8,58px); gap:3px; }
|
|
|
|
/* Element */
|
|
.el { background:var(--surface); border:1px solid var(--border); border-radius:5px; padding:2px; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; transition:all .15s; overflow:hidden; }
|
|
.el::before { content:''; position:absolute; top:0; left:0; width:100%; height:2px; background:var(--el-c); opacity:.7; }
|
|
.el:hover { transform:scale(1.18); z-index:10; border-color:var(--el-c); box-shadow:0 0 18px color-mix(in srgb,var(--el-c) 30%,transparent); }
|
|
.el.dimmed { opacity:.1; pointer-events:none; }
|
|
.el .num { font-size:.48rem; color:var(--text-dimmer); position:absolute; top:2px; left:4px; }
|
|
.el .sym { font-size:1.05rem; font-weight:700; color:var(--el-c); line-height:1.1; }
|
|
.el .nm { font-size:.42rem; color:var(--text-dim); text-align:center; line-height:1.15; }
|
|
.spacer-row { grid-column:1/-1; }
|
|
.series-label { display:flex; align-items:center; justify-content:center; font-size:.52rem; color:var(--frontier); font-weight:600; letter-spacing:.05em; text-transform:uppercase; grid-column:span 2; border:1px dashed color-mix(in srgb,var(--frontier) 40%,transparent); border-radius:5px; }
|
|
|
|
/* Detail Panel */
|
|
.overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:100; justify-content:center; align-items:center; padding:1rem; }
|
|
.overlay.open { display:flex; }
|
|
.panel { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:1.8rem; max-width:500px; width:100%; position:relative; animation:pop .2s ease; }
|
|
@keyframes pop { from{opacity:0;transform:translateY(14px) scale(.96)} to{opacity:1;transform:translateY(0) scale(1)} }
|
|
.close-btn { position:absolute; top:.7rem; right:1rem; background:none; border:none; color:var(--text-dim); font-size:1.4rem; cursor:pointer; }
|
|
.close-btn:hover { color:var(--text); }
|
|
.d-header { display:flex; align-items:flex-end; gap:.9rem; margin-bottom:1rem; padding-bottom:1rem; border-bottom:1px solid var(--border); }
|
|
.d-symbox { width:70px; height:70px; background:var(--bg); border:2px solid var(--el-c,var(--border)); border-radius:9px; display:flex; flex-direction:column; align-items:center; justify-content:center; flex-shrink:0; }
|
|
.d-symbox .sym { font-size:1.7rem; font-weight:700; }
|
|
.d-symbox .num { font-size:.6rem; color:var(--text-dim); }
|
|
.d-name { font-size:1.15rem; font-weight:700; }
|
|
.d-block-tag { font-size:.65rem; text-transform:uppercase; letter-spacing:.08em; font-weight:600; }
|
|
.d-meta { display:grid; grid-template-columns:1fr 1fr 1fr; gap:.5rem; margin-bottom:.9rem; }
|
|
.mi { background:var(--bg); border-radius:6px; padding:.45rem .6rem; }
|
|
.mi-label { font-size:.5rem; text-transform:uppercase; letter-spacing:.07em; color:var(--text-dimmer); }
|
|
.mi-val { font-size:.78rem; font-weight:600; }
|
|
.d-desc { font-size:.8rem; line-height:1.6; color:var(--text-dim); margin-bottom:.9rem; }
|
|
.d-why { background:var(--bg); border-radius:7px; padding:.6rem .8rem; font-size:.73rem; color:var(--text-dim); margin-bottom:.9rem; line-height:1.5; }
|
|
.d-why strong { color:var(--text); }
|
|
.d-bonds h4 { font-size:.6rem; text-transform:uppercase; letter-spacing:.07em; color:var(--text-dimmer); margin-bottom:.3rem; }
|
|
.bond-tags { display:flex; flex-wrap:wrap; gap:.3rem; }
|
|
.bond-tag { background:var(--bg); border:1px solid var(--border); border-radius:4px; padding:.12rem .4rem; font-size:.67rem; cursor:pointer; }
|
|
.bond-tag:hover { border-color:var(--accent); color:var(--accent); }
|
|
|
|
/* Compounds */
|
|
.compounds { padding:1.2rem 0 1.5rem; }
|
|
.compounds h2 { font-size:1.05rem; font-weight:700; margin-bottom:.8rem; }
|
|
.compound-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:.8rem; }
|
|
.c-card { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:1rem; cursor:pointer; transition:border-color .2s, box-shadow .2s; }
|
|
.c-card.c-highlighted { border-color:var(--accent); box-shadow:0 0 12px color-mix(in srgb, var(--accent) 25%, transparent); }
|
|
.c-card.c-dimmed { opacity:.15; }
|
|
.el.el-xref { border-color:var(--el-c); box-shadow:0 0 14px color-mix(in srgb, var(--el-c) 35%, transparent); animation:xpulse .6s ease; }
|
|
@keyframes xpulse { 0%{transform:scale(1)} 50%{transform:scale(1.12)} 100%{transform:scale(1)} }
|
|
.c-legend { display:flex; gap:1.2rem; margin-bottom:1.2rem; flex-wrap:wrap; justify-content:center; }
|
|
.cl-item { font-size:.65rem; color:var(--text-dim); display:flex; align-items:center; gap:.35rem; }
|
|
.cl-item span { color:var(--accent); font-weight:700; font-family:monospace; font-size:.85rem; }
|
|
.c-name { font-size:.85rem; font-weight:700; margin-bottom:.4rem; color:var(--accent); }
|
|
.c-formula { font-size:.7rem; font-family:monospace; background:var(--bg); padding:.4rem; border-radius:5px; color:var(--text-dim); }
|
|
.c-formula span { font-weight:600; position:relative; cursor:help; border-bottom:1px dotted color-mix(in srgb, var(--sym-color, var(--text-dim)) 50%, transparent); color:var(--sym-color, var(--text)); transition:opacity .15s; }
|
|
.c-formula span:hover { opacity:.8; }
|
|
.c-formula span .tip { display:none; position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); background:var(--surface2); border:1px solid var(--border); border-radius:5px; padding:.25rem .5rem; font-size:.65rem; font-family:'Inter',-apple-system,sans-serif; white-space:nowrap; color:var(--text); z-index:50; pointer-events:none; box-shadow:0 4px 12px rgba(0,0,0,.4); }
|
|
.c-formula span:hover .tip { display:block; }
|
|
|
|
.footer { text-align:center; padding:2rem 1rem; color:var(--text-dimmer); font-size:.62rem; border-top:1px solid var(--border); }
|
|
.footer a { color:var(--accent); text-decoration:none; }
|
|
@media(max-width:768px) { .hero h1{font-size:1.4rem} .axes-box,.fq-grid{grid-template-columns:1fr} .fq.full{grid-column:1} }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="hero">
|
|
<div class="hero-badge">v0.1 — 63 Elements · 49 Compounds</div>
|
|
<h1>The <em>Periodic Table</em> of Machine Learning Systems</h1>
|
|
<p class="lead">Two fundamental axes — abstraction layer and information-processing role — organize ML concepts the way electron shells and valence organize chemistry.</p>
|
|
</div>
|
|
|
|
<div class="container concept">
|
|
<h2>The Two Axes</h2>
|
|
<div class="axes-box">
|
|
<div class="axis-card">
|
|
<h3><span class="arr">↓</span> Rows: Abstraction Layer</h3>
|
|
<p>Like electron shells, each layer <strong>builds on and contains</strong> the ones above. You can't have optimization without a model, or deployment without hardware.</p>
|
|
<div class="axis-rows">
|
|
<span>1. Math</span> — primitives<br><span>2. Algorithms</span> — building blocks<br><span>3. Architecture</span> — structural patterns<br><span>4. Optimization</span> — efficiency techniques<br><span>5. Runtime</span> — systems infrastructure<br><span>6. Hardware</span> — physical compute<br><span>7. Production</span> — deployment & ops
|
|
</div>
|
|
</div>
|
|
<div class="axis-card">
|
|
<h3><span class="arr">→</span> Columns: Information-Processing Role</h3>
|
|
<p>From computer architecture and systems theory — five roles that exist in <strong>any</strong> information-processing system.</p>
|
|
<div class="axis-rows">
|
|
<span style="color:var(--represent)">Represent</span> — encodes, stores, structures<br><span style="color:var(--compute)">Compute</span> — transforms information<br><span style="color:var(--communicate)">Communicate</span> — moves between components<br><span style="color:var(--control)">Control</span> — decides what happens<br><span style="color:var(--measure)">Measure</span> — observes without transforming
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="proof-box">
|
|
<p><strong>The same-column test:</strong> Concepts in the same column genuinely behave alike.</p>
|
|
<p><strong style="color:var(--represent)">Represent:</strong> Tensor, Probability, Parameter, Embedding, Topology, Hidden State, Optimizer State, Caching, Checkpointing, SRAM, DRAM, Blob Storage — all hold and structure information across all 7 layers.</p>
|
|
<p><strong style="color:var(--compute)">Compute:</strong> Operator, Activation, Dense Dot, Convolution, Pooling, Attention, Routing, Quantization, Fusion, Tiling, Compilation — all transform inputs to outputs.</p>
|
|
<p><strong style="color:var(--communicate)">Communicate:</strong> Chain Rule, Backprop, Tokenization, Skip/Res, Distillation, Weight Averaging, Pipelining, Sync, Prefetching, Interconnect, RPC Protocol — all move information between components without deciding what to do with it.</p>
|
|
<p><strong style="color:var(--control)">Control:</strong> Objective, Constraint, Grad Descent, Search, Initialization, Masking, Scheduling, Regularization, Allocation, Arbiter, Load Balancer, Telemetry — all make decisions that govern system behavior.</p>
|
|
<p><strong style="color:var(--measure)">Measure:</strong> Entropy, Loss Function, Receptive Field, Info Density, Throughput, Energy, Latency — all observe without changing. Noble gases.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="controls"><input type="text" class="search-box" id="search" placeholder="Search elements..."></div>
|
|
<div class="block-legend" id="legend"></div>
|
|
</div>
|
|
|
|
<div class="table-wrap">
|
|
<div class="table-outer">
|
|
<div class="y-labels" id="yLabels"></div>
|
|
<div>
|
|
<div class="block-headers" id="blockHeaders"></div>
|
|
<div class="periodic-grid" id="grid"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container compounds">
|
|
<style>
|
|
.compounds h3 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dimmer); margin: 1.5rem 0 0.8rem; border-bottom: 1px solid var(--border); padding-bottom: 0.3rem; }
|
|
.isomer-hint { color: var(--accent); font-size: 0.65rem; font-weight: normal; margin-left: 0.5rem; text-transform: none; }
|
|
</style>
|
|
<h2>Molecular ML (Compounds)</h2>
|
|
<p style="color:var(--text-dim); font-size:.82rem; margin-bottom:.8rem;">Just as H₂O = hydrogen + oxygen, every ML system decomposes into primitives from the table above. Read each formula left to right — symbols are element codes, operators show how they bond.</p>
|
|
<div class="c-legend">
|
|
<div class="cl-item"><span>→</span> Sequential</div>
|
|
<div class="cl-item"><span>∥</span> Parallel</div>
|
|
<div class="cl-item"><span>?</span> Conditional</div>
|
|
<div class="cl-item"><span>⇌</span> Adversarial</div>
|
|
<div class="cl-item"><span>↺</span> Feedback Loop</div>
|
|
<div class="cl-item"><span>[ ]ᴺ</span> Repeated Block</div>
|
|
</div>
|
|
|
|
<!-- @gen:compounds -->
|
|
|
|
<h3>Core Architectures <span class="isomer-hint">Fundamental end-to-end model structures</span></h3>
|
|
<div class="compound-grid">
|
|
<div class="c-card">
|
|
<div class="c-name">Transformer</div>
|
|
<div class="c-formula"><span>Eb</span> → [(<span>At</span> ∥ <span>Mk</span>) → <span>Nm</span> → <span>Sk</span> → <span>Dd</span>]ᴺ</div>
|
|
</div>
|
|
<div class="c-card">
|
|
<div class="c-name">Encoder-Decoder Transformer</div>
|
|
<div class="c-formula"><span>Eb</span> → [(<span>At</span> ∥ <span>Mk</span>) → <span>Nm</span> → <span>Sk</span> → <span>Dd</span>]ᴺ<sub>enc</sub> → [(<span>At</span> ∥ <span>Mk</span>) → <span>At</span><sub>cross</sub> → <span>Nm</span> → <span>Sk</span> → <span>Dd</span>]ᴺ<sub>dec</sub> → <span>Dd</span></div>
|
|
</div>
|
|
<div class="c-card">
|
|
<div class="c-name">Vision Transformer (ViT)</div>
|
|
<div class="c-formula"><span>Tk</span><sub>patch</sub> → <span>Eb</span> → [(<span>At</span> ∥ <span>Mk</span>) → <span>Nm</span> → <span>Sk</span> → <span>Dd</span>]ᴺ → <span>Dd</span></div>
|
|
</div>
|
|
<div class="c-card">
|
|
<div class="c-name">Multimodal (Whisper)</div>
|
|
<div class="c-formula"><span>Tk</span><sub>audio</sub> → <span>Eb</span> → [(<span>At</span> ∥ <span>Mk</span>) → <span>Nm</span> → <span>Sk</span> → <span>Dd</span>]ᴺ</div>
|
|
</div>
|
|
<div class="c-card">
|
|
<div class="c-name">CNN</div>
|
|
<div class="c-formula">[<span>Cv</span> → <span>Ac</span> → <span>Po</span>]ᴺ → <span>Dd</span></div>
|
|
</div>
|
|
<div class="c-card">
|
|
<div class="c-name">ResNet</div>
|
|
<div class="c-formula"><span>Eb</span> → [<span>Cv</span> → <span>Nm</span> → <span>Sk</span>]ᴺ → <span>Po</span> → <span>Dd</span></div>
|
|
</div>
|
|
<div class="c-card">
|
|
<div class="c-name">LSTM</div>
|
|
<div class="c-formula"><span>Sp</span> → (<span>Dd</span> ∥ <span>Dd</span>) → <span>Gt</span> → <span>Fb</span>(<span>Hs</span>) → <span>Ac</span></div>
|
|
</div>
|
|
<div class="c-card">
|
|
<div class="c-name">State Space Model (SSM)</div>
|
|
<div class="c-formula"><span>Dd</span> → <span>Ac</span> → <span>Fb</span>(<span>Hs</span>)</div>
|
|
</div>
|
|
<div class="c-card">
|
|
<div class="c-name">Mamba (Selective SSM)</div>
|
|
<div class="c-formula"><span>Dd</span> → <span>Gt</span> → <span>Fb</span>(<span>Hs</span>)</div>
|
|
</div>
|
|
<div class="c-card">
|
|
<div class="c-name">GNN (Graph Neural Network)</div>
|
|
<div class="c-formula"><span>Tp</span> → <span>At</span> → <span>Po</span> → <span>Dd</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3>Structural & Training Patterns <span class="isomer-hint">Reusable sub-blocks and paradigms</span></h3>
|
|
<div class="compound-grid">
|
|
<div class="c-card">
|
|
<div class="c-name">Linear Attention</div>
|
|
<div class="c-formula"><span>At</span> → <span>Fc</span> → <span>Fb</span>(<span>Hs</span>)</div>
|
|
</div>
|
|
<div class="c-card">
|
|
<div class="c-name">Mixture of Experts (MoE)</div>
|
|
<div class="c-formula"><span>Ro</span> ? (<span>Dd</span> ∥ … ∥ <span>Dd</span>) → <span>Gt</span></div>
|
|
</div>
|
|
<div class="c-card">
|
|
<div class="c-name">Multi-Head Attention</div>
|
|
<div class="c-formula"><span>Dd</span> → (<span>At</span> ∥ <span>Mk</span>) ∥ … ∥ (<span>At</span> ∥ <span>Mk</span>) → <span>Dd</span></div>
|
|
</div>
|
|
<div class="c-card">
|
|
<div class="c-name">Batch Normalization</div>
|
|
<div class="c-formula"><span>Bt</span> → <span>Nm</span></div>
|
|
</div>
|
|
<div class="c-card">
|
|
<div class="c-name">Contrastive Learning (CLIP)</div>
|
|
<div class="c-formula">(<span>Tk</span><sub>img</sub> ∥ <span>Tk</span><sub>txt</sub>) → (<span>Eb</span> ∥ <span>Eb</span>) → <span>Dd</span> → <span>Ob</span><sub>contrastive</sub> → <span>Gd</span> → <span>Pm</span></div>
|
|
</div>
|
|
<div class="c-card">
|
|
<div class="c-name">Masked Autoencoder (MAE)</div>
|
|
<div class="c-formula"><span>Mk</span> → <span>Eb</span> → [(<span>At</span> ∥ <span>Mk</span>) → <span>Nm</span> → <span>Sk</span> → <span>Dd</span>]ᴺ → <span>Ob</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3>Generative & Latent Models</h3>
|
|
<div class="compound-grid">
|
|
<div class="c-card">
|
|
<div class="c-name">Diffusion Model</div>
|
|
<div class="c-formula">[<span>St</span> → <span>Nm</span> → (<span>Dd</span> → <span>Ac</span> → <span>Sk</span>)]ᴺ → <span>Ob</span></div>
|
|
</div>
|
|
<div class="c-card">
|
|
<div class="c-name">Diffusion Transformer (DiT)</div>
|
|
<div class="c-formula"><span>Tk</span> → <span>Eb</span> → [(<span>At</span> ∥ <span>Mk</span>) → <span>Nm</span> → <span>Sk</span> → <span>Dd</span>]ᴺ → <span>St</span></div>
|
|
</div>
|
|
<div class="c-card">
|
|
<div class="c-name">VAE</div>
|
|
<div class="c-formula"><span>Eb</span> → <span>Dd</span> → (<span>Pr</span> ∥ <span>St</span>) → <span>Dd</span> → <span>Ob</span></div>
|
|
</div>
|
|
<div class="c-card">
|
|
<div class="c-name">GAN</div>
|
|
<div class="c-formula">(<span>Dd</span> → <span>Ac</span>) ⇌ (<span>Dd</span> → <span>Ac</span>) → <span>Ob</span></div>
|
|
</div>
|
|
<div class="c-card">
|
|
<div class="c-name">World Model (JEPA/Sora)</div>
|
|
<div class="c-formula"><span>Eb</span> → [(<span>At</span> ∥ <span>Mk</span>) → <span>Nm</span> → <span>Sk</span> → <span>Dd</span>]ᴺ → <span>Fb</span>(<span>Hs</span>) → <span>Ob</span></div>
|
|
</div>
|
|
<div class="c-card">
|
|
<div class="c-name">Sparse Autoencoder (SAE)</div>
|
|
<div class="c-formula"><span>Hs</span> → <span>Dd</span> → <span>Ac</span> → <span>Sp</span> → <span>Dd</span> → <span>Ob</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3>Efficiency & Optimization</h3>
|
|
<div class="compound-grid">
|
|
<div class="c-card">
|
|
<div class="c-name">Knowledge Distillation</div>
|
|
<div class="c-formula"><span>Tp</span><sub>teacher</sub> → <span>Dv</span> ← <span>Tp</span><sub>student</sub> → <span>Gd</span></div>
|
|
</div>
|
|
<div class="c-card">
|
|
<div class="c-name">Systolic Array (TPU Core)</div>
|
|
<div class="c-formula">[<span>Ma</span> ↔ <span>Ic</span>]ᴺ</div>
|
|
</div>
|
|
<div class="c-card">
|
|
<div class="c-name">Knowledge Distillation</div>
|
|
<div class="c-formula"><span>Tp</span><sub>teacher</sub> → <span>Dv</span> ← <span>Tp</span><sub>student</sub> → <span>Gd</span></div>
|
|
</div>
|
|
<div class="c-card">
|
|
<div class="c-name">Systolic Array (TPU Core)</div>
|
|
<div class="c-formula">[<span>Ma</span> ↔ <span>Ic</span>]ᴺ</div>
|
|
</div>
|
|
<div class="c-card">
|
|
<div class="c-name">Flash Attention</div>
|
|
<div class="c-formula"><span>At</span> → (<span>Ti</span> ∥ <span>Fs</span>)</div>
|
|
</div>
|
|
<div class="c-card">
|
|
<div class="c-name">LoRA</div>
|
|
<div class="c-formula"><span>Pm</span> → <span>Fc</span> → <span>Dd</span></div>
|
|
</div>
|
|
<div class="c-card">
|
|
<div class="c-name">Adam Optimizer</div>
|
|
<div class="c-formula"><span>Gd</span> → <span>Os</span> → <span>Sc</span> → <span>Pm</span></div>
|
|
</div>
|
|
<div class="c-card">
|
|
<div class="c-name">Weight Averaging (SWA)</div>
|
|
<div class="c-formula"><span>Gd</span> → <span>Wa</span> → <span>Pm</span></div>
|
|
</div>
|
|
<div class="c-card">
|
|
<div class="c-name">BitNet (1-bit LLM)</div>
|
|
<div class="c-formula"><span>Qz</span> → <span>Dd</span> → <span>Ac</span></div>
|
|
</div>
|
|
<div class="c-card">
|
|
<div class="c-name">Quantization-Aware Training (QAT)</div>
|
|
<div class="c-formula"><span>Qz</span> → <span>Gd</span> → <span>Pm</span></div>
|
|
</div>
|
|
<div class="c-card">
|
|
<div class="c-name">Speculative Decoding</div>
|
|
<div class="c-formula"><span>St</span><sub>draft</sub> → <span>Rw</span> → <span>Bt</span></div>
|
|
</div>
|
|
<div class="c-card">
|
|
<div class="c-name">Neural Architecture Search (NAS)</div>
|
|
<div class="c-formula"><span>Rw</span> → <span>Tp</span> → <span>Ob</span></div>
|
|
</div>
|
|
<div class="c-card">
|
|
<div class="c-name">Hyperparameter Optimization (HPO)</div>
|
|
<div class="c-formula"><span>Rw</span> → (<span>Sc</span> ∥ <span>Rg</span>) → <span>Ob</span></div>
|
|
</div>
|
|
<div class="c-card">
|
|
<div class="c-name">DP-SGD (Differential Privacy)</div>
|
|
<div class="c-formula">(<span>St</span> ∥ <span>Ct</span>) → <span>Gd</span> → <span>Pm</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3>Alignment & Fine-Tuning</h3>
|
|
<div class="compound-grid">
|
|
<div class="c-card">
|
|
<div class="c-name">RLHF</div>
|
|
<div class="c-formula"><span>St</span> → <span>Ob</span><sub>reward</sub> → <span>Gd</span> → <span>Pm</span></div>
|
|
</div>
|
|
<div class="c-card">
|
|
<div class="c-name">DPO</div>
|
|
<div class="c-formula">(<span>St</span> ∥ <span>St</span>) → <span>Ob</span> → <span>Gd</span> → <span>Pm</span></div>
|
|
</div>
|
|
<div class="c-card">
|
|
<div class="c-name">PPO</div>
|
|
<div class="c-formula"><span>St</span> → (<span>Ob</span> ∥ <span>Ct</span>) → <span>Gd</span> → <span>Pm</span></div>
|
|
</div>
|
|
<div class="c-card">
|
|
<div class="c-name">Chain-of-Thought (CoT)</div>
|
|
<div class="c-formula"><span>St</span> → <span>Re</span>(<span>Hs</span>) → <span>Rw</span> → <span>Ob</span></div>
|
|
</div>
|
|
<div class="c-card">
|
|
<div class="c-name">RAFT</div>
|
|
<div class="c-formula">(<span>Eb</span> → <span>Rw</span> → <span>Cc</span>) → <span>Gd</span> → <span>Pm</span></div>
|
|
</div>
|
|
<div class="c-card">
|
|
<div class="c-name">Prompt Tuning</div>
|
|
<div class="c-formula"><span>Eb</span><sub>prompt</sub> → [(<span>At</span> ∥ <span>Mk</span>) → <span>Nm</span> → <span>Sk</span> → <span>Dd</span>]ᴺ → <span>Dd</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3>Distributed & Scaling</h3>
|
|
<div class="compound-grid">
|
|
<div class="c-card">
|
|
<div class="c-name">Data Parallelism (DP)</div>
|
|
<div class="c-formula"><span>Bt</span> → <span>Gd</span> → <span>Sy</span> → <span>Pm</span></div>
|
|
</div>
|
|
<div class="c-card">
|
|
<div class="c-name">FSDP (Fully Sharded DP)</div>
|
|
<div class="c-formula"><span>Bt</span> → <span>Fc</span> → <span>Gd</span> → <span>Sy</span> → <span>Pm</span></div>
|
|
</div>
|
|
<div class="c-card">
|
|
<div class="c-name">Pipeline Parallelism (PP)</div>
|
|
<div class="c-formula"><span>Pl</span> → <span>Sy</span> → <span>Al</span></div>
|
|
</div>
|
|
<div class="c-card">
|
|
<div class="c-name">Tensor Parallelism (TP)</div>
|
|
<div class="c-formula"><span>Fc</span> → <span>Sy</span> → <span>Al</span></div>
|
|
</div>
|
|
<div class="c-card">
|
|
<div class="c-name">Federated Learning</div>
|
|
<div class="c-formula"><span>Gd</span> → <span>Wa</span> → <span>Sy</span></div>
|
|
</div>
|
|
<div class="c-card">
|
|
<div class="c-name">Model Merging / Ensembling</div>
|
|
<div class="c-formula">(<span>Pm</span> ∥ <span>Pm</span>) → <span>Wa</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3>System & Production</h3>
|
|
<div class="compound-grid">
|
|
<div class="c-card">
|
|
<div class="c-name">RAG</div>
|
|
<div class="c-formula"><span>Eb</span> → <span>Rw</span> → <span>Cc</span> → (<span>At</span> ∥ <span>Mk</span>) → <span>Dd</span></div>
|
|
</div>
|
|
<div class="c-card">
|
|
<div class="c-name">Inference Service</div>
|
|
<div class="c-formula"><span>Rp</span> → <span>Ld</span> → <span>Ex</span> → <span>Cc</span></div>
|
|
</div>
|
|
<div class="c-card">
|
|
<div class="c-name">Feature Store</div>
|
|
<div class="c-formula"><span>As</span> → <span>Cc</span> → <span>Rp</span></div>
|
|
</div>
|
|
<div class="c-card">
|
|
<div class="c-name">KV Cache</div>
|
|
<div class="c-formula"><span>At</span> → <span>Cc</span></div>
|
|
</div>
|
|
<div class="c-card">
|
|
<div class="c-name">Gradient Checkpointing</div>
|
|
<div class="c-formula"><span>Ad</span> → <span>Cp</span> → <span>Al</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- @end:compounds -->
|
|
</div>
|
|
|
|
|
|
<div class="overlay" id="overlay">
|
|
<div class="panel"><button class="close-btn" id="closeBtn">×</button><div id="panelContent"></div></div>
|
|
</div>
|
|
|
|
<div class="footer">A project of <a href="https://mlsysbook.ai">Machine Learning Systems</a> — Harvard CS249r · Vijay Janapa Reddi · 2025</div>
|
|
|
|
<script>
|
|
/* @gen:blocks */
|
|
const blocks = {
|
|
R: { name:'Represent', sub:'What holds information', color:'#42a5f5', cols:[1,2,3,4] },
|
|
C: { name:'Compute', sub:'What transforms', color:'#ef6c00', cols:[5,6,7,8,9] },
|
|
X: { name:'Communicate', sub:'What moves', color:'#26a69a', cols:[10,11,12] },
|
|
K: { name:'Control', sub:'What decides', color:'#fdd835', cols:[13,14,15,16] },
|
|
M: { name:'Measure', sub:'What observes', color:'#78909c', cols:[17,18] },
|
|
};
|
|
const rowLabels = ['Data','Math','Algorithms','Architecture','Optimization','Runtime','Hardware','Production'];
|
|
/* @end:blocks */
|
|
|
|
/* @gen:elements */
|
|
// [num, sym, name, block, row, col, year, desc, bonds[], whyHere]
|
|
const elements = [
|
|
// Row 0: Data (The Raw Material)
|
|
[70,'Rc','Record','R',1,1,'—','The fundamental atomic unit of raw information (a single row, image, or document).',[],'Row 0 (Data): the raw state. Represent.'],
|
|
[71,'Ds','Dataset','R',1,2,'—','A structured collection of records.',['Rc','Sm'],'Row 0 (Data): the collective state. Represent.'],
|
|
[72,'Tr','Transform','C',1,5,'—','The deterministic action of altering raw data (cropping, resizing, parsing).',['Rc'],'Row 0 (Data): raw manipulation. Compute.'],
|
|
[73,'Ag','Aggregate','C',1,6,'—','Combining multiple records into summary statistics.',['Ds'],'Row 0 (Data): statistical manipulation. Compute.'],
|
|
[74,'Fl','Flow/Stream','X',1,10,'—','The continuous movement of raw data from source to system (ETL, Kafka).',['Rc','Ds'],'Row 0 (Data): data pipeline. Communicate.'],
|
|
[75,'Fm','Format','X',1,11,'—','The structural encoding of data for storage or transit (Parquet, TFRecord).',['Rc','Fl'],'Row 0 (Data): serialization. Communicate.'],
|
|
[76,'Fi','Filter','K',1,13,'—','The deterministic logic that includes or excludes records based on predicates.',['Rc','Tr'],'Row 0 (Data): data gating. Control.'],
|
|
[77,'Sm','Schema','K',1,14,'—','The structural constraint defining the expected types and fields of a record.',['Rc','Ds'],'Row 0 (Data): type constraint. Control.'],
|
|
[78,'Vl','Volume','M',1,17,'—','The physical size or cardinality of the dataset (Bytes, Row Count).',['Ds'],'Row 0 (Data): scale metric. Measure.'],
|
|
[80,'En','Entropy','M',1,18,'1948','The Shannon information-theoretic limit; the absolute bound on data compressibility.',['Vl'],'Row 0 (Data): information limit. Measure.'],
|
|
|
|
// Row 1: Math (The Theoretical Bedrock)
|
|
[1,'Tn','Tensor','R',2,1,'—','The fundamental mathematical structure holding information (scalars, vectors, matrices).',['Op','Cr','Ob'],'Row 1 (Math): most primitive object. Represent: it IS information.'],
|
|
[2,'Pr','Probability','R',2,2,'1654','The mathematical primitive for representing uncertainty — distributions, densities.',['Tn','Dv','Ob'],'Row 1 (Math): uncertain state. Represent: encodes beliefs.'],
|
|
[3,'Op','Operator','C',2,5,'—','The mathematical action of mapping one space to another (linear or non-linear transforms).',['Tn'],'Row 1 (Math): pure transformation. Compute: transforms spaces.'],
|
|
[4,'Cr','Chain Rule','X',2,10,'1676','The fundamental mathematical mechanism that allows composed derivatives to be computed.',['Op'],'Row 1 (Math): derivative composition. Communicate: basis for error flow.'],
|
|
[5,'Ob','Objective','K',2,13,'—','The mathematical formulation of the goal (Argmin/Argmax).',['Cr','Dv'],'Row 1 (Math): the goal state. Control: defines "better" or "worse".'],
|
|
[6,'Cs','Constraint','K',2,14,'—','The mathematical primitive for defining bounds and restrictions on variables.',['Ob'],'Row 1 (Math): solution space restriction. Control: hard boundaries.'],
|
|
[7,'Dv','Divergence','M',2,17,'—','The mathematical quantification of distance between distributions or tensors (e.g., KL, L2).',['Tn','Pr'],'Row 1 (Math): information measure. Measure: quantifies difference.'],
|
|
[87,'St','State','R',2,3,'—','The mathematical representation of an environment or context (RL, SSMs).',['Ob'],'Row 1 (Math): contextual state. Represent.'],
|
|
|
|
// Row 2: Algorithms (The Operations)
|
|
[8,'Pm','Parameter','R',3,1,'—','The irreducible learned memory or state of an algorithm (weights, biases).',['Dd','Cv','Gd'],'Row 2 (Algorithm): learned state. Represent: instantiation of math state.'],
|
|
[9,'Eb','Embedding','R',3,2,'—','The fundamental algorithmic act of mapping a discrete symbol into continuous space.',['Tn','Dd'],'Row 2 (Algorithm): discrete-to-continuous mapping.'],
|
|
[10,'Sp','Sample','R',3,3,'—','The irreducible unit of empirical data distribution (a single data point).',['Eb','Lf'],'Row 2 (Algorithm): data representation. Represent: the input unit.'],
|
|
[11,'Dd','Dense Dot','C',3,5,'—','The irreducible algorithm for fully connected, all-to-all information transformation.',['Pm'],'Row 2 (Algorithm): all-to-all transform. Compute.'],
|
|
[12,'Cv','Convolution','C',3,6,'—','The irreducible algorithm for local, weight-shared spatial information transformation.',['Pm'],'Row 2 (Algorithm): local transform. Compute.'],
|
|
[13,'Po','Pooling','C',3,7,'—','The algorithmic primitive for spatial or temporal reduction (Max, Average).',['Cv','Dd'],'Row 2 (Algorithm): primitive operation. Compute.'],
|
|
[14,'Sm','Sampling','C',3,8,'—','The primitive for stochastic selection from a probability distribution.',['Pr'],'Row 2 (Algorithm): primitive operation. Compute.'],
|
|
[15,'Ad','Autodiff','X',3,10,'1970','The algorithmic primitive that mechanically computes exact derivatives through arbitrary control flow.',['Cr','Pm'],'Row 2 (Algorithm): error routing. Communicate.'],
|
|
[16,'Tk','Tokenization','X',3,11,'—','Segmenting raw input into discrete processing units.',['Eb'],'Row 2 (Algorithm): input segmentation. Communicate.'],
|
|
[17,'Gd','Grad Descent','K',3,13,'1847','The core control loop: takes communicated gradients and updates Parameters.',['Ad','Pm','Lf'],'Row 2 (Algorithm): update mechanism. Control.'],
|
|
[18,'Rw','Reward','K',3,14,'—','A scalar control signal evaluating the quality of an action (RL).',['Sp','Gd'],'Row 2 (Algorithm): evaluative signal. Control.'],
|
|
[19,'Iz','Initialization','K',3,15,'—','The algorithmic control for setting the starting state of parameters.',['Pm','Pr'],'Row 2 (Algorithm): starting state control. Control.'],
|
|
[20,'Lf','Loss Function','M',3,17,'—','The specific algorithmic computation of the mathematical distance (e.g., Cross-Entropy).',['Dv','Gd'],'Row 2 (Algorithm): algorithmic measure. Measure.'],
|
|
[86,'Ac','Activation','C',3,9,'—','Non-linear functions (ReLU, GELU) providing expressive power.',['Dd'],'Row 2 (Algorithm): non-linear transform. Compute.'],
|
|
[90,'Ct','Critic','K',3,16,'—','The value function evaluating the expected return of a state (Actor-Critic RL).',['St','Gd'],'Row 2 (Algorithm): evaluative model. Control.'],
|
|
|
|
// Row 3: Architecture (The Topologies)
|
|
[21,'Tp','Topology','R',4,1,'—','The fundamental structural assumption placed on data (Sequence, Grid, Graph).',['At','Gt','Cv'],'Row 3 (Architecture): data structure. Represent.'],
|
|
[22,'Hs','Hidden State','R',4,2,'—','The architectural primitive for persistent intermediate representation.',['Fb','At','Gt'],'Row 3 (Architecture): structural memory. Represent.'],
|
|
[23,'At','Attention','C',4,5,'—','Letting data dynamically decide which other data it interacts with.',['Mk'],'Row 3 (Architecture): dynamic routing. Compute.'],
|
|
[24,'Gt','Gating','C',4,6,'—','Using data to scale or shut off other data (Multiplicative flow).',['Tn'],'Row 3 (Architecture): conditional flow. Compute.'],
|
|
[25,'Nm','Normalization','C',4,7,'—','The transform that re-centers and re-scales data distributions between layers.',['Tn','Pm'],'Row 3 (Architecture): distribution transform. Compute.'],
|
|
[26,'Ro','Routing','C',4,8,'—','Conditional data direction to specific sub-units (e.g., Experts).',['Gt','Mk','Dd'],'Row 3 (Architecture): conditional flow. Compute.'],
|
|
[27,'Sk','Skip/Res','X',4,10,'—','The fundamental primitive of identity mapping. Allows information to bypass computation.',['Tp'],'Row 3 (Architecture): information highway. Communicate.'],
|
|
[28,'Fb','Feedback','X',4,11,'—','The structural primitive of routing a signal backward in the graph (Recurrence).',['Hs','Tp'],'Row 3 (Architecture): temporal loop. Communicate.'],
|
|
[29,'Mk','Masking','K',4,13,'—','The structural enforcement of causality or prevention of information leakage.',['At','Tp'],'Row 3 (Architecture): structural constraint. Control.'],
|
|
[30,'Rf','Receptive Fld','M',4,17,'—','The measurement of how far information can travel within the architecture in one pass.',['Tp','At','Cv'],'Row 3 (Architecture): spatial/temporal reach. Measure.'],
|
|
[81,'Ix','Indexing','R',4,3,'—','The high-dimensional partitioning of vector space (e.g., HNSW) for sub-linear retrieval.',['Tp'],'Row 3 (Architecture): structured retrieval. Represent.'],
|
|
[82,'Ro','Routing','K',4,14,'—','The dynamic, data-dependent dispatch of tensors (e.g., Mixture of Experts).',['Gt'],'Row 3 (Architecture): dynamic flow. Control.'],
|
|
|
|
// Row 4: Optimization (The Physics of Efficiency)
|
|
[31,'Fc','Factorization','R',5,1,'—','Approximating a massive matrix as the product of smaller ones (Low-Rank).',['Pm','Qz','Sp'],'Row 4 (Optimization): rank reduction. Represent.'],
|
|
[32,'Os','Optim State','R',5,2,'—','The irreducible memory of the optimization process (momentum, velocity).',['Gd','Sc','Pm'],'Row 4 (Optimization): optimization memory. Represent.'],
|
|
[33,'Qz','Quantization','C',5,5,'—','Reducing the bit-width of numbers (FP8, INT4).',['Fc','Sp','Ws'],'Row 4 (Optimization): precision reduction. Compute.'],
|
|
[34,'Sp','Sparsification','C',5,6,'—','Turning dense compute sparse by forcing weights or activations to zero.',['Fc','Qz','Rg'],'Row 4 (Optimization): density reduction. Compute.'],
|
|
[35,'Ws','Weight Sharing','X',5,10,'1980s','The structural optimization of communicating the same learned state across multiple functional paths (e.g., CNNs).',['Pm','Tp'],'Row 4 (Optimization): state reuse. Communicate.'],
|
|
[36,'En','Ensembling','X',5,11,'—','Merging weights or outputs across time/workers to improve generalization (SWA).',['Pm','Gd','Ws'],'Row 4 (Optimization): spatial/temporal merging. Communicate.'],
|
|
[37,'Sc','Scheduling','K',5,13,'—','Dynamically decaying or modulating control signals over time.',['Gd','Rg'],'Row 4 (Optimization): dynamic modulation. Control.'],
|
|
[38,'Rg','Regularization','K',5,14,'—','The structural penalty applied to the objective to force simpler solutions.',['Sc','Sp','Ob'],'Row 4 (Optimization): complexity penalty. Control.'],
|
|
[39,'Tm','Termination','K',5,15,'—','The control primitive that evaluates conditions to halt an iterative optimization loop.',['Gd','Lf'],'Row 4 (Optimization): temporal bound. Control.'],
|
|
[40,'Id','Info Density','M',5,17,'—','The measure of optimization efficiency (Bits per Parameter).',['Qz','Fc','Sp'],'Row 4 (Optimization): compression metric. Measure.'],
|
|
[88,'Re','Retrieve','X',5,12,'—','Fetching stored state or external knowledge (e.g., from a KV Cache or Vector DB).',['Hs'],'Row 4 (Optimization): state retrieval. Communicate.'],
|
|
[89,'Wa','Weight Avg','C',5,7,'—','Averaging model weights across time or distributed workers (e.g., SWA, EMA).',['Pm'],'Row 4 (Optimization): parameter smoothing. Compute.'],
|
|
|
|
// Row 5: Runtime (Software Execution Primitives)
|
|
[41,'Cc','Caching','R',6,1,'—','Holding intermediate state in fast memory to prevent recomputation (e.g., KV Cache).',['At','Bt','Pl'],'Row 5 (Runtime): state persistence. Represent.'],
|
|
[42,'Cp','Checkpointing','R',6,2,'—','Saving and restoring model state for fault tolerance or memory efficiency.',['Pm','As','Al'],'Row 5 (Runtime): state persistence. Represent.'],
|
|
[43,'Ir','Int. Rep.','R',6,3,'—','The software state of a computation graph before hardware execution (ONNX, PT2).',['Cl','Fs'],'Row 5 (Runtime): structural state. Represent.'],
|
|
[44,'Fs','Fusion','C',6,5,'—','Merging multiple operations into a single execution kernel to minimize memory IO.',['Op','At','Pl'],'Row 5 (Runtime): op merging. Compute.'],
|
|
[45,'Bt','Batching','C',6,6,'—','Grouping independent inputs for parallel processing.',['Cc','Dd','Pl'],'Row 5 (Runtime): request grouping. Compute.'],
|
|
[46,'Ti','Tiling','C',6,7,'—','Partitioning computation into sub-blocks to optimize for memory hierarchy.',['Ma','Sr','Fs'],'Row 5 (Runtime): compute partitioning. Compute.'],
|
|
[47,'Cl','Compilation','C',6,8,'—','Lowering high-level operators into hardware-executable kernels.',['Ir','Fs','Ti'],'Row 5 (Runtime): graph-to-kernel translation. Compute.'],
|
|
[48,'Pl','Pipelining','X',6,10,'—','Overlapping the execution of sequential stages across different compute units.',['Bt','Sy','Al'],'Row 5 (Runtime): stage scheduling. Communicate.'],
|
|
[49,'Sy','Sync / Coll','X',6,11,'—','Aggregating and broadcasting state across distributed devices.',['Ad','Gd','Pl'],'Row 5 (Runtime): gradient/state sync. Communicate.'],
|
|
[50,'Pf','Prefetching','X',6,12,'—','Proactively moving data into faster memory tiers before it is needed.',['Ic','Dr','Pl'],'Row 5 (Runtime): data anticipation. Communicate.'],
|
|
[51,'Al','Allocation','K',6,13,'—','The dynamic assignment of hardware resources to software tasks.',['Cc','Cp','Ar'],'Row 5 (Runtime): resource control. Control.'],
|
|
[52,'Ut','Utilization','M',6,17,'—','The percentage of theoretical hardware capacity actively used (MFU).',['Bt','Fs'],'Row 5 (Runtime): efficiency metric. Measure.'],
|
|
[83,'Vr','Virtualization','R',6,4,'—','The abstraction of physical memory via page tables (e.g., PagedAttention) to solve fragmentation.',['Cc'],'Row 5 (Runtime): memory mapping. Represent.'],
|
|
|
|
// Row 6: Hardware (Silicon Primitives)
|
|
[53,'Sr','SRAM','R',7,1,'—','On-chip, low-capacity, extremely high-bandwidth memory (Registers, Scratchpads).',['Cc','Ma','Ic'],'Row 6 (Hardware): fast state. Represent.'],
|
|
[54,'Dr','DRAM','R',7,2,'—','Off-chip, high-capacity, lower-bandwidth memory (HBM, DDR).',['Cp','Sr','Ic'],'Row 6 (Hardware): bulk state. Represent.'],
|
|
[55,'Ma','MAC Unit','C',7,5,'—','Multiply-Accumulate unit. The fundamental silicon logic gate for tensor math.',['Sr','Dd','Vu'],'Row 6 (Hardware): arithmetic logic. Compute.'],
|
|
[56,'Vu','Vector Unit','C',7,6,'—','Single Instruction, Multiple Data (SIMD) ALU. The silicon primitive for parallel arithmetic.',['Ma','Sr'],'Row 6 (Hardware): parallel compute logic. Compute.'],
|
|
[57,'Ic','Interconnect','X',7,10,'—','The physical wiring moving data between silicon components (NoC, PCIe, NVLink).',['Sr','Dr','Sy'],'Row 6 (Hardware): device link. Communicate.'],
|
|
[58,'Rt','HW Router','X',7,11,'—','Silicon logic that directs packets across the physical interconnect.',['Ic','Ar'],'Row 6 (Hardware): physical network logic. Communicate.'],
|
|
[59,'Ar','Arbiter','K',7,13,'—','Hardware logic that schedules instructions and manages contention.',['Ma','Ic','Al'],'Row 6 (Hardware): execution control. Control.'],
|
|
[60,'Ck','Clock/Sync','K',7,14,'—','The hardware primitive for temporal control, synchronization, and barriers.',['Ar','Ma'],'Row 6 (Hardware): temporal control. Control.'],
|
|
[61,'Ew','Energy','M',7,17,'—','The physical power consumed to perform computation (Joules/token).',['Ma','Dr'],'Row 6 (Hardware): power metric. Measure.'],
|
|
[79,'An','Analog ALU','C',7,7,'—','Continuous-voltage compute unit (e.g., memristor, optical) for extremely low-power inference.',['Ma'],'Row 6 (Hardware): non-digital compute. Compute.'],
|
|
[84,'Td','Thermodynamics','M',7,18,'—','The ultimate physical limitation (Landauer limit, thermal throttling) capping system scale.',['Ew'],'Row 6 (Hardware): thermal limit. Measure.'],
|
|
|
|
// Row 7: Production (Fleet Primitives)
|
|
[62,'As','Artifact Store','R',8,1,'—','Durable, distributed storage for trained models and datasets (S3, Model Registry).',['Cp','Dr','Ex'],'Row 7 (Production): persistent state. Represent.'],
|
|
[63,'Ex','Exec Engine','C',8,5,'—','The production worker node that executes compiled graphs on incoming requests.',['As','Bt','Mq'],'Row 7 (Production): execution loop. Compute.'],
|
|
[64,'Rp','RPC Protocol','X',8,10,'—','The synchronous network protocol for moving data between distributed services.',['Ex','Ld','La'],'Row 7 (Production): sync interface. Communicate.'],
|
|
[65,'Mq','Msg Queue','X',8,11,'—','The asynchronous network primitive for buffering and streaming data (Kafka).',['Ex','Rp'],'Row 7 (Production): async interface. Communicate.'],
|
|
[66,'Ld','Load Balancer','K',8,13,'—','The fleet-level control unit routing incoming requests to available hardware.',['Rp','Ex','Oc'],'Row 7 (Production): traffic control. Control.'],
|
|
[67,'Oc','Orchestrator','K',8,14,'—','The fleet-level control plane that scales, restarts, and manages the lifecycle of execution nodes (e.g., K8s).',['Ld','Av'],'Row 7 (Production): fleet control loop. Control.'],
|
|
[68,'La','Latency','M',8,17,'—','The end-to-end time from user request to final response.',['Ex','Rp'],'Row 7 (Production): time metric. Measure.'],
|
|
[69,'Av','Availability','M',8,18,'—','Service Level Agreement metric measuring uptime and fault tolerance.',['La','Oc'],'Row 7 (Production): reliability metric. Measure.'],
|
|
[85,'Rs','Resilience','K',8,15,'—','The systemic countermeasures (checkpointing, elastic recovery) for macroscopic hardware decay.',['Oc'],'Row 7 (Production): fault tolerance. Control.']
|
|
];
|
|
/* @end:elements */
|
|
|
|
// ═══════ RENDER ═══════
|
|
const grid = document.getElementById('grid');
|
|
const legendEl = document.getElementById('legend');
|
|
const overlay = document.getElementById('overlay');
|
|
const panelContent = document.getElementById('panelContent');
|
|
const search = document.getElementById('search');
|
|
const yLabelsEl = document.getElementById('yLabels');
|
|
const blockHeadersEl = document.getElementById('blockHeaders');
|
|
|
|
let activeBlock = null;
|
|
const elMap = {};
|
|
elements.forEach(e => { elMap[e[1]] = e; });
|
|
|
|
// Block headers
|
|
Object.entries(blocks).forEach(([key, b]) => {
|
|
const bh = document.createElement('div');
|
|
bh.className = 'bh';
|
|
bh.textContent = b.name;
|
|
bh.style.width = (b.cols.length * 58 + (b.cols.length - 1) * 3) + 'px';
|
|
bh.style.background = `color-mix(in srgb, ${b.color} 15%, transparent)`;
|
|
bh.style.color = b.color;
|
|
blockHeadersEl.appendChild(bh);
|
|
});
|
|
|
|
// Y-axis
|
|
rowLabels.forEach((lbl, i) => {
|
|
const el = document.createElement('div'); el.className = 'y-lbl';
|
|
el.textContent = `${i+1}. ${lbl}`; yLabelsEl.appendChild(el);
|
|
});
|
|
const ySp = document.createElement('div'); ySp.className = 'y-lbl-spacer'; yLabelsEl.appendChild(ySp);
|
|
const yF = document.createElement('div'); yF.className = 'y-lbl'; yF.textContent = 'Frontier';
|
|
yF.style.color = 'var(--text-dimmer)'; yF.style.borderTop = '1px dashed var(--border)'; yLabelsEl.appendChild(yF);
|
|
|
|
// Legend
|
|
Object.entries(blocks).forEach(([key, b]) => {
|
|
const item = document.createElement('div'); item.className = 'bl-item';
|
|
item.innerHTML = `<span class="bl-dot" style="background:${b.color}"></span>${b.name} <span style="color:var(--text-dimmer);font-size:.6rem">— ${b.sub}</span>`;
|
|
item.addEventListener('click', () => {
|
|
if (activeBlock===key){activeBlock=null;item.classList.remove('active')}
|
|
else{activeBlock=key;document.querySelectorAll('.bl-item').forEach(i=>i.classList.remove('active'));item.classList.add('active')}
|
|
applyFilter();
|
|
});
|
|
legendEl.appendChild(item);
|
|
});
|
|
|
|
// Elements
|
|
const posMap = {};
|
|
elements.forEach(e => { posMap[`${e[4]}-${e[5]}`] = e; });
|
|
|
|
for (let row = 1; row <= 9; row++) {
|
|
if (row === 8) {
|
|
const s = document.createElement('div'); s.className='spacer-row';
|
|
s.style.gridColumn='1/-1'; s.style.gridRow='8'; grid.appendChild(s); continue;
|
|
}
|
|
for (let col = 1; col <= 15; col++) {
|
|
const e = posMap[`${row}-${col}`];
|
|
if (!e) continue;
|
|
const block = blocks[e[3]];
|
|
const color = row === 9 ? 'var(--frontier)' : block.color;
|
|
const el = document.createElement('div'); el.className='el';
|
|
el.style.setProperty('--el-c', color);
|
|
el.style.gridRow = row; el.style.gridColumn = col;
|
|
el.dataset.block = e[3]; el.dataset.name = e[2].toLowerCase(); el.dataset.sym = e[1].toLowerCase();
|
|
el.innerHTML = `<span class="num">${e[0]}</span><span class="sym">${e[1]}</span><span class="nm">${e[2]}</span>`;
|
|
el.dataset.elSym = e[1];
|
|
el.addEventListener('click', (ev) => { ev.stopPropagation(); highlightCompoundsFor(e[1]); showDetail(e); });
|
|
grid.appendChild(el);
|
|
}
|
|
}
|
|
|
|
// Frontier label (y-axis only — no grid element needed)
|
|
|
|
function applyFilter() {
|
|
const q = search.value.toLowerCase().trim();
|
|
document.querySelectorAll('.el').forEach(el => {
|
|
const bM = !activeBlock || el.dataset.block === activeBlock;
|
|
const sM = !q || el.dataset.name.includes(q) || el.dataset.sym.includes(q);
|
|
el.classList.toggle('dimmed', !(bM && sM));
|
|
});
|
|
}
|
|
search.addEventListener('input', applyFilter);
|
|
|
|
function showDetail(e) {
|
|
const block = blocks[e[3]];
|
|
const color = block.color;
|
|
const bonds = (e[8]||[]).map(s=>{const b=elMap[s];return b?`<span class="bond-tag" data-sym="${s}">${s} — ${b[2]}</span>`:''}).join('');
|
|
panelContent.innerHTML = `
|
|
<div class="d-header">
|
|
<div class="d-symbox" style="--el-c:${color};border-color:${color}">
|
|
<span class="num">#${e[0]}</span><span class="sym" style="color:${color}">${e[1]}</span>
|
|
</div>
|
|
<div><div class="d-name">${e[2]}</div><div class="d-block-tag" style="color:${color}">${block.name} · ${rowLabels[e[4]-1]}</div></div>
|
|
</div>
|
|
<div class="d-meta">
|
|
<div class="mi"><div class="mi-label">Introduced</div><div class="mi-val">${e[6]}</div></div>
|
|
<div class="mi"><div class="mi-label">Role</div><div class="mi-val" style="color:${color}">${block.name}</div></div>
|
|
<div class="mi"><div class="mi-label">Layer</div><div class="mi-val">${rowLabels[e[4]-1]}</div></div>
|
|
</div>
|
|
<div class="d-desc">${e[7]}</div>
|
|
<div class="d-why"><strong>Why this position:</strong> ${e[9]}</div>
|
|
${bonds?`<div class="d-bonds"><h4>Bonds With</h4><div class="bond-tags">${bonds}</div></div>`:''}`;
|
|
panelContent.querySelectorAll('.bond-tag').forEach(t=>{t.addEventListener('click',()=>{const b=elMap[t.dataset.sym];if(b)showDetail(b)})});
|
|
overlay.classList.add('open');
|
|
}
|
|
// ── Cross-referencing: elements ↔ compounds ──
|
|
// Build maps BEFORE injecting tooltips (so textContent is clean)
|
|
|
|
const cardSymMap = new Map();
|
|
document.querySelectorAll('.c-card').forEach(card => {
|
|
const syms = new Set();
|
|
card.querySelectorAll('.c-formula span').forEach(span => {
|
|
const sym = span.textContent.replace(/[₀-₉\s]/g,'').trim();
|
|
if (elMap[sym]) syms.add(sym);
|
|
});
|
|
cardSymMap.set(card, syms);
|
|
});
|
|
|
|
const symCardMap = {};
|
|
cardSymMap.forEach((syms, card) => {
|
|
syms.forEach(sym => {
|
|
if (!symCardMap[sym]) symCardMap[sym] = [];
|
|
symCardMap[sym].push(card);
|
|
});
|
|
});
|
|
|
|
// NOW add tooltips and block colors to compound formula symbols
|
|
document.querySelectorAll('.c-formula span').forEach(span => {
|
|
const sym = span.textContent.replace(/[₀-₉\s]/g,'').trim();
|
|
const el = elMap[sym];
|
|
if (el) {
|
|
const block = blocks[el[3]];
|
|
if (block) span.style.setProperty('--sym-color', block.color);
|
|
const tip = document.createElement('span');
|
|
tip.className = 'tip';
|
|
tip.textContent = el[2];
|
|
span.appendChild(tip);
|
|
}
|
|
});
|
|
|
|
let xrefActive = false;
|
|
|
|
// Click element → highlight compounds containing it
|
|
function highlightCompoundsFor(sym) {
|
|
clearXref();
|
|
const cards = symCardMap[sym] || [];
|
|
if (cards.length === 0) return;
|
|
xrefActive = true;
|
|
document.querySelectorAll('.c-card').forEach(c => c.classList.add('c-dimmed'));
|
|
cards.forEach(c => { c.classList.remove('c-dimmed'); c.classList.add('c-highlighted'); });
|
|
// Scroll first matching compound into view
|
|
if (cards[0]) cards[0].scrollIntoView({ behavior:'smooth', block:'nearest' });
|
|
}
|
|
|
|
// Click compound → highlight its elements in the table
|
|
document.querySelectorAll('.c-card').forEach(card => {
|
|
card.addEventListener('click', (ev) => {
|
|
// Don't trigger if clicking a tooltip
|
|
if (ev.target.classList.contains('tip')) return;
|
|
clearXref();
|
|
const syms = cardSymMap.get(card);
|
|
if (!syms || syms.size === 0) return;
|
|
xrefActive = true;
|
|
// Highlight compound card
|
|
document.querySelectorAll('.c-card').forEach(c => c.classList.add('c-dimmed'));
|
|
card.classList.remove('c-dimmed');
|
|
card.classList.add('c-highlighted');
|
|
// Highlight elements in grid
|
|
document.querySelectorAll('.el').forEach(el => {
|
|
if (syms.has(el.dataset.elSym)) {
|
|
el.classList.add('el-xref');
|
|
}
|
|
});
|
|
// Scroll table into view
|
|
document.querySelector('.table-wrap').scrollIntoView({ behavior:'smooth', block:'nearest' });
|
|
});
|
|
});
|
|
|
|
function clearXref() {
|
|
xrefActive = false;
|
|
document.querySelectorAll('.c-card').forEach(c => { c.classList.remove('c-highlighted','c-dimmed'); });
|
|
document.querySelectorAll('.el').forEach(el => { el.classList.remove('el-xref'); });
|
|
}
|
|
|
|
// Click anywhere else to clear highlights
|
|
document.addEventListener('click', (ev) => {
|
|
if (!xrefActive) return;
|
|
if (ev.target.closest('.el') || ev.target.closest('.c-card') || ev.target.closest('.panel')) return;
|
|
clearXref();
|
|
});
|
|
|
|
document.getElementById('closeBtn').addEventListener('click',()=>{ overlay.classList.remove('open'); });
|
|
overlay.addEventListener('click',e=>{if(e.target===overlay){ overlay.classList.remove('open'); }});
|
|
document.addEventListener('keydown',e=>{if(e.key==='Escape'){ overlay.classList.remove('open'); clearXref(); }});
|
|
</script>
|
|
</body>
|
|
</html>
|