MCMC Sampler Dashboard

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_260":261,"_262":263},"routes/_app.x.$handle.$name",{"_100":99,"_37":48,"_108":90,"_32":102,"_13":14,"_109":-5,"_11":110,"_111":112,"_113":114,"_115":116,"_117":118,"_26":-5,"_119":-5,"_120":-5,"_121":30,"_122":123,"_124":62,"_125":-5,"_126":-5,"_127":128},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_46":47,"_37":48,"_41":49,"_50":-5,"_51":30,"_52":53,"_54":53,"_55":56,"_57":-5,"_19":58,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":66,"_67":68,"_69":-5,"_70":-5,"_71":-5,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":83,"_84":85,"_86":87,"_88":30},"version",26,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","5aa1e658-aa69-4d2b-ab58-183ae7877c8b","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":-7,"_29":30,"_31":30,"_32":33,"_34":33},"file",{"_35":36,"_37":33,"_38":26,"_39":40,"_41":42,"_43":14,"_44":45,"_29":30},"previous","deleted",false,"deletedHere","path","README.md","latestPath","fileId","ab72d306-5ee8-11f1-ae74-1607ee4eb77e","name","fileType","content","# MCMC Sampler Dashboard\n\nAn interactive dashboard that runs a **Metropolis-Hastings** Markov Chain Monte\nCarlo sampler in your browser and animates it exploring a 2D probability density\nin real time.\n\n## What it does\n\n- Renders a target density as a heatmap (Viridis color ramp).\n- Runs a Gaussian random-walk Metropolis-Hastings chain, drawing the trace and\n accepted samples on top.\n- Live stats: iteration count, acceptance rate, and running mean / std of the\n samples (post burn-in).\n- Tweak the **target distribution**, **proposal step size**, and **steps per\n frame** and watch how mixing and acceptance respond.\n\n### Try this\n\n- Set step size very small (0.1) on the **Banana** target — watch the chain\n crawl and acceptance shoot up toward 100% (poor mixing).\n- Crank step size to 2.5 — acceptance collapses as most proposals get rejected.\n- Switch to **Bimodal** and see how hard it is for the chain to hop between the\n two modes.\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|\"GET /\"| Hono[\"index.ts
(Hono server)\"]\n Hono -->|serves| HTML[\"frontend/index.html\"]\n HTML -->|loads| Entry[\"index.tsx\"]\n Entry -->|renders| App[\"App.tsx
(state + animation loop)\"]\n App --> Canvas[\"SamplerCanvas.tsx\"]\n App --> Controls[\"Controls.tsx\"]\n App --> Stats[\"StatsPanel.tsx\"]\n App -->|uses| Sampler[\"lib/sampler.ts\"]\n App -->|uses| Dist[\"lib/distributions.ts\"]\n```\n\n## File structure\n\n```\nindex.ts ← Hono backend (serves frontend)\nfrontend/\n index.html ← HTML shell (Twind + React)\n index.tsx ← React entrypoint\n favicon.svg\n lib/\n distributions.ts ← target densities (banana, bimodal, donut, gaussian)\n sampler.ts ← Metropolis-Hastings step + stats\n components/\n App.tsx ← root: state, rAF animation loop\n SamplerCanvas.tsx ← density heatmap + chain overlay (canvas)\n Controls.tsx ← target / step-size / speed controls\n StatsPanel.tsx ← live diagnostics\n```\n\n## Extending it\n\n- **Add a target**: append to `TARGETS` in `lib/distributions.ts` with a\n `logProb` and `bounds`.\n- **Add a sampler**: implement a new `step` variant in `lib/sampler.ts` (e.g.\n Hamiltonian Monte Carlo or adaptive Metropolis).\n- **Persist runs**: add an API route in `index.ts` and store summaries with\n `std/sqlite` or `std/blob`.\n","createdAt",["D",1780448882696],"branchVersion","branchId","d66dd516-5ee7-11f1-82b9-1607ee4eb77e","id","d66d1162-5ee7-11f1-82b9-1607ee4eb77e","MCMC",["D",1780448525311],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Interactive Metropolis-Hastings MCMC sampler dashboard","imageUrl","d78ece2f-cdb5-4801-9a4d-620c470cc562","pinnedFileId","546b484a-5ee8-11f1-9c2a-1607ee4eb77e","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019e8af9-9a37-71eb-94e0-71912aae9fa8","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_100":99,"_107":102},"org",{"_100":99,"_101":102,"_103":102,"_19":58,"_104":105,"_106":30},"branch",{"_13":89,"_37":90,"_46":45,"_91":47,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":48,"_98":99},"isOwned",29,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","justinray7","handle","displayName","","avatar","tier","free","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_46":47,"_37":48,"_41":256,"_50":-5,"_51":30,"_52":53,"_54":53,"_55":56,"_57":-5,"_19":58,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":66,"_67":68,"_69":-5,"_70":-5,"_71":-5,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":257,"_84":258,"_86":259,"_88":30},"tree",[163,173,174],"files",[163,164,165,166,167,168,169,170,171,172,173,174],"counts",{"_152":66,"_153":154,"_155":66,"_156":157,"_158":159},"contents",[129,130,131],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_46":145,"_37":146,"_35":147,"_134":-5,"_44":45,"_43":148,"_136":62,"_41":149,"_13":66,"_38":150,"_39":-5,"_29":30,"_140":-5,"_32":151},{"_46":142,"_37":33,"_35":36,"_134":-5,"_44":45,"_43":14,"_136":62,"_41":143,"_13":66,"_38":26,"_39":40,"_29":30,"_140":-5,"_32":144},{"_46":132,"_37":133,"_35":60,"_134":-5,"_44":45,"_43":135,"_136":62,"_41":137,"_13":66,"_38":138,"_39":139,"_29":30,"_140":-5,"_32":141},"546b478c-5ee8-11f1-9c2a-1607ee4eb77e","index.ts","parentId",9,"latest",["D",1780448736684],"http","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\n// Serve index.html at the root /\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\n\n// View source redirect\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Unwrap and rethrow Hono errors as the original error\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n","label",[133],"ab72d1ee-5ee8-11f1-ae74-1607ee4eb77e",["D",1780448882696],[33],"4b4aab16-5ee8-11f1-a5a1-1607ee4eb77e","frontend","4b4aabb6-5ee8-11f1-a5a1-1607ee4eb77e",6,["D",1780448721351],"directory",[146],"pulls","branches",1,"forks","envVars",{"_160":66,"_162":66},"connections",{"_160":66,"_161":66},"count","unfilledCount","emptyCount",{"_46":145,"_37":146,"_35":147,"_134":-5,"_44":45,"_43":148,"_136":62,"_41":253,"_13":66,"_38":150,"_39":-5,"_29":30,"_140":-5,"_176":254,"_32":255},{"_46":248,"_37":223,"_35":217,"_134":147,"_44":45,"_43":249,"_136":62,"_41":250,"_13":66,"_38":150,"_39":-5,"_29":30,"_140":-5,"_176":251,"_32":252},{"_46":240,"_37":241,"_35":242,"_134":217,"_44":45,"_43":243,"_136":62,"_41":244,"_13":66,"_38":187,"_39":245,"_29":30,"_140":-5,"_176":246,"_32":247},{"_46":232,"_37":233,"_35":234,"_134":217,"_44":45,"_43":235,"_136":62,"_41":236,"_13":66,"_38":187,"_39":237,"_29":30,"_140":-5,"_176":238,"_32":239},{"_46":224,"_37":225,"_35":226,"_134":217,"_44":45,"_43":227,"_136":62,"_41":228,"_13":66,"_38":187,"_39":229,"_29":30,"_140":-5,"_176":230,"_32":231},{"_46":214,"_37":215,"_35":216,"_134":217,"_44":45,"_43":218,"_136":62,"_41":219,"_13":66,"_38":187,"_39":220,"_29":30,"_140":-5,"_176":221,"_32":222},{"_46":207,"_37":208,"_35":209,"_134":147,"_44":45,"_43":210,"_136":62,"_41":211,"_13":66,"_38":150,"_39":-5,"_29":30,"_140":-5,"_176":212,"_32":213},{"_46":199,"_37":200,"_35":201,"_134":147,"_44":45,"_43":202,"_136":62,"_41":203,"_13":66,"_38":26,"_39":204,"_29":30,"_140":-5,"_176":205,"_32":206},{"_46":191,"_37":192,"_35":193,"_134":147,"_44":45,"_43":194,"_136":30,"_41":195,"_13":66,"_38":26,"_39":196,"_29":30,"_140":-5,"_176":197,"_32":198},{"_46":182,"_37":183,"_35":184,"_134":147,"_44":45,"_43":185,"_136":62,"_41":186,"_13":66,"_38":187,"_39":188,"_29":30,"_140":-5,"_176":189,"_32":190},{"_46":142,"_37":33,"_35":36,"_134":-5,"_44":45,"_43":14,"_136":62,"_41":179,"_13":66,"_38":26,"_39":40,"_29":30,"_140":-5,"_176":180,"_32":181},{"_46":132,"_37":133,"_35":60,"_134":-5,"_44":45,"_43":135,"_136":62,"_41":175,"_13":66,"_38":138,"_39":139,"_29":30,"_140":-5,"_176":177,"_32":178},["D",1780448736684],"children",[],[133],["D",1780448882696],[],[33],"9736717c-5ee8-11f1-a4c5-1607ee4eb77e","index.tsx","97367262-5ee8-11f1-a4c5-1607ee4eb77e",24,["D",1780448848747],"script","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();\n",[],[146,183],"964c8f62-5ee8-11f1-a336-1607ee4eb77e","index.html","964c903e-5ee8-11f1-a336-1607ee4eb77e",23,["D",1780448847214],"\n\n \n \n \n MCMC Sampler Dashboard\n \n \n \n \n

