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 @@

CPU · GPU · DPU, taken apart

+
+ CPU +
+ + + + + + +
+
+
+ GPU +
+ + + + + +
+
+
+ DPU +
+ + + + + +
+
+
+ +
@@ -224,8 +325,27 @@

+ +
+
+
+ Step 1 of 4 + +
+
+
CPU

+
GPU

+
DPU

+
+
@@ -251,6 +371,38 @@

+ +
+
+

Scale

+

From one box to a data center

+

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.

+
+ +
+
+
+
@@ -258,9 +410,9 @@

Compare

What it is

-

CPU

AMD EPYC 9654 “Genoa”

-

GPU

NVIDIA H100 SXM5 “GH100”

-

DPU

NVIDIA BlueField-3

+

CPU

AMD EPYC 9654 “Genoa”

+

GPU

NVIDIA H100 SXM5 “GH100”

+

DPU

NVIDIA BlueField-3

@@ -272,36 +424,36 @@

At a glance

The same seven component classes, one row each. The pattern: every chip spends its transistor budget on the thing its job demands most.

- + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + +
Component classCPU — EPYC 9654GPU — H100DPU — BlueField-3
Component classCPU — EPYC 9654GPU — H100DPU — BlueField-3
⚙ Compute cores96× Zen 4general-purpose, branchy code132 SMs · 16,896 CUDAmassively parallel math16× Arm A78 + 16 DPAcontrol plane + packet I/O
96× Zen 4general-purpose, branchy code132 SMs · 16,896 CUDAmassively parallel math16× Arm A78 + 16 DPAcontrol plane + packet I/O
🗄 Cache hierarchy96 MB L2 + 384 MB L3hide DRAM latency for random access50 MB shared L2rendezvous for 132 SMs, streaming datamodest L2/L3 on meshpackets stream through, not cached
96 MB L2 + 384 MB L3hide DRAM latency for random access50 MB shared L2rendezvous for 132 SMs, streaming datamodest L2/L3 on meshpackets stream through, not cached
🧠 Memory system12-ch DDR5, 461 GB/shuge capacity (TBs), moderate speed5× HBM3, 3.35 TB/sbandwidth at all costs; 80 GB is enough1 DDR5 ctrl, 16–32 GBjust a control plane; packets bypass RAM
12-ch DDR5, 461 GB/shuge capacity (TBs), moderate speed5× HBM3, 3.35 TB/sbandwidth at all costs; 80 GB is enough1 DDR5 ctrl, 16–32 GBjust a control plane; packets bypass RAM
🔗 InterconnectInfinity Fabric via sIODglue 12 chiplets into one CPUCoWoS interposer + NVLink 900 GB/sfeed SMs; scale to 256 GPUsPCIe Gen5 switch (32 lanes)own devices on the bus, bypass host
Infinity Fabric via sIODglue 12 chiplets into one CPUCoWoS interposer + NVLink 900 GB/sfeed SMs; scale to 256 GPUsPCIe 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 networkConnectX-7 · 400 GbEthe whole point of the chip
— none on diethat's the DPU's job— none on dieNVLink is GPU-to-GPU, not networkConnectX-7 · 400 GbEthe whole point of the chip
🚀 AcceleratorsAVX-512 in-corevector math, no extra blocks528 4th-gen Tensor Coresthe chip IS the acceleratorcrypto · RegEx · NVMe-oFinfrastructure tax, in fixed logic
AVX-512 in-corevector math, no extra blocks528 4th-gen Tensor Coresthe chip IS the acceleratorcrypto · RegEx · NVMe-oFinfrastructure tax, in fixed logic
📦 PackageLGA-6096, socketedfield-replaceable server CPUSXM5 mezzanine, 700 Wpower + NVLink no slot can carryBGA card, air-cooledcheap, permanent, one per server
LGA-6096, socketedfield-replaceable server CPUSXM5 mezzanine, 700 Wpower + NVLink no slot can carryBGA card, air-cooledcheap, permanent, one per server
@@ -318,7 +470,20 @@

