| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Next-token prediction on a real sequence</title> | |
| <meta name="color-scheme" content="light"> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap"> | |
| <style> | |
| :root { | |
| --bg: #f7f5ee; | |
| --ink: #1f1f1d; | |
| --ink-soft: #5b5b56; | |
| --ink-faint: #8a8a83; | |
| --rule: #e3e1d6; | |
| --hair: #eee; | |
| --green: #317f3f; | |
| --green-dark: #1f5024; | |
| --green-tint: #f4f8f4; | |
| --amber: #b8862c; | |
| --amber-dark: #6b4d18; | |
| --red: #b00020; | |
| --blue: #2c5aa0; | |
| --card: #fff; | |
| --soft-cream: #fafaf6; | |
| --base-a: #1A7A40; | |
| --base-t: #b00020; | |
| --base-c: #2c5aa0; | |
| --base-g: #b8862c; | |
| } | |
| * { margin: 0; padding: 0; box-sizing: border-box; } | |
| html { scroll-behavior: smooth; } | |
| body { | |
| font-family: "Inter", "Helvetica Neue", sans-serif; | |
| font-size: 14px; font-weight: 300; line-height: 1.7; | |
| color: var(--ink); | |
| background: var(--bg); | |
| } | |
| ::-webkit-scrollbar { width: 8px; height: 8px; } | |
| ::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; } | |
| ::-webkit-scrollbar-track { background: transparent; } | |
| /* --- Page header ----------------------------------------------------- */ | |
| .page-header { | |
| border-bottom: 1px solid var(--rule); | |
| background: var(--bg); | |
| position: sticky; top: 0; z-index: 50; | |
| backdrop-filter: saturate(180%) blur(6px); | |
| } | |
| .page-header__inner { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 14px 32px; | |
| display: flex; align-items: baseline; gap: 16px; | |
| } | |
| .wordmark { | |
| font-family: "JetBrains Mono", monospace; | |
| font-weight: 700; | |
| font-size: 16px; | |
| letter-spacing: 1px; | |
| } | |
| .wordmark .caret { color: var(--green); margin-right: 4px; } | |
| .wordmark__sub { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 11px; font-weight: 500; | |
| text-transform: uppercase; letter-spacing: 2px; | |
| color: var(--ink-soft); | |
| margin-left: 4px; | |
| } | |
| .page-header__spacer { flex: 1; } | |
| .page-header__crumbs { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 10px; letter-spacing: 1.4px; | |
| text-transform: uppercase; color: var(--ink-faint); | |
| } | |
| .page-header__crumbs a { color: var(--ink-soft); text-decoration: none; } | |
| .page-header__crumbs a:hover { color: var(--green); } | |
| /* --- Lede ----------------------------------------------------------- */ | |
| .tab-lede { | |
| max-width: 1200px; margin: 56px auto 0; | |
| padding: 0 32px; | |
| } | |
| .tab-lede__rail { | |
| border-left: 3px solid var(--green); | |
| padding: 4px 0 4px 22px; | |
| max-width: 820px; | |
| } | |
| .tab-lede__eyebrow { | |
| display: block; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 11px; font-weight: 500; | |
| letter-spacing: 0.22em; text-transform: uppercase; | |
| color: var(--green); margin-bottom: 12px; | |
| } | |
| .tab-lede__title { | |
| margin: 0 0 22px; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 34px; font-weight: 500; | |
| letter-spacing: -0.01em; line-height: 1.12; | |
| color: var(--ink); | |
| } | |
| .tab-lede__lead { | |
| margin: 0; max-width: 760px; | |
| font-family: "Inter", sans-serif; | |
| font-size: 19px; font-weight: 300; line-height: 1.5; | |
| letter-spacing: -0.005em; color: #2d2d2a; | |
| } | |
| /* --- Post body ------------------------------------------------------ */ | |
| .post { | |
| max-width: 760px; | |
| margin: 32px auto 0; | |
| padding: 0 32px 96px; | |
| } | |
| .post h2 { | |
| margin: 64px 0 18px; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 22px; font-weight: 500; | |
| letter-spacing: -0.005em; line-height: 1.3; | |
| color: var(--ink); | |
| padding-top: 12px; | |
| border-top: 1px solid var(--rule); | |
| } | |
| .post h2:first-child { border-top: none; padding-top: 0; } | |
| .post h3 { | |
| margin: 40px 0 12px; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 15px; font-weight: 500; | |
| letter-spacing: 0; | |
| color: var(--ink); | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .post p { margin: 0 0 14px; } | |
| .post p > code, .post li > code { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 0.86em; | |
| background: var(--soft-cream); | |
| border: 1px solid var(--rule); | |
| padding: 1px 5px; | |
| border-radius: 2px; | |
| color: var(--green-dark); | |
| } | |
| .post pre { | |
| margin: 14px 0 18px; | |
| padding: 14px 16px; | |
| background: var(--card); | |
| border: 1px solid #ddd; | |
| overflow-x: auto; | |
| } | |
| .post pre code { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 12px; line-height: 1.6; | |
| color: var(--ink); | |
| background: transparent; border: none; padding: 0; | |
| } | |
| .post a { | |
| color: var(--green-dark); | |
| text-decoration: underline; | |
| text-decoration-thickness: 1px; | |
| text-underline-offset: 2px; | |
| } | |
| .post a:hover { color: var(--green); } | |
| .post strong { font-weight: 600; color: var(--ink); } | |
| .post-image { | |
| margin: 24px 0; | |
| } | |
| .post-image img { | |
| display: block; | |
| width: 100%; height: auto; | |
| border: 1px solid var(--rule); | |
| } | |
| /* --- Widget shell (carbon-demo style) ------------------------------- */ | |
| .widget { | |
| max-width: 920px; | |
| margin: 40px auto 8px; | |
| } | |
| .widget__head { | |
| display: flex; align-items: baseline; gap: 14px; | |
| margin-bottom: 6px; | |
| } | |
| .widget__eyebrow { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 10px; font-weight: 500; | |
| letter-spacing: 0.22em; text-transform: uppercase; | |
| color: var(--green); | |
| } | |
| .widget__title { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 14px; font-weight: 500; | |
| color: var(--ink); letter-spacing: 0; | |
| } | |
| .widget__caption { | |
| font-family: "Inter", sans-serif; | |
| font-size: 12px; color: var(--ink-soft); | |
| margin: 8px 4px 14px; | |
| line-height: 1.5; | |
| } | |
| .demo { | |
| background: var(--card); border: 1px solid #ddd; | |
| padding: 22px; margin: 8px 0; | |
| } | |
| .demo-toolbar { | |
| display: flex; gap: 8px; align-items: center; flex-wrap: wrap; | |
| margin-bottom: 14px; | |
| font-family: "JetBrains Mono", monospace; font-size: 10px; | |
| color: #666; text-transform: uppercase; letter-spacing: 1.4px; | |
| } | |
| .demo-toolbar .spacer { flex: 1; } | |
| .demo-label { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 9.5px; color: #6b7a6e; | |
| text-transform: uppercase; letter-spacing: 1.6px; | |
| margin: 6px 0 6px; | |
| } | |
| .pill, button.action { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 11px; font-weight: 400; | |
| padding: 5px 11px; border: 1px solid #ccc; border-radius: 3px; | |
| background: #fff; color: #555; cursor: pointer; | |
| text-transform: uppercase; letter-spacing: 1.5px; | |
| transition: all 0.12s; | |
| } | |
| .pill:hover, button.action:hover { border-color: #888; color: var(--ink); } | |
| .pill.active, button.action.primary { background: var(--ink); color: #fff; border-color: var(--ink); } | |
| .pill.active:hover, button.action.primary:hover { background: #000; } | |
| .pill.gh { background: var(--green); color: #fff; border-color: var(--green); } | |
| .pill.gh:hover { background: var(--green-dark); border-color: var(--green-dark); } | |
| .pills { display: inline-flex; flex-wrap: wrap; gap: 6px; } | |
| .status { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 10px; color: #666; | |
| text-transform: uppercase; letter-spacing: 1.5px; | |
| display: inline-flex; align-items: center; gap: 6px; | |
| margin-left: 8px; | |
| } | |
| .status .dot { | |
| display: inline-block; width: 6px; height: 6px; border-radius: 50%; | |
| background: var(--green); | |
| } | |
| input.seq-input, textarea.seq-input { | |
| width: 100%; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 13px; | |
| padding: 9px 12px; | |
| border: 1px solid #ccc; | |
| border-radius: 3px; | |
| letter-spacing: 1px; | |
| text-transform: uppercase; | |
| color: var(--ink); | |
| background: var(--soft-cream); | |
| resize: vertical; | |
| } | |
| textarea.seq-input { letter-spacing: 0.5px; } | |
| input.seq-input:focus, textarea.seq-input:focus { | |
| outline: none; | |
| border-color: var(--green); | |
| background: #fff; | |
| } | |
| /* base + token chips */ | |
| .base, .tok { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 11px; | |
| letter-spacing: 0.5px; | |
| } | |
| .base { | |
| display: inline-block; | |
| padding: 2px 5px; | |
| font-weight: 500; | |
| margin: 1px; | |
| color: #fff; | |
| border-radius: 2px; | |
| min-width: 16px; | |
| text-align: center; | |
| } | |
| .base.A { background: var(--base-a); } | |
| .base.T { background: var(--base-t); } | |
| .base.C { background: var(--base-c); } | |
| .base.G { background: var(--base-g); } | |
| .base.dim { opacity: 0.4; } | |
| .base.outline { | |
| background: transparent; | |
| border: 1px solid currentColor; | |
| } | |
| .base.outline.A { color: var(--base-a); } | |
| .base.outline.T { color: var(--base-t); } | |
| .base.outline.C { color: var(--base-c); } | |
| .base.outline.G { color: var(--base-g); } | |
| .tok { | |
| display: inline-flex; | |
| align-items: center; | |
| padding: 4px 8px; | |
| margin: 2px; | |
| border: 1px solid #ccc; | |
| border-radius: 3px; | |
| background: #fff; | |
| color: var(--ink); | |
| } | |
| .tok.kmer { | |
| background: rgba(49,127,63,0.10); | |
| border-color: rgba(49,127,63,0.5); | |
| color: var(--green-dark); | |
| font-weight: 500; | |
| } | |
| .tok.bpe { | |
| background: rgba(184,134,44,0.10); | |
| border-color: rgba(184,134,44,0.5); | |
| color: var(--amber-dark); | |
| } | |
| .tok.text { | |
| background: #fff; | |
| border-color: #ccc; | |
| color: var(--ink); | |
| } | |
| .tok.boundary { | |
| background: var(--ink); | |
| color: #fff; | |
| border-color: var(--ink); | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| font-size: 10px; | |
| } | |
| .tok.dim { color: #888; background: var(--soft-cream); } | |
| .tok.ok { background: var(--green); color: #fff; border-color: var(--green); } | |
| .tok.bad { color: var(--red); border-color: rgba(176,0,32,0.4); background: rgba(176,0,32,0.05); } | |
| .tok.selected { | |
| outline: 2px solid var(--green); | |
| outline-offset: 1px; | |
| } | |
| .token-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0; } | |
| /* count badges */ | |
| .count-badge { | |
| display: inline-block; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 10px; font-weight: 600; | |
| background: var(--ink); color: var(--bg); | |
| padding: 2px 7px; border-radius: 2px; | |
| letter-spacing: 1px; | |
| } | |
| .count-badge.green { background: var(--green); color: #fff; } | |
| .count-badge.amber { background: var(--amber); color: #fff; } | |
| /* W1 · animated tokenization (source on top, schemes drop down) ------ */ | |
| .tk-anim { margin-top: 18px; } | |
| .tk-source, .tk-scheme { | |
| display: grid; | |
| grid-template-columns: 124px 1fr; | |
| gap: 18px; | |
| align-items: start; | |
| padding: 8px 0; | |
| } | |
| .tk-scheme { padding: 10px 0; min-height: 32px; } | |
| .tk-source { padding-bottom: 14px; border-bottom: 1px solid var(--rule); margin-bottom: 6px; } | |
| .tk-meta { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 3px; | |
| padding-top: 2px; | |
| } | |
| .tk-label { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 9.5px; | |
| font-weight: 500; | |
| color: var(--ink-soft); | |
| text-transform: uppercase; | |
| letter-spacing: 1.6px; | |
| } | |
| .tk-stat { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 10px; | |
| color: var(--ink-faint); | |
| letter-spacing: 0.5px; | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .tk-stat .n { | |
| font-weight: 600; | |
| color: var(--ink); | |
| } | |
| .tk-scheme[data-scheme="bpe"] .tk-stat .n { color: var(--amber-dark); } | |
| .tk-scheme[data-scheme="kmer"] .tk-stat .n { color: var(--green-dark); } | |
| /* Source: tight grid of small chips */ | |
| .tk-source-strip { | |
| display: flex; | |
| flex-wrap: wrap; | |
| row-gap: 2px; | |
| } | |
| .tk-source-strip .tk-base { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 13px; | |
| height: 17px; | |
| color: #fff; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 10px; | |
| font-weight: 500; | |
| border-radius: 1px; | |
| flex: 0 0 13px; | |
| transition: opacity 0.35s ease, filter 0.35s ease; | |
| } | |
| .tk-source-strip .tk-base + .tk-base { margin-left: 1px; } | |
| .tk-source-strip .tk-base.consumed { opacity: 0.18; filter: grayscale(0.6); } | |
| .tk-base.A { background: var(--base-a); } | |
| .tk-base.T { background: var(--base-t); } | |
| .tk-base.C { background: var(--base-c); } | |
| .tk-base.G { background: var(--base-g); } | |
| /* Scheme strips: hold dropped tokens with <> brackets */ | |
| .tk-scheme-strip { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 1px 8px; | |
| min-height: 20px; | |
| } | |
| .tk-token { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 12px; | |
| font-weight: 500; | |
| letter-spacing: 0.5px; | |
| display: inline-flex; | |
| align-items: center; | |
| opacity: 0; | |
| will-change: transform, opacity; | |
| } | |
| .tk-token.dropped { | |
| opacity: 1; | |
| transition: | |
| transform 0.48s cubic-bezier(0.22, 1, 0.36, 1), | |
| opacity 0.32s ease; | |
| } | |
| .tk-token .br { color: var(--ink-faint); font-weight: 400; } | |
| .tk-token.tail .br { color: var(--ink-faint); } | |
| .tk-token.tail { opacity: 0.55; } | |
| .tk-token.tail.dropped { opacity: 0.55; } | |
| /* Layouts */ | |
| .grid-3 { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr 1fr; | |
| gap: 14px; | |
| margin-top: 14px; | |
| } | |
| .grid-2 { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 14px; | |
| margin-top: 14px; | |
| } | |
| @media (max-width: 720px) { | |
| .grid-3, .grid-2 { grid-template-columns: 1fr; } | |
| } | |
| .col-card { | |
| background: var(--soft-cream); | |
| border: 1px solid var(--rule); | |
| padding: 14px; | |
| } | |
| .col-card .col-title { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 10px; font-weight: 500; | |
| letter-spacing: 1.6px; text-transform: uppercase; | |
| color: var(--ink-soft); | |
| margin-bottom: 8px; | |
| } | |
| .col-card .col-foot { | |
| margin-top: 10px; | |
| display: flex; align-items: center; gap: 8px; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 10px; color: var(--ink-soft); | |
| text-transform: uppercase; letter-spacing: 1.4px; | |
| } | |
| /* Bar chart helpers */ | |
| .bar-row { | |
| display: grid; | |
| grid-template-columns: 18px 1fr 64px; | |
| align-items: center; | |
| gap: 8px; | |
| margin: 3px 0; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 11px; | |
| } | |
| .bar-row .bar-label { color: var(--ink-soft); font-weight: 500; text-align: center; } | |
| .bar-row .bar-track { | |
| position: relative; | |
| height: 14px; | |
| background: var(--soft-cream); | |
| border: 1px solid var(--rule); | |
| } | |
| .bar-row .bar-fill { | |
| height: 100%; | |
| transition: width 220ms ease, background-color 220ms ease; | |
| } | |
| .bar-row .bar-val { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; } | |
| .bar-row.highlight .bar-track { box-shadow: 0 0 0 2px var(--green-tint); } | |
| /* 6-position grid (used in W4, W5, W6) */ | |
| .posgrid { | |
| display: grid; | |
| grid-template-columns: repeat(6, 1fr); | |
| gap: 8px; | |
| } | |
| .posgrid__col { | |
| background: var(--soft-cream); | |
| border: 1px solid var(--rule); | |
| border-radius: 2px; | |
| padding: 8px 6px 6px; | |
| } | |
| .posgrid__pos { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 9px; color: var(--ink-faint); | |
| text-transform: uppercase; letter-spacing: 1.4px; | |
| text-align: center; margin-bottom: 6px; | |
| } | |
| .posgrid__bars { | |
| display: flex; flex-direction: column; gap: 3px; | |
| } | |
| .posgrid .mini-row { | |
| display: grid; grid-template-columns: 12px 1fr 32px; | |
| align-items: center; gap: 4px; | |
| font-family: "JetBrains Mono", monospace; font-size: 10px; | |
| } | |
| .posgrid .mini-row .ml { color: var(--ink-soft); text-align: center; font-weight: 500; } | |
| .posgrid .mini-row .mt { position: relative; height: 10px; background: #fff; border: 1px solid var(--rule); } | |
| .posgrid .mini-row .mf { display: block; height: 100%; transition: width 200ms ease; } | |
| .posgrid .mini-row .mv { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; font-size: 9.5px; } | |
| .posgrid__col.argmax-A { box-shadow: inset 0 0 0 1px var(--base-a); } | |
| .posgrid__col.argmax-T { box-shadow: inset 0 0 0 1px var(--base-t); } | |
| .posgrid__col.argmax-C { box-shadow: inset 0 0 0 1px var(--base-c); } | |
| .posgrid__col.argmax-G { box-shadow: inset 0 0 0 1px var(--base-g); } | |
| .posgrid__col.locked { background: #fff; } | |
| .posgrid__col.frozen .posgrid__bars { opacity: 0.4; } | |
| .posgrid__sel { display: flex; gap: 3px; margin-top: 8px; } | |
| .cond-pick { | |
| flex: 1 1 0; min-width: 0; | |
| font-family: "JetBrains Mono", monospace; font-size: 10px; font-weight: 600; | |
| padding: 3px 0; border: 1px solid var(--rule); border-radius: 2px; | |
| background: #fff; cursor: pointer; | |
| transition: background 0.12s, border-color 0.12s, color 0.12s; | |
| } | |
| .cond-pick:hover { border-color: #888; } | |
| .cond-pick.active { color: #fff; } | |
| .cond-pick.active.b-A { background: var(--base-a); border-color: var(--base-a); } | |
| .cond-pick.active.b-T { background: var(--base-t); border-color: var(--base-t); } | |
| .cond-pick.active.b-C { background: var(--base-c); border-color: var(--base-c); } | |
| .cond-pick.active.b-G { background: var(--base-g); border-color: var(--base-g); } | |
| /* W3 · real Carbon-3B per-token scoring --------------------------- */ | |
| .w3-itok { cursor: pointer; transition: outline-color 0.12s; } | |
| .w3-itok:hover { border-color: #888; } | |
| .w3-sub { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 11px; color: var(--ink-soft); | |
| margin: 2px 0 10px; line-height: 1.7; | |
| } | |
| .w3-sub b { color: var(--ink); font-weight: 600; } | |
| .w3-sub .tok { margin: 0 2px; } | |
| .w3-toprow { | |
| display: grid; | |
| grid-template-columns: 92px 1fr 52px; | |
| gap: 12px; align-items: center; | |
| margin: 4px 0; | |
| font-family: "JetBrains Mono", monospace; font-size: 11px; | |
| } | |
| .w3-toprow .km { font-weight: 500; letter-spacing: 0.5px; } | |
| .w3-toprow .bar { height: 13px; background: var(--soft-cream); border: 1px solid var(--rule); } | |
| .w3-toprow .fill { height: 100%; background: var(--green); transition: width 0.35s ease; } | |
| .w3-toprow .pct { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); } | |
| .w3-toprow.observed .km { color: var(--ink); } | |
| .w3-toprow.observed .fill { background: var(--amber); } | |
| .w3-io { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin-top: 6px; } | |
| .w3-io__group { display: flex; flex-direction: column; gap: 6px; } | |
| .w3-io__lab { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 9.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-faint); | |
| } | |
| .w3-io__arrow { font-family: "JetBrains Mono", monospace; font-size: 16px; color: var(--ink-faint); padding-bottom: 5px; } | |
| .w3-gt-tok { background: rgba(184,134,44,0.12); border-color: rgba(184,134,44,0.5) ; } | |
| .w3-gt-tok { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 2px; } | |
| .w3-chart { display: block; width: 100%; height: auto; margin-top: 6px; background: #fff; border: 1px solid #eee; } | |
| .w3-legend { | |
| display: flex; gap: 20px; flex-wrap: wrap; margin-top: 8px; | |
| font-family: "JetBrains Mono", monospace; font-size: 10px; | |
| color: var(--ink-soft); text-transform: uppercase; letter-spacing: 1px; | |
| } | |
| .w3-legend span { display: inline-flex; align-items: center; gap: 6px; } | |
| .w3-legend svg { width: 20px; height: 8px; display: inline-block; vertical-align: middle; } | |
| .w3-top { display: flex; gap: 6px; margin-top: 12px; } | |
| .w3-topchip { | |
| flex: 1 1 0; min-width: 0; | |
| display: inline-flex; flex-direction: column; align-items: center; gap: 2px; | |
| font-family: "JetBrains Mono", monospace; | |
| border: 1px solid var(--rule); background: var(--soft-cream); | |
| border-radius: 3px; padding: 6px 4px; | |
| } | |
| .w3-topchip .km { font-size: 12px; font-weight: 500; letter-spacing: 0.5px; } | |
| .w3-topchip.ground-truth .km { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 2px; } | |
| .w3-topchip .pct { font-size: 9px; color: var(--ink-soft); font-variant-numeric: tabular-nums; } | |
| .posgrid__col.clickable { cursor: pointer; } | |
| .posgrid__col.sel { outline: 2px solid var(--ink); outline-offset: 2px; } | |
| .w3-allgrid { | |
| display: grid; | |
| grid-template-columns: repeat(128, 1fr); | |
| gap: 1px; | |
| margin-top: 8px; | |
| } | |
| .w3-cell { aspect-ratio: 1; background: #d3d0c4; transition: background 0.15s ease; } | |
| .w3-cell.first { | |
| outline: 2px solid var(--ink); | |
| outline-offset: 1px; | |
| position: relative; z-index: 2; | |
| } | |
| .w3-order { | |
| display: inline-flex; align-items: center; gap: 8px; | |
| font-family: "JetBrains Mono", monospace; font-size: 9.5px; | |
| text-transform: uppercase; letter-spacing: 1.4px; color: var(--ink-faint); | |
| } | |
| .w3-snake { width: 42px; height: auto; color: var(--ink-soft); display: block; } | |
| /* WCOND · conditional single-nucleotide decoding -------------------- */ | |
| .cond-slots { display: flex; gap: 6px; } | |
| .cond-slot { | |
| width: 40px; height: 40px; | |
| display: flex; align-items: center; justify-content: center; | |
| border: 1px solid var(--rule); border-radius: 3px; background: var(--soft-cream); | |
| font-family: "JetBrains Mono", monospace; font-size: 17px; font-weight: 600; | |
| color: var(--ink); | |
| } | |
| .cond-slot.active { outline: 2px solid var(--ink); outline-offset: 1px; color: var(--ink-faint); } | |
| .cond-slot.pending { color: var(--ink-faint); background: transparent; border-style: dashed; } | |
| .cond-slot.A { background: rgba(26,122,64,0.13); border-color: rgba(26,122,64,0.42); color: var(--base-a); } | |
| .cond-slot.T { background: rgba(176,0,32,0.09); border-color: rgba(176,0,32,0.36); color: var(--base-t); } | |
| .cond-slot.C { background: rgba(44,90,160,0.11); border-color: rgba(44,90,160,0.40); color: var(--base-c); } | |
| .cond-slot.G { background: rgba(184,134,44,0.14); border-color: rgba(184,134,44,0.42); color: var(--amber-dark); } | |
| .cond-choices { display: flex; gap: 10px; } | |
| .cond-choice { | |
| flex: 1 1 0; cursor: pointer; border: 1px solid var(--rule); border-radius: 3px; | |
| padding: 10px 12px; background: var(--soft-cream); | |
| display: flex; flex-direction: column; gap: 7px; | |
| transition: background 0.12s, border-color 0.12s; | |
| } | |
| .cond-choice:hover { background: #fff; border-color: #888; } | |
| .cond-choice__top { display: flex; justify-content: space-between; align-items: baseline; font-family: "JetBrains Mono", monospace; } | |
| .cond-choice__base { font-size: 16px; font-weight: 600; } | |
| .cond-choice__pct { font-size: 11px; color: var(--ink-soft); font-variant-numeric: tabular-nums; } | |
| .cond-choice__bar { height: 8px; background: #fff; border: 1px solid var(--rule); } | |
| .cond-choice__fill { display: block; height: 100%; transition: width 0.25s ease; } | |
| .cond-done { font-family: "JetBrains Mono", monospace; font-size: 13px; color: var(--ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } | |
| .cond-note { | |
| font-family: "Inter", sans-serif; font-size: 12px; color: var(--ink-soft); | |
| background: var(--soft-cream); border-left: 2px solid var(--green); | |
| padding: 9px 12px; margin-top: 14px; line-height: 1.5; | |
| } | |
| .cond-note .tok { margin: 0 2px; } | |
| /* FNS factorization figure ------------------------------------------ */ | |
| .fns-seq-input { | |
| width: 120px; | |
| text-align: center; | |
| text-transform: uppercase; | |
| } | |
| .fns-viz { | |
| font-family: "JetBrains Mono", monospace; | |
| padding: 10px 0 6px; | |
| } | |
| .fns-truth, .fns-row { | |
| display: grid; | |
| grid-template-columns: 222px repeat(6, 34px) 28px; | |
| align-items: center; | |
| column-gap: 7px; | |
| min-width: 480px; | |
| } | |
| .fns-truth { margin-bottom: 16px; } | |
| .fns-row { margin: 12px 0; } | |
| .fns-gtlabel { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 10px; | |
| font-weight: 400; | |
| letter-spacing: 1.6px; | |
| text-transform: uppercase; | |
| color: var(--ink-faint); | |
| } | |
| .fns-eq { | |
| font-size: 16px; | |
| color: var(--ink); | |
| text-align: right; | |
| white-space: nowrap; | |
| } | |
| .fns-eq sub, .fns-eq sup { font-size: 11px; } | |
| .fns-eq .sum { color: var(--ink-soft); } | |
| .fns-bracket { | |
| font-family: "Inter", sans-serif; | |
| font-size: 34px; | |
| font-weight: 200; | |
| line-height: 0; | |
| color: var(--ink-soft); | |
| vertical-align: middle; | |
| transform: scaleX(0.7); | |
| display: inline-block; | |
| } | |
| .fns-box { | |
| width: 30px; height: 30px; | |
| display: inline-flex; align-items: center; justify-content: center; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 14px; font-weight: 600; | |
| border-radius: 3px; border: 1px solid; | |
| transition: background 0.15s, border-color 0.15s, color 0.15s; | |
| } | |
| .fns-box.A { background: rgba(26,122,64,0.13); border-color: rgba(26,122,64,0.42); color: var(--base-a); } | |
| .fns-box.T { background: rgba(176,0,32,0.09); border-color: rgba(176,0,32,0.36); color: var(--base-t); } | |
| .fns-box.C { background: rgba(44,90,160,0.11); border-color: rgba(44,90,160,0.40); color: var(--base-c); } | |
| .fns-box.G { background: rgba(184,134,44,0.14); border-color: rgba(184,134,44,0.42); color: var(--amber-dark); } | |
| .fns-box.wild { opacity: 0.38; } | |
| .fns-loss { | |
| margin-top: 20px; | |
| padding-top: 16px; | |
| border-top: 1px solid var(--rule); | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 16px; | |
| color: var(--ink); | |
| text-align: center; | |
| } | |
| .fns-loss sup, .fns-loss sub { font-size: 11px; } | |
| .fns-loss .frac { display: inline-block; margin: 0 1px; } | |
| .fns-loss .fns-term { margin: 0 3px; white-space: nowrap; } | |
| .fns-explain { | |
| margin-top: 18px; | |
| padding-top: 16px; | |
| border-top: 1px solid var(--rule); | |
| font-family: "Inter", sans-serif; | |
| font-size: 13px; | |
| line-height: 1.62; | |
| color: var(--ink-soft); | |
| } | |
| .fns-explain p { margin: 0 0 11px; } | |
| .fns-explain p:last-child { margin-bottom: 0; } | |
| .fns-explain strong { color: var(--ink); font-weight: 600; } | |
| .fns-explain .mono { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 12px; | |
| color: var(--ink); | |
| } | |
| .fns-explain .mono sup, .fns-explain .mono sub { font-size: 9px; } | |
| /* Big stat tile */ | |
| .stat-tile { | |
| background: var(--soft-cream); | |
| border: 1px solid var(--rule); | |
| padding: 14px 16px; | |
| text-align: left; | |
| } | |
| .stat-tile__label { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 10px; color: var(--ink-soft); | |
| text-transform: uppercase; letter-spacing: 1.6px; | |
| margin-bottom: 6px; | |
| } | |
| .stat-tile__value { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 26px; font-weight: 500; | |
| color: var(--ink); | |
| } | |
| .stat-tile__sub { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 10px; color: var(--ink-soft); | |
| margin-top: 4px; letter-spacing: 0.5px; | |
| } | |
| .stat-tile.green .stat-tile__value { color: var(--green-dark); } | |
| .stat-tile.red .stat-tile__value { color: var(--red); } | |
| /* Footer */ | |
| .post-foot { | |
| max-width: 760px; | |
| margin: 64px auto 0; | |
| padding: 24px 32px 64px; | |
| border-top: 1px solid var(--rule); | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 11px; color: var(--ink-soft); | |
| text-transform: uppercase; letter-spacing: 1.4px; | |
| } | |
| .post-foot a { color: var(--green-dark); text-decoration: none; } | |
| .post-foot a:hover { color: var(--green); } | |
| /* Position picker (W7) */ | |
| .seq-track { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 14px; | |
| letter-spacing: 0; | |
| background: var(--soft-cream); | |
| border: 1px solid var(--rule); | |
| padding: 10px 12px; | |
| display: flex; flex-wrap: wrap; gap: 1px; | |
| user-select: none; | |
| } | |
| .seq-track__b { | |
| display: inline-flex; align-items: center; justify-content: center; | |
| width: 22px; height: 26px; | |
| cursor: pointer; | |
| border-radius: 2px; | |
| color: #fff; | |
| font-weight: 500; | |
| transition: transform 0.1s ease, box-shadow 0.1s ease; | |
| } | |
| .seq-track__b:hover { transform: translateY(-1px); } | |
| .seq-track__b.A { background: var(--base-a); } | |
| .seq-track__b.T { background: var(--base-t); } | |
| .seq-track__b.C { background: var(--base-c); } | |
| .seq-track__b.G { background: var(--base-g); } | |
| .seq-track__b.selected { | |
| box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--bg); | |
| } | |
| /* Per-base text color (used wherever DNA letters appear in prose) */ | |
| .b-A, .b-T, .b-C, .b-G { font-weight: 500; } | |
| .b-A { color: var(--base-a); } | |
| .b-T { color: var(--base-t); } | |
| .b-C { color: var(--base-c); } | |
| .b-G { color: var(--base-g); } | |
| /* k-mer token: colored bases inside <>, no chrome */ | |
| .kmer-token, .raw-seq { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 12px; | |
| font-weight: 500; | |
| letter-spacing: 0.5px; | |
| } | |
| .kmer-token { | |
| display: inline-flex; | |
| align-items: center; | |
| padding: 2px 0; | |
| white-space: nowrap; | |
| } | |
| .kmer-token .br { color: var(--ink-faint); font-weight: 400; } | |
| .kmer-token.muted { opacity: 0.45; } | |
| .raw-seq { display: inline-flex; padding: 2px 0; } | |
| .bpe-flow { | |
| display: flex; align-items: center; flex-wrap: wrap; | |
| gap: 18px; | |
| margin: 10px 0 8px; | |
| } | |
| .bpe-flow .arrow { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 16px; | |
| color: var(--ink-faint); | |
| } | |
| /* Line 2: source token, SVG fan-out, candidate rows ----------------- */ | |
| .bpe-branches { | |
| display: grid; | |
| grid-template-columns: auto 96px 1fr; | |
| grid-template-rows: auto 150px; | |
| gap: 0; | |
| margin-top: 12px; | |
| } | |
| .branch-source { | |
| grid-column: 1; grid-row: 2; | |
| align-self: center; | |
| display: flex; flex-direction: column; align-items: center; gap: 6px; | |
| padding-right: 8px; | |
| } | |
| .branch-source__hint { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 9px; color: var(--ink-faint); | |
| text-transform: uppercase; letter-spacing: 1.6px; | |
| } | |
| .branch-lines { | |
| grid-column: 2; grid-row: 2; | |
| width: 96px; height: 150px; | |
| display: block; | |
| } | |
| .branch-lines path { | |
| fill: none; | |
| stroke: #ccc; | |
| stroke-width: 1.4; | |
| transition: stroke 0.15s, stroke-width 0.15s; | |
| } | |
| .branch-lines path.selected { stroke: var(--green); stroke-width: 2.2; } | |
| .branch-header { | |
| grid-column: 3; grid-row: 1; | |
| display: grid; | |
| grid-template-columns: 100px 60px 60px; | |
| gap: 18px; | |
| padding: 0 12px 10px; | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 9.5px; | |
| font-weight: 500; | |
| letter-spacing: 1.6px; | |
| text-transform: uppercase; | |
| color: var(--ink-soft); | |
| } | |
| .branch-header > span { text-align: center; } | |
| .branch-header > span:first-child { text-align: left; color: var(--ink-faint); } | |
| .branch-targets { | |
| grid-column: 3; grid-row: 2; | |
| display: grid; | |
| grid-template-rows: repeat(5, 26px); | |
| row-gap: 5px; | |
| align-content: center; | |
| justify-content: start; | |
| height: 150px; | |
| } | |
| .cand-row { | |
| display: grid; | |
| grid-template-columns: 100px 60px 60px; | |
| gap: 18px; | |
| align-items: center; | |
| padding: 2px 12px; | |
| cursor: pointer; | |
| border-radius: 2px; | |
| transition: background 0.12s; | |
| } | |
| .cand-row:hover { background: rgba(0,0,0,0.03); } | |
| .cand-row.selected { background: var(--green-tint); } | |
| .mark { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 14px; | |
| font-weight: 500; | |
| text-align: center; | |
| line-height: 1; | |
| user-select: none; | |
| } | |
| .mark.ok { color: var(--green); } | |
| .mark.bad { color: var(--red); } | |
| /* explanation note */ | |
| .note { | |
| font-family: "Inter", sans-serif; | |
| font-size: 12px; line-height: 1.55; | |
| color: var(--ink-soft); | |
| background: var(--soft-cream); | |
| border-left: 2px solid var(--green); | |
| padding: 10px 12px; | |
| margin-top: 14px; | |
| } | |
| .note code { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 11px; | |
| background: #fff; | |
| border: 1px solid var(--rule); | |
| padding: 0 4px; border-radius: 2px; | |
| color: var(--green-dark); | |
| } | |
| .formula { | |
| font-family: "JetBrains Mono", monospace; | |
| font-size: 12px; | |
| background: var(--soft-cream); | |
| border: 1px solid var(--rule); | |
| padding: 10px 12px; | |
| margin-top: 10px; | |
| color: var(--ink); | |
| overflow-x: auto; | |
| } | |
| .formula .hl { color: var(--green-dark); font-weight: 600; } | |
| /* Iframe wrapper: white page, no widget chrome — the host page provides the | |
| heading and description, so we only ship the interactive demo card. */ | |
| body { padding: 20px 24px; background: #fff; } | |
| .widget { max-width: 880px; margin: 0 auto; padding: 0; border: 0; } | |
| .widget__head, .widget__caption { display: none; } | |
| </style> | |
| </head> | |
| <body> | |
| <aside class="widget" id="w4"> | |
| <div class="widget__head"> | |
| <span class="widget__eyebrow">§ Widget · 03</span> | |
| <span class="widget__title">Next-token prediction on a real sequence</span> | |
| </div> | |
| <p class="widget__caption"> | |
| Real output from <a id="w3-model-link" target="_blank" rel="noopener noreferrer">the model</a>. | |
| We feed an input sequence and ask the model to predict the next token. While the most probable 6-mer may not | |
| match the target token, the marginalized base distributions often align with the target at individual positions—demonstrating | |
| the benefit of FNS for model inference. | |
| </p> | |
| <div class="demo"> | |
| <div class="demo-toolbar"> | |
| <span id="w3-meta"></span> | |
| <span class="spacer"></span> | |
| <span class="status"><span class="dot"></span><span>real inference</span></span> | |
| </div> | |
| <div class="demo-label">1 · Inputs & ground truth</div> | |
| <div class="w3-io"> | |
| <div class="w3-io__group"> | |
| <span class="w3-io__lab">input sequence</span> | |
| <div class="token-row" id="w3-inputs"></div> | |
| </div> | |
| <span class="w3-io__arrow">→</span> | |
| <div class="w3-io__group"> | |
| <span class="w3-io__lab">target token</span> | |
| <div class="token-row" id="w3-gt"></div> | |
| </div> | |
| </div> | |
| <div class="demo-label" style="margin-top: 20px">2 · Token-level prediction over all <span id="w3-vocab-a"></span> 6-mers</div> | |
| <div class="w3-sub" id="w3-sub"></div> | |
| <svg class="w3-chart" id="w3-chart" viewBox="0 0 1000 210"></svg> | |
| <div class="w3-legend"> | |
| <span><svg viewBox="0 0 20 8"><line x1="0" y1="4" x2="20" y2="4" stroke="#317f3f" stroke-width="1.3" /></svg>per-token probability</span> | |
| <span><svg viewBox="0 0 20 8"><line x1="0" y1="4" x2="20" y2="4" stroke="#b8862c" stroke-width="1.8" /></svg>cumulative mass</span> | |
| <span><svg viewBox="0 0 20 8"><line x1="0" y1="4" x2="20" y2="4" stroke="#bbb" stroke-width="1.3" stroke-dasharray="5 4" /></svg>uniform reference</span> | |
| <span><svg viewBox="0 0 20 8"><line x1="0" y1="4" x2="20" y2="4" stroke="#b00020" stroke-width="1.3" stroke-dasharray="4 3" /></svg>ground truth rank</span> | |
| </div> | |
| <div class="demo-label" style="margin-top: 14px">most probable tokens</div> | |
| <div class="w3-top" id="w3-top"></div> | |
| <div class="demo-label" style="margin-top: 20px">3 · Marginalized to base level (the <span id="w3-vocab-b"></span>-way distribution summed per position · click a position)</div> | |
| <div class="posgrid" id="w3-grid"></div> | |
| <div class="demo-label" style="margin-top: 20px">4 · All <span id="w3-vocab-c"></span> 6-mers, ranked by probability · <span id="w3-grid-hint"></span></div> | |
| <div class="demo-toolbar" style="margin-bottom: 8px"> | |
| <span class="pills" id="w3-mode"> | |
| <button class="pill active" data-mode="all">ALL</button> | |
| <button class="pill" data-mode="A"><span class="b-A">A</span></button> | |
| <button class="pill" data-mode="T"><span class="b-T">T</span></button> | |
| <button class="pill" data-mode="C"><span class="b-C">C</span></button> | |
| <button class="pill" data-mode="G"><span class="b-G">G</span></button> | |
| </span> | |
| <span class="spacer"></span> | |
| <span class="w3-order"> | |
| <span>most probable → least likely</span> | |
| <svg class="w3-snake" viewBox="0 0 50 30" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="miter" aria-hidden="true"> | |
| <path d="M6 7 H44 V15 H6 V23 H42"/> | |
| <path d="M38 19 L44 23 L38 27"/> | |
| </svg> | |
| </span> | |
| </div> | |
| <div class="w3-allgrid" id="w3-allgrid"></div> | |
| </div> | |
| </aside> | |
| <script> | |
| // ============================================================ | |
| // Shared utilities | |
| // ============================================================ | |
| const BASES = ['A', 'T', 'C', 'G']; | |
| const BASE_IDX = {A: 0, T: 1, C: 2, G: 3}; | |
| const BASE_COLOR = { A: 'var(--base-a)', T: 'var(--base-t)', C: 'var(--base-c)', G: 'var(--base-g)' }; | |
| // FNV-1a 32-bit | |
| function hash32(s) { | |
| let h = 0x811c9dc5; | |
| for (let i = 0; i < s.length; i++) { | |
| h ^= s.charCodeAt(i); | |
| h = Math.imul(h, 0x01000193); | |
| } | |
| return h >>> 0; | |
| } | |
| function rand01(seed) { | |
| const h = hash32(String(seed)); | |
| return (h % 1000003) / 1000003; | |
| } | |
| function softmax(arr) { | |
| let m = -Infinity; | |
| for (let i = 0; i < arr.length; i++) if (arr[i] > m) m = arr[i]; | |
| const out = new Float64Array(arr.length); | |
| let s = 0; | |
| for (let i = 0; i < arr.length; i++) { | |
| out[i] = Math.exp(arr[i] - m); | |
| s += out[i]; | |
| } | |
| for (let i = 0; i < arr.length; i++) out[i] /= s; | |
| return out; | |
| } | |
| function cleanDNA(s) { | |
| return (s || '').toUpperCase().replace(/[^ACGT]/g, ''); | |
| } | |
| function escapeHTML(s) { | |
| return String(s).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>'); | |
| } | |
| // 6-mer integer <-> string helpers | |
| function kmerToIdx(k) { | |
| let i = 0; | |
| for (let p = 0; p < k.length; p++) { | |
| const b = BASE_IDX[k[p]]; | |
| if (b == null) return -1; | |
| i = i * 4 + b; | |
| } | |
| return i; | |
| } | |
| function idxToKmer(i, k = 6) { | |
| let s = ''; | |
| for (let p = k - 1; p >= 0; p--) { | |
| s = BASES[(i >> (2 * p)) & 3] + s; | |
| } | |
| return s; | |
| } | |
| function baseAt(i, p) { | |
| // p in [0..5], 0 is leftmost | |
| return (i >> (2 * (5 - p))) & 3; | |
| } | |
| // generate a 4096-d distribution conditioned on a string seed | |
| function distribution4096(seed) { | |
| const logits = new Float64Array(4096); | |
| for (let i = 0; i < 4096; i++) { | |
| const a = rand01(seed + ':a:' + i); | |
| const b = rand01(seed + ':b:' + (i * 7919)); | |
| const c = rand01(seed + ':c:' + (i * 65537)); | |
| // mix a few uniforms → roughly-normal logit centered near 0 | |
| logits[i] = (a + b + c - 1.5) * 3.2; | |
| } | |
| return softmax(logits); | |
| } | |
| function marginals6x4(probs) { | |
| const m = [[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0]]; | |
| for (let i = 0; i < 4096; i++) { | |
| const p = probs[i]; | |
| for (let pos = 0; pos < 6; pos++) { | |
| m[pos][baseAt(i, pos)] += p; | |
| } | |
| } | |
| return m; | |
| } | |
| function fmtPct(p) { return (p * 100).toFixed(2) + '%'; } | |
| function fmt(p, d=4) { return Number(p).toFixed(d); } | |
| // Render a row of per-base bars (used for variants of W4/W6/W7) | |
| function renderPosCol(parent, posIndex, dist4, mode) { | |
| const max = Math.max(0.0001, ...dist4); | |
| let argmax = 0; | |
| for (let i = 1; i < 4; i++) if (dist4[i] > dist4[argmax]) argmax = i; | |
| const col = document.createElement('div'); | |
| col.className = 'posgrid__col' + (mode === 'argmax' ? ' argmax-' + BASES[argmax] : ''); | |
| col.innerHTML = | |
| `<div class="posgrid__pos">pos ${posIndex + 1}</div>` + | |
| `<div class="posgrid__bars">` + | |
| BASES.map((b, j) => { | |
| const w = (dist4[j] / max) * 100; | |
| const isMax = j === argmax; | |
| return `<div class="mini-row"> | |
| <span class="ml">${b}</span> | |
| <span class="mt"><span class="mf" style="width:${w.toFixed(1)}%;background:${BASE_COLOR[b]};opacity:${isMax ? 1 : 0.55}"></span></span> | |
| <span class="mv">${(dist4[j] * 100).toFixed(1)}</span> | |
| </div>`; | |
| }).join('') + | |
| `</div>`; | |
| parent.appendChild(col); | |
| } | |
| function basesHTML(seq) { | |
| return Array.from(seq).map((c) => `<span class="base ${c}">${c}</span>`).join(''); | |
| } | |
| // ============================================================ | |
| // W2 · BPE prefix ambiguity | |
| // ============================================================ | |
| (function setupW3real() { | |
| const DATA = {"model":"Carbon-3B","k":6,"vocab":4096,"inputs":["TCGGAT","TAGCTG","GAAAAA","TTGCTC","CGGCAG","CTCGCG","GAGCTG","GTTGGC"],"ground_truth":"GTCCAG","gt_rank":5,"gt_p":0.011871,"gt_logp":-4.4336,"top":[{"kmer":"GGAGAG","p":0.01782},{"kmer":"GCTGAG","p":0.01727},{"kmer":"GCTCAG","p":0.01622},{"kmer":"GCCCAG","p":0.01187},{"kmer":"GTCCAG","p":0.01187},{"kmer":"CGAGAG","p":0.01151},{"kmer":"GGACAG","p":0.01081},{"kmer":"GCCGAG","p":0.01048}],"curve":[{"r":1,"p":0.017822,"c":0.01782},{"r":2,"p":0.017273,"c":0.0351},{"r":3,"p":0.01622,"c":0.05132},{"r":4,"p":0.011871,"c":0.06319},{"r":5,"p":0.011871,"c":0.07506},{"r":6,"p":0.011505,"c":0.08656},{"r":7,"p":0.010811,"c":0.09737},{"r":8,"p":0.010475,"c":0.10785},{"r":9,"p":0.009842,"c":0.11769},{"r":10,"p":0.008957,"c":0.12665},{"r":11,"p":0.008682,"c":0.13533},{"r":12,"p":0.008415,"c":0.14375},{"r":13,"p":0.008156,"c":0.1519},{"r":14,"p":0.007198,"c":0.1591},{"r":15,"p":0.007198,"c":0.1663},{"r":16,"p":0.007198,"c":0.1735},{"r":17,"p":0.006554,"c":0.18005},{"r":18,"p":0.006355,"c":0.18641},{"r":19,"p":0.006355,"c":0.19276},{"r":20,"p":0.006355,"c":0.19912},{"r":22,"p":0.006157,"c":0.21163},{"r":23,"p":0.006157,"c":0.21778},{"r":24,"p":0.00597,"c":0.22375},{"r":25,"p":0.00597,"c":0.22972},{"r":27,"p":0.004948,"c":0.24011},{"r":28,"p":0.004948,"c":0.24506},{"r":30,"p":0.004795,"c":0.25465},{"r":32,"p":0.00465,"c":0.26409},{"r":34,"p":0.004505,"c":0.27325},{"r":36,"p":0.004368,"c":0.28198},{"r":38,"p":0.00423,"c":0.29044},{"r":40,"p":0.003975,"c":0.29852},{"r":42,"p":0.003975,"c":0.30647},{"r":45,"p":0.003735,"c":0.31791},{"r":47,"p":0.00362,"c":0.32515},{"r":50,"p":0.00351,"c":0.3359},{"r":53,"p":0.003401,"c":0.3461},{"r":56,"p":0.003096,"c":0.35589},{"r":59,"p":0.003096,"c":0.36518},{"r":62,"p":0.003,"c":0.37428},{"r":66,"p":0.002909,"c":0.3861},{"r":70,"p":0.002733,"c":0.39729},{"r":74,"p":0.002649,"c":0.40797},{"r":78,"p":0.002567,"c":0.41824},{"r":82,"p":0.002487,"c":0.42834},{"r":86,"p":0.002487,"c":0.43829},{"r":90,"p":0.002411,"c":0.44794},{"r":95,"p":0.002266,"c":0.45955},{"r":100,"p":0.002195,"c":0.4706},{"r":110,"p":0.001999,"c":0.49104},{"r":120,"p":0.001821,"c":0.50988},{"r":130,"p":0.00171,"c":0.52731},{"r":140,"p":0.001606,"c":0.54373},{"r":150,"p":0.001509,"c":0.55906},{"r":160,"p":0.001374,"c":0.57334},{"r":170,"p":0.001311,"c":0.5868},{"r":180,"p":0.001232,"c":0.59955},{"r":190,"p":0.001194,"c":0.61171},{"r":200,"p":0.001157,"c":0.6235},{"r":220,"p":0.001054,"c":0.64568},{"r":240,"p":0.000944,"c":0.6656},{"r":260,"p":0.000846,"c":0.68358},{"r":280,"p":0.000783,"c":0.69977},{"r":300,"p":0.000735,"c":0.71479},{"r":320,"p":0.000691,"c":0.72896},{"r":340,"p":0.00061,"c":0.74184},{"r":360,"p":0.000582,"c":0.75369},{"r":380,"p":0.000538,"c":0.76477},{"r":400,"p":0.000498,"c":0.7751},{"r":450,"p":0.0004,"c":0.79725},{"r":500,"p":0.000337,"c":0.81544},{"r":550,"p":0.000293,"c":0.83107},{"r":600,"p":0.000258,"c":0.8448},{"r":650,"p":0.000228,"c":0.85701},{"r":700,"p":0.000201,"c":0.86766},{"r":750,"p":0.000172,"c":0.87696},{"r":800,"p":0.000157,"c":0.88513},{"r":850,"p":0.00014,"c":0.89248},{"r":900,"p":0.00013,"c":0.8992},{"r":950,"p":0.000118,"c":0.90539},{"r":1000,"p":0.000109,"c":0.91109},{"r":1100,"p":9.1e-05,"c":0.92107},{"r":1200,"p":7.8e-05,"c":0.9295},{"r":1300,"p":6.8e-05,"c":0.93676},{"r":1400,"p":6.1e-05,"c":0.94327},{"r":1500,"p":5.5e-05,"c":0.94908},{"r":1600,"p":5e-05,"c":0.95434},{"r":1700,"p":4.5e-05,"c":0.95907},{"r":1800,"p":4e-05,"c":0.96331},{"r":1900,"p":3.7e-05,"c":0.96713},{"r":2000,"p":3.3e-05,"c":0.97062},{"r":2200,"p":2.8e-05,"c":0.97673},{"r":2400,"p":2.3e-05,"c":0.98183},{"r":2600,"p":1.9e-05,"c":0.9861},{"r":2800,"p":1.7e-05,"c":0.98969},{"r":3000,"p":1.3e-05,"c":0.99264},{"r":3200,"p":1e-05,"c":0.99493},{"r":3400,"p":8e-06,"c":0.99676},{"r":3600,"p":6e-06,"c":0.99817},{"r":3800,"p":4e-06,"c":0.99917},{"r":4000,"p":2e-06,"c":0.99981},{"r":4096,"p":1e-06,"c":0.99996}],"probs_ppm":[648,297,213,529,21,47,44,19,22,35,31,21,28,33,76,25,169,125,99,238,7,17,23,30,9,8,38,18,30,31,70,26,513,266,419,1053,10,26,48,65,22,9,31,20,52,51,127,48,210,432,399,1440,36,66,81,36,48,69,69,47,68,101,204,71,39,61,37,90,7,15,24,5,4,8,10,4,7,6,17,5,54,24,22,68,2,8,11,11,2,2,10,3,6,5,13,4,183,96,140,347,3,7,18,22,10,4,16,9,19,14,39,15,92,121,116,358,18,31,35,13,18,28,37,19,23,25,68,17,47,90,66,140,9,15,23,5,5,8,12,4,7,8,19,6,40,18,20,49,1,2,5,5,1,1,4,2,4,3,8,3,123,61,102,288,2,4,10,11,5,2,10,4,10,9,25,9,61,114,85,279,13,17,22,9,10,13,25,10,14,17,39,14,31,58,38,92,9,17,22,8,8,10,13,7,11,8,21,7,26,18,19,39,2,4,7,9,2,2,9,5,6,5,13,5,107,50,118,242,4,7,17,23,8,2,10,9,22,17,39,14,55,70,63,127,20,26,28,12,13,16,21,13,15,13,26,9,129,235,151,537,13,22,19,9,15,17,18,11,19,14,38,16,210,166,69,242,3,10,15,21,7,7,22,12,14,13,32,11,546,246,288,1232,4,12,19,32,18,5,17,11,32,32,69,30,238,412,347,1440,26,42,37,22,48,77,86,33,55,58,129,44,231,412,180,690,31,42,31,14,19,21,22,11,17,17,48,17,581,279,172,758,12,53,47,54,9,13,46,17,25,30,60,26,2649,820,974,4650,15,33,63,89,66,22,45,28,66,68,136,58,712,1557,712,4505,120,102,66,52,107,118,121,79,101,138,306,72,537,1121,412,1877,45,54,45,22,38,47,49,27,36,42,109,33,497,321,194,712,4,22,33,30,6,12,27,17,23,32,53,25,3095,1311,1440,6553,14,53,69,97,70,19,50,40,87,102,201,86,859,1998,901,4947,114,125,65,49,112,102,138,82,96,125,326,78,159,288,149,758,24,20,17,15,20,15,13,11,19,15,42,16,274,133,79,381,3,6,9,15,4,3,11,7,15,16,29,12,1104,399,505,2567,7,10,21,40,20,4,16,14,44,51,97,36,279,513,246,1174,42,30,23,17,43,37,42,25,38,42,96,26,27,60,41,140,3,3,4,2,4,3,5,2,4,3,9,4,47,28,22,69,1,1,3,3,2,1,5,3,3,3,7,2,144,54,123,311,1,2,4,5,4,1,4,3,8,7,17,6,43,93,70,316,7,7,7,4,9,10,12,7,11,11,25,7,246,482,292,1194,21,16,19,10,22,21,28,10,19,29,72,15,648,311,288,833,6,19,28,35,6,8,35,12,25,28,61,23,3095,915,1557,6355,13,23,48,69,54,12,40,25,54,65,154,58,712,1820,1053,5970,104,50,44,41,90,69,109,65,96,127,297,85,406,944,439,1331,41,38,41,21,32,55,65,32,50,48,154,42,342,227,161,505,5,20,37,36,6,8,35,18,25,32,71,27,1764,747,1212,3400,16,31,63,69,45,11,63,21,70,86,180,67,513,1212,833,2908,111,67,58,41,68,97,118,55,90,133,375,107,107,238,116,460,14,14,13,8,14,14,13,9,12,12,31,10,188,93,78,266,2,4,9,10,5,4,15,8,9,10,26,8,701,297,537,1709,7,8,19,30,20,3,19,13,30,32,83,28,224,352,227,747,29,20,18,12,32,32,34,18,27,26,67,19,336,1232,782,1998,17,17,19,10,16,20,23,10,31,37,105,36,581,581,352,735,5,10,18,21,7,6,28,11,31,36,89,24,1508,944,1290,3509,9,17,33,47,30,7,26,18,52,73,166,33,690,2195,1657,6355,47,31,35,21,56,56,72,37,76,125,270,59,82,188,121,316,8,8,8,3,6,7,9,3,8,13,29,8,198,109,75,250,2,6,9,9,2,2,11,3,8,11,25,7,758,301,387,1331,4,6,11,17,15,4,10,6,19,20,49,15,246,628,399,1352,24,20,19,11,24,25,38,17,27,42,111,20,258,833,399,723,23,28,36,11,19,22,35,13,24,35,114,23,238,161,151,347,2,6,13,13,4,3,16,6,18,19,47,15,989,467,929,2567,6,13,26,33,19,5,28,14,50,55,125,50,288,886,600,1709,39,34,38,18,32,42,59,25,43,70,194,38,78,201,116,262,10,9,9,5,6,7,8,5,10,9,24,9,94,60,58,138,1,2,4,6,2,1,6,3,8,10,19,9,321,131,235,747,4,4,10,15,8,2,7,6,17,20,38,19,86,213,116,358,9,10,11,5,8,10,11,8,8,13,32,13,17,24,13,37,3,7,7,3,2,4,3,2,2,2,7,2,13,8,5,18,1,2,3,4,0,1,3,2,2,2,4,1,27,14,20,46,0,2,4,5,2,1,3,2,4,4,8,4,12,20,16,55,3,7,7,2,3,5,5,4,5,6,10,3,14,17,11,34,7,5,6,2,2,2,3,1,2,2,5,2,16,12,7,24,1,2,4,4,1,1,4,1,2,2,4,2,66,30,46,120,1,3,6,7,4,1,5,3,6,6,12,4,28,33,26,116,5,8,9,5,6,10,11,6,8,8,20,5,17,45,18,64,4,7,10,2,3,4,6,1,3,4,8,3,17,10,11,18,0,1,2,3,0,0,2,1,2,2,4,2,61,34,54,138,1,3,5,7,3,1,3,2,6,6,15,6,22,47,28,114,6,7,10,3,3,7,9,5,5,7,18,4,17,27,15,38,5,9,9,3,3,6,5,3,6,3,9,3,11,10,7,24,1,2,3,4,1,1,3,2,3,2,5,3,54,28,44,109,2,4,9,13,4,1,6,4,8,8,17,8,21,29,23,54,6,12,10,4,4,8,8,6,7,7,15,3,22,33,20,70,2,3,2,1,2,2,2,1,4,3,5,2,33,19,12,47,2,2,2,4,2,1,3,2,2,2,4,1,81,37,29,133,1,2,2,4,2,1,2,2,4,4,7,4,29,51,26,138,3,3,3,2,6,6,5,3,5,7,11,3,64,136,61,258,10,12,10,4,7,8,9,4,6,8,16,5,194,112,63,262,6,446,19,22,4,5,18,8,9,13,21,8,572,266,279,1194,6,15,19,28,25,9,21,14,19,24,39,16,210,537,279,1374,34,38,23,12,33,38,52,24,36,53,120,27,301,901,274,1138,34,41,30,16,25,32,30,18,21,37,73,21,375,279,156,590,4,18,23,24,5,9,24,12,20,27,44,22,1764,944,1174,4650,12,47,44,69,58,20,38,29,66,79,156,60,467,1508,648,3000,77,69,42,28,58,76,65,44,51,112,201,50,246,590,250,1138,27,33,19,17,21,24,21,13,29,29,62,18,364,227,127,747,4,12,16,28,5,5,17,16,20,27,46,21,1709,609,770,4795,10,18,32,51,37,9,23,25,60,62,123,60,497,929,446,2195,54,52,30,24,55,59,66,28,50,53,133,36,12,21,13,47,1,2,2,1,1,2,1,1,2,2,4,2,15,9,6,26,0,1,1,1,1,0,1,1,1,1,2,1,42,15,19,78,1,1,2,3,2,1,2,1,3,4,5,2,14,24,16,59,2,2,2,1,3,3,4,1,4,4,8,2,35,69,41,142,5,5,5,2,3,4,5,2,6,5,15,4,85,53,33,133,1,4,7,6,2,3,9,3,5,6,13,4,336,112,149,701,3,5,15,12,10,4,10,6,13,13,29,9,86,204,123,497,15,12,10,6,12,15,15,9,20,24,56,11,262,747,412,1053,44,48,39,19,24,45,40,24,37,57,120,36,235,194,142,446,6,21,30,38,4,10,33,15,22,29,63,21,1156,555,723,2819,9,32,44,67,36,14,47,19,66,72,169,64,347,1087,546,1998,66,54,44,28,44,61,73,38,60,127,258,63,75,188,107,326,10,16,12,6,9,13,10,6,14,10,29,8,105,86,63,220,2,5,8,9,3,2,10,6,6,9,16,5,521,180,283,1138,5,11,19,25,15,4,14,11,22,21,56,19,156,242,138,537,22,16,14,8,17,22,22,11,17,21,42,10,227,807,452,1212,21,17,17,10,15,12,17,11,25,30,71,24,564,406,266,679,5,12,16,30,6,5,19,10,27,31,76,23,1194,581,701,2487,8,14,21,36,24,7,19,11,31,56,76,34,425,1462,735,3095,39,26,24,18,41,41,47,25,45,89,177,38,66,136,72,201,6,7,8,3,6,5,6,3,7,9,24,5,127,102,62,166,2,5,8,9,2,2,7,3,7,11,19,6,425,207,288,807,3,7,9,14,12,3,8,6,13,19,42,10,149,439,224,1005,26,20,18,16,22,24,29,15,19,39,77,15,133,381,156,460,19,19,25,9,12,15,18,8,14,24,58,15,166,101,96,246,2,4,9,10,3,2,9,4,12,17,38,14,590,311,546,1605,5,11,21,25,14,5,17,10,36,42,82,38,183,546,364,915,22,29,23,13,22,28,36,19,24,50,111,27,62,174,78,246,8,10,8,6,6,7,6,4,8,7,20,9,81,72,47,156,1,2,4,7,1,1,5,3,6,8,15,8,306,136,207,723,3,5,10,18,10,2,8,8,17,21,37,19,89,188,107,347,11,11,8,5,10,9,9,9,10,11,29,10,75,102,76,183,15,28,38,12,13,20,16,10,16,13,33,11,44,36,34,71,4,8,17,18,5,4,19,9,13,10,23,8,156,75,105,288,4,11,19,25,10,3,16,12,19,19,44,15,70,97,78,262,19,30,34,13,17,26,27,14,24,26,58,20,63,96,59,131,15,22,30,8,11,15,15,6,10,8,27,6,83,64,52,133,5,13,19,22,4,4,18,8,12,13,23,9,425,166,301,770,8,15,30,34,21,7,26,17,37,34,61,24,156,292,213,669,40,50,52,21,31,51,64,40,44,56,144,33,111,210,92,266,21,37,54,15,21,18,22,11,15,17,38,11,56,39,47,105,3,6,12,14,4,2,12,6,9,9,18,8,316,174,274,859,5,13,29,35,17,4,23,11,35,35,69,30,118,238,180,529,33,42,59,15,23,32,54,21,28,34,89,25,99,149,93,213,26,42,51,18,25,33,28,18,30,19,52,16,69,60,58,123,3,11,22,22,5,4,22,13,19,16,37,14,352,183,352,795,9,24,54,55,24,10,38,28,59,50,121,42,164,224,159,369,48,66,69,28,36,52,48,33,44,35,96,22,72,90,51,154,4,7,5,3,7,5,5,3,8,5,15,7,68,35,25,96,2,3,4,6,4,2,6,4,6,4,8,4,204,68,64,321,5,4,5,9,8,2,6,4,11,8,20,8,79,83,59,246,6,10,7,4,14,14,13,6,15,14,28,9,102,191,92,387,14,19,16,5,11,10,15,6,12,13,25,6,311,161,123,358,5,25,30,33,6,9,26,9,16,20,44,15,1138,600,590,2410,9,31,45,54,54,14,32,22,38,37,72,28,446,1104,638,3000,71,60,56,29,77,71,85,57,78,101,238,53,669,1508,467,1709,55,55,47,19,53,49,50,33,50,50,109,34,590,406,301,1021,5,23,30,36,8,17,37,17,30,42,79,31,3620,1877,2061,8415,16,66,82,116,127,26,83,54,118,154,262,112,1021,2567,1232,5435,127,107,81,45,147,142,164,89,118,172,375,96,581,1395,537,2410,69,71,49,33,50,53,60,33,66,60,149,52,723,439,347,1508,10,20,31,39,13,12,38,27,53,52,129,38,3974,1709,1937,9841,19,40,71,114,104,21,76,58,151,174,375,131,1251,2336,1156,4795,136,116,81,61,138,151,159,85,140,159,342,111,67,136,77,242,8,14,17,6,9,14,15,7,14,13,25,11,94,54,47,138,2,7,13,13,5,4,16,8,12,9,18,9,347,125,185,619,4,9,18,25,10,4,15,10,33,27,47,22,136,188,140,648,19,23,30,10,26,31,42,21,39,41,68,27,54,73,51,149,6,7,6,2,7,6,8,3,6,5,17,4,147,87,61,188,4,7,10,11,4,4,15,4,11,11,21,8,581,191,274,1138,6,9,17,22,19,7,20,11,27,24,49,18,144,306,204,846,25,16,18,8,25,24,30,17,32,34,86,21,358,820,375,1104,53,49,49,19,33,42,52,25,37,43,104,33,326,262,201,399,8,18,40,37,9,11,40,17,25,34,64,26,1657,1021,1271,4100,18,43,73,85,65,19,1174,42,101,101,262,96,467,1311,747,2195,83,54,56,36,66,96,138,54,102,127,321,104,142,311,172,529,21,22,20,10,22,19,20,10,18,15,44,12,198,136,118,387,4,8,15,18,6,4,21,10,17,16,35,11,1021,482,758,2487,11,17,37,52,32,7,34,20,47,47,107,34,297,590,336,1352,42,33,31,16,46,54,60,29,50,59,144,29,609,1877,1290,3620,57,43,37,25,47,37,45,25,56,71,188,59,1352,1194,712,1764,12,27,46,65,17,11,49,27,54,76,169,43,3620,2265,2819,8682,23,42,73,120,78,17,60,45,93,149,336,85,1374,4230,3095,11505,112,87,93,54,140,89,131,71,144,262,600,123,136,301,144,393,16,16,21,6,13,10,14,6,10,16,35,7,254,172,133,358,4,9,15,19,4,4,17,6,14,17,38,9,1232,723,735,2487,7,17,30,45,37,8,22,13,38,49,96,28,316,1053,609,2265,51,40,43,23,52,49,66,36,43,70,183,34,311,989,419,1070,43,45,48,21,34,34,38,19,27,47,99,27,262,220,188,358,5,9,21,24,6,4,20,10,23,23,63,17,1605,846,1374,4367,11,30,61,79,38,10,45,28,85,112,250,83,452,1156,929,2567,72,47,58,33,63,57,92,47,47,111,270,57,201,529,227,600,27,23,25,15,20,21,19,15,25,23,68,24,164,169,118,342,3,6,11,18,5,2,12,8,19,16,36,16,807,425,795,2410,7,14,30,50,31,6,30,24,55,52,133,51,246,581,326,944,33,32,28,19,30,23,28,25,27,33,89,27,164,297,220,638,28,48,55,26,33,35,36,24,34,34,87,32,161,159,120,283,7,19,33,35,8,9,42,20,38,31,71,22,489,316,452,1251,11,22,44,65,31,11,32,27,62,58,112,43,288,590,521,1764,47,75,69,38,67,102,90,67,105,138,238,86,53,69,47,123,14,25,29,9,6,10,13,6,10,8,18,6,61,31,25,75,3,10,16,15,2,3,12,5,9,10,20,10,204,102,144,425,3,9,20,24,13,5,17,9,21,15,36,15,131,262,164,572,30,44,56,23,32,43,55,30,42,46,109,30,87,156,83,207,15,29,37,10,10,13,18,7,15,14,30,10,50,28,32,99,2,5,9,10,2,2,9,3,8,9,17,7,231,107,166,555,3,8,17,17,9,3,15,7,18,18,34,17,133,283,207,600,27,42,53,17,24,32,41,19,29,34,90,25,94,131,66,185,25,38,50,17,17,23,25,14,32,16,41,17,59,41,44,87,4,9,17,17,3,3,19,9,15,13,30,10,250,140,283,690,6,17,31,46,16,6,26,22,44,42,81,33,142,213,144,352,37,58,70,25,32,42,49,28,45,37,72,26,224,419,210,1021,19,31,28,18,22,28,31,17,36,45,67,34,288,201,120,467,5,19,27,35,7,10,38,18,27,28,56,21,1138,505,460,2487,8,24,37,67,33,10,29,27,58,50,99,49,460,901,489,3000,61,79,77,42,92,136,94,64,107,121,238,86,326,590,262,1290,40,43,33,20,25,30,34,18,34,26,79,23,807,505,283,1374,12,73,64,68,9,19,53,24,38,56,86,38,3400,1605,1271,7198,21,62,76,114,92,27,50,36,87,73,147,82,1331,3295,1657,8956,191,183,118,86,174,204,217,120,231,250,497,129,795,1557,489,2410,65,78,48,29,46,54,54,36,53,66,127,42,659,609,292,1290,6,37,48,49,7,15,42,24,37,51,86,38,3974,2061,1877,11871,15,76,96,154,109,28,71,53,123,147,258,123,1212,2908,1352,8155,164,174,104,73,154,166,177,120,169,204,387,123,258,619,238,944,32,29,23,18,23,27,22,17,35,40,65,29,342,297,172,758,4,13,19,27,8,6,23,15,25,65,69,20,1998,886,915,6156,12,21,44,89,40,9,25,34,72,99,191,69,590,1212,546,2567,73,55,52,38,82,89,79,50,79,90,174,53,63,159,94,342,8,10,11,5,8,9,10,6,10,10,23,10,105,69,53,169,2,4,8,8,4,2,10,6,9,8,15,6,336,156,217,915,3,5,13,17,11,3,9,9,21,18,41,15,120,258,164,820,18,18,22,11,24,24,25,18,28,29,47,20,690,1557,795,2649,60,42,42,24,38,41,54,33,53,64,140,56,1374,758,590,2195,14,38,56,81,13,20,64,25,54,66,142,55,7198,2567,3400,16220,41,65,118,166,174,30,93,51,123,144,352,142,2487,6156,3734,17272,227,129,112,99,258,224,266,161,262,381,1087,238,1174,2733,1053,3400,138,107,114,54,87,129,147,72,129,144,321,121,735,669,513,1764,12,55,94,116,15,21,76,35,76,97,166,68,4795,2128,3095,11871,36,99,198,217,131,40,144,79,238,279,537,231,1937,4230,2410,10475,262,198,177,129,254,326,342,201,321,452,1087,316,311,807,352,1021,47,48,36,24,37,36,40,24,34,32,90,25,342,279,235,795,5,14,26,32,10,9,33,18,36,34,107,22,2265,974,1508,6355,17,34,63,96,63,12,49,41,114,121,288,101,638,1462,690,2487,85,77,54,36,102,90,102,62,86,92,220,55,1037,3974,1998,5970,77,58,56,38,61,51,56,41,79,107,258,69,1508,1605,1212,1998,13,30,50,73,19,15,61,30,72,112,210,63,4367,3000,3620,10810,27,50,89,129,87,21,67,44,125,169,393,92,1937,6355,3852,17822,125,78,68,58,172,154,172,104,258,369,915,198,213,537,242,735,23,24,26,12,14,16,18,10,20,24,57,15,399,297,213,505,5,17,23,23,5,6,22,9,19,25,61,17,1605,770,886,2649,8,19,25,41,32,8,25,12,38,47,96,29,648,1877,1138,3852,79,62,65,31,81,81,92,56,104,191,387,75,564,1820,795,1709,68,75,73,32,41,56,70,30,46,81,194,55,446,387,301,723,5,13,31,39,9,7,30,14,38,44,101,33,2336,1194,2195,7198,10,34,62,75,43,14,68,32,116,154,297,127,944,2733,1764,4947,104,97,97,59,109,123,156,76,156,235,669,169,198,701,326,795,26,30,28,17,25,23,21,13,26,26,63,25,220,201,136,467,4,8,11,21,4,3,16,9,19,22,45,19,989,513,833,2819,7,16,28,47,27,6,28,23,56,64,149,66,306,901,425,1121,31,30,30,16,31,31,33,25,50,64,133,1557],"order":[3891,3699,3683,3747,3491,2867,3875,3763,2531,3443,2851,2467,3507,3427,4003,3680,419,611,3889,3811,819,3555,3697,627,3843,2483,435,4019,1507,3744,2547,355,1443,371,2979,3872,2865,3761,2723,3488,2528,3841,3955,3890,3698,2819,3874,2464,2848,803,3715,3424,3682,675,3441,416,1843,608,2866,3746,2419,1459,3873,3379,3505,691,2850,1699,4067,4017,3713,3651,3939,352,2481,3571,483,2995,3681,931,3363,3827,2787,1827,3696,2915,3459,2499,3043,2403,3762,4000,2545,3808,2931,2849,4002,3667,2739,1523,817,3745,2466,3489,771,1715,3552,3842,3859,433,3888,3760,2530,387,3490,2817,3953,2465,3969,625,4018,2835,3123,3731,672,1440,3971,1504,2529,739,947,2435,3442,2720,818,3857,3425,3936,1955,2976,369,610,4095,3649,3457,2515,800,2433,1457,3810,3856,1841,3825,418,307,51,2497,3411,2978,2864,1395,3664,3506,883,2832,2803,3440,643,867,417,2737,3475,802,3395,2818,3426,2722,3107,2544,769,2912,291,2482,674,3569,689,3504,3858,1795,2833,1379,1824,579,4001,3712,1442,2730,499,1696,2546,2993,1475,1763,3954,1411,3360,2659,2400,4083,385,480,2417,2691,1713,3774,3710,2947,3714,35,626,1667,2929,3840,2784,2451,3331,3779,2480,2721,1907,2945,928,4064,3809,354,641,1441,4016,3059,3523,801,2994,930,1521,3902,3554,609,3619,1971,434,4081,3377,1409,3553,945,3938,432,2211,2675,2977,595,4066,690,897,353,2689,3635,1891,1793,3040,3408,3777,3795,3456,2275,3650,3970,3042,4035,770,2147,1506,3937,451,2786,339,864,3665,3539,1665,673,2738,755,995,1491,3907,1842,3728,787,2914,1698,2019,2913,899,3987,2512,2834,624,368,370,403,1635,736,1826,4033,3299,3648,323,3826,816,1811,3729,2163,4030,2432,3472,1458,3952,2611,592,0,3075,3824,2418,881,3521,2595,3473,2930,1505,2816,2401,2878,3011,3251,946,3393,1427,2448,1473,2402,2801,3666,3121,1952,3568,1825,2496,2656,3057,785,336,784,3187,1376,1808,3968,3235,1697,3570,1954,288,1969,1714,1779,738,259,3758,384,3905,1393,2498,3009,3,2227,2755,3122,1760,4065,688,3730,497,32,3923,659,3409,482,3361,1520,1651,3454,400,3378,3104,3458,2785,577,3347,2736,2434,1456,4051,929,3362,1923,707,3376,1794,3106,2992,3773,1365,2416,3984,1522,1683,642,1905,2513,49,3171,2144,3041,1840,4082,1888,34,3329,2946,305,386,1666,321,1809,2449,640,481,2707,50,882,3920,898,2883,3886,3966,3985,2771,2371,3518,866,3709,467,1921,2542,1424,2494,702,2690,3901,2291,1488,1970,2899,2688,2387,2963,1011,115,3694,3315,753,2272,3778,2274,786,1712,2592,99,915,2035,2514,306,3027,3587,3792,2558,3770,3536,656,1632,2862,3616,2802,768,3058,3392,446,3769,2704,4034,1731,992,401,2750,2339,3726,3772,563,2208,3105,2928,3775,835,3776,1953,2384,547,2753,593,2944,4080,382,2016,2673,2146,2881,1408,2450,3986,865,3537,1,3921,737,3073,2800,638,4014,578,3474,2161,594,290,2083,3344,163,449,944,3822,1890,3120,1762,3298,3249,3091,3410,337,3793,3757,1378,1425,1394,179,496,464,1410,2658,2210,830,3006,1377,33,2179,3706,723,1810,963,2099,3394,3764,2877,2734,1363,2705,1664,2960,3708,3185,2478,896,3502,3854,1347,3900,3520,1726,3704,3633,2896,3768,851,2990,3453,1474,3296,1939,2355,1987,576,3056,880,1472,498,289,275,2563,3906,227,1777,304,19,3756,912,705,3711,2225,3390,3522,2430,3134,4029,3794,257,994,1680,3232,3759,3452,320,1792,754,1489,3010,3700,657,1906,3705,2289,3328,752,4048,3838,1747,2961,3074,3618,3751,3450,3904,2162,2243,3313,1009,2,3922,272,3330,2177,3870,1392,48,3250,2018,3203,1889,1649,2674,2336,62,3449,3168,3517,4049,2706,961,1470,3008,430,3345,1859,3771,3903,4032,2768,3765,848,3750,1681,402,1360,958,3982,3566,2657,3444,2369,3965,2643,2033,2962,833,1729,2609,2830,720,3267,2594,1968,3445,2942,96,2051,2273,1761,686,2226,322,3766,3514,1854,2541,3582,3688,3509,1985,2209,3448,338,3898,3538,3896,2493,2754,2897,3885,16,4031,1710,3603,2846,3025,3516,814,2145,273,3513,3234,1936,3742,1875,3687,2490,3072,3024,3186,3508,2288,3634,3088,658,3707,913,2385,2290,3089,448,2554,3585,2557,2080,2160,1454,4026,1776,2003,3617,3201,1426,1922,4028,654,3897,2477,3495,3512,622,4013,2307,2540,2553,258,914,450,2627,2510,1904,2861,4078,2241,1634,3722,3501,2488,3438,2640,3754,2876,2672,3693,2814,3725,2882,3170,3314,544,2174,3312,2752,1603,2489,3678,3695,1682,2556,2872,3297,3662,131,515,98,2610,442,979,2579,1778,1187,3133,381,2552,2746,1331,3716,4050,2548,3385,2769,2561,1345,366,2608,2017,2880,1857,1534,1315,3248,1920,4094,1619,701,2131,2898,465,3054,3184,2543,3265,3752,2874,2115,993,3879,318,2526,3455,3767,3701,3724,256,3721,637,1490,1725,3470,2472,2484,2749,243,4015,46,1872,942,17,3884,445,829,437,3892,2593,546,3139,1650,2259,2386,2879,3503,4025,1518,160,3519,3692,3500,3727,3389,3821,378,113,834,2286,3090,1406,372,3632,3451,1123,1678,3515,2855,3346,2770,2476,3446,2492,698,2224,3026,3686,226,377,4012,3735,114,2471,2549,706,1010,962,1139,910,1203,3718,3431,3820,436,2535,177,440,2479,1361,2868,3702,1633,3118,1469,3869,2989,2176,3005,2559,1982,692,894,634,2446,3496,3198,398,1251,4024,849,3853,2034,376,3233,1730,2485,2798,703,3717,3806,704,3388,224,3600,2195,1744,3132,782,2082,3510,3899,2702,4020,2751,2536,3964,628,373,429,2748,3129,3169,1873,3834,2368,3832,441,2049,162,61,380,3823,2732,2429,3998,2733,1937,3749,3219,3565,2240,3703,2958,18,3374,494,697,423,2097,4021,4022,3741,1938,2735,3950,2323,97,2926,444,2495,510,3815,2745,2302,3494,2113,636,3264,3586,2576,3734,3386,976,2860,2242,3690,721,561,2870,3962,3887,112,2370,3384,3432,3837,3002,2178,195,129,3262,632,3790,67,3833,2305,3581,700,3130,2873,1853,2491,3577,3070,798,2238,2032,3878,3559,359,3720,3200,3283,2641,3436,428,3086,3880,2869,431,1745,1008,3391,3447,685,3422,2686,314,3135,1648,3486,3836,639,2988,2863,2727,3828,1616,178,2426,2555,2128,2474,2991,3202,2740,2353,750,2470,3439,3576,832,443,1966,3310,1312,3981,54,3961,2000,3960,3671,2550,2486,2352,3381,3578,3956,2462,1453,3580,3406,3852,379,3755,466,2983,3461,960,722,1986,2428,3893,2856,447,1571,2098,3829,1460,2424,2562,3844,313,3382,1918,3740,3738,3430,14,2845,1465,4027,2050,828,2538,1822,1838,3493,3155,3125,3967,4007,3973,2081,2048,850,1728,1422,2625,3511,3437,1722,2854,3572,813,3863,3974,3413,2726,3326,590,383,1858,2996,2414,3723,2304,2001,3868,3564,826,1709,2534,2067,2875,2829,3102,1806,2425,2501,63,2420,670,3498,424,957,1283,241,3318,3978,2941,2096,562,30,684,633,3137,302,679,2500,1461,3855,1447,2222,615,422,531,57,3126,1601,58,3567,274,2294,3601,3550,2256,2320,3743,83,4010,3894,3022,3972,365,2337,126,3415,60,696,2622,766,3882,3367,693,3128,3342,2560,1703,687,3131,3677,3266,360,374,364,1452,2293,2469,2744,3469,1708,2508,2938,53,130,1530,4079,1856,1120,1716,39,621,2839,3549,650,1466,635,3685,3534,3111,3958,2728,438,3460,3674,2129,3387,2170,2338,3414,4093,2718,1711,3661,1155,4077,1344,2974,1746,1727,3814,3584,242,4046,3000,682,1694,2112,3816,3871,678,1362,358,1517,3957,3835,1486,3429,1874,4006,3116,1984,3152,606,2982,176,1184,1346,2551,3866,65,2642,2158,161,3848,3934,1721,3380,2858,513,1455,1516,1724,350,1519,2810,2257,2506,977,2509,3652,2421,2354,831,2813,954,4023,1529,2284,2114,2831,3280,1587,2230,193,2998,2539,694,3317,3117,1464,3845,1448,2110,3372,623,3895,317,367,1934,978,2258,3918,2427,2820,3001,1677,3007,824,3663,3670,2192,4076,3190,3421,825,2173,3977,3963,2742,2828,1837,2422,1774,3846,3850,1662,3358,2436,3078,240,1075,3194,3052,3983,3733,3573,316,3839,2279,941,1528,3679,2437,699,649,2741,2577,2844,3830,2809,1248,3658,3466,620,2475,1717,545,3465,2234,80,2747,389,2871,1186,616,2407,2182,2408,1267,3719,1524,343,2624,3676,2278,414,3660,421,2440,341,2505,3468,3602,2524,3254,3499,3418,2692,1533,1405,3583,2431,1617,3136,3574,44,2936,2511,812,2698,2166,1402,2525,3053,1525,2297,2130,2254,2791,375,3849,1511,1468,45,2169,3485,2932,3055,2306,493,1329,2246,2626,3691,940,943,3047,225,3877,1532,2442,4092,2504,3270,1471,3434,3216,2165,426,2444,3862,652,2445,2812,629,3373,2285,1981,3579,2670,2925,2937,878,3818,2693,3479,2694,2441,2502,3322,439,147,2842,3375,394,47,2292,312,38,2950,3462,3077,1669,3478,56,614,334,2298,3781,653,4071,3124,1445,3004,2438,3949,2578,2957,3780,3138,1299,2002,1850,820,59,3646,5,2796,1706,1539,2824,342,128,393,807,2194,528,926,1201,3003,2606,2997,2797,3464,3197,1122,3980,1059,2808,346,3303,1502,2838,1852,2487,3341,680,1153,2826,2986,2406,4062,3324,362,390,2949,2919,1673,2859,388,630,1250,3997,3282,1702,1668,3110,1720,3189,2300,3558,1446,2172,3308,2064,1718,2766,2094,492,6,2398,319,3883,1467,1438,3119,956,560,2948,2725,3397,2701,2934,504,2940,2821,3193,2847,4008,1790,3196,2245,2618,3309,3253,3482,3098,1568,506,309,500,509,655,893,2697,325,2229,1902,2853,2804,3654,3653,3383,397,462,2287,2731,3321,2461,953,3471,1965,1462,631,3819,3281,1413,644,3684,695,1602,3943,1849,1848,3258,646,3278,2621,3851,3630,514,3657,3976,1674,3786,487,2714,3533,2933,2164,2710,3753,3560,427,144,2533,2171,618,3396,2620,2519,110,190,238,211,64,1670,2193,3991,1917,948,1844,1390,2984,2282,3847,3269,1967,2054,1855,1450,270,2522,194,1950,26,2190,1687,2954,3100,508,2910,3127,2924,2527,3420,2412,3423,1219,392,3656,3354,890,3487,3669,3996,3575,950,3948,1401,1006,959,645,1723,1397,2711,3206,2270,827,2458,66,781,3316,3484,1676,2156,2030,3366,1512,2413,1421,1027,2920,2181,2825,2822,2790,1313,3325,122,2700,3477,310,662,3784,505,2939,797,1535,1964,3804,2455,3340,1978,52,3467,2743,2065,1679,1831,3782,3182,783,3785,3435,396,2296,663,902,3831,3038,1704,1404,3082,3748,495,55,906,3095,3739,9,3532,2221,2782,666,2220,118,1600,2321,3351,822,3081,602,599,2215,909,2894,2301,3813,949,2447,2237,2943,3084,3261,3788,3085,3805,2066,3246,4005,1396,2953,1412,2952,2685,2794,3404,3402,2717,3563,1091,3343,2102,2157,762,2151,1185,1839,2799,399,3802,3398,3311,3368,2062,1137,2805,315,2999,2507,3069,3080,1690,1618,13,357,1400,2391,2604,406,806,3060,1296,2228,2299,3659,1281,4090,3999,2696,2249,2703,815,2443,2503,1477,935,2175,3094,3087,669,2684,3276,3218,761,3061,3799,286,2792,413,952,3257,3524,2410,3320,2233,648,3944,3789,1701,760,749,4011,3114,3192,1417,1510,651,301,1022,3975,295,300,2617,3959,324,3048,2405,718,677,4084,192,3101,796,3990,2806,3112,3333,780,1821,10,4089,2518,1836,3338,2463,42,3302,3153,326,821,2168,117,4088,29,1815,303,3046,1805,2918,4037,2118,28,2150,407,3214,1121,1418,2614,2390,3195,349,1526,3861,3867,748,2682,808,23,3064,4086,1686,3401,4085,2454,3979,2460,501,2981,3199,3994,1414,2252,2101,3050,3188,3294,2223,3689,743,1485,3535,1484,3525,1973,3260,2214,3463,2046,3370,846,1646,2815,3205,3142,1265,2423,3951,756,3645,1328,2811,1314,589,478,1451,1914,1742,1693,2295,3217,1495,3644,1977,2987,3076,3323,751,598,529,1249,2415,3337,2250,1136,2283,3066,3497,12,4038,794,1463,3357,1719,2236,586,246,2927,3334,2366,605,1383,121,4074,363,1202,1531,3062,4070,2053,938,901,2106,3876,2623,2843,671,395,2956,2668,1437,3115,3433,1056,1501,2605,1476,3529,3543,512,1217,3012,3071,892,3356,2837,1983,764,2959,2126,1820,3252,1407,3350,3068,410,2523,4072,3371,3306,4036,3798,4044,31,2109,1845,2719,2473,3910,351,308,2105,208,1555,765,37,2394,734,810,254,3079,934,2616,1330,511,1908,2154,3405,3327,4045,1138,245,2244,3154,889,3933,3946,507,2574,2676,3562,2680,3067,415,3942,4091,3791,3268,2827,1416,3400,348,1384,125,3642,2599,2389,1959,1851,1804,2823,3675,15,2087,2322,3014,2248,2699,2716,604,1515,3274,2382,3020,619,668,574,174,4047,3319,2239,3548,1926,3263,4040,1767,862,186,3141,955,1832,3917,3655,908,3783,1675,1235,2280,81,1846,888,3787,1431,1870,3641,2159,3640,3023,1933,1107,1672,3365,2669,884,1434,3083,3051,3175,1980,1025,1481,974,2681,3256,3419,3909,1585,3483,1913,2277,799,2967,70,1403,1389,1527,2108,1807,1661,452,3528,3191,778,2142,231,4075,2453,2852,2218,2935,134,2972,1514,2973,3927,412,1974,1823,1430,3526,3273,3013,3021,3926,2078,2232,1398,2613,3908,124,4041,3065,1266,607,613,3407,3546,3598,911,900,502,22,405,2117,103,282,1972,3807,236,311,1200,1786,3109,8,1785,4061,3103,82,530,1280,2757,2266,40,3336,3530,2186,3638,2262,198,182,1976,3930,2135,1772,2411,1692,361,1912,1439,2303,2663,2922,330,2760,1780,1367,261,584,391,2263,905,2607,3307,2184,2167,279,2966,3359,1830,580,2886,2756,2654,4055,1420,1423,1695,647,1480,4,11,329,2152,3180,486,2951,2687,1958,3628,3737,3881,1503,2235,1386,823,791,3428,2619,2537,3557,1537,683,2029,3017,206,1796,4042,1685,1264,1773,585,1374,2778,250,2180,1482,1789,1449,744,2397,1909,2795,885,2666,3174,453,3673,488,146,877,757,1500,1998,3551,3647,2057,2517,1005,2350,3399,1282,895,1150,661,2970,3166,244,1660,43,2762,456,1073,3016,1058,2111,3099,3916,777,1436,2758,2253,4063,108,774,1671,3941,1901,746,2761,328,425,1366,2955,582,990,2612,936,2134,3542,3259,2093,2729,1766,1707,1478,2664,886,1818,742,1570,142,2903,3093,1775,4060,460,1886,2695,1834,268,1925,904,3349,2268,1979,1388,2373,2092,876,2074,2439,1382,123,925,3932,3332,210,2100,3864,1007,597,3036,294,3063,7,262,2086,2031,1924,3290,3018,2532,1297,1916,3417,767,588,3636,951,790,116,3914,1487,1154,1847,266,296,2590,3803,3244,3245,2775,1171,2206,2185,2071,209,120,3031,2023,145,3629,27,3403,3637,1509,2709,758,3210,924,3355,1429,3335,2764,1419,3150,667,3527,2724,102,1214,1043,763,2138,1370,3643,1910,1930,2251,2678,2671,2247,2598,811,3239,2662,21,3531,1802,2715,2028,891,3935,1216,3238,3178,1152,1498,181,871,3812,1089,3272,335,503,4039,2840,230,2566,558,78,1788,298,2906,2780,2155,3271,332,2070,2909,3255,2683,772,411,1004,2917,1168,2638,1797,3247,237,2857,773,1962,347,3287,2457,2975,127,805,2789,3279,2104,2216,265,333,1798,3230,3301,189,454,1479,1262,2459,3286,2189,1024,3623,3925,197,3339,1949,1784,4058,2884,2396,1104,2586,106,776,3037,4069,1494,3277,1733,1391,2090,2058,1358,1586,271,2781,1415,3158,1074,1911,3304,1814,2893,2807,2269,2374,581,1499,1758,2677,922,2468,676,3913,4087,2885,2255,490,463,477,1781,249,3039,2060,3181,2902,3736,591,927,69,2231,278,1218,2602,476,999,2188,1657,3614,111,3015,457,3242,2014,3481,2765,3292,461,3183,455,3212,3204,2774,2318,1919,879,2149,2570,1569,2183,3547,1800,264,1915,1929,1278,872,1381,3492,2122,1198,3159,1658,133,2364,1652,2052,3019,1768,252,3919,2399,3865,1614,2121,730,1935,2095,1691,2378,2116,471,356,3631,1552,1638,2650,3668,2199,1705,109,3045,1584,1960,284,2365,3995,2890,1088,939,708,191,2107,420,1895,3213,1932,3140,269,1770,2409,1057,239,2565,1951,3912,1829,2908,2271,712,3275,709,2360,2361,1740,1782,2572,2569,3797,491,188,4009,1387,327,713,2372,1026,845,2582,1023,2141,2103,260,3989,1483,3860,710,345,1630,2520,2573,747,1737,2213,2362,2133,94,2061,222,3541,2583,1900,248,251,907,1373,1644,2267,1645,1021,202,185,2923,285,4043,2888,3146,933,1040,3293,3209,1255,612,2076,3672,253,458,3622,1975,119,2056,2381,1538,919,918,3176,180,714,340,2198,1948,3162,3911,2380,3732,3556,2521,2055,3947,1653,283,570,1896,617,293,409,1349,717,2202,759,1639,138,1269,1493,3412,2140,1435,716,603,1801,3034,1444,1734,1399,2588,2091,1105,1656,1536,2836,1928,3817,1072,479,1298,247,2767,1134,1813,573,2713,474,3639,1146,2575,2045,2667,2980,2120,87,2261,3624,1771,870,167,204,1765,2376,459,3590,2191,795,4054,299,2037,2348,887,2085,1885,2063,287,2653,3030,858,1090,1018,1835,1232,3108,331,1663,2841,267,2219,1170,2036,1342,903,1803,861,2788,3113,2783,1787,2647,681,2187,572,86,1014,2652,1957,90,3157,166,234,2763,2516,2600,104,1169,2615,789,1017,4004,2077,727,1943,3215,184,1799,2779,2603,3223,1086,2889,733,874,3594,775,1642,1640,1732,1791,170,3915,2377,485,3800,1158,2059,2044,2088,719,583,1903,2357,3207,2985,172,1145,2047,3165,1206,1233,1654,1270,3596,1741,3145,998,2024,2281,3295,1348,779,36,2759,1013,3353,201,569,187,2646,2892,2124,74,1508,3148,1738,2971,2040,964,1989,1819,989,1689,972,3589,1350,1963,2022,3599,587,3369,3610,277,1754,3597,3167,3208,2901,1942,1946,3992,1879,3240,263,2393,1647,3626,3416,726,3627,2276,470,1757,2041,196,2204,1254,1751,1230,3097,2343,2395,3179,966,2911,3285,2568,24,1222,1372,175,2042,2143,2367,173,1210,4059,3173,235,568,715,3164,1736,3612,1221,1433,1513,2591,2965,965,344,1894,255,1659,2661,3143,854,1999,2597,991,1354,2075,1012,526,3291,973,2589,215,3561,107,1553,3222,1142,2712,3931,975,132,1869,1700,2404,804,41,2205,855,3801,1927,732,1626,3229,3226,183,2043,218,3593,842,1385,2038,2679,1898,2069,1743,3607,1990,3606,731,2655,2079,1166,1148,1141,3940,4053,2015,25,3945,2344,601,3035,711,1931,2026,1750,2013,3613,158,1862,3096,1828,741,2139,3228,137,2349,200,2587,1020,2634,2564,2125,665,2334,1016,3588,3592,1263,1375,1878,2316,1988,2119,837,1598,1996,1357,1000,3544,1041,73,3237,2456,2207,3364,735,860,1783,556,970,988,1261,2708,199,1353,141,2773,1070,2351,2027,847,205,232,836,838,1149,3149,1273,85,1019,1274,1371,844,1260,2921,2148,792,2312,3044,1002,101,2645,2358,575,1030,1882,2571,203,557,1868,214,1893,1205,1326,1997,740,2319,1277,475,2895,4068,3480,565,566,1092,281,2793,1157,1078,140,1341,969,68,229,1077,809,2629,2309,2153,3231,863,1993,3243,1352,2581,542,1276,1622,1833,1209,2665,3352,1234,1884,3211,1106,571,1861,280,841,1127,2007,76,1213,3092,1038,1191,207,20,2916,1029,3993,564,484,2632,2633,1860,1268,869,2630,1629,1866,1197,2356,1864,600,2776,1225,983,1094,4073,2330,2907,2660,1992,932,1756,1228,2363,3545,1735,986,1899,2379,793,2346,220,2636,3144,968,1816,3300,559,2127,2567,875,596,1364,1655,3929,2628,1196,1337,1258,1133,1204,143,1739,2012,2891,2383,2392,3305,1147,92,853,77,3595,664,3611,3615,2123,923,917,1144,840,1356,3049,3476,1199,2887,2327,1132,408,1126,469,1887,2197,2203,1994,1554,1623,3151,1991,3029,1643,3147,1380,1162,1755,1684,1336,2968,1612,2332,1275,1085,1003,1582,937,967,1605,3032,1613,2313,1369,1294,1497,1759,1359,3621,3163,1340,2637,3591,1190,1102,1211,1063,1338,93,1749,2039,1093,660,2310,728,2388,3796,1042,150,2317,1610,1628,219,2452,1877,223,1432,2264,3348,168,2072,3924,1151,1212,971,1496,1604,1140,1812,1226,3988,1082,2342,221,538,3928,1130,1081,1084,2021,1220,551,2375,1143,1606,2212,1637,297,3177,71,1764,1015,135,1961,151,2132,3221,788,522,2314,1817,1246,1871,2340,2584,136,2964,1865,79,2010,1956,1609,2006,292,1597,2265,1688,1215,2326,1941,2347,1947,489,3284,2904,1995,154,1259,2772,552,2585,868,2333,2900,1492,1355,2331,2217,4056,1182,1253,1325,1324,2651,2084,1135,472,2777,1118,156,567,1550,2335,2136,1111,1054,982,171,1239,1271,404,2648,2905,1368,2308,2649,2969,2644,1062,520,1156,1631,2068,72,2137,2639,1594,3608,139,1319,165,1165,1428,2601,1272,1068,518,1615,725,1110,2359,2328,527,228,213,1351,1621,996,554,1033,1256,3540,1581,1769,1114,95,2073,524,1069,1327,729,2200,1083,1128,2341,1047,1292,1596,3605,2596,75,105,873,550,4052,1071,1641,920,1161,1310,997,1303,4057,2260,1098,1608,3161,1333,3620,1223,1339,1194,1224,3236,521,517,1229,1208,525,1034,1087,3227,1244,157,2089,859,1593,3241,1238,276,3172,745,1580,1343,2315,1076,1863,3288,3289,1279,159,2011,91,535,1207,2020,1592,1636,1293,1247,987,473,1050,2325,555,1066,1227,1625,921,100,1334,540,3028,539,1752,2311,3156,1046,1242,1125,1897,534,516,1944,1189,1883,1575,2196,1867,1332,1031,1306,1131,843,1080,1892,839,1192,2635,1164,3625,1175,1285,1167,1231,1160,468,1627,541,1028,1322,1195,1599,1320,1117,1541,1097,1036,3033,3160,3609,233,2005,1245,724,536,1290,916,1583,1308,1116,1109,2631,857,1301,149,1624,1032,1252,1753,856,3604,1052,2324,1876,1067,543,1178,1880,852,1039,1549,1181,1174,523,1037,1101,1100,1295,2025,1566,1588,2345,2329,1748,2580,1079,1945,1289,981,84,1589,1035,1286,984,1542,1237,1323,1300,3225,1159,2201,1548,89,1243,3224,1318,1309,1180,1001,155,212,1045,1119,216,1183,1288,1103,217,88,549,3220,1307,164,1578,519,1053,1096,1611,1302,1335,1061,1317,1590,1551,1051,1304,1940,1881,169,1284,1574,1607,1064,1576,1095,1545,1595,1620,1287,1559,1579,1055,2008,1562,980,1311,1163,1321,533,1099,1316,1564,548,1257,1129,1173,1544,1546,1540,2004,1563,1124,1115,1591,1291,1565,152,2009,985,537,1573,1560,1188,1179,1236,553,148,1305,1567,1065,1543,1113,1112,1193,1044,1240,1547,1572,532,1558,153,1108,1557,1577,1241,1049,1176,1172,1048,1060,1556,1561,1177],"marginals":[[0.19477492570877075,0.10649383068084717,0.247123122215271,0.45157307386398315],[0.0582960844039917,0.3280942440032959,0.2880883812904358,0.3254862427711487],[0.2342706322669983,0.2505735754966736,0.3374660015106201,0.17765474319458008],[0.14250117540359497,0.08728295564651489,0.40410107374191284,0.36607974767684937],[0.8768917918205261,0.030184447765350342,0.03072422742843628,0.062164485454559326],[0.16936475038528442,0.18646925687789917,0.16657835245132446,0.477552592754364]]}; | |
| const gridEl = document.getElementById('w3-grid'); | |
| // Everything below derives from DATA, so swapping the embedded JSON | |
| // (different model / sequence / vocab) updates the whole widget. | |
| const shortModel = DATA.model.split('/').pop(); | |
| const bp = DATA.inputs.length * DATA.k; | |
| const link = document.getElementById('w3-model-link'); | |
| link.href = 'https://huggingface.co/HuggingFaceBio/' + DATA.model; | |
| link.textContent = shortModel; | |
| document.getElementById('w3-meta').textContent = shortModel + ' · ' + bp + ' bp'; | |
| document.getElementById('w3-vocab-a').textContent = DATA.vocab.toLocaleString(); | |
| document.getElementById('w3-vocab-b').textContent = DATA.vocab.toLocaleString(); | |
| document.getElementById('w3-vocab-c').textContent = DATA.vocab.toLocaleString(); | |
| function colored(s) { | |
| return Array.from(s).map((c) => 'ACGT'.includes(c) | |
| ? '<span class="b-' + c + '">' + c + '</span>' : c).join(''); | |
| } | |
| function kmerTok(s, extra) { | |
| return '<span class="tok kmer ' + (extra || '') + '">' + colored(s) + '</span>'; | |
| } | |
| // Section 1 · inputs + ground truth | |
| document.getElementById('w3-inputs').innerHTML = DATA.inputs.map((k) => kmerTok(k)).join(''); | |
| document.getElementById('w3-gt').innerHTML = kmerTok(DATA.ground_truth, 'w3-gt-tok'); | |
| // Section 2 · histogram (sorted prob) + cumulative mass + uniform reference + gt marker | |
| function ranksForMass(frac) { | |
| for (const pt of DATA.curve) if (pt.c >= frac) return pt.r; | |
| return DATA.vocab; | |
| } | |
| document.getElementById('w3-sub').innerHTML = | |
| 'Top prediction ' + kmerTok(DATA.top[0].kmer) + ' at <b>' + (DATA.top[0].p * 100).toFixed(2) + '%</b>. ' + | |
| 'Half the probability mass falls in the top <b>' + ranksForMass(0.5).toLocaleString() + '</b> of ' + | |
| DATA.vocab.toLocaleString() + ' tokens. Target token ' + kmerTok(DATA.ground_truth, 'w3-gt-tok') + | |
| ' ranks <b>' + DATA.gt_rank + '</b> (' + (DATA.gt_p * 100).toFixed(2) + '%).'; | |
| (function renderChart() { | |
| const svg = document.getElementById('w3-chart'); | |
| const W = 1000, H = 210, padL = 6, padR = 6, padT = 12, padB = 30; | |
| const cw = W - padL - padR, ch = H - padT - padB; | |
| const MAX_RANK = 128; // Only show top 128 ranks | |
| const c = DATA.curve.filter(pt => pt.r <= MAX_RANK); | |
| const V = DATA.vocab, maxP = c[0].p, baseY = padT + ch; | |
| const X = (r) => padL + ((r - 1) / (MAX_RANK - 1)) * cw; | |
| const YP = (p) => padT + ch - (p / maxP) * ch; | |
| const YC = (v) => padT + ch - v * ch; | |
| let area = 'M ' + X(c[0].r).toFixed(1) + ' ' + baseY.toFixed(1); | |
| c.forEach((pt) => area += ' L ' + X(pt.r).toFixed(1) + ' ' + YP(pt.p).toFixed(1)); | |
| area += ' L ' + X(c[c.length - 1].r).toFixed(1) + ' ' + baseY.toFixed(1) + ' Z'; | |
| const cumPts = c.map((pt) => X(pt.r).toFixed(1) + ',' + YC(pt.c).toFixed(1)).join(' '); | |
| // Only show ground truth marker if it's within the displayed range | |
| let gtMarker = ''; | |
| if (DATA.gt_rank <= MAX_RANK) { | |
| const gx = X(DATA.gt_rank); | |
| gtMarker = '<line x1="' + gx.toFixed(1) + '" y1="' + padT + '" x2="' + gx.toFixed(1) + '" y2="' + baseY.toFixed(1) + '" stroke="#b00020" stroke-width="1.4" stroke-dasharray="4 3"/>' + | |
| '<text x="' + (gx + 5).toFixed(1) + '" y="' + (padT + 11) + '" font-family="JetBrains Mono, monospace" font-size="11" fill="#b00020">ground truth · rank ' + DATA.gt_rank + '</text>'; | |
| } | |
| // Use actual last rank in data instead of MAX_RANK to avoid line extending beyond data | |
| const lastRank = c[c.length - 1].r; | |
| const uniformMaxCum = lastRank / V; // Uniform distribution cumulative at last rank | |
| svg.innerHTML = | |
| // 50% gridline | |
| '<line x1="' + padL + '" y1="' + YC(0.5).toFixed(1) + '" x2="' + (padL + cw) + '" y2="' + YC(0.5).toFixed(1) + '" stroke="#e3e1d6" stroke-dasharray="3 3"/>' + | |
| '<text x="' + (padL + cw) + '" y="' + (YC(0.5) - 4).toFixed(1) + '" text-anchor="end" font-family="JetBrains Mono, monospace" font-size="10" fill="#8a8a83">50% mass</text>' + | |
| // uniform-reference cumulative (diagonal from 0 to lastRank/V) | |
| '<line x1="' + X(1).toFixed(1) + '" y1="' + YC(0).toFixed(1) + '" x2="' + X(lastRank).toFixed(1) + '" y2="' + YC(uniformMaxCum).toFixed(1) + '" stroke="#bbb" stroke-dasharray="5 4"/>' + | |
| // per-token probability area | |
| '<path d="' + area + '" fill="rgba(49,127,63,0.14)" stroke="#317f3f" stroke-width="1.3"/>' + | |
| // cumulative mass | |
| '<polyline points="' + cumPts + '" fill="none" stroke="#b8862c" stroke-width="1.8"/>' + | |
| // ground-truth rank marker (only if within range) | |
| gtMarker + | |
| // x-axis ticks | |
| '<text x="' + padL + '" y="' + (H - 9) + '" font-family="JetBrains Mono, monospace" font-size="10" fill="#8a8a83">rank 1 (most probable)</text>' + | |
| '<text x="' + (padL + cw) + '" y="' + (H - 9) + '" text-anchor="end" font-family="JetBrains Mono, monospace" font-size="10" fill="#8a8a83">rank ' + MAX_RANK + '</text>'; | |
| })(); | |
| // top-8 chips | |
| document.getElementById('w3-top').innerHTML = | |
| DATA.top.map((x) => '<span class="w3-topchip' + (x.kmer === DATA.ground_truth ? ' ground-truth' : '') + '"><span class="km">' + colored(x.kmer) + | |
| '</span><span class="pct">' + (x.p * 100).toFixed(2) + '%</span></span>').join(''); | |
| // Section 3 · marginalized base-level (bases sorted by prob; box + top bar follow the most probable base) | |
| // Scale each column independently so the tallest bar in each column reaches 100%. | |
| const GREY = '#d3d0c4'; | |
| let selPos = 0; // selected position (0..k-1) drives the grid coloring | |
| let mode = 'all'; // 'all' = color by base at position; 'A'/'T'/'C'/'G' = isolate that base | |
| function baseAtFlat(idx, p) { return (idx >> (2 * (DATA.k - 1 - p))) & 3; } | |
| function renderMargCol(posIndex, dist4) { | |
| const pairs = BASES.map((b, j) => ({ b, p: dist4[j] })).sort((a, z) => z.p - a.p); | |
| const colMax = Math.max(0.0001, ...dist4); | |
| const col = document.createElement('div'); | |
| col.className = 'posgrid__col clickable argmax-' + pairs[0].b + (posIndex === selPos ? ' sel' : ''); | |
| col.innerHTML = | |
| '<div class="posgrid__pos">Position ' + (posIndex + 1) + '</div>' + | |
| '<div class="posgrid__bars">' + | |
| pairs.map((pr) => { | |
| const w = (pr.p / colMax) * 100; | |
| return '<div class="mini-row"><span class="ml" style="color:' + BASE_COLOR[pr.b] + '">' + pr.b + '</span>' + | |
| '<span class="mt"><span class="mf" style="width:' + w.toFixed(1) + '%;background:' + BASE_COLOR[pr.b] + '"></span></span>' + | |
| '<span class="mv">' + (pr.p * 100).toFixed(0) + '%</span></div>'; | |
| }).join('') + '</div>'; | |
| col.addEventListener('click', () => { selPos = posIndex; renderMargGrid(); recolorGrid(); }); | |
| gridEl.appendChild(col); | |
| } | |
| function renderMargGrid() { | |
| gridEl.innerHTML = ''; | |
| DATA.marginals.forEach((dist, pos) => renderMargCol(pos, dist)); | |
| } | |
| const allgrid = document.getElementById('w3-allgrid'); | |
| allgrid.innerHTML = DATA.order.map(() => '<span class="w3-cell"></span>').join(''); | |
| const cells = allgrid.children; | |
| const hintEl = document.getElementById('w3-grid-hint'); | |
| function recolorGrid() { | |
| for (let n = 0; n < DATA.order.length; n++) { | |
| const letter = BASES[baseAtFlat(DATA.order[n], selPos)]; | |
| cells[n].style.background = | |
| mode === 'all' ? BASE_COLOR[letter] | |
| : (letter === mode ? BASE_COLOR[mode] : GREY); | |
| } | |
| hintEl.innerHTML = mode === 'all' | |
| ? 'colored by base at position ' + (selPos + 1) | |
| : 'position ' + (selPos + 1) + ' = <span class="b-' + mode + '">' + mode + '</span> highlighted'; | |
| } | |
| document.querySelectorAll('#w3-mode .pill').forEach((b) => { | |
| b.addEventListener('click', () => { | |
| document.querySelectorAll('#w3-mode .pill').forEach((x) => x.classList.remove('active')); | |
| b.classList.add('active'); | |
| mode = b.dataset.mode; | |
| recolorGrid(); | |
| }); | |
| }); | |
| renderMargGrid(); | |
| recolorGrid(); | |
| })(); | |
| </script> | |
| </body> | |
| </html> |