\n \n \n \n\n",[],[146,192],"9c02802e-5ee8-11f1-a7c1-1607ee4eb77e","favicon.svg","9c0280ce-5ee8-11f1-a7c1-1607ee4eb77e",25,["D",1780448856792],"\n\n",[],[146,200],"6123d8c2-5ee8-11f1-a7c1-1607ee4eb77e","lib","a88a4204-bf6e-4106-b9d1-39a0b0b7ec31",12,["D",1780448758023],[],[146,208],"7ee53cc0-5ee8-11f1-a336-1607ee4eb77e","StatsPanel.tsx","7ee53d92-5ee8-11f1-a336-1607ee4eb77e","4d8d1a3a-5ee8-11f1-a5a1-1607ee4eb77e",21,["D",1780448807936],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\ntype Props = {\n iterations: number;\n acceptanceRate: number;\n meanX: number;\n meanY: number;\n stdX: number;\n stdY: number;\n};\n\nfunction Stat({ label, value, hint }: { label: string; value: string; hint?: string }) {\n return (\n

{label}

{value}

\n {hint &&

{hint}

}\n

\n );\n}\n\nexport function StatsPanel(props: Props) {\n const accPct = (props.acceptanceRate * 100).toFixed(1) + \"%\";\n const accColor = props.acceptanceRate > 0.6\n ? \"text-amber-600\"\n : props.acceptanceRate < 0.15\n ? \"text-red-600\"\n : \"text-green-600\";\n return (\n

\n \n

\n Acceptance\n

{accPct}

~23-50% is healthy

\n \n \n

\n );\n}\n",[],[146,223,215],"components","7257a1c8-5ee8-11f1-8e5c-1607ee4eb77e","SamplerCanvas.tsx","7257a272-5ee8-11f1-8e5c-1607ee4eb77e",19,["D",1780448786878],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useRef } from \"https://esm.sh/react@18.2.0\";\nimport type { Target } from \"../lib/distributions.ts\";\nimport type { Sample } from \"../lib/sampler.ts\";\n\ntype Props = {\n target: Target;\n samples: Sample[];\n current: Sample | null;\n size?: number;\n};\n\n// Viridis-ish color ramp for the density heatmap (t in [0,1]).\nfunction ramp(t: number): [number, number, number] {\n const stops: [number, [number, number, number]][] = [\n [0.0, [68, 1, 84]],\n [0.25, [59, 82, 139]],\n [0.5, [33, 145, 140]],\n [0.75, [94, 201, 98]],\n [1.0, [253, 231, 37]],\n ];\n for (let i = 0; i < stops.length - 1; i++) {\n const [t0, c0] = stops[i];\n const [t1, c1] = stops[i + 1];\n if (t <= t1) {\n const f = (t - t0) / (t1 - t0);\n return [\n Math.round(c0[0] + f * (c1[0] - c0[0])),\n Math.round(c0[1] + f * (c1[1] - c0[1])),\n Math.round(c0[2] + f * (c1[2] - c0[2])),\n ];\n }\n }\n return stops[stops.length - 1][1];\n}\n\nexport function SamplerCanvas({ target, samples, current, size = 480 }: Props) {\n const densityRef = useRef(null);\n const overlayRef = useRef(null);\n const [xmin, xmax, ymin, ymax] = target.bounds;\n\n const toPx = (x: number, y: number): [number, number] => [\n ((x - xmin) / (xmax - xmin)) * size,\n size - ((y - ymin) / (ymax - ymin)) * size,\n ];\n\n // Draw the static density heatmap whenever the target changes.\n useEffect(() => {\n const canvas = densityRef.current;\n if (!canvas) return;\n const ctx = canvas.getContext(\"2d\")!;\n const res = 160; // grid resolution\n const cell = size / res;\n const grid: number[] = [];\n let max = -Infinity;\n for (let j = 0; j < res; j++) {\n for (let i = 0; i < res; i++) {\n const x = xmin + ((i + 0.5) / res) * (xmax - xmin);\n const y = ymax - ((j + 0.5) / res) * (ymax - ymin);\n const lp = target.logProb(x, y);\n grid.push(lp);\n if (lp > max) max = lp;\n }\n }\n // Normalize by exponentiating relative to the max log-prob.\n for (let j = 0; j < res; j++) {\n for (let i = 0; i < res; i++) {\n const p = Math.exp(grid[j * res + i] - max); // 0..1\n const [r, g, b] = ramp(Math.pow(p, 0.45));\n ctx.fillStyle = `rgb(${r},${g},${b})`;\n ctx.fillRect(i * cell, j * cell, cell + 1, cell + 1);\n }\n }\n }, [target]);\n\n // Draw the chain trace + samples on the overlay whenever samples change.\n useEffect(() => {\n const canvas = overlayRef.current;\n if (!canvas) return;\n const ctx = canvas.getContext(\"2d\")!;\n ctx.clearRect(0, 0, size, size);\n\n // Faint trace line connecting recent samples.\n const traceStart = Math.max(0, samples.length - 400);\n ctx.strokeStyle = \"rgba(255,255,255,0.35)\";\n ctx.lineWidth = 1;\n ctx.beginPath();\n for (let i = traceStart; i < samples.length; i++) {\n const [px, py] = toPx(samples[i].x, samples[i].y);\n if (i === traceStart) ctx.moveTo(px, py);\n else ctx.lineTo(px, py);\n }\n ctx.stroke();\n\n // Sample dots (subsampled for performance).\n const stride = Math.max(1, Math.floor(samples.length / 3000));\n ctx.fillStyle = \"rgba(255,255,255,0.5)\";\n for (let i = 0; i < samples.length; i += stride) {\n const [px, py] = toPx(samples[i].x, samples[i].y);\n ctx.fillRect(px, py, 1.5, 1.5);\n }\n\n // Current position marker.\n if (current) {\n const [px, py] = toPx(current.x, current.y);\n ctx.fillStyle = \"#ef4444\";\n ctx.beginPath();\n ctx.arc(px, py, 5, 0, Math.PI * 2);\n ctx.fill();\n ctx.strokeStyle = \"white\";\n ctx.lineWidth = 2;\n ctx.stroke();\n }\n }, [samples, current, target]);\n\n return (\n \n

Diff · v26