| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>🧠 Transformer Parameter Calculator</title> |
| |
| |
| <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script> |
| <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script> |
| |
| |
| <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> |
| |
| |
| <link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=IBM+Plex+Mono:wght@400;500;700&display=swap" rel="stylesheet"> |
| |
| <style> |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| body { |
| margin: 0; |
| padding: 0; |
| overflow-x: hidden; |
| } |
| |
| #root { |
| width: 100%; |
| min-height: 100vh; |
| } |
| |
| |
| input[type=range] { |
| -webkit-appearance: none; |
| background: #162030 !important; |
| height: 3px !important; |
| border-radius: 2px; |
| } |
| |
| input[type=range]::-webkit-slider-thumb { |
| -webkit-appearance: none; |
| width: 14px; |
| height: 14px; |
| border-radius: 50%; |
| background: #c084fc; |
| box-shadow: 0 0 6px #c084fc66; |
| cursor: pointer; |
| } |
| |
| input[type=range]::-moz-range-thumb { |
| width: 14px; |
| height: 14px; |
| border: none; |
| border-radius: 50%; |
| background: #c084fc; |
| box-shadow: 0 0 6px #c084fc66; |
| cursor: pointer; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="root"></div> |
| |
| <script type="text/babel"> |
| const { useState, useEffect, useRef } = React; |
| |
| /* ════════════════════════════════════════════ |
| CALC ENGINE — pure general Transformer |
| ════════════════════════════════════════════ */ |
| function calcAll({ vocab_size: V, embedding_dim: d, num_layers: L, intermediate_size: ff, num_heads: H }) { |
| const token_emb = V * d; |
| const pos_emb = 1024 * d; |
| const embedding_total = token_emb + pos_emb; |
| |
| const attention = 4 * (d * d + d); |
| const fc1 = d * ff + ff; |
| const fc2 = ff * d + d; |
| const feedforward = fc1 + fc2; |
| const layernorm = 2 * (2 * d); |
| const per_block = attention + feedforward + layernorm; |
| |
| const all_layers = L * per_block; |
| const final_ln = 2 * d; |
| const lm_head_untied = V * d; |
| |
| const total_tied = embedding_total + all_layers + final_ln; |
| const total_untied = total_tied + lm_head_untied; |
| |
| return { token_emb, pos_emb, embedding_total, attention, fc1, fc2, feedforward, layernorm, per_block, all_layers, final_ln, lm_head_untied, total_tied, total_untied, d, ff, L, V, H }; |
| } |
| |
| /* ════════════════════════════════════════════ |
| ANIMATED COUNTER |
| ════════════════════════════════════════════ */ |
| function useAnim(target) { |
| const [v, setV] = useState(target); |
| const cur = useRef(target); |
| const raf = useRef(null); |
| useEffect(() => { |
| const go = () => { |
| const diff = target - cur.current; |
| if (Math.abs(diff) < 1) { cur.current = target; setV(target); return; } |
| cur.current += diff * 0.14; |
| setV(Math.round(cur.current)); |
| raf.current = requestAnimationFrame(go); |
| }; |
| raf.current = requestAnimationFrame(go); |
| return () => cancelAnimationFrame(raf.current); |
| }, [target]); |
| return v; |
| } |
| |
| /* ── helpers ── */ |
| const fmt = n => n.toLocaleString(); |
| const fmtM = n => (n / 1e6).toFixed(2) + "M"; |
| |
| /* ── palette ── */ |
| const P = { emb:"#38bdf8", attn:"#c084fc", ff:"#fb923c", ln:"#34d399", head:"#fb7185", bg:"#08101a", card:"#0e1825", border:"#162030" }; |
| |
| /* ════════════════════════════════════════════ |
| SLIDER |
| ════════════════════════════════════════════ */ |
| function Slider({ label, value, min, max, step, onChange }) { |
| return ( |
| <div style={{ display:"flex", flexDirection:"column", gap:4 }}> |
| <div style={{ display:"flex", justifyContent:"space-between" }}> |
| <span style={{ color:"#7a8fa3", fontSize:11, fontFamily:"'IBM Plex Mono',monospace" }}>{label}</span> |
| <span style={{ color:"#e2e8f0", fontSize:12, fontWeight:700, fontFamily:"'IBM Plex Mono',monospace" }}>{fmt(value)}</span> |
| </div> |
| <input type="range" min={min} max={max} step={step} value={value} onChange={e => onChange(+e.target.value)} |
| style={{ width:"100%", accentColor:"#c084fc", height:3, cursor:"pointer", outline:"none" }} /> |
| </div> |
| ); |
| } |
| |
| /* ════════════════════════════════════════════ |
| EXPANDABLE SECTION |
| ════════════════════════════════════════════ */ |
| function Section({ color, icon, title, params, total, open, onToggle, children }) { |
| const barW = useAnim(Math.max((params / total) * 100, 0.8)); |
| return ( |
| <div style={{ borderRadius:10, border:`1px solid ${open ? color+"40" : P.border}`, background: open?"#0b1520":P.card, overflow:"hidden", boxShadow: open?`0 2px 20px ${color}15`:"none", transition:"all .25s" }}> |
| <div onClick={onToggle} style={{ display:"flex", alignItems:"center", padding:"10px 14px", cursor:"pointer", userSelect:"none", gap:10 }}> |
| <span style={{ fontSize:17 }}>{icon}</span> |
| <div style={{ flex:1, minWidth:0 }}> |
| <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:5 }}> |
| <span style={{ color:"#e2e8f0", fontSize:13, fontWeight:600, fontFamily:"'Syne',sans-serif" }}>{title}</span> |
| <span style={{ color, fontSize:12, fontWeight:700, fontFamily:"'IBM Plex Mono',monospace" }}>{fmtM(params)}</span> |
| </div> |
| <div style={{ height:4, borderRadius:2, background:"#162030", overflow:"hidden" }}> |
| <div style={{ width:`${barW}%`, height:"100%", borderRadius:2, background:`linear-gradient(90deg,${color},${color}99)`, boxShadow:`0 0 5px ${color}55`, transition:"width .45s cubic-bezier(.4,0,.2,1)" }}/> |
| </div> |
| </div> |
| <span style={{ color:"#3a5068", fontSize:9, transition:"transform .2s", transform: open?"rotate(90deg)":"rotate(0)" }}>▶</span> |
| </div> |
| {open && <div style={{ borderTop:`1px solid ${color}18`, padding:"10px 14px 13px", background:"#070e18" }}>{children}</div>} |
| </div> |
| ); |
| } |
| |
| /* ── row inside expanded ── */ |
| function Row({ label, dim, value, color }) { |
| return ( |
| <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", padding:"2.5px 0" }}> |
| <span style={{ color:"#94aab8", fontSize:11.5, fontFamily:"'IBM Plex Mono',monospace" }}>{label}</span> |
| <span style={{ display:"flex", gap:10, alignItems:"center" }}> |
| {dim && <span style={{ color:"#3a5068", fontSize:10, fontFamily:"'IBM Plex Mono',monospace" }}>{dim}</span>} |
| <span style={{ color, fontSize:11.5, fontWeight:700, fontFamily:"'IBM Plex Mono',monospace" }}>{fmtM(value)}</span> |
| </span> |
| </div> |
| ); |
| } |
| |
| const Divider = () => <div style={{ borderTop:"1px solid #162030", margin:"6px 0" }}/>; |
| |
| /* ════════════════════════════════════════════ |
| APP ROOT |
| ════════════════════════════════════════════ */ |
| function App() { |
| const [cfg, setCfg] = useState({ vocab_size:50259, embedding_dim:768, num_layers:12, intermediate_size:3072, num_heads:12 }); |
| const [tied, setTied] = useState(true); |
| const [open, setOpen] = useState({ emb:true, attn:false, ff:false, ln:false }); |
| |
| const c = calcAll(cfg); |
| const total = tied ? c.total_tied : c.total_untied; |
| const animTotal = useAnim(total); |
| |
| const set = k => v => setCfg(p=>({...p,[k]:v})); |
| const tog = k => () => setOpen(p=>({...p,[k]:!p[k]})); |
| |
| const memFp32 = ((total*4)/1e6).toFixed(1); |
| const memFp16 = ((total*2)/1e6).toFixed(1); |
| const memTrain = ((total*4*4)/1e9).toFixed(2); |
| |
| const segments = [ |
| { label:"Embedding", val:c.embedding_total, color:P.emb }, |
| { label:`Layers ×${c.L}`, val:c.all_layers, color:P.attn }, |
| { label:"Final LN", val:c.final_ln, color:P.ln }, |
| ...(!tied ? [{ label:"LM Head", val:c.lm_head_untied, color:P.head }] : []), |
| ]; |
| |
| return ( |
| <div style={{ minHeight:"100vh", background:P.bg, color:"#e2e8f0", fontFamily:"'Syne',sans-serif", padding:"24px 14px 40px", backgroundImage:"radial-gradient(ellipse at 15% 80%,#38bdf808 0%,transparent 55%),radial-gradient(ellipse at 85% 10%,#c084fc06 0%,transparent 55%)" }}> |
| <div style={{ maxWidth:520, margin:"0 auto" }}> |
| |
| {/* TITLE */} |
| <h1 style={{ textAlign:"center", fontSize:22, fontWeight:800, margin:"0 0 4px", letterSpacing:"-0.02em" }}> |
| 🧠 Transformer <span style={{ color:"#c084fc" }}>Parameter</span> Calculator |
| </h1> |
| <p style={{ textAlign:"center", color:"#3a5068", fontSize:11, margin:"0 0 22px", fontFamily:"'IBM Plex Mono',monospace" }}> |
| Slide → watch every layer recalculate live |
| </p> |
| |
| {/* BIG TOTAL */} |
| <div style={{ borderRadius:16, border:"1px solid #162030", background:"linear-gradient(145deg,#0e1825,#0a1420)", padding:"18px 20px", textAlign:"center", marginBottom:18, boxShadow:"0 4px 28px #c084fc0e, inset 0 1px 0 #1e2d3d" }}> |
| <div style={{ color:"#3a5068", fontSize:10, fontFamily:"'IBM Plex Mono',monospace", letterSpacing:"0.12em", textTransform:"uppercase", marginBottom:2 }}>Total Parameters</div> |
| <div style={{ fontSize:32, fontWeight:800, letterSpacing:"-0.02em", color:"#f1f5f9" }}>{fmt(animTotal)}</div> |
| <div style={{ color:"#c084fc", fontSize:13, fontWeight:700, fontFamily:"'IBM Plex Mono',monospace", marginTop:1 }}>≈ {fmtM(animTotal)}</div> |
| <div style={{ display:"flex", justifyContent:"center", gap:8, marginTop:12, flexWrap:"wrap" }}> |
| {[["FP32",memFp32+" MB","#38bdf8"],["FP16",memFp16+" MB","#34d399"],["Train","~"+memTrain+" GB","#fb923c"]].map(([l,v,col])=>( |
| <div key={l} style={{ background:"#08101a", borderRadius:7, padding:"3px 11px", border:`1px solid ${col}1e` }}> |
| <span style={{ color:"#3a5068", fontSize:9.5, fontFamily:"'IBM Plex Mono',monospace" }}>{l} </span> |
| <span style={{ color:col, fontSize:11, fontWeight:700, fontFamily:"'IBM Plex Mono',monospace" }}>{v}</span> |
| </div> |
| ))} |
| </div> |
| </div> |
| |
| {/* SLIDERS */} |
| <div style={{ borderRadius:12, border:"1px solid #162030", background:P.card, padding:"14px 16px", marginBottom:18, display:"flex", flexDirection:"column", gap:13 }}> |
| <div style={{ color:"#3a5068", fontSize:9.5, fontFamily:"'IBM Plex Mono',monospace", letterSpacing:"0.1em", textTransform:"uppercase" }}>⚙️ Model Config</div> |
| <Slider label="vocab_size" value={cfg.vocab_size} min={1000} max={100000} step={1000} onChange={set("vocab_size")} /> |
| <Slider label="embedding_dim (d)" value={cfg.embedding_dim} min={64} max={4096} step={64} onChange={set("embedding_dim")} /> |
| <Slider label="num_layers (L)" value={cfg.num_layers} min={1} max={48} step={1} onChange={set("num_layers")} /> |
| <Slider label="intermediate_size" value={cfg.intermediate_size} min={128} max={16384} step={128} onChange={set("intermediate_size")} /> |
| <Slider label="num_heads (H)" value={cfg.num_heads} min={1} max={64} step={1} onChange={set("num_heads")} /> |
| {/* tied toggle */} |
| <div style={{ display:"flex", alignItems:"center", gap:8, paddingTop:5, borderTop:"1px solid #162030", marginTop:2 }}> |
| <span style={{ color:"#7a8fa3", fontSize:11, fontFamily:"'IBM Plex Mono',monospace" }}>LM Head:</span> |
| {[["Tied",tied,()=>setTied(true)],["Untied",!tied,()=>setTied(false)]].map(([lbl,on,fn])=>( |
| <button key={lbl} onClick={fn} style={{ background: on?"#c084fc22":"#162030", border:`1px solid ${on?"#c084fc55":"#162030"}`, color: on?"#c084fc":"#7a8fa3", borderRadius:20, padding:"4px 14px", fontSize:11, fontFamily:"'IBM Plex Mono',monospace", cursor:"pointer", transition:"all .2s" }}> |
| {lbl}{on?" ✓":""} |
| </button> |
| ))} |
| </div> |
| </div> |
| |
| {/* LAYER BREAKDOWN */} |
| <div style={{ color:"#3a5068", fontSize:9.5, fontFamily:"'IBM Plex Mono',monospace", letterSpacing:"0.1em", textTransform:"uppercase", marginBottom:8 }}>📊 Layer Breakdown</div> |
| <div style={{ display:"flex", flexDirection:"column", gap:7 }}> |
| |
| {/* EMBEDDING */} |
| <Section color={P.emb} icon="🪙" title="Embedding" params={c.embedding_total} total={total} open={open.emb} onToggle={tog("emb")}> |
| <Row label="Token Emb" dim={`[${fmt(cfg.vocab_size)} × ${cfg.embedding_dim}]`} value={c.token_emb} color={P.emb} /> |
| <Row label="Position Emb" dim={`[1024 × ${cfg.embedding_dim}]`} value={c.pos_emb} color={P.emb} /> |
| <Divider/> |
| <Row label="Total Embedding" value={c.embedding_total} color={P.emb} /> |
| <div style={{ marginTop:7, padding:"5px 9px", borderRadius:6, background:"#0a1a24", border:"1px solid #162030" }}> |
| <span style={{ color:"#3a5068", fontSize:10.5, fontFamily:"'IBM Plex Mono',monospace" }}> |
| Each of {fmt(cfg.vocab_size)} tokens → {cfg.embedding_dim}-dim vector<br/> |
| Position emb: 1024 (max seq_len) × {cfg.embedding_dim} |
| </span> |
| </div> |
| </Section> |
| |
| {/* ATTENTION */} |
| <Section color={P.attn} icon="🔍" title="Multi-Head Attention (per block)" params={c.attention} total={total} open={open.attn} onToggle={tog("attn")}> |
| {["Q (Query)","K (Key)","V (Value)","Out Proj"].map(name=>( |
| <Row key={name} label={name} dim={`[${cfg.embedding_dim}×${cfg.embedding_dim}] + bias`} value={cfg.embedding_dim*cfg.embedding_dim+cfg.embedding_dim} color={P.attn} /> |
| ))} |
| <Divider/> |
| <span style={{ color:"#7a8fa3", fontSize:10.5, fontFamily:"'IBM Plex Mono',monospace" }}> |
| <span style={{ color:"#c084fc" }}>4 × (d² + d)</span> = 4 × ({cfg.embedding_dim}² + {cfg.embedding_dim}) = <strong style={{ color:P.attn }}>{fmtM(c.attention)}</strong> |
| </span> |
| <div style={{ marginTop:6, padding:"5px 9px", borderRadius:6, background:"#14101a", border:"1px solid #162030" }}> |
| <span style={{ color:"#3a5068", fontSize:10.5, fontFamily:"'IBM Plex Mono',monospace" }}> |
| {cfg.num_heads} heads → head_dim = {cfg.embedding_dim}/{cfg.num_heads} = {Math.floor(cfg.embedding_dim/cfg.num_heads)}<br/> |
| Param count stays the same — only head_dim changes! |
| </span> |
| </div> |
| </Section> |
| |
| {/* FFN */} |
| <Section color={P.ff} icon="⚡" title="Feed Forward Network (per block)" params={c.feedforward} total={total} open={open.ff} onToggle={tog("ff")}> |
| <Row label="FC1 (expand)" dim={`[${cfg.embedding_dim}×${cfg.intermediate_size}]+bias`} value={c.fc1} color={P.ff} /> |
| <Row label="FC2 (compress)" dim={`[${cfg.intermediate_size}×${cfg.embedding_dim}]+bias`} value={c.fc2} color={P.ff} /> |
| <Divider/> |
| <span style={{ color:"#7a8fa3", fontSize:10.5, fontFamily:"'IBM Plex Mono',monospace" }}> |
| <span style={{ color:"#fb923c" }}>(d×ff + ff) + (ff×d + d)</span> = <strong style={{ color:P.ff }}>{fmtM(c.feedforward)}</strong> |
| </span> |
| <div style={{ marginTop:6, padding:"5px 9px", borderRadius:6, background:"#1a1408", border:"1px solid #162030" }}> |
| <span style={{ color:"#3a5068", fontSize:10.5, fontFamily:"'IBM Plex Mono',monospace" }}> |
| FC1: {cfg.embedding_dim} → {cfg.intermediate_size} (typically 4×d)<br/> |
| FC2: {cfg.intermediate_size} → {cfg.embedding_dim} | ReLU/GELU in between |
| </span> |
| </div> |
| </Section> |
| |
| {/* LAYERNORM */} |
| <Section color={P.ln} icon="📐" title="Layer Norm ×2 (per block)" params={c.layernorm} total={total} open={open.ln} onToggle={tog("ln")}> |
| <Row label="LN1 (before Attn)" dim={`γ[${cfg.embedding_dim}] + β[${cfg.embedding_dim}]`} value={2*cfg.embedding_dim} color={P.ln} /> |
| <Row label="LN2 (before FFN)" dim={`γ[${cfg.embedding_dim}] + β[${cfg.embedding_dim}]`} value={2*cfg.embedding_dim} color={P.ln} /> |
| <Divider/> |
| <span style={{ color:"#7a8fa3", fontSize:10.5, fontFamily:"'IBM Plex Mono',monospace" }}> |
| <span style={{ color:"#34d399" }}>2 × (d + d)</span> = 2 × 2 × {cfg.embedding_dim} = <strong style={{ color:P.ln }}>{fmt(c.layernorm)}</strong> |
| </span> |
| </Section> |
| |
| {/* PER BLOCK */} |
| <div style={{ borderRadius:9, border:"1px dashed #253545", background:"#0a1420", padding:"9px 14px", display:"flex", justifyContent:"space-between", alignItems:"center" }}> |
| <span style={{ color:"#94aab8", fontSize:12, fontWeight:600, fontFamily:"'Syne',sans-serif" }}>📦 1 Transformer Block</span> |
| <span style={{ color:"#e2e8f0", fontSize:13, fontWeight:700, fontFamily:"'IBM Plex Mono',monospace" }}>{fmtM(c.per_block)}</span> |
| </div> |
| |
| {/* ALL LAYERS */} |
| <div style={{ borderRadius:9, border:"1px solid #1e2d3d", background:"#0b1520", padding:"9px 14px", display:"flex", justifyContent:"space-between", alignItems:"center" }}> |
| <span style={{ color:"#94aab8", fontSize:12, fontWeight:600, fontFamily:"'Syne',sans-serif" }}>🏗️ All Layers × {cfg.num_layers}</span> |
| <span style={{ color:P.attn, fontSize:13, fontWeight:700, fontFamily:"'IBM Plex Mono',monospace" }}>{fmtM(c.all_layers)}</span> |
| </div> |
| |
| {/* FINAL LN */} |
| <div style={{ borderRadius:9, border:"1px solid #162030", background:P.card, padding:"9px 14px", display:"flex", justifyContent:"space-between", alignItems:"center" }}> |
| <span style={{ color:"#94aab8", fontSize:12, fontFamily:"'Syne',sans-serif", fontWeight:600 }}>📏 Final LayerNorm</span> |
| <span style={{ color:P.ln, fontSize:12, fontWeight:700, fontFamily:"'IBM Plex Mono',monospace" }}>{fmt(c.final_ln)}</span> |
| </div> |
| |
| {/* LM HEAD */} |
| <div style={{ borderRadius:9, border:"1px solid #162030", background:P.card, padding:"9px 14px", display:"flex", justifyContent:"space-between", alignItems:"center" }}> |
| <span style={{ color:"#94aab8", fontSize:12, fontFamily:"'Syne',sans-serif", fontWeight:600 }}>🔗 LM Head {tied?"(tied)":"(untied)"}</span> |
| <span style={{ color: tied?"#3a5068":P.head, fontSize:12, fontWeight:700, fontFamily:"'IBM Plex Mono',monospace" }}> |
| {tied ? "0 (shared w/ Emb)" : fmtM(c.lm_head_untied)} |
| </span> |
| </div> |
| </div> |
| |
| {/* DISTRIBUTION BAR */} |
| <div style={{ marginTop:22 }}> |
| <div style={{ color:"#3a5068", fontSize:9.5, fontFamily:"'IBM Plex Mono',monospace", letterSpacing:"0.1em", textTransform:"uppercase", marginBottom:8 }}>📈 Distribution</div> |
| <div style={{ borderRadius:13, border:"1px solid #162030", background:P.card, padding:"16px 16px 14px" }}> |
| <div style={{ display:"flex", height:20, borderRadius:10, overflow:"hidden", marginBottom:14 }}> |
| {segments.map((s,i)=>{ |
| const pct=(s.val/total)*100; |
| return pct>0.5?( |
| <div key={i} style={{ width:`${pct}%`, background:s.color, display:"flex", alignItems:"center", justifyContent:"center", transition:"width .5s cubic-bezier(.4,0,.2,1)" }}> |
| {pct>6&&<span style={{ color:"#08101a", fontSize:9, fontWeight:700, fontFamily:"'IBM Plex Mono',monospace" }}>{s.label.split(" ")[0]}</span>} |
| </div> |
| ):null; |
| })} |
| </div> |
| <div style={{ display:"flex", flexWrap:"wrap", gap:"7px 16px" }}> |
| {segments.map((s,i)=>( |
| <div key={i} style={{ display:"flex", alignItems:"center", gap:6 }}> |
| <div style={{ width:10, height:10, borderRadius:3, background:s.color }}/> |
| <span style={{ color:"#7a8fa3", fontSize:10.5, fontFamily:"'IBM Plex Mono',monospace" }}>{s.label}</span> |
| <span style={{ color:s.color, fontSize:10.5, fontWeight:700, fontFamily:"'IBM Plex Mono',monospace" }}>{((s.val/total)*100).toFixed(1)}%</span> |
| </div> |
| ))} |
| </div> |
| </div> |
| </div> |
| |
| {/* FORMULA CHEATSHEET */} |
| <div style={{ marginTop:18 }}> |
| <div style={{ borderRadius:12, border:"1px solid #162030", background:"#070e18", padding:"14px 16px" }}> |
| <div style={{ color:"#3a5068", fontSize:9.5, fontFamily:"'IBM Plex Mono',monospace", letterSpacing:"0.1em", textTransform:"uppercase", marginBottom:8 }}>📝 Formula Cheatsheet</div> |
| {[ |
| ["Embedding", "V×d + seq×d", `${fmt(cfg.vocab_size)}×${cfg.embedding_dim} + 1024×${cfg.embedding_dim}`, P.emb], |
| ["Attention", "4 × (d² + d)", `4×(${cfg.embedding_dim}²+${cfg.embedding_dim})`, P.attn], |
| ["FFN", "(d×ff+ff)+(ff×d+d)", `(${cfg.embedding_dim}×${cfg.intermediate_size}+…)+(…)`, P.ff], |
| ["LayerNorm", "2 × 2d", `2×2×${cfg.embedding_dim}`, P.ln], |
| ["Per Block", "Attn + FFN + LN", fmtM(c.per_block), "#e2e8f0"], |
| ["Total", "Emb + L×Block + FinalLN", fmtM(total), "#c084fc"], |
| ].map(([name,formula,expanded,col],i)=>( |
| <div key={i} style={{ display:"flex", alignItems:"flex-start", gap:8, padding:"4px 0", borderTop: i?"1px solid #162030":"none" }}> |
| <span style={{ color:col, fontSize:11, fontWeight:700, fontFamily:"'IBM Plex Mono',monospace", minWidth:78 }}>{name}</span> |
| <span style={{ color:"#7a8fa3", fontSize:10.5, fontFamily:"'IBM Plex Mono',monospace", flex:1 }}>{formula}</span> |
| <span style={{ color:"#3a5068", fontSize:10, fontFamily:"'IBM Plex Mono',monospace", textAlign:"right", maxWidth:150 }}>{expanded}</span> |
| </div> |
| ))} |
| </div> |
| </div> |
| |
| {/* FOOTER */} |
| <p style={{ textAlign:"center", color:"#253545", fontSize:10, fontFamily:"'IBM Plex Mono',monospace", marginTop:22 }}> |
| seq_len = 1024 assumed • Train mem ≈ 4× model (params + grads + Adam m & v) |
| </p> |
| </div> |
| </div> |
| ); |
| } |
| |
| // Render the app |
| const root = ReactDOM.createRoot(document.getElementById('root')); |
| root.render(<App />); |
| </script> |
| </body> |
| </html> |
