[{"_1":2,"_182":-5,"_183":-5},"loaderData",{"_3":4,"_95":96},"root",{"_5":6,"_36":37,"_68":69},"ctx",{"_7":8,"_23":-5,"_24":25,"_26":27,"_28":20,"_29":20,"_30":20,"_31":-5,"_32":33,"_34":20,"_35":20},"auth",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20,"_21":22},"sessionClaims","sessionId","sessionStatus","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","isAuthenticated",false,"tokenType","session_token","user","preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesChatPanelState","notificationCount",0,"flagDenols","isPaidOrgMember","ENV",{"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":53,"_54":55,"_56":57,"_58":59,"_60":61,"_62":63,"_64":65,"_66":67},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","06f92998635edabf8f29eaa299edc06efb2648a2","RENDER_GIT_BRANCH","main","CLERK_PUBLISHABLE_KEY","pk_live_Y2xlcmsudmFsLnRvd24k","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","API_URL","https://api.val.town","clerkState",{"_70":71},"__internal_clerk_state",{"_72":73,"_74":47,"_75":76,"_77":76,"_78":20,"_79":76,"_80":76,"_81":76,"_82":76,"_83":84,"_93":20,"_94":20},"__clerk_ssr_state",{"_21":22,"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__clerk_debug",{"_85":20,"_19":20,"_86":76,"_87":88,"_89":76,"_90":47,"_91":20,"_92":76},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","routes/embed.x.$handle.$name.$",{"_97":98,"_99":100,"_101":102,"_103":104,"_157":158,"_179":180,"_181":-5},"handle","c15r","name","microgpt","path","ui/loss-curve.ts","project",{"_105":106,"_99":100,"_107":108,"_109":-5,"_110":20,"_111":112,"_113":114,"_115":-5,"_12":116,"_117":-5,"_118":20,"_119":-5,"_120":-5,"_121":33,"_14":122,"_123":-5,"_124":-5,"_125":-5,"_126":127,"_128":127,"_129":130,"_131":130,"_132":130,"_133":127,"_134":127,"_23":135,"_138":139,"_143":144,"_156":20},"id","a0fa6194-27db-11f1-89a2-42dde27851f2","createdAt",["D",1774395967725],"deletedAt","legacyEnvVars","privacy","public","description","Online learning micro-GPT: byte-level decoder transformer","imageUrl","21f2e37e-8066-4730-9dc7-d27cf8d3c9f3","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","0630d977-f678-453e-926c-52043293f59f","tursoName","tursoHostname","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm",{"_97":98,"_136":137},"profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yb2RJNlc1czZ1NlpZRmoxdGJ2eFVNNVhmeTYifQ","org",{"_97":98,"_140":137,"_12":116,"_141":142},"avatar","tier","pro","branch",{"_145":146,"_99":45,"_105":147,"_148":106,"_149":-5,"_150":-5,"_151":-5,"_152":-5,"_153":-5,"_154":100,"_155":98},"version",52,"a0faf3a2-27db-11f1-89a2-42dde27851f2","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","isOwned","file",{"_105":159,"_99":160,"_161":162,"_163":164,"_165":147,"_166":167,"_168":169,"_107":170,"_145":33,"_171":172,"_173":174,"_175":20,"_176":-5,"_101":177},"ccd3c69e-282a-11f1-be27-42dde27851f2","loss-curve.ts","fileId","ccd3c770-282a-11f1-be27-42dde27851f2","parentId","c8760584-27db-11f1-8e32-42dde27851f2","branchId","branchVersion",41,"latest",true,["D",1774429971526],"fileType","script","content","/**\n * ui/loss-curve.ts — Compression curve with telescoping x-axis\n *\n * X-axis telescopes: recent data gets more pixels, old data compresses.\n * This keeps early epochs visible but gives most space to recent training.\n * Uses a sqrt transform: x_screen = sqrt(step/total) * width\n */\nimport { h } from \"./preact.ts\";\n\nexport function LossCurve(props: any) {\n const { history, boundaries, width, height, hoverStep, onHover, totalCorpus, epoch } = props;\n if (history.length < 2) {\n return h(\"div\", {\n style: { width, height, display: \"flex\", alignItems: \"center\", justifyContent: \"center\", color: \"#333\", fontSize: 11 }\n }, \"awaiting data\\u2026\");\n }\n\n const total = history.length;\n const bs = Math.max(1, Math.floor(total / Math.min(total, 700)));\n const pts: any[] = [];\n for (let i = 0; i < total; i += bs) {\n const end = Math.min(i + bs, total);\n let sum = 0, cnt = 0;\n for (let j = i; j < end; j++) { sum += history[j].loss; cnt++; }\n pts.push({ step: i + Math.floor(cnt / 2), loss: sum / cnt, phase: history[i].phase });\n }\n\n // EMA smoothing\n let ema = pts[0].loss;\n const sm = pts.map((p: any) => { ema = .015 * p.loss + .985 * ema; return { ...p, smooth: ema }; });\n\n const pad = { t: 8, b: 22, l: 34, r: 8 };\n const pw = width - pad.l - pad.r;\n const ph = height - pad.t - pad.b;\n\n // Y axis\n const yMax = Math.min(8, Math.max(...sm.map((p: any) => p.smooth)) * 1.15);\n const yMin = Math.max(0, Math.min(...sm.map((p: any) => p.smooth)) * .8);\n const yR = yMax - yMin || 1;\n const yS = (v: number) => pad.t + (1 - (v - yMin) / yR) * ph;\n\n // X axis — sqrt telescoping: recent gets more space\n const xRaw = (s: number) => s / (total - 1 || 1); // 0..1\n const xTele = (s: number) => Math.sqrt(xRaw(s)); // compressed old, expanded recent\n const xS = (s: number) => pad.l + xTele(s) * pw;\n\n // Phase bands\n const bands: any[] = [];\n if (boundaries.length > 0 && totalCorpus > 0) {\n for (let e = 0; e <= epoch; e++) {\n const off = e * totalCorpus;\n for (const b of boundaries) {\n const s = off + b.start, en = off + b.end;\n if (s < total) bands.push({ x1: xS(s), x2: xS(Math.min(en, total)), color: b.color });\n }\n }\n }\n\n // Epoch dividers\n const epochLines: number[] = [];\n if (totalCorpus > 0) {\n for (let e = 1; e <= epoch; e++) {\n const pos = e * totalCorpus;\n if (pos < total) epochLines.push(xS(pos));\n }\n }\n\n // Smoothed line\n const line = sm.map((p: any) =>\n xS(p.step) + \",\" + yS(Math.max(yMin, Math.min(yMax, p.smooth)))\n ).join(\" \");\n\n // Y ticks\n const yTicks: number[] = [];\n const ySt = yR < 2 ? .5 : yR < 4 ? 1 : 2;\n for (let v = Math.ceil(yMin / ySt) * ySt; v <= yMax; v += ySt) yTicks.push(v);\n\n // X ticks — show step numbers at regular screen intervals\n const xTicks: { x: number; label: string }[] = [];\n const numXTicks = Math.min(6, Math.floor(pw / 60));\n for (let i = 0; i <= numXTicks; i++) {\n const screenFrac = i / numXTicks;\n // Invert sqrt: step = screenFrac^2 * total\n const stepNum = Math.round(screenFrac * screenFrac * (total - 1));\n xTicks.push({ x: pad.l + screenFrac * pw, label: stepNum >= 1000 ? (stepNum / 1000).toFixed(1) + \"k\" : String(stepNum) });\n }\n\n const hx = hoverStep !== null ? xS(hoverStep) : null;\n const last = sm[sm.length - 1];\n\n const onMove = (e: any) => {\n const r = e.currentTarget.getBoundingClientRect();\n const mx = e.clientX - r.left;\n // Invert: screenFrac = (mx - pad.l) / pw, step = screenFrac^2 * (total-1)\n const screenFrac = Math.max(0, Math.min(1, (mx - pad.l) / pw));\n const s = Math.round(screenFrac * screenFrac * (total - 1));\n onHover(Math.max(0, Math.min(total - 1, s)));\n };\n\n // Build SVG children manually with h() to avoid template issues\n const children: any[] = [];\n\n // Phase bands\n for (let i = 0; i < bands.length; i++) {\n const b = bands[i];\n children.push(h(\"rect\", { key: \"b\" + i, x: b.x1, y: pad.t, width: Math.max(0, b.x2 - b.x1), height: ph, fill: b.color, opacity: \".05\" }));\n }\n\n // Y grid + labels\n for (const v of yTicks) {\n children.push(h(\"line\", { key: \"yg\" + v, x1: pad.l, x2: width - pad.r, y1: yS(v), y2: yS(v), stroke: \"#141420\" }));\n children.push(h(\"text\", { key: \"yl\" + v, x: pad.l - 3, y: yS(v) + 3, \"text-anchor\": \"end\", fill: \"#333\", \"font-size\": \"8\" }, v.toFixed(1)));\n }\n\n // X tick labels\n for (const xt of xTicks) {\n children.push(h(\"text\", { key: \"xl\" + xt.label, x: xt.x, y: pad.t + ph + 12, \"text-anchor\": \"middle\", fill: \"#333\", \"font-size\": \"7\" }, xt.label));\n }\n\n // Epoch dividers\n for (let i = 0; i < epochLines.length; i++) {\n children.push(h(\"line\", { key: \"ep\" + i, x1: epochLines[i], x2: epochLines[i], y1: pad.t, y2: pad.t + ph, stroke: \"#444\", \"stroke-dasharray\": \"3,3\", opacity: \".5\" }));\n }\n\n // Smoothed line\n children.push(h(\"polyline\", { key: \"line\", points: line, fill: \"none\", stroke: \"#f59e0b\", \"stroke-width\": \"2\", \"stroke-linejoin\": \"round\", opacity: \".85\" }));\n\n // Hover line\n if (hx !== null) {\n children.push(h(\"line\", { key: \"hover\", x1: hx, x2: hx, y1: pad.t, y2: pad.t + ph, stroke: \"#e2e8f0\", opacity: \".25\" }));\n }\n\n // Endpoint dot\n children.push(h(\"circle\", {\n key: \"dot\",\n cx: xS(last.step),\n cy: yS(Math.max(yMin, Math.min(yMax, last.smooth))),\n r: \"3\", fill: \"#f59e0b\"\n }));\n\n return h(\"svg\", {\n width, height,\n style: \"display:block;cursor:crosshair\",\n onMouseMove: onMove,\n onMouseLeave: () => onHover(null),\n }, ...children);\n}\n","deleted","label",[178,160],"ui","permalink","https://www.val.town/x/c15r/microgpt/code/ui/loss-curve.ts","extension","actionData","errors"]