diff --git a/chips/index.html b/chips/index.html index 1926354..5ef542b 100644 --- a/chips/index.html +++ b/chips/index.html @@ -69,6 +69,14 @@ .pill[data-focus="gpu"].on{background:var(--gpu)} .pill[data-focus="dpu"].on{background:var(--dpu)} .pill[data-focus="all"].on{background:var(--ink)} +/* variant picker: one labeled group per chip */ +.seg .vbtn[data-chip="cpu"].on{background:var(--cpu);color:#14110d;font-weight:700} +.seg .vbtn[data-chip="gpu"].on{background:var(--gpu);color:#14110d;font-weight:700} +.seg .vbtn[data-chip="dpu"].on{background:var(--dpu);color:#14110d;font-weight:700} +.seg.variants{max-width:min(300px,42vw)} +.seg.variants .vpills{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:2px} +.seg.variants .vpills::-webkit-scrollbar{display:none} +.seg.variants .vbtn{flex:0 0 auto;padding:4px 10px;font-size:.72rem} /* hover tooltip */ #tip{position:absolute;z-index:20;pointer-events:none;display:none;max-width:250px; background:rgba(20,17,13,.94);border:1px solid var(--line);border-radius:10px; @@ -110,6 +118,40 @@ .dpill:hover{color:var(--ink);border-color:var(--accent)} .dpill.on{background:var(--ink);color:#14110d;font-weight:700;border-color:var(--ink)} .hint{font-size:.74rem;color:var(--muted);margin-top:8px} +/* "what changed" card — pinned on variant swap */ +#vchange{position:absolute;z-index:15;left:22px;bottom:158px;width:min(360px,calc(100vw - 44px)); + background:rgba(30,25,19,.96);border:1px solid var(--line);border-radius:var(--radius); + padding:16px 20px;backdrop-filter:blur(10px);display:none;box-shadow:0 18px 50px rgba(0,0,0,.5)} +#vchange.show{display:block} +#vchange .close{position:absolute;top:8px;right:12px;background:none;border:none;color:var(--muted); + font-size:1.1rem;cursor:pointer} +#vchange .vc-kick{margin:0 0 2px;font-size:.66rem;text-transform:uppercase;letter-spacing:.14em;color:var(--accent)} +#vchange h3{margin:0 0 10px;font-size:1rem} +#vchange .vc-row{display:flex;gap:8px;font-size:.8rem;padding:6px 0;border-top:1px solid var(--line);align-items:baseline} +#vchange .vc-row b{flex:0 0 92px;font-size:.64rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:600} +#vchange .vc-row .was{color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(208,138,90,.6)} +#vchange .vc-row .arr{color:var(--accent);flex:0 0 auto} +#vchange .vc-row .now{color:var(--ink)} +#vchange .vc-row.same{opacity:.45} +#vchange .vc-row.same .was{text-decoration:none} +#vchange #vc-note{margin:10px 0 0;font-size:.82rem;color:var(--muted);line-height:1.5} +/* data-flow loop mode */ +#flowbar{display:none;margin-bottom:10px;background:rgba(20,17,13,.84);border:1px solid var(--line); + border-radius:12px;padding:10px 16px 12px;backdrop-filter:blur(8px)} +#flowbar.show{display:block} +.flow-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px} +#flow-stepname{font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--accent)} +.flow-dots{display:flex;gap:6px} +.flow-dots button{width:24px;height:6px;border-radius:3px;border:none;background:rgba(242,237,226,.18);cursor:pointer;padding:0} +.flow-dots button.on{background:var(--accent)} +.flow-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} +.flowcol .fchip{display:inline-block;font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em; + padding:2px 8px;border-radius:999px;margin-bottom:4px} +.flowcol.cpu .fchip{background:rgba(224,138,76,.18);color:var(--cpu)} +.flowcol.gpu .fchip{background:rgba(88,176,166,.18);color:var(--gpu)} +.flowcol.dpu .fchip{background:rgba(122,160,216,.18);color:var(--dpu)} +.flowcol .fstage{font-size:.84rem;font-weight:700} +.flowcol .fcap{margin:2px 0 0;font-size:.78rem;color:var(--muted);line-height:1.45} /* gl fallback */ #gl-fallback{display:none;position:absolute;inset:0;z-index:30;align-items:center;justify-content:center; text-align:center;padding:40px;color:var(--muted)} @@ -153,6 +195,29 @@ .prov li{margin:5px 0} footer.site{padding:34px 0 44px;color:var(--muted);font-size:.85rem;border-top:1px solid var(--line)} footer.site a{color:var(--accent);text-decoration:none} +/* ============ scale section: individual vs scaled ============ */ +#scale-sec .lede{color:var(--muted);margin:0 0 18px;max-width:760px} +#scale-pills{margin-bottom:18px;flex-wrap:wrap;width:fit-content;max-width:100%} +.scale-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:18px;align-items:stretch} +@media(max-width:900px){.scale-grid{grid-template-columns:1fr}} +.scale-stage{position:relative;background:var(--bg2);border:1px solid var(--line); + border-radius:var(--radius);overflow:hidden;min-height:380px} +#scale-scene{display:block;width:100%;height:440px} +@media(max-width:700px){#scale-scene{height:320px}.scale-stage{min-height:300px}} +.scale-legend{position:absolute;left:12px;bottom:10px;display:flex;gap:8px;flex-wrap:wrap; + background:rgba(20,17,13,.78);border:1px solid var(--line);border-radius:10px;padding:7px 10px} +.scale-legend span{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;color:var(--muted)} +.scale-legend i{width:10px;height:10px;border-radius:50%;display:inline-block} +.scale-cap{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px} +.scale-cap h3{margin:0 0 8px;font-size:1.25rem} +.scale-cap .why{margin:0 0 14px;color:#d8d2c6;font-size:.95rem;line-height:1.55} +.scale-stats{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px} +.scale-stats span{font-size:.72rem;border:1px solid var(--line);border-radius:999px; + padding:4px 11px;color:var(--muted);background:rgba(255,255,255,.02)} +.scale-contrast{margin:0;padding-top:12px;border-top:1px solid var(--line); + font-size:.85rem;color:var(--muted);line-height:1.55} +.scale-contrast b{color:var(--accent);font-weight:600} +#scale-fallback{display:none;padding:40px 20px;text-align:center;color:var(--muted)} @media(max-width:700px){ .stage-hero{min-height:560px} .ovl-title{top:8px;left:12px;right:12px;max-width:none} @@ -166,6 +231,8 @@ .seg .cap{display:none} .pill{padding:4px 10px;font-size:.72rem} #pin{right:12px;left:12px;width:auto;bottom:178px;max-height:38%;overflow:auto} + .flow-grid{grid-template-columns:repeat(3,minmax(210px,1fr));overflow-x:auto;padding-bottom:2px} + #flowbar{padding:8px 12px 10px} .ovl-dock{padding:16px 12px 8px} .hint{display:none} } @@ -209,9 +276,43 @@
Scale
+The same three chips, wired four ways. Watch the links change as you zoom out — and notice the moment the network stops being plumbing and becomes the computer.
+WebGL isn't available, so the scale diagram can't render.
The captions still explain each topology.
AMD EPYC 9654 “Genoa”
NVIDIA H100 SXM5 “GH100”
NVIDIA BlueField-3
AMD EPYC 9654 “Genoa”
NVIDIA H100 SXM5 “GH100”
NVIDIA BlueField-3
The same seven component classes, one row each. The pattern: every chip spends its transistor budget on the thing its job demands most.
| Component class | CPU — EPYC 9654 | GPU — H100 | DPU — BlueField-3 |
|---|---|---|---|
| Component class | CPU — EPYC 9654 | GPU — H100 | DPU — BlueField-3 |
| ⚙ Compute cores | -96× Zen 4general-purpose, branchy code | -132 SMs · 16,896 CUDAmassively parallel math | -16× Arm A78 + 16 DPAcontrol plane + packet I/O | 96× Zen 4general-purpose, branchy code | +132 SMs · 16,896 CUDAmassively parallel math | +16× Arm A78 + 16 DPAcontrol plane + packet I/O |
| 🗄 Cache hierarchy | -96 MB L2 + 384 MB L3hide DRAM latency for random access | -50 MB shared L2rendezvous for 132 SMs, streaming data | -modest L2/L3 on meshpackets stream through, not cached | 96 MB L2 + 384 MB L3hide DRAM latency for random access | +50 MB shared L2rendezvous for 132 SMs, streaming data | +modest L2/L3 on meshpackets stream through, not cached |
| 🧠 Memory system | -12-ch DDR5, 461 GB/shuge capacity (TBs), moderate speed | -5× HBM3, 3.35 TB/sbandwidth at all costs; 80 GB is enough | -1 DDR5 ctrl, 16–32 GBjust a control plane; packets bypass RAM | 12-ch DDR5, 461 GB/shuge capacity (TBs), moderate speed | +5× HBM3, 3.35 TB/sbandwidth at all costs; 80 GB is enough | +1 DDR5 ctrl, 16–32 GBjust a control plane; packets bypass RAM |
| 🔗 Interconnect | -Infinity Fabric via sIODglue 12 chiplets into one CPU | -CoWoS interposer + NVLink 900 GB/sfeed SMs; scale to 256 GPUs | -PCIe Gen5 switch (32 lanes)own devices on the bus, bypass host | Infinity Fabric via sIODglue 12 chiplets into one CPU | +CoWoS interposer + NVLink 900 GB/sfeed SMs; scale to 256 GPUs | +PCIe Gen5 switch (32 lanes)own devices on the bus, bypass host |
| 🌐 Network I/O | -— none on diethat's the DPU's job | -— none on dieNVLink is GPU-to-GPU, not network | -ConnectX-7 · 400 GbEthe whole point of the chip | — none on diethat's the DPU's job | +— none on dieNVLink is GPU-to-GPU, not network | +ConnectX-7 · 400 GbEthe whole point of the chip |
| 🚀 Accelerators | -AVX-512 in-corevector math, no extra blocks | -528 4th-gen Tensor Coresthe chip IS the accelerator | -crypto · RegEx · NVMe-oFinfrastructure tax, in fixed logic | AVX-512 in-corevector math, no extra blocks | +528 4th-gen Tensor Coresthe chip IS the accelerator | +crypto · RegEx · NVMe-oFinfrastructure tax, in fixed logic |
| 📦 Package | -LGA-6096, socketedfield-replaceable server CPU | -SXM5 mezzanine, 700 Wpower + NVLink no slot can carry | -BGA card, air-cooledcheap, permanent, one per server | LGA-6096, socketedfield-replaceable server CPU | +SXM5 mezzanine, 700 Wpower + NVLink no slot can carry | +BGA card, air-cooledcheap, permanent, one per server |