Hugging Face's logo

Spaces:
Girinath11
/
parameter_calculation
Running

App Files Community
parameter_calculation / index.html
Girinath11's picture
Girinath11
Create index.html
ebe2e35 verified
raw
history blame contribute delete
26.5 kB
 <!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>
<!-- React & ReactDOM from CDN -->
<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>
<!-- Babel Standalone for JSX transformation -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- Google Fonts -->
<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;
}
/* Custom range input styling */
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>