Provenance

  • AMD EPYC 9654 “Genoa” — 96C/192T Zen 4 (12 CCDs × 8 cores), 1 MB L2/core, 32 MB L3/CCD (384 MB), 5 nm CCDs + 6 nm 397 mm² sIOD, 12-ch DDR5-4800 (460.8 GB/s), 128× PCIe Gen5, SP5 LGA-6096, 360 W. TechPowerUp specs; CCD/CCX layout via Tom's Hardware.
  • NVIDIA H100 SXM5 “GH100” — full die 144 SMs (132 enabled), 128 CUDA + 4 Tensor cores/SM, 50 MB L2, 5 active HBM3 stacks of 6 on package, 5120-bit, 80 GB, ~3.35 TB/s, 80B transistors, 814 mm² TSMC 4N, 4th-gen NVLink 900 GB/s, 700 W. TechPowerUp specs; TweakTown; HWCooling (5-of-6 stacks).
  • NVIDIA BlueField-3 — 22B transistors, 16× Arm A78 v8.2 on coherent mesh, ConnectX-7 400 GbE/NDR, 4× crypto acceleration, 16 DPA packet cores, PCIe Gen5 switch, 1 DDR5 controller (16/32 GB on-card), inline IPsec/TLS, RegEx, NVMe-oF offload. NVIDIA technical blog; NVIDIA docs.
  • -
  • Exploded-stack geometry, pad counts, and internal block placement are estimates for illustration — vendors don't publish package CAD.
  • +
  • Exploded-stack geometry, pad counts, and internal block placement are estimates for illustration — vendors don't publish package CAD. Variant geometry (tile counts, die placement, V-Cache tiers) follows vendor block diagrams schematically, not to scale.
  • +
  • EPYC 9684X “Genoa-X” — 96C/192T, 12 CCDs, 96 MB L3/CCD (1,152 MB total) via 3D V-Cache stacking, same SP5 platform. AMD EPYC 9004X series product brief.
  • +
  • EPYC 9754 “Bergamo” — 128C/256T, 8× 16-core Zen 4c CCDs, 256 MB L3, 12-ch DDR5-4800 (460.8 GB/s), SP5. AMD EPYC 9004 series product brief.
  • +
  • Xeon 6980P “Granite Rapids” — 128C/256T, 504 MB L3, 3 compute tiles + 2 SoC tiles on EMIB, 12-ch DDR5-6400, 96× PCIe Gen5/CXL, LGA-7529, 500 W. Intel Xeon 6 product brief.
  • +
  • Apple M4 Max — up to 16 CPU cores, 40 GPU cores, 16-core Neural Engine, 128 GB unified LPDDR5X, 546 GB/s. Apple M4 Max tech specs.
  • +
  • Ryzen 9 9950X — 16C/32T Zen 5 (Granite Ridge), 4.3/5.7 GHz, 64 MB L3 + 16 MB L2, 2-ch DDR5, PCIe Gen5, 2-CU RDNA2 iGPU, AM5 LGA-1718, 170 W. TechPowerUp specs.
  • +
  • H100 NVL — paired PCIe cards joined by 3 NVLink bridges, 94 GB HBM3 per card (188 GB pooled), ~3.9 TB/s per card, 350–400 W per card. NVIDIA H100 NVL product brief.
  • +
  • B200 “Blackwell” — 2 dies, 8× HBM3E stacks, 192 GB, ~8 TB/s, 10 TB/s NV-HBI die link, NVLink 5 at 1.8 TB/s. NVIDIA Blackwell architecture brief.
  • +
  • RTX 4090 — AD102, 128 SMs / 16,384 CUDA, 24 GB GDDR6X on 384-bit (~1.01 TB/s), PCIe 4.0 ×16, 450 W. NVIDIA GeForce RTX 4090 specs; TechPowerUp GPU database.
  • +
  • Instinct MI300X — 8× 5 nm XCD chiplets + 4× 6 nm I/O dies, 8 HBM3 stacks, 192 GB, 5.3 TB/s, 256 MB Infinity Cache, 750 W OAM. Tom's Hardware; AMD Advancing AI keynote (PDF).
  • +
  • BlueField-2 — 8× Arm A72, ConnectX-6 Dx (up to 200 Gb/s), PCIe Gen4, fixed-function accelerators. NVIDIA BlueField-2 product brief.
  • +
  • Intel IPU E2100 “Mount Evans” — up to 16× Arm Neoverse N1, 32 MB system cache, 48 GB LPDDR4x, PCIe 4.0 ×16, 2× 200 GbE, P4-programmable pipeline. Intel IPU E2100 product brief.
  • +
  • Pensando Elba — 7 nm, 16× Arm A72, 144 P4 MPUs, 2× 200 GbE, PCIe Gen4, DDR5-5600. AMD Pensando Elba product brief.
  • +
  • Marvell OCTEON 10 — 5 nm, up to 24× Arm Neoverse N2 (Armv9 + SVE2), DDR5, PCIe Gen5, up to 400 GbE, integrated 1 Tb switch, inline AI. Marvell OCTEON 10 product brief.
  • @@ -334,12 +499,16 @@

    Provenance