{strict
? <>The {missCode} version stays an unpublished draft until you translate it.
: <>{missFull} readers see the {haveCode} version with a small “not translated yet” notice.}
);
}
/* ============================================================
Interactive puzzle artwork — gradient descent (2 axes).
Drag the weights θ across a loss surface to the GLOBAL minimum.
Decoy local minima trap naive (1-axis / greedy) descent, so a bot
sweeping a single axis can't stumble onto it — you must read the
contours and get BOTH coordinates right.
Responsive: pointer coords are mapped through the SVG viewBox.
============================================================ */
function NetworkPuzzle({ accent = "#2f6bdb", solved = false, onSolve = () => {} }) {
const W = 460, H = 300;
// Loss surface: three wells. The deepest (accent, most rings) is the GLOBAL min.
// Two decoys sit in different rows/columns so an axis-wise sweep of a single
// weight slides into a decoy — you must read the map to set BOTH weights right.
const G = { x: W * 0.60, y: H * 0.40, d: 1.00, s: 60, global: true };
const D1 = { x: W * 0.22, y: H * 0.66, d: 0.60, s: 46 };
const D2 = { x: W * 0.84, y: H * 0.70, d: 0.55, s: 42 };
const wells = [G, D1, D2];
const loss = (x, y) => {
let s = 0;
wells.forEach(w => { s += w.d * Math.exp(-(((x - w.x) ** 2) + ((y - w.y) ** 2)) / (2 * w.s * w.s)); });
return Math.max(0, Math.min(1, 1 - s));
};
const WIN_R = 26;
// learning-rate sweet-spot band (independent third axis — no loss gradient leads here)
const ETA_LO = 34, ETA_HI = 52;
// controls: two weights (0..100) + learning rate (0..100)
const [t1, setT1] = useStateU(8);
const [t2, setT2] = useStateU(12);
const [eta, setEta] = useStateU(78);
const [done, setDone] = useStateU(solved);
const [sparks, setSparks] = useStateU([]);
const doneRef = useRefU(solved);
useEffectU(() => { if (solved) { setDone(true); doneRef.current = true; } }, [solved]);
const px = 30 + (t1 / 100) * (W - 60);
const py = 34 + (t2 / 100) * (H - 64);
const dist = Math.hypot(px - G.x, py - G.y);
const inWell = dist <= WIN_R;
const etaOk = eta >= ETA_LO && eta <= ETA_HI;
const curLoss = loss(px, py);
const celebrate = () => {
const burst = Array.from({ length: 16 }, (_, i) => {
const a = (i / 16) * Math.PI * 2;
return { id: i, x: G.x, y: G.y, vx: Math.cos(a) * (26 + Math.random() * 24), vy: Math.sin(a) * (26 + Math.random() * 24), c: [accent, "#e08a1e", "#1f9e72", "#e1543f", "#7a4fe0"][i % 5] };
});
setSparks(burst);
setTimeout(() => setSparks([]), 1100);
};
useEffectU(() => {
if (doneRef.current) return;
if (inWell && etaOk) { setDone(true); doneRef.current = true; celebrate(); onSolve(); }
// eslint-disable-next-line
}, [t1, t2, eta]);
const ringsFor = (w) => w.global ? [0.6, 1.1, 1.7, 2.3] : [0.8, 1.4];
const conv = inWell && etaOk;
const markC = done || conv ? "#1f9e72" : (inWell ? accent : "#8a8478");
return (
{done
? converged to the global minimum ✓
: loss {curLoss.toFixed(2)} · {inWell ? (etaOk ? "—" : "now stabilise the learning rate") : "read the contours: deepest basin wins"}}
);
}
Object.assign(window, { Icon, Social, SocialChip, Scribble, Stars, Placeholder, DomainArt, MultiDomainArt, LangFallbackToggle, ImageUpload, RichText, renderInline, NetworkPuzzle, BilingualStatus, KIND, kindMeta, iconForKind, LangChips });
/* ---------- compact EN/FR status summary — just the two badges (used by every editor) ---------- */
function BilingualStatus({ enOn, frOn, fallback, editingLang }) {
const Badge = ({ code, on }) => (
{code} {on ? "ready" : "missing"}
);
return (