[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","689a391d133c819196fdf06ea561d929","versionInt","title","Cross-entropy ≡ H(p)+kl(p∥q): A Playable Proof","type","code/react","content","import React, { useMemo, useState } from \"react\";\nimport { motion } from \"framer-motion\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\nimport { Slider } from \"@/components/ui/slider\";\nimport { Progress } from \"@/components/ui/progress\";\nimport { Switch } from \"@/components/ui/switch\";\nimport { Input } from \"@/components/ui/input\";\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from \"@/components/ui/tabs\";\nimport { TooltipProvider } from \"@/components/ui/tooltip\";\nimport { Info, HelpCircle, RefreshCw, Check, X, Sparkles } from \"lucide-react\";\nimport { LineChart, Line, XAxis, YAxis, Tooltip as RTooltip, ResponsiveContainer, Legend } from \"recharts\";\n\nfunction clamp01(x: number) { return Math.max(0, Math.min(1, x)); }\nfunction log2(x: number) { return Math.log(x) / Math.log(2); }\nfunction H_bern(p: number) { p = clamp01(p); const q = 1 - p; if (p === 0 || p === 1) return 0; return -(p * log2(p) + q * log2(q)); }\nfunction crossEntropyBern(p: number, q: number) { p = clamp01(p); q = clamp01(q); const qbar = 1 - q; if (q === 0 || q === 1) { if ((p === 1 && q === 1) || (p === 0 && q === 0)) return 0; } const term1 = p * -log2(q === 0 ? Number.EPSILON : q); const term2 = (1 - p) * -log2(qbar === 0 ? Number.EPSILON : qbar); return term1 + term2; }\nfunction klBern(p: number, q: number) { p = clamp01(p); q = clamp01(q); const pbar = 1 - p; const qbar = 1 - q; const t1 = p === 0 ? 0 : p * log2(p / (q === 0 ? Number.EPSILON : q)); const t2 = pbar === 0 ? 0 : pbar * log2(pbar / (qbar === 0 ? Number.EPSILON : qbar)); return t1 + t2; }\n\nfunction Chip({label, onClick, selected}: {label: string, onClick: ()=>void, selected?: boolean}) { return (); }\nfunction MathBlock({children}:{children: React.ReactNode}) { return (

{children}

); }\n\nexport default function PlayableKLProof(){\n const [pieces, setPieces] = useState([]);\n const [showHint, setShowHint] = useState(false);\n const [pTrue, setPTrue] = useState(0.3);\n const [qGuess, setQGuess] = useState(0.6);\n\n const H = useMemo(()=>H_bern(pTrue), [pTrue]);\n const CE = useMemo(()=>crossEntropyBern(pTrue, qGuess), [pTrue, qGuess]);\n const KL = useMemo(()=>klBern(pTrue, qGuess), [pTrue, qGuess]);\n\n const chips = [\"E_P[-log Q(x)]\",\"add & subtract E_P[-log P(x)]\",\"E_P[-log P(x)] + E_P[log P(x)/Q(x)]\"];\n const addPiece = (c:string)=>{ if (!pieces.includes(c)) setPieces([...pieces, c]); };\n const resetPuzzle = ()=> setPieces([]);\n\n return (\n \n \n \n Proof Puzzle\n \n \n

Click the chips in the correct order to derive the decomposition.

\n {chips.map((c,i)=> (\n addPiece(c)} selected={pieces.includes(c)}/>\n ))}\n

\n {pieces.length ? pieces.join(\" \\n → \") : \"(your steps will appear here)\"}\n

\n \n \n

\n {showHint && (\n

\n Trick: start from E_P[-log Q(x)]. Add and subtract E_P[-log P(x)]. Group terms to get H(P) + KL(P‖Q).\n

\n )}\n {pieces.join(\" → \") === \"E_P[-log Q(x)] → add & subtract E_P[-log P(x)] → E_P[-log P(x)] + E_P[log P(x)/Q(x)]\" && (\n

\n Nice! Now you’ve shown H(P,Q) = H(P) + KL(P‖Q).\n

\n )}\n \n \n \n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","12444082592116345348","traceTime",1782759365758]