Embed
The script finds its own origin, so nothing else is needed; the widget runs in a sandboxed frame and cannot touch your page. Set the controls and the two lines update; the preview beneath shows what your readers get.
<script src="https://learn.mimmsy.com/learn-widget.js"></script>
<learn-widget name="cross-entropy-descent"></learn-widget> It is CC-BY-4.0: keep the credit line the frame shows.
Preview
Fork
A fork is a copy whose manifest names its parent and the parent's version; lineage is kept forever, and the copy is yours to change. The library is its own repository: clone it, copy cross-entropy-descent/ to a new name (one DNS label), set forkedFrom to { "name": "cross-entropy-descent", "version": 1 }, change what you want, run npm run check, and open a pull request. Passing the check is the whole gate. Without a checkout, submit the same files to POST /api/widgets and it is served instantly as an unreviewed draft.
Source
The whole widget is these files; the repository has their history.
widget.json
{
"name": "cross-entropy-descent",
"title": "Cross-entropy descent",
"version": 1,
"claim": "Gradient descent that nudges a model's logits by −lr·(q − p) drives the cross-entropy H(P,Q) = H(P) + D(P‖Q) down toward the floor H(P) and never below it, because the gap above the floor is the KL divergence, which is zero only when Q = P.",
"summary": "Drag the model's bars or press train and watch real gradient descent through a softmax fit a four-class truth: the loss curve falls to the dashed H(P) line and stops there. A learning-rate slider sets the step size; single-step to see each update.",
"topics": [
"information/divergence",
"information/entropy"
],
"aliases": [
"cross-entropy loss",
"log loss",
"gradient descent",
"softmax",
"training loss",
"negative log-likelihood"
],
"params": {
"lr": {
"type": "number",
"default": 0.3,
"min": 0.01,
"max": 3,
"label": "learning rate"
},
"classes": {
"type": "integer",
"default": 4,
"min": 2,
"max": 8,
"label": "number of classes"
}
},
"check": [
{
"q": "You fit a model Q to data from a source P. The cross-entropy H(P,Q) can never drop below…",
"options": [
"0",
"H(P), the entropy of the source",
"D(P‖Q)",
"1 bit"
],
"answer": 1,
"why": "H(P,Q) = H(P) + D(P‖Q) with D ≥ 0, so even a perfect model is left with H(P), the randomness of the source itself."
},
{
"q": "Cross-entropy decomposes as H(P,Q) = …",
"options": [
"H(P) − D(P‖Q)",
"D(P‖Q) − H(P)",
"H(P) · D(P‖Q)",
"H(P) + D(P‖Q)"
],
"answer": 3,
"why": "The total is the source's own entropy H(P) plus the divergence D(P‖Q) contributed by the model's mismatch."
},
{
"q": "Minimizing cross-entropy loss on data from P (with H(P) fixed) is the same as minimizing…",
"options": [
"H(P)",
"D(P‖Q), the divergence of the model from the source",
"the number of parameters",
"the learning rate"
],
"answer": 1,
"why": "H(P,Q) = H(P) + D(P‖Q), and only the KL term depends on the model."
},
{
"q": "Your model assigns probability zero to an event that then happens. Your cross-entropy (log loss) penalty is…",
"options": [
"one bit",
"zero",
"capped at H(P)",
"infinite"
],
"answer": 3,
"why": "−log₂ 0 = ∞, which is why practical systems reserve some probability for unseen events."
}
],
"capabilities": [],
"height": 730,
"requires": [
"kl-divergence"
],
"forkedFrom": null,
"authors": []
}
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cross-entropy descent</title>
<style>
:root {
color-scheme: light dark;
--bg: #f7f3ea; --bg-card: #efe9da; --border: #d8cfba; --text: #211d14; --text-dim: #6e6553;
--accent: #31597f; --accent2: #b04e1b; --hot: #a82433; --ok: #3d6b4f;
--ink-rgb: 33, 29, 20; --paper-rgb: 247, 243, 234; --accent-rgb: 49, 89, 127;
--accent2-rgb: 176, 78, 27; --hot-rgb: 168, 36, 51; --ok-rgb: 61, 107, 79;
--serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
--mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #161410; --bg-card: #1e1b15; --border: #383225; --text: #e9e3d3; --text-dim: #9c917c;
--accent: #8fb8e0; --accent2: #dd9355; --hot: #df7a88; --ok: #82bd97;
--ink-rgb: 233, 227, 211; --paper-rgb: 22, 20, 16; --accent-rgb: 143, 184, 224;
--accent2-rgb: 221, 147, 85; --hot-rgb: 223, 122, 136; --ok-rgb: 130, 189, 151;
}
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: transparent; color: var(--text); font-family: var(--serif); font-size: 17px; line-height: 1.5; }
.widget { background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; padding: 22px; }
.legend { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-bottom: 10px; font-family: var(--mono); font-size: 12.5px; color: var(--text-dim); }
.legend .sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 7px; vertical-align: -1px; }
.legend .sw.p { background: var(--accent); }
.legend .sw.q { background: var(--accent2); }
.bars { display: block; width: 100%; height: 280px; cursor: ns-resize; touch-action: none; }
.control-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.control-row label { font-size: 14px; color: var(--text-dim); white-space: nowrap; }
input[type="range"] { flex: 1; min-width: 140px; max-width: 320px; accent-color: var(--accent); margin: 0; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.val { min-width: 4ch; font-size: 14px; }
.steps { margin-left: auto; font-size: 12.5px; color: var(--text-dim); }
.steps b { color: var(--text); font-weight: 600; }
.btn { font-family: var(--mono); font-size: 12.5px; color: var(--text); background: transparent; border: 1px solid var(--border); border-radius: 3px; padding: 6px 13px; cursor: pointer; transition: border-color .15s, color .15s; }
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn.primary { border-color: var(--accent); color: var(--accent); min-width: 64px; }
.readout-row { display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-end; margin: 14px 0 0; }
.readout .big { display: block; font-size: 34px; font-weight: 600; color: var(--accent); line-height: 1.1; min-width: 5ch; }
.readout.accent .big { color: var(--accent2); }
.readout.hot .big { color: var(--hot); }
.readout small { color: var(--text-dim); font-size: 12.5px; }
.loss { display: block; width: 100%; height: 190px; margin-top: 8px; }
@media (max-width: 560px) { .readout .big { font-size: 27px; } }
</style>
</head>
<body>
<div class="widget">
<div class="legend">
<span><span class="sw p"></span>truth P · what photos actually show</span>
<span><span class="sw q"></span>model Q · drag, or train</span>
</div>
<canvas id="bars" class="bars" title="drag to set the model's beliefs"></canvas>
<div class="control-row">
<button class="btn primary" id="train">train</button>
<button class="btn" id="step">single step</button>
<button class="btn" id="reset">reset model</button>
<button class="btn" id="truth">new truth</button>
<span class="steps mono">step <b id="steps">0</b></span>
</div>
<div class="control-row">
<label for="lr">learning rate</label>
<input type="range" id="lr" min="1" max="300" value="30">
<span class="mono val" id="lr-label">0.30</span>
<span class="steps">each step moves the logits by −lr · (q − p)</span>
</div>
<div class="readout-row">
<div class="readout">
<span class="big mono" id="loss">2.000</span>
<small>H(P,Q) · the loss</small>
</div>
<div class="readout hot">
<span class="big mono" id="floor">0.000</span>
<small>H(P) · the floor</small>
</div>
<div class="readout accent">
<span class="big mono" id="gap">0.000</span>
<small>D(P∥Q) · the gap</small>
</div>
</div>
<canvas id="chart" class="loss"></canvas>
</div>
<script src="/w/_sdk/host.js?v=1"></script>
<script src="/w/_lib/info.js?v=1"></script>
<script src="widget.js?v=1"></script>
</body>
</html>
widget.js
/* Cross-entropy descent: gradient steps z −= lr·(q − p) on softmax logits drive H(P,Q) down to the floor H(P). */
(() => {
'use strict';
const $ = (id) => document.getElementById(id);
const { clamp, entropy, normProbs, softmax, crossEntropy, T, readTheme, setupCanvas, drawPairedBars, attachColumnDrag, onResize, MONO } = window.Info;
const EMOJI = ['🐱', '🐶', '🐦', '🐟', '🐸', '🐴', '🐢', '🐝'];
const MAX_STEPS = 4000;
const CONVERGED = 0.0005;
let n = 4;
let lr = 0.3;
let pw = [0.55, 0.25, 0.12, 0.08];
let z = new Array(n).fill(0);
let hist = [];
let running = false;
let steps = 0;
let host = null;
function stats() {
const p = normProbs(pw);
const q = softmax(z);
const hp = entropy(p);
const ce = crossEntropy(p, q);
return { p, q, hp, ce, kl: Math.max(0, ce - hp) };
}
function pushLoss() {
hist.push(stats().ce);
if (hist.length > 800) hist.shift();
}
function drawChart() {
const { ctx, w, h } = setupCanvas($('chart'));
const { hp } = stats();
const m = { l: 46, r: 14, t: 14, b: 26 };
const pw_ = w - m.l - m.r;
const ph = h - m.t - m.b;
const ymax = Math.max(2.2, Math.max(...hist, 0) * 1.1);
const xN = Math.max(hist.length, 80);
const X = (i) => m.l + (i / (xN - 1)) * pw_;
const Y = (v) => m.t + (1 - v / ymax) * ph;
ctx.clearRect(0, 0, w, h);
ctx.font = '11px ' + MONO;
for (let i = 0; i <= 4; i++) {
const v = (ymax * i) / 4;
ctx.strokeStyle = T.GRID;
ctx.beginPath();
ctx.moveTo(m.l, Y(v));
ctx.lineTo(w - m.r, Y(v));
ctx.stroke();
ctx.fillStyle = T.DIM;
ctx.textAlign = 'right';
ctx.textBaseline = 'middle';
ctx.fillText(v.toFixed(1), m.l - 7, Y(v));
}
ctx.textAlign = 'left';
ctx.textBaseline = 'alphabetic';
ctx.fillText('loss · bits', m.l + 6, m.t + 4);
ctx.textAlign = 'right';
ctx.fillText('training steps →', w - m.r, h - 8);
ctx.strokeStyle = T.HOT;
ctx.setLineDash([5, 5]);
ctx.beginPath();
ctx.moveTo(m.l, Y(hp));
ctx.lineTo(w - m.r, Y(hp));
ctx.stroke();
ctx.setLineDash([]);
ctx.fillStyle = T.HOT;
ctx.fillText('H(P) floor', w - m.r, Y(hp) - 6);
if (hist.length > 1) {
ctx.strokeStyle = T.ACCENT;
ctx.lineWidth = 2;
ctx.beginPath();
hist.forEach((v, i) => { if (i === 0) ctx.moveTo(X(i), Y(v)); else ctx.lineTo(X(i), Y(v)); });
ctx.stroke();
ctx.lineWidth = 1;
}
if (hist.length > 0) {
const li = hist.length - 1;
ctx.fillStyle = T.INK;
ctx.beginPath();
ctx.arc(X(li), Y(hist[li]), 4, 0, Math.PI * 2);
ctx.fill();
}
}
function render() {
const { p, q, hp, ce, kl } = stats();
drawPairedBars($('bars'), EMOJI.slice(0, n), p, q, true);
$('loss').textContent = ce.toFixed(3);
$('floor').textContent = hp.toFixed(3);
$('gap').textContent = kl.toFixed(3);
$('steps').textContent = steps;
$('lr-label').textContent = lr.toFixed(2);
drawChart();
}
function step() {
const { p, q } = stats();
for (let i = 0; i < n; i++) z[i] -= lr * (q[i] - p[i]);
steps++;
pushLoss();
}
function stop() {
running = false;
$('train').textContent = 'train';
}
function loop() {
if (!running) return;
for (let k = 0; k < 3; k++) step();
if (stats().kl < CONVERGED || steps > MAX_STEPS) {
stop();
if (host && host.signal) host.signal('complete', { steps, lr, kl: stats().kl });
}
render();
requestAnimationFrame(loop);
}
function resetModel() {
stop();
z = new Array(n).fill(0);
steps = 0;
hist = [];
pushLoss();
render();
}
function newTruth() {
stop();
pw = new Array(n).fill(0).map(() => 0.05 + Math.random());
steps = 0;
hist = [];
pushLoss();
render();
}
function setN(k) {
n = clamp(Math.round(k), 2, 8);
pw = n === 4 ? [0.55, 0.25, 0.12, 0.08] : new Array(n).fill(0).map((_, i) => Math.pow(0.6, i));
resetModel();
}
function setLr(v, fromSlider) {
lr = clamp(v, 0.01, 3);
if (!fromSlider) $('lr').value = Math.round(lr * 100);
$('lr-label').textContent = lr.toFixed(2);
}
const ping = (data) => { if (host && host.signal) host.signal('interaction', data); };
$('train').addEventListener('click', () => {
running = !running;
$('train').textContent = running ? 'pause' : 'train';
if (running) requestAnimationFrame(loop);
ping({ train: running });
});
$('step').addEventListener('click', () => { step(); render(); ping({ step: steps }); });
$('reset').addEventListener('click', () => { resetModel(); ping({ reset: true }); });
$('truth').addEventListener('click', () => { newTruth(); ping({ truth: true }); });
$('lr').addEventListener('input', () => { setLr($('lr').value / 100, true); ping({ lr }); });
attachColumnDrag($('bars'), () => n, (i, frac) => {
stop();
const wgt = [...softmax(z)];
wgt[i] = Math.max(frac, 0.002);
z = normProbs(wgt, 0.002).map((v) => Math.log(v));
pushLoss();
render();
});
$('bars').addEventListener('pointerup', () => ping({ kl: stats().kl }));
onResize(render);
readTheme();
pushLoss();
render();
LearnWidget.connect().then((h) => {
host = h;
readTheme();
if (typeof h.params.lr === 'number') setLr(h.params.lr);
if (Number.isInteger(h.params.classes)) setN(h.params.classes);
render();
h.on('theme.changed', () => { readTheme(); render(); });
h.on('params.changed', (np) => {
if (typeof np.lr === 'number') setLr(np.lr);
if (Number.isInteger(np.classes) && np.classes !== n) setN(np.classes);
render();
});
});
})();