Create index.html
Browse files- index.html +401 -0
index.html
ADDED
|
@@ -0,0 +1,401 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>🧠 Transformer Parameter Calculator</title>
|
| 7 |
+
|
| 8 |
+
<!-- React & ReactDOM from CDN -->
|
| 9 |
+
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
|
| 10 |
+
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
|
| 11 |
+
|
| 12 |
+
<!-- Babel Standalone for JSX transformation -->
|
| 13 |
+
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
|
| 14 |
+
|
| 15 |
+
<!-- Google Fonts -->
|
| 16 |
+
<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">
|
| 17 |
+
|
| 18 |
+
<style>
|
| 19 |
+
* {
|
| 20 |
+
margin: 0;
|
| 21 |
+
padding: 0;
|
| 22 |
+
box-sizing: border-box;
|
| 23 |
+
}
|
| 24 |
+
|
| 25 |
+
body {
|
| 26 |
+
margin: 0;
|
| 27 |
+
padding: 0;
|
| 28 |
+
overflow-x: hidden;
|
| 29 |
+
}
|
| 30 |
+
|
| 31 |
+
#root {
|
| 32 |
+
width: 100%;
|
| 33 |
+
min-height: 100vh;
|
| 34 |
+
}
|
| 35 |
+
|
| 36 |
+
/* Custom range input styling */
|
| 37 |
+
input[type=range] {
|
| 38 |
+
-webkit-appearance: none;
|
| 39 |
+
background: #162030 !important;
|
| 40 |
+
height: 3px !important;
|
| 41 |
+
border-radius: 2px;
|
| 42 |
+
}
|
| 43 |
+
|
| 44 |
+
input[type=range]::-webkit-slider-thumb {
|
| 45 |
+
-webkit-appearance: none;
|
| 46 |
+
width: 14px;
|
| 47 |
+
height: 14px;
|
| 48 |
+
border-radius: 50%;
|
| 49 |
+
background: #c084fc;
|
| 50 |
+
box-shadow: 0 0 6px #c084fc66;
|
| 51 |
+
cursor: pointer;
|
| 52 |
+
}
|
| 53 |
+
|
| 54 |
+
input[type=range]::-moz-range-thumb {
|
| 55 |
+
width: 14px;
|
| 56 |
+
height: 14px;
|
| 57 |
+
border: none;
|
| 58 |
+
border-radius: 50%;
|
| 59 |
+
background: #c084fc;
|
| 60 |
+
box-shadow: 0 0 6px #c084fc66;
|
| 61 |
+
cursor: pointer;
|
| 62 |
+
}
|
| 63 |
+
</style>
|
| 64 |
+
</head>
|
| 65 |
+
<body>
|
| 66 |
+
<div id="root"></div>
|
| 67 |
+
|
| 68 |
+
<script type="text/babel">
|
| 69 |
+
const { useState, useEffect, useRef } = React;
|
| 70 |
+
|
| 71 |
+
/* ════════════════════════════════════════════
|
| 72 |
+
CALC ENGINE — pure general Transformer
|
| 73 |
+
════════════════════════════════════════════ */
|
| 74 |
+
function calcAll({ vocab_size: V, embedding_dim: d, num_layers: L, intermediate_size: ff, num_heads: H }) {
|
| 75 |
+
const token_emb = V * d;
|
| 76 |
+
const pos_emb = 1024 * d;
|
| 77 |
+
const embedding_total = token_emb + pos_emb;
|
| 78 |
+
|
| 79 |
+
const attention = 4 * (d * d + d);
|
| 80 |
+
const fc1 = d * ff + ff;
|
| 81 |
+
const fc2 = ff * d + d;
|
| 82 |
+
const feedforward = fc1 + fc2;
|
| 83 |
+
const layernorm = 2 * (2 * d);
|
| 84 |
+
const per_block = attention + feedforward + layernorm;
|
| 85 |
+
|
| 86 |
+
const all_layers = L * per_block;
|
| 87 |
+
const final_ln = 2 * d;
|
| 88 |
+
const lm_head_untied = V * d;
|
| 89 |
+
|
| 90 |
+
const total_tied = embedding_total + all_layers + final_ln;
|
| 91 |
+
const total_untied = total_tied + lm_head_untied;
|
| 92 |
+
|
| 93 |
+
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 };
|
| 94 |
+
}
|
| 95 |
+
|
| 96 |
+
/* ════════════════════════════════════════════
|
| 97 |
+
ANIMATED COUNTER
|
| 98 |
+
════════════════════════════════════════════ */
|
| 99 |
+
function useAnim(target) {
|
| 100 |
+
const [v, setV] = useState(target);
|
| 101 |
+
const cur = useRef(target);
|
| 102 |
+
const raf = useRef(null);
|
| 103 |
+
useEffect(() => {
|
| 104 |
+
const go = () => {
|
| 105 |
+
const diff = target - cur.current;
|
| 106 |
+
if (Math.abs(diff) < 1) { cur.current = target; setV(target); return; }
|
| 107 |
+
cur.current += diff * 0.14;
|
| 108 |
+
setV(Math.round(cur.current));
|
| 109 |
+
raf.current = requestAnimationFrame(go);
|
| 110 |
+
};
|
| 111 |
+
raf.current = requestAnimationFrame(go);
|
| 112 |
+
return () => cancelAnimationFrame(raf.current);
|
| 113 |
+
}, [target]);
|
| 114 |
+
return v;
|
| 115 |
+
}
|
| 116 |
+
|
| 117 |
+
/* ── helpers ── */
|
| 118 |
+
const fmt = n => n.toLocaleString();
|
| 119 |
+
const fmtM = n => (n / 1e6).toFixed(2) + "M";
|
| 120 |
+
|
| 121 |
+
/* ── palette ── */
|
| 122 |
+
const P = { emb:"#38bdf8", attn:"#c084fc", ff:"#fb923c", ln:"#34d399", head:"#fb7185", bg:"#08101a", card:"#0e1825", border:"#162030" };
|
| 123 |
+
|
| 124 |
+
/* ════════════════════════════════════════════
|
| 125 |
+
SLIDER
|
| 126 |
+
════════════════════════════════════════════ */
|
| 127 |
+
function Slider({ label, value, min, max, step, onChange }) {
|
| 128 |
+
return (
|
| 129 |
+
<div style={{ display:"flex", flexDirection:"column", gap:4 }}>
|
| 130 |
+
<div style={{ display:"flex", justifyContent:"space-between" }}>
|
| 131 |
+
<span style={{ color:"#7a8fa3", fontSize:11, fontFamily:"'IBM Plex Mono',monospace" }}>{label}</span>
|
| 132 |
+
<span style={{ color:"#e2e8f0", fontSize:12, fontWeight:700, fontFamily:"'IBM Plex Mono',monospace" }}>{fmt(value)}</span>
|
| 133 |
+
</div>
|
| 134 |
+
<input type="range" min={min} max={max} step={step} value={value} onChange={e => onChange(+e.target.value)}
|
| 135 |
+
style={{ width:"100%", accentColor:"#c084fc", height:3, cursor:"pointer", outline:"none" }} />
|
| 136 |
+
</div>
|
| 137 |
+
);
|
| 138 |
+
}
|
| 139 |
+
|
| 140 |
+
/* ════════════════════════════════════════════
|
| 141 |
+
EXPANDABLE SECTION
|
| 142 |
+
════════════════════════════════════════════ */
|
| 143 |
+
function Section({ color, icon, title, params, total, open, onToggle, children }) {
|
| 144 |
+
const barW = useAnim(Math.max((params / total) * 100, 0.8));
|
| 145 |
+
return (
|
| 146 |
+
<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" }}>
|
| 147 |
+
<div onClick={onToggle} style={{ display:"flex", alignItems:"center", padding:"10px 14px", cursor:"pointer", userSelect:"none", gap:10 }}>
|
| 148 |
+
<span style={{ fontSize:17 }}>{icon}</span>
|
| 149 |
+
<div style={{ flex:1, minWidth:0 }}>
|
| 150 |
+
<div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:5 }}>
|
| 151 |
+
<span style={{ color:"#e2e8f0", fontSize:13, fontWeight:600, fontFamily:"'Syne',sans-serif" }}>{title}</span>
|
| 152 |
+
<span style={{ color, fontSize:12, fontWeight:700, fontFamily:"'IBM Plex Mono',monospace" }}>{fmtM(params)}</span>
|
| 153 |
+
</div>
|
| 154 |
+
<div style={{ height:4, borderRadius:2, background:"#162030", overflow:"hidden" }}>
|
| 155 |
+
<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)" }}/>
|
| 156 |
+
</div>
|
| 157 |
+
</div>
|
| 158 |
+
<span style={{ color:"#3a5068", fontSize:9, transition:"transform .2s", transform: open?"rotate(90deg)":"rotate(0)" }}>▶</span>
|
| 159 |
+
</div>
|
| 160 |
+
{open && <div style={{ borderTop:`1px solid ${color}18`, padding:"10px 14px 13px", background:"#070e18" }}>{children}</div>}
|
| 161 |
+
</div>
|
| 162 |
+
);
|
| 163 |
+
}
|
| 164 |
+
|
| 165 |
+
/* ── row inside expanded ── */
|
| 166 |
+
function Row({ label, dim, value, color }) {
|
| 167 |
+
return (
|
| 168 |
+
<div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", padding:"2.5px 0" }}>
|
| 169 |
+
<span style={{ color:"#94aab8", fontSize:11.5, fontFamily:"'IBM Plex Mono',monospace" }}>{label}</span>
|
| 170 |
+
<span style={{ display:"flex", gap:10, alignItems:"center" }}>
|
| 171 |
+
{dim && <span style={{ color:"#3a5068", fontSize:10, fontFamily:"'IBM Plex Mono',monospace" }}>{dim}</span>}
|
| 172 |
+
<span style={{ color, fontSize:11.5, fontWeight:700, fontFamily:"'IBM Plex Mono',monospace" }}>{fmtM(value)}</span>
|
| 173 |
+
</span>
|
| 174 |
+
</div>
|
| 175 |
+
);
|
| 176 |
+
}
|
| 177 |
+
|
| 178 |
+
const Divider = () => <div style={{ borderTop:"1px solid #162030", margin:"6px 0" }}/>;
|
| 179 |
+
|
| 180 |
+
/* ════════════════════════════════════════════
|
| 181 |
+
APP ROOT
|
| 182 |
+
════════════════════════════════════════════ */
|
| 183 |
+
function App() {
|
| 184 |
+
const [cfg, setCfg] = useState({ vocab_size:50259, embedding_dim:768, num_layers:12, intermediate_size:3072, num_heads:12 });
|
| 185 |
+
const [tied, setTied] = useState(true);
|
| 186 |
+
const [open, setOpen] = useState({ emb:true, attn:false, ff:false, ln:false });
|
| 187 |
+
|
| 188 |
+
const c = calcAll(cfg);
|
| 189 |
+
const total = tied ? c.total_tied : c.total_untied;
|
| 190 |
+
const animTotal = useAnim(total);
|
| 191 |
+
|
| 192 |
+
const set = k => v => setCfg(p=>({...p,[k]:v}));
|
| 193 |
+
const tog = k => () => setOpen(p=>({...p,[k]:!p[k]}));
|
| 194 |
+
|
| 195 |
+
const memFp32 = ((total*4)/1e6).toFixed(1);
|
| 196 |
+
const memFp16 = ((total*2)/1e6).toFixed(1);
|
| 197 |
+
const memTrain = ((total*4*4)/1e9).toFixed(2);
|
| 198 |
+
|
| 199 |
+
const segments = [
|
| 200 |
+
{ label:"Embedding", val:c.embedding_total, color:P.emb },
|
| 201 |
+
{ label:`Layers ×${c.L}`, val:c.all_layers, color:P.attn },
|
| 202 |
+
{ label:"Final LN", val:c.final_ln, color:P.ln },
|
| 203 |
+
...(!tied ? [{ label:"LM Head", val:c.lm_head_untied, color:P.head }] : []),
|
| 204 |
+
];
|
| 205 |
+
|
| 206 |
+
return (
|
| 207 |
+
<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%)" }}>
|
| 208 |
+
<div style={{ maxWidth:520, margin:"0 auto" }}>
|
| 209 |
+
|
| 210 |
+
{/* TITLE */}
|
| 211 |
+
<h1 style={{ textAlign:"center", fontSize:22, fontWeight:800, margin:"0 0 4px", letterSpacing:"-0.02em" }}>
|
| 212 |
+
🧠 Transformer <span style={{ color:"#c084fc" }}>Parameter</span> Calculator
|
| 213 |
+
</h1>
|
| 214 |
+
<p style={{ textAlign:"center", color:"#3a5068", fontSize:11, margin:"0 0 22px", fontFamily:"'IBM Plex Mono',monospace" }}>
|
| 215 |
+
Slide → watch every layer recalculate live
|
| 216 |
+
</p>
|
| 217 |
+
|
| 218 |
+
{/* BIG TOTAL */}
|
| 219 |
+
<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" }}>
|
| 220 |
+
<div style={{ color:"#3a5068", fontSize:10, fontFamily:"'IBM Plex Mono',monospace", letterSpacing:"0.12em", textTransform:"uppercase", marginBottom:2 }}>Total Parameters</div>
|
| 221 |
+
<div style={{ fontSize:32, fontWeight:800, letterSpacing:"-0.02em", color:"#f1f5f9" }}>{fmt(animTotal)}</div>
|
| 222 |
+
<div style={{ color:"#c084fc", fontSize:13, fontWeight:700, fontFamily:"'IBM Plex Mono',monospace", marginTop:1 }}>≈ {fmtM(animTotal)}</div>
|
| 223 |
+
<div style={{ display:"flex", justifyContent:"center", gap:8, marginTop:12, flexWrap:"wrap" }}>
|
| 224 |
+
{[["FP32",memFp32+" MB","#38bdf8"],["FP16",memFp16+" MB","#34d399"],["Train","~"+memTrain+" GB","#fb923c"]].map(([l,v,col])=>(
|
| 225 |
+
<div key={l} style={{ background:"#08101a", borderRadius:7, padding:"3px 11px", border:`1px solid ${col}1e` }}>
|
| 226 |
+
<span style={{ color:"#3a5068", fontSize:9.5, fontFamily:"'IBM Plex Mono',monospace" }}>{l} </span>
|
| 227 |
+
<span style={{ color:col, fontSize:11, fontWeight:700, fontFamily:"'IBM Plex Mono',monospace" }}>{v}</span>
|
| 228 |
+
</div>
|
| 229 |
+
))}
|
| 230 |
+
</div>
|
| 231 |
+
</div>
|
| 232 |
+
|
| 233 |
+
{/* SLIDERS */}
|
| 234 |
+
<div style={{ borderRadius:12, border:"1px solid #162030", background:P.card, padding:"14px 16px", marginBottom:18, display:"flex", flexDirection:"column", gap:13 }}>
|
| 235 |
+
<div style={{ color:"#3a5068", fontSize:9.5, fontFamily:"'IBM Plex Mono',monospace", letterSpacing:"0.1em", textTransform:"uppercase" }}>⚙️ Model Config</div>
|
| 236 |
+
<Slider label="vocab_size" value={cfg.vocab_size} min={1000} max={100000} step={1000} onChange={set("vocab_size")} />
|
| 237 |
+
<Slider label="embedding_dim (d)" value={cfg.embedding_dim} min={64} max={4096} step={64} onChange={set("embedding_dim")} />
|
| 238 |
+
<Slider label="num_layers (L)" value={cfg.num_layers} min={1} max={48} step={1} onChange={set("num_layers")} />
|
| 239 |
+
<Slider label="intermediate_size" value={cfg.intermediate_size} min={128} max={16384} step={128} onChange={set("intermediate_size")} />
|
| 240 |
+
<Slider label="num_heads (H)" value={cfg.num_heads} min={1} max={64} step={1} onChange={set("num_heads")} />
|
| 241 |
+
{/* tied toggle */}
|
| 242 |
+
<div style={{ display:"flex", alignItems:"center", gap:8, paddingTop:5, borderTop:"1px solid #162030", marginTop:2 }}>
|
| 243 |
+
<span style={{ color:"#7a8fa3", fontSize:11, fontFamily:"'IBM Plex Mono',monospace" }}>LM Head:</span>
|
| 244 |
+
{[["Tied",tied,()=>setTied(true)],["Untied",!tied,()=>setTied(false)]].map(([lbl,on,fn])=>(
|
| 245 |
+
<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" }}>
|
| 246 |
+
{lbl}{on?" ✓":""}
|
| 247 |
+
</button>
|
| 248 |
+
))}
|
| 249 |
+
</div>
|
| 250 |
+
</div>
|
| 251 |
+
|
| 252 |
+
{/* LAYER BREAKDOWN */}
|
| 253 |
+
<div style={{ color:"#3a5068", fontSize:9.5, fontFamily:"'IBM Plex Mono',monospace", letterSpacing:"0.1em", textTransform:"uppercase", marginBottom:8 }}>📊 Layer Breakdown</div>
|
| 254 |
+
<div style={{ display:"flex", flexDirection:"column", gap:7 }}>
|
| 255 |
+
|
| 256 |
+
{/* EMBEDDING */}
|
| 257 |
+
<Section color={P.emb} icon="🪙" title="Embedding" params={c.embedding_total} total={total} open={open.emb} onToggle={tog("emb")}>
|
| 258 |
+
<Row label="Token Emb" dim={`[${fmt(cfg.vocab_size)} × ${cfg.embedding_dim}]`} value={c.token_emb} color={P.emb} />
|
| 259 |
+
<Row label="Position Emb" dim={`[1024 × ${cfg.embedding_dim}]`} value={c.pos_emb} color={P.emb} />
|
| 260 |
+
<Divider/>
|
| 261 |
+
<Row label="Total Embedding" value={c.embedding_total} color={P.emb} />
|
| 262 |
+
<div style={{ marginTop:7, padding:"5px 9px", borderRadius:6, background:"#0a1a24", border:"1px solid #162030" }}>
|
| 263 |
+
<span style={{ color:"#3a5068", fontSize:10.5, fontFamily:"'IBM Plex Mono',monospace" }}>
|
| 264 |
+
Each of {fmt(cfg.vocab_size)} tokens → {cfg.embedding_dim}-dim vector<br/>
|
| 265 |
+
Position emb: 1024 (max seq_len) × {cfg.embedding_dim}
|
| 266 |
+
</span>
|
| 267 |
+
</div>
|
| 268 |
+
</Section>
|
| 269 |
+
|
| 270 |
+
{/* ATTENTION */}
|
| 271 |
+
<Section color={P.attn} icon="🔍" title="Multi-Head Attention (per block)" params={c.attention} total={total} open={open.attn} onToggle={tog("attn")}>
|
| 272 |
+
{["Q (Query)","K (Key)","V (Value)","Out Proj"].map(name=>(
|
| 273 |
+
<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} />
|
| 274 |
+
))}
|
| 275 |
+
<Divider/>
|
| 276 |
+
<span style={{ color:"#7a8fa3", fontSize:10.5, fontFamily:"'IBM Plex Mono',monospace" }}>
|
| 277 |
+
<span style={{ color:"#c084fc" }}>4 × (d² + d)</span> = 4 × ({cfg.embedding_dim}² + {cfg.embedding_dim}) = <strong style={{ color:P.attn }}>{fmtM(c.attention)}</strong>
|
| 278 |
+
</span>
|
| 279 |
+
<div style={{ marginTop:6, padding:"5px 9px", borderRadius:6, background:"#14101a", border:"1px solid #162030" }}>
|
| 280 |
+
<span style={{ color:"#3a5068", fontSize:10.5, fontFamily:"'IBM Plex Mono',monospace" }}>
|
| 281 |
+
{cfg.num_heads} heads → head_dim = {cfg.embedding_dim}/{cfg.num_heads} = {Math.floor(cfg.embedding_dim/cfg.num_heads)}<br/>
|
| 282 |
+
Param count stays the same — only head_dim changes!
|
| 283 |
+
</span>
|
| 284 |
+
</div>
|
| 285 |
+
</Section>
|
| 286 |
+
|
| 287 |
+
{/* FFN */}
|
| 288 |
+
<Section color={P.ff} icon="⚡" title="Feed Forward Network (per block)" params={c.feedforward} total={total} open={open.ff} onToggle={tog("ff")}>
|
| 289 |
+
<Row label="FC1 (expand)" dim={`[${cfg.embedding_dim}×${cfg.intermediate_size}]+bias`} value={c.fc1} color={P.ff} />
|
| 290 |
+
<Row label="FC2 (compress)" dim={`[${cfg.intermediate_size}×${cfg.embedding_dim}]+bias`} value={c.fc2} color={P.ff} />
|
| 291 |
+
<Divider/>
|
| 292 |
+
<span style={{ color:"#7a8fa3", fontSize:10.5, fontFamily:"'IBM Plex Mono',monospace" }}>
|
| 293 |
+
<span style={{ color:"#fb923c" }}>(d×ff + ff) + (ff×d + d)</span> = <strong style={{ color:P.ff }}>{fmtM(c.feedforward)}</strong>
|
| 294 |
+
</span>
|
| 295 |
+
<div style={{ marginTop:6, padding:"5px 9px", borderRadius:6, background:"#1a1408", border:"1px solid #162030" }}>
|
| 296 |
+
<span style={{ color:"#3a5068", fontSize:10.5, fontFamily:"'IBM Plex Mono',monospace" }}>
|
| 297 |
+
FC1: {cfg.embedding_dim} → {cfg.intermediate_size} (typically 4×d)<br/>
|
| 298 |
+
FC2: {cfg.intermediate_size} → {cfg.embedding_dim} | ReLU/GELU in between
|
| 299 |
+
</span>
|
| 300 |
+
</div>
|
| 301 |
+
</Section>
|
| 302 |
+
|
| 303 |
+
{/* LAYERNORM */}
|
| 304 |
+
<Section color={P.ln} icon="📐" title="Layer Norm ×2 (per block)" params={c.layernorm} total={total} open={open.ln} onToggle={tog("ln")}>
|
| 305 |
+
<Row label="LN1 (before Attn)" dim={`γ[${cfg.embedding_dim}] + β[${cfg.embedding_dim}]`} value={2*cfg.embedding_dim} color={P.ln} />
|
| 306 |
+
<Row label="LN2 (before FFN)" dim={`γ[${cfg.embedding_dim}] + β[${cfg.embedding_dim}]`} value={2*cfg.embedding_dim} color={P.ln} />
|
| 307 |
+
<Divider/>
|
| 308 |
+
<span style={{ color:"#7a8fa3", fontSize:10.5, fontFamily:"'IBM Plex Mono',monospace" }}>
|
| 309 |
+
<span style={{ color:"#34d399" }}>2 × (d + d)</span> = 2 × 2 × {cfg.embedding_dim} = <strong style={{ color:P.ln }}>{fmt(c.layernorm)}</strong>
|
| 310 |
+
</span>
|
| 311 |
+
</Section>
|
| 312 |
+
|
| 313 |
+
{/* PER BLOCK */}
|
| 314 |
+
<div style={{ borderRadius:9, border:"1px dashed #253545", background:"#0a1420", padding:"9px 14px", display:"flex", justifyContent:"space-between", alignItems:"center" }}>
|
| 315 |
+
<span style={{ color:"#94aab8", fontSize:12, fontWeight:600, fontFamily:"'Syne',sans-serif" }}>📦 1 Transformer Block</span>
|
| 316 |
+
<span style={{ color:"#e2e8f0", fontSize:13, fontWeight:700, fontFamily:"'IBM Plex Mono',monospace" }}>{fmtM(c.per_block)}</span>
|
| 317 |
+
</div>
|
| 318 |
+
|
| 319 |
+
{/* ALL LAYERS */}
|
| 320 |
+
<div style={{ borderRadius:9, border:"1px solid #1e2d3d", background:"#0b1520", padding:"9px 14px", display:"flex", justifyContent:"space-between", alignItems:"center" }}>
|
| 321 |
+
<span style={{ color:"#94aab8", fontSize:12, fontWeight:600, fontFamily:"'Syne',sans-serif" }}>🏗️ All Layers × {cfg.num_layers}</span>
|
| 322 |
+
<span style={{ color:P.attn, fontSize:13, fontWeight:700, fontFamily:"'IBM Plex Mono',monospace" }}>{fmtM(c.all_layers)}</span>
|
| 323 |
+
</div>
|
| 324 |
+
|
| 325 |
+
{/* FINAL LN */}
|
| 326 |
+
<div style={{ borderRadius:9, border:"1px solid #162030", background:P.card, padding:"9px 14px", display:"flex", justifyContent:"space-between", alignItems:"center" }}>
|
| 327 |
+
<span style={{ color:"#94aab8", fontSize:12, fontFamily:"'Syne',sans-serif", fontWeight:600 }}>📏 Final LayerNorm</span>
|
| 328 |
+
<span style={{ color:P.ln, fontSize:12, fontWeight:700, fontFamily:"'IBM Plex Mono',monospace" }}>{fmt(c.final_ln)}</span>
|
| 329 |
+
</div>
|
| 330 |
+
|
| 331 |
+
{/* LM HEAD */}
|
| 332 |
+
<div style={{ borderRadius:9, border:"1px solid #162030", background:P.card, padding:"9px 14px", display:"flex", justifyContent:"space-between", alignItems:"center" }}>
|
| 333 |
+
<span style={{ color:"#94aab8", fontSize:12, fontFamily:"'Syne',sans-serif", fontWeight:600 }}>🔗 LM Head {tied?"(tied)":"(untied)"}</span>
|
| 334 |
+
<span style={{ color: tied?"#3a5068":P.head, fontSize:12, fontWeight:700, fontFamily:"'IBM Plex Mono',monospace" }}>
|
| 335 |
+
{tied ? "0 (shared w/ Emb)" : fmtM(c.lm_head_untied)}
|
| 336 |
+
</span>
|
| 337 |
+
</div>
|
| 338 |
+
</div>
|
| 339 |
+
|
| 340 |
+
{/* DISTRIBUTION BAR */}
|
| 341 |
+
<div style={{ marginTop:22 }}>
|
| 342 |
+
<div style={{ color:"#3a5068", fontSize:9.5, fontFamily:"'IBM Plex Mono',monospace", letterSpacing:"0.1em", textTransform:"uppercase", marginBottom:8 }}>📈 Distribution</div>
|
| 343 |
+
<div style={{ borderRadius:13, border:"1px solid #162030", background:P.card, padding:"16px 16px 14px" }}>
|
| 344 |
+
<div style={{ display:"flex", height:20, borderRadius:10, overflow:"hidden", marginBottom:14 }}>
|
| 345 |
+
{segments.map((s,i)=>{
|
| 346 |
+
const pct=(s.val/total)*100;
|
| 347 |
+
return pct>0.5?(
|
| 348 |
+
<div key={i} style={{ width:`${pct}%`, background:s.color, display:"flex", alignItems:"center", justifyContent:"center", transition:"width .5s cubic-bezier(.4,0,.2,1)" }}>
|
| 349 |
+
{pct>6&&<span style={{ color:"#08101a", fontSize:9, fontWeight:700, fontFamily:"'IBM Plex Mono',monospace" }}>{s.label.split(" ")[0]}</span>}
|
| 350 |
+
</div>
|
| 351 |
+
):null;
|
| 352 |
+
})}
|
| 353 |
+
</div>
|
| 354 |
+
<div style={{ display:"flex", flexWrap:"wrap", gap:"7px 16px" }}>
|
| 355 |
+
{segments.map((s,i)=>(
|
| 356 |
+
<div key={i} style={{ display:"flex", alignItems:"center", gap:6 }}>
|
| 357 |
+
<div style={{ width:10, height:10, borderRadius:3, background:s.color }}/>
|
| 358 |
+
<span style={{ color:"#7a8fa3", fontSize:10.5, fontFamily:"'IBM Plex Mono',monospace" }}>{s.label}</span>
|
| 359 |
+
<span style={{ color:s.color, fontSize:10.5, fontWeight:700, fontFamily:"'IBM Plex Mono',monospace" }}>{((s.val/total)*100).toFixed(1)}%</span>
|
| 360 |
+
</div>
|
| 361 |
+
))}
|
| 362 |
+
</div>
|
| 363 |
+
</div>
|
| 364 |
+
</div>
|
| 365 |
+
|
| 366 |
+
{/* FORMULA CHEATSHEET */}
|
| 367 |
+
<div style={{ marginTop:18 }}>
|
| 368 |
+
<div style={{ borderRadius:12, border:"1px solid #162030", background:"#070e18", padding:"14px 16px" }}>
|
| 369 |
+
<div style={{ color:"#3a5068", fontSize:9.5, fontFamily:"'IBM Plex Mono',monospace", letterSpacing:"0.1em", textTransform:"uppercase", marginBottom:8 }}>📝 Formula Cheatsheet</div>
|
| 370 |
+
{[
|
| 371 |
+
["Embedding", "V×d + seq×d", `${fmt(cfg.vocab_size)}×${cfg.embedding_dim} + 1024×${cfg.embedding_dim}`, P.emb],
|
| 372 |
+
["Attention", "4 × (d² + d)", `4×(${cfg.embedding_dim}²+${cfg.embedding_dim})`, P.attn],
|
| 373 |
+
["FFN", "(d×ff+ff)+(ff×d+d)", `(${cfg.embedding_dim}×${cfg.intermediate_size}+…)+(…)`, P.ff],
|
| 374 |
+
["LayerNorm", "2 × 2d", `2×2×${cfg.embedding_dim}`, P.ln],
|
| 375 |
+
["Per Block", "Attn + FFN + LN", fmtM(c.per_block), "#e2e8f0"],
|
| 376 |
+
["Total", "Emb + L×Block + FinalLN", fmtM(total), "#c084fc"],
|
| 377 |
+
].map(([name,formula,expanded,col],i)=>(
|
| 378 |
+
<div key={i} style={{ display:"flex", alignItems:"flex-start", gap:8, padding:"4px 0", borderTop: i?"1px solid #162030":"none" }}>
|
| 379 |
+
<span style={{ color:col, fontSize:11, fontWeight:700, fontFamily:"'IBM Plex Mono',monospace", minWidth:78 }}>{name}</span>
|
| 380 |
+
<span style={{ color:"#7a8fa3", fontSize:10.5, fontFamily:"'IBM Plex Mono',monospace", flex:1 }}>{formula}</span>
|
| 381 |
+
<span style={{ color:"#3a5068", fontSize:10, fontFamily:"'IBM Plex Mono',monospace", textAlign:"right", maxWidth:150 }}>{expanded}</span>
|
| 382 |
+
</div>
|
| 383 |
+
))}
|
| 384 |
+
</div>
|
| 385 |
+
</div>
|
| 386 |
+
|
| 387 |
+
{/* FOOTER */}
|
| 388 |
+
<p style={{ textAlign:"center", color:"#253545", fontSize:10, fontFamily:"'IBM Plex Mono',monospace", marginTop:22 }}>
|
| 389 |
+
seq_len = 1024 assumed • Train mem ≈ 4× model (params + grads + Adam m & v)
|
| 390 |
+
</p>
|
| 391 |
+
</div>
|
| 392 |
+
</div>
|
| 393 |
+
);
|
| 394 |
+
}
|
| 395 |
+
|
| 396 |
+
// Render the app
|
| 397 |
+
const root = ReactDOM.createRoot(document.getElementById('root'));
|
| 398 |
+
root.render(<App />);
|
| 399 |
+
</script>
|
| 400 |
+
</body>
|
| 401 |
+
</html>
|