lvwerra's picture
lvwerra HF Staff
feat(embed): hide heading + caption, white background
312c7a7
<!DOCTYPE html>
<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-500M 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) !important; }
.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 i { width: 12px; height: 3px; display: inline-block; }
.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 .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: first the raw distribution over the
full six-mer vocabulary, then that same distribution marginalized down to the per-position base
distributions.
</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 &amp; 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">&rarr;</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> six-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><i style="background:#317f3f"></i>per-token probability</span>
<span><i style="background:#b8862c"></i>cumulative mass</span>
<span><i style="background:#bbb"></i>uniform reference</span>
<span><i style="background:#b00020"></i>ground truth rank</span>
</div>
<div class="demo-label" style="margin-top: 14px">Most likely 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> six-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 likely &rarr; 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, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
}
// 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('');
}
(function setupW3real() {
const DATA = {"model":"HuggingFaceBio/Carbon-500M","k":6,"vocab":4096,"inputs":["AGCCCT","CCAGGA","CAGGCT","GCATCA","GAAGAG","GCCATC","AAGCAG","GTCTGT"],"ground_truth":"TCCAAG","gt_rank":709,"gt_p":0.000412,"gt_logp":-7.7951,"top":[{"kmer":"GTGTGT","p":0.00352},{"kmer":"GGGGGG","p":0.00298},{"kmer":"GAGGAG","p":0.00214},{"kmer":"CCCCCC","p":0.00196},{"kmer":"GGGAAG","p":0.00185},{"kmer":"GCTGCT","p":0.00182},{"kmer":"GAGAAG","p":0.0017},{"kmer":"GGGGAG","p":0.0016}],"curve":[{"r":1,"p":0.003525,"c":0.00352},{"r":2,"p":0.002976,"c":0.0065},{"r":3,"p":0.002143,"c":0.00864},{"r":4,"p":0.001964,"c":0.01061},{"r":5,"p":0.001848,"c":0.01246},{"r":6,"p":0.001824,"c":0.01428},{"r":7,"p":0.001703,"c":0.01598},{"r":8,"p":0.001596,"c":0.01758},{"r":9,"p":0.001506,"c":0.01908},{"r":10,"p":0.001452,"c":0.02054},{"r":11,"p":0.001428,"c":0.02196},{"r":12,"p":0.001367,"c":0.02333},{"r":13,"p":0.001361,"c":0.02469},{"r":14,"p":0.001351,"c":0.02604},{"r":15,"p":0.001347,"c":0.02739},{"r":16,"p":0.001343,"c":0.02873},{"r":17,"p":0.001328,"c":0.03006},{"r":18,"p":0.001317,"c":0.03138},{"r":19,"p":0.001306,"c":0.03268},{"r":20,"p":0.001262,"c":0.03395},{"r":22,"p":0.001249,"c":0.03645},{"r":23,"p":0.001244,"c":0.03769},{"r":24,"p":0.001228,"c":0.03892},{"r":25,"p":0.001224,"c":0.04014},{"r":27,"p":0.001188,"c":0.04252},{"r":28,"p":0.001185,"c":0.04371},{"r":30,"p":0.001138,"c":0.04599},{"r":32,"p":0.001116,"c":0.04824},{"r":34,"p":0.001091,"c":0.05042},{"r":36,"p":0.001075,"c":0.05258},{"r":38,"p":0.001062,"c":0.05471},{"r":40,"p":0.001053,"c":0.05682},{"r":42,"p":0.001052,"c":0.05892},{"r":45,"p":0.001029,"c":0.06203},{"r":47,"p":0.001014,"c":0.06406},{"r":50,"p":0.001,"c":0.06709},{"r":53,"p":0.000995,"c":0.07007},{"r":56,"p":0.000983,"c":0.07303},{"r":59,"p":0.000959,"c":0.07593},{"r":62,"p":0.000939,"c":0.07878},{"r":66,"p":0.000924,"c":0.0825},{"r":70,"p":0.000915,"c":0.08618},{"r":74,"p":0.000886,"c":0.08976},{"r":78,"p":0.000879,"c":0.09329},{"r":82,"p":0.000877,"c":0.0968},{"r":87,"p":0.000865,"c":0.10114},{"r":92,"p":0.000847,"c":0.1054},{"r":97,"p":0.000836,"c":0.1096},{"r":103,"p":0.000825,"c":0.11457},{"r":109,"p":0.000819,"c":0.11951},{"r":115,"p":0.000798,"c":0.12434},{"r":122,"p":0.000793,"c":0.12991},{"r":129,"p":0.000784,"c":0.13543},{"r":136,"p":0.000768,"c":0.14085},{"r":144,"p":0.000754,"c":0.14694},{"r":152,"p":0.000747,"c":0.15294},{"r":161,"p":0.000728,"c":0.15955},{"r":170,"p":0.00072,"c":0.16607},{"r":180,"p":0.000709,"c":0.17319},{"r":190,"p":0.000694,"c":0.1802},{"r":201,"p":0.000686,"c":0.18779},{"r":213,"p":0.000675,"c":0.19595},{"r":225,"p":0.000661,"c":0.20395},{"r":238,"p":0.000648,"c":0.21247},{"r":251,"p":0.000638,"c":0.22085},{"r":266,"p":0.000628,"c":0.23035},{"r":281,"p":0.000618,"c":0.23969},{"r":297,"p":0.000608,"c":0.24949},{"r":314,"p":0.000596,"c":0.25971},{"r":332,"p":0.000579,"c":0.27027},{"r":351,"p":0.00057,"c":0.28116},{"r":371,"p":0.000557,"c":0.29245},{"r":393,"p":0.000542,"c":0.30454},{"r":415,"p":0.000533,"c":0.31636},{"r":439,"p":0.000523,"c":0.329},{"r":464,"p":0.000512,"c":0.34193},{"r":491,"p":0.000498,"c":0.35557},{"r":519,"p":0.000483,"c":0.3693},{"r":549,"p":0.00047,"c":0.38355},{"r":581,"p":0.000457,"c":0.39836},{"r":614,"p":0.000445,"c":0.41324},{"r":649,"p":0.000431,"c":0.42858},{"r":686,"p":0.000418,"c":0.44427},{"r":709,"p":0.000412,"c":0.45381},{"r":726,"p":0.000404,"c":0.46072},{"r":767,"p":0.00039,"c":0.47703},{"r":811,"p":0.000378,"c":0.49391},{"r":858,"p":0.000361,"c":0.51126},{"r":907,"p":0.000345,"c":0.52851},{"r":959,"p":0.000328,"c":0.54603},{"r":1015,"p":0.000314,"c":0.564},{"r":1073,"p":0.000301,"c":0.58178},{"r":1134,"p":0.000288,"c":0.59969},{"r":1199,"p":0.000274,"c":0.61799},{"r":1268,"p":0.000262,"c":0.63652},{"r":1341,"p":0.00025,"c":0.65516},{"r":1418,"p":0.000238,"c":0.67398},{"r":1500,"p":0.000228,"c":0.69309},{"r":1586,"p":0.00022,"c":0.71242},{"r":1677,"p":0.00021,"c":0.73197},{"r":1773,"p":0.000201,"c":0.75167},{"r":1875,"p":0.000191,"c":0.77165},{"r":1982,"p":0.00018,"c":0.79155},{"r":2096,"p":0.000168,"c":0.81139},{"r":2217,"p":0.000158,"c":0.83112},{"r":2344,"p":0.000146,"c":0.85035},{"r":2478,"p":0.000137,"c":0.86924},{"r":2621,"p":0.000127,"c":0.88802},{"r":2771,"p":0.000116,"c":0.90618},{"r":2930,"p":0.000106,"c":0.92376},{"r":3098,"p":9.4e-05,"c":0.94055},{"r":3276,"p":8.3e-05,"c":0.95633},{"r":3464,"p":7e-05,"c":0.9707},{"r":3663,"p":5.5e-05,"c":0.98313},{"r":3874,"p":4e-05,"c":0.99322},{"r":4096,"p":9e-06,"c":1.0}],"marginals":[[0.15659,0.1761,0.23465,0.43265],[0.26487,0.26826,0.25299,0.21387],[0.22454,0.23688,0.26712,0.27145],[0.2447,0.23043,0.25727,0.2676],[0.27602,0.23546,0.24982,0.2387],[0.24151,0.23914,0.25652,0.26284]],"bases":["A","T","C","G"],"order":[3549,4095,3315,2730,4035,3705,3267,4083,1365,3640,3299,2275,3699,3891,3747,3900,3312,4080,3120,4067,3123,3635,2291,2243,3132,2535,2457,3727,3888,2531,3704,2467,3571,4047,3559,2547,3324,3711,3303,3238,3751,3239,3491,3276,3555,3632,3683,3583,4003,3706,2499,3135,3495,3726,2723,3644,3264,3128,3703,3708,3687,2288,2255,3523,3494,3237,4089,3903,3855,4032,2470,3314,3896,3696,3982,3983,3647,2184,4007,3955,3734,3321,4006,3235,3715,3279,3320,3875,3897,4082,3743,4071,2522,3568,3575,3750,3327,4088,3546,2471,3578,3939,4040,4092,2611,3641,3485,3577,3722,3481,3271,3134,2521,0,3322,2659,3720,2665,3738,3319,3313,3843,2675,1699,4090,3242,3214,3427,3212,3840,2544,3478,4044,3990,243,3642,3998,3072,3302,3890,3673,3121,3980,3130,3222,3754,3075,3852,3318,3689,3576,3122,3498,3967,3129,3326,2300,3718,3580,3999,2279,3171,3208,4005,2240,3497,2252,1443,2680,3719,3413,3551,3133,3431,1690,3712,4039,3587,2454,3901,3746,2274,3482,3674,2714,3698,3215,3471,3619,195,3545,3994,3206,2403,3466,3710,3742,4087,3417,3462,2616,3976,1703,2406,3535,3527,2687,2278,2215,2703,3087,2211,3127,3272,3193,2650,3107,3266,3196,3724,2296,3975,3187,2702,3749,4002,3486,3942,3993,3528,2608,3702,2462,3550,2559,2469,3929,3530,2556,3997,3470,4081,3753,2407,2214,2727,3737,3697,2553,3688,2409,2458,3965,3709,3111,4086,3943,3639,3889,3961,3468,2681,1447,2534,3084,2664,3433,2663,1430,3175,2297,2620,3701,3274,2537,3496,3174,3199,2672,2272,4070,2248,3685,3430,3672,3902,2525,2649,4010,4063,3992,3959,3298,2303,3871,2290,2254,3278,3304,3493,3542,4038,3733,4046,3207,1679,3418,3584,3898,3634,3184,3429,3520,2511,2710,3974,3548,3200,3736,2726,4064,3569,3945,3173,3203,4085,3176,3618,2405,3449,1686,963,4009,3487,3489,3966,2474,3645,3996,4066,3561,1446,3989,4000,3978,3741,3241,3682,2461,3434,2684,3971,3968,4042,3198,3210,1434,2538,3240,3854,1445,4069,3177,1449,1702,4072,3270,3599,4034,3752,3126,3464,2280,3541,2147,1379,568,2552,1523,2473,1587,1657,3686,2289,2410,4008,2719,3735,4073,3690,2720,3670,2617,48,3544,4057,2190,3981,3953,60,3296,3721,2210,1381,4053,4056,3190,3740,4058,3646,3477,1638,3110,3954,2713,1641,3221,4001,2466,3194,3557,975,2496,2688,3490,2520,4094,1433,2463,3414,546,2302,2281,2623,2691,2718,2247,2554,3305,3558,3744,3970,1385,2453,3570,3543,1511,3582,3074,3106,3925,3964,2213,2277,3533,3941,3415,2682,3592,240,3234,1448,3080,2298,2446,3423,2282,3079,2586,2558,3669,2528,2510,3853,3560,2447,2618,3178,4093,3671,3562,2595,2533,3977,2545,2273,819,3529,3317,2295,2393,3185,3633,4074,3301,3480,3574,3325,1507,1475,3189,3232,563,3231,3157,2527,3226,3086,3488,2529,3197,3532,4065,1651,3534,2648,3952,3848,3465,3202,3944,3907,1678,3459,2472,2389,2728,2216,1626,2725,3450,2271,2722,3714,3186,2700,3191,1688,3623,3938,3865,3552,3842,3421,3725,3700,3879,3306,1429,3537,2666,3610,2658,2242,3962,2662,4041,3614,1656,1592,3103,3554,1584,2464,1695,2408,3230,3608,3874,3225,1439,2551,1438,3745,2557,3957,2584,2712,2035,2508,3426,1625,3073,675,1370,2530,4037,1640,3463,2560,1369,3445,2460,910,2536,2585,1987,2563,3960,2661,3986,2622,2506,2686,3158,51,1423,419,192,2265,1535,3581,3416,3357,2264,2729,3484,3946,1676,2696,1639,3455,3868,3363,3295,3613,1689,2401,2198,3681,2394,3841,3656,2096,3958,3297,3452,1596,1635,2456,2600,1432,1383,2440,2246,2250,3775,3717,3443,2698,3125,3213,3192,2518,2206,3273,2465,3124,3205,2524,2526,3658,3677,3432,4062,3991,2717,4054,3596,2218,2503,1706,1450,1694,3104,2191,3316,4060,2435,3223,783,4033,1701,780,2621,3169,3573,1384,2048,3,2099,1437,3680,3229,3864,3170,1520,3288,3930,2504,2083,3895,2149,2249,3526,2294,3881,1593,1667,3456,1529,3167,1685,3424,3522,3078,2266,2502,3937,655,3082,3286,3730,3936,3912,1571,227,3469,1663,1011,2694,2498,1382,1704,2153,3553,2402,3479,3425,2150,911,3265,2546,56,1624,2674,2151,1911,2301,3224,972,3624,3926,3209,3609,3651,2442,1407,1660,1693,3105,3233,2679,3422,1599,3289,3440,3866,1024,3586,3893,1696,3679,499,3873,2108,650,2709,1440,3269,3625,3112,3973,2685,3538,3894,1648,3678,2047,2673,828,1422,3572,1008,3872,3849,3331,3638,4061,3161,4055,2390,1493,1191,3448,4045,2432,3292,1539,2200,3290,2677,3236,2678,4084,2610,1672,3328,2179,1658,2655,2032,2217,3447,3927,2517,2594,1560,1999,2438,2505,3098,3294,3109,572,2044,2269,2152,3113,3919,960,2019,2293,3869,931,2716,1442,1280,2444,2645,451,2721,2154,1441,2241,3228,1705,1397,2646,3461,1670,35,3162,3615,2575,1664,3880,248,3657,2609,671,3521,560,2051,1532,3100,1655,15,670,3081,3379,2208,2209,1594,2146,2550,3928,3877,63,2601,1401,3935,3384,167,3847,3636,1692,1360,3285,1698,1368,3591,1344,1392,3300,1674,2400,3763,1436,204,3400,2292,1654,3412,3770,3668,2519,3168,3713,1395,2262,3385,406,1386,569,2063,3453,2133,547,2591,2023,1530,242,3376,908,679,3594,3648,2455,2104,2657,2425,207,3159,3420,1950,1420,3409,3870,3293,8,3361,200,3136,771,3367,1637,3934,648,2392,3707,252,2207,3585,1622,3616,2253,3492,3617,2439,2398,2695,995,3827,3598,3392,241,2205,3904,1501,2270,2441,2268,1416,816,12,2445,2399,142,2183,2188,1366,3759,422,58,255,3388,2163,3605,2690,166,3637,3410,3277,899,2258,1497,2701,2202,249,2186,3861,4015,570,3774,633,1687,3446,3878,3077,2697,3097,1561,3085,4019,2599,3401,423,2168,3094,57,2515,3391,1697,2056,2110,1498,515,3096,768,3474,1996,49,163,4030,1375,2397,3386,3102,3913,2647,1671,7,662,2514,199,504,666,654,627,1414,143,3454,2568,935,250,2419,62,1315,3525,3882,3395,2572,3076,520,3539,1431,341,3343,1955,424,2176,1377,803,1219,1528,3369,2261,2532,4052,968,3850,1411,61,3101,3643,390,4004,1283,3360,2182,2562,3663,3969,1653,2105,345,1023,1576,3441,2172,2185,2632,2384,1510,2174,3748,2711,2072,496,3268,4051,1562,3458,2602,3914,3353,3593,2421,3612,3892,2624,2549,2145,2015,1597,2656,1487,425,2509,398,1513,4050,2080,632,3676,1577,3408,511,1400,136,1677,2615,2,3621,643,1642,409,1267,3536,3114,1984,3341,50,1551,3540,1349,669,1378,1521,2111,1649,1373,2197,3862,2676,1301,140,3201,4068,1795,505,392,1017,1408,1650,4048,1509,3141,3144,2391,611,1187,2497,3556,3402,1027,639,3139,652,1494,682,2654,2614,2040,3811,1495,3626,3172,3428,573,1512,2050,2450,3650,2468,824,3411,3365,974,10,3397,483,1472,3655,3160,562,2144,3731,399,508,1591,2653,3093,2570,2204,3287,1418,1402,2082,32,649,1575,3933,1404,410,346,3723,934,1585,3622,2189,1525,128,1190,3188,1534,487,194,665,1503,1264,2175,3767,2513,1020,624,2339,231,2593,2428,1527,680,4036,2060,2426,2201,2416,3349,904,661,2178,99,3846,640,1376,2592,1586,3336,2589,2109,394,3383,3254,782,3684,2259,2162,1536,2245,2276,1621,396,3146,3362,2512,2134,1016,925,2033,413,506,1417,408,575,2173,678,1504,918,601,1634,926,1522,1959,3282,2167,3204,3839,1496,2434,165,2062,2088,14,3918,355,2735,1,3323,3597,2693,1897,1393,3956,1039,3987,421,2598,2566,2169,1570,2097,3667,1347,3815,825,4091,512,3911,3695,418,3368,344,2396,3218,1415,1590,1189,1526,3716,2024,1807,3923,39,3142,3606,2010,2049,3845,2652,1421,3444,26,3910,115,896,2437,2704,921,246,3666,2574,2160,3340,1623,202,3922,922,1951,3311,1367,4077,2451,31,2081,1934,3220,1998,3354,1321,131,4023,247,1852,936,3565,2025,40,3330,2256,1362,2009,646,927,674,1361,1935,3607,2734,1444,984,2431,2627,3653,41,3145,647,4079,2633,1673,1167,4078,3329,1804,3148,903,2286,170,1662,2404,3984,414,2424,2739,3758,3377,2089,634,1364,937,3442,2257,3844,105,127,1661,1598,1426,4075,393,2590,343,933,4049,1557,1514,3909,2199,1632,2136,2706,2137,3524,3407,2385,2098,3211,477,3972,169,1166,2639,1631,2138,1652,663,1949,1363,3728,1160,1251,1427,3579,2352,1840,1573,610,3059,3138,3246,135,2707,1895,463,6,1544,3924,2581,3662,3757,415,3043,999,9,2430,1506,2561,3283,906,3858,3660,1276,168,3011,3166,426,909,2263,3729,1319,2022,3772,3473,3359,681,672,3370,831,1216,359,527,561,3389,2034,616,1567,1374,3988,2516,2803,536,55,3251,1505,1533,3398,967,503,130,3089,1548,615,1891,930,631,3350,3460,602,574,3732,1484,405,664,3920,3567,2304,3156,1405,2106,377,2041,1666,1399,25,2376,387,2021,1479,1328,4012,1372,497,3834,384,3108,1010,2016,2613,342,3378,668,1633,2057,1109,150,3979,2170,2061,4031,3916,4043,2501,2287,1478,1331,4014,103,206,817,1958,2429,3665,154,2417,3654,1352,416,2634,2090,1629,3476,3154,1848,1500,1231,3604,3502,1480,537,636,24,2087,1255,1305,138,1569,2644,3856,3143,152,829,567,1589,962,3649,1843,473,3262,2037,1336,198,1413,617,2423,928,3366,3275,1164,134,3836,1682,34,3399,1009,3769,2058,3661,2751,2165,2212,1428,3768,3352,883,898,1558,902,2588,254,600,3921,232,1669,3137,3345,1482,1942,2361,905,1072,3406,1018,2642,1084,1574,4026,1827,3863,1991,2548,2478,1932,3831,3940,552,3590,149,3857,543,3307,2013,2355,2387,2244,920,2307,2422,2079,2368,2143,3932,3779,2166,3151,54,2008,1398,28,1181,3356,3805,224,3791,1182,2787,1174,3457,1123,991,3906,776,3358,924,826,1194,3260,1849,391,1630,2005,358,1474,2597,3335,1406,818,3284,456,2045,4028,2042,3338,4013,2345,1833,1343,3887,2377,1173,3899,597,1992,448,3337,1359,1792,770,3756,1183,2120,3475,1907,3090,1424,2724,781,3860,4011,3280,112,3905,642,3131,551,1568,3092,1877,3152,2039,538,2582,1295,1228,3664,455,2148,42,417,3691,158,1036,160,2074,1193,1345,2378,1313,2343,514,3150,1957,970,2086,3755,1960,3119,1700,594,1152,407,1896,969,1608,2181,3088,3390,361,992,1317,3095,1192,360,3263,2660,3310,126,259,3985,362,1176,1893,867,1410,1885,1486,2636,340,769,1129,1945,3620,4076,3382,2449,2543,1340,3601,3832,2418,2689,38,1075,2142,412,479,1636,1353,2161,1394,2055,3164,474,1337,201,3760,799,985,2017,3807,1823,1578,2448,541,2006,1948,16,1855,1380,3381,458,2329,1125,85,1248,3503,544,2433,1502,1159,3499,938,3393,1881,3501,104,2452,153,3153,351,988,1481,677,1186,1961,1128,2388,3342,1538,2014,3244,89,2026,3404,3630,472,2541,3308,2569,121,1683,2284,3255,524,2012,1946,3467,2018,3165,1425,1491,1565,162,1952,37,29,3380,1281,33,1354,1919,460,3219,1155,2285,966,1820,1059,564,124,1913,3217,542,1618,3694,3216,2046,3281,1990,53,1537,2573,917,1279,2238,106,3500,3563,599,1025,64,156,4025,159,30,3531,337,2731,2102,929,673,1962,2671,889,777,1941,1127,1894,3739,2360,3351,2640,1032,3348,1953,2038,3602,2643,2135,3589,2103,220,2750,2194,4018,3876,3917,2141,244,349,230,2232,3334,1997,223,2341,1038,3183,1566,3588,3783,120,4,1126,2386,2815,986,2699,2638,1628,1898,1110,2130,598,256,658,3247,357,1304,809,1923,989,1564,1918,1909,2180,1473,871,2612,1001,1841,1928,3056,530,3243,607,216,3859,3838,3631,3256,1889,3245,638,2746,1680,629,1986,526,1306,2054,2085,498,1615,3071,1000,2500,3519,218,1616,1508,234,1920,13,1477,2619,2479,376,1882,3023,336,2336,1603,2195,1684,1610,510,1114,553,137,1993,2983,1806,3118,18,2567,3472,226,320,122,5,1177,1312,2337,1854,961,2371,478,101,1021,796,2364,1904,3332,1850,1715,2177,3083,653,1954,1944,488,613,1994,2373,3566,3258,2073,3963,1300,3766,3091,2283,1559,1853,480,481,1320,2374,1817,626,2164,2223,1015,2683,3762,2692,880,792,245,1013,2626,793,2187,1880,465,3835,4029,2708,3693,2979,2251,1779,2367,830,471,2076,625,3394,2810,2220,1546,102,1158,3600,1292,2122,990,857,895,489,3140,919,312,2299,114,2542,2583,3806,3117,325,193,273,1620,540,217,676,2539,3068,1178,3309,1609,2667,371,253,545,348,1184,98,1490,2577,52,2196,3547,2705,3155,2755,1052,90,873,2631,457,519,353,2607,397,3629,2778,2338,3885,608,304,981,1273,585,222,21,328,1985,2596,1933,354,1485,3833,3603,4059,1927,3514,1455,2791,1396,1588,628,2231,2192,2507,2101,3951,1350,3250,2475,157,1600,1489,1829,469,1543,800,3884,630,1356,3510,1302,1162,2625,2260,125,2736,2732,2222,2132,965,1254,1800,3773,1087,3483,133,2767,2959,470,3824,1031,3652,2128,2641,637,1282,1665,3344,4021,854,307,1180,1890,233,801,221,1026,350,2344,2077,482,887,1130,1793,1080,3008,352,1050,338,755,3851,1165,533,853,2476,1256,1906,2555,1711,1085,1805,3179,1257,1989,454,1250,2744,1157,973,3801,3364,1550,778,3149,2342,566,513,22,509,1113,3995,2239,501,1816,225,1065,3405,1040,522,2112,2606,901,1358,1151,1914,1346,4017,17,1818,476,2808,466,1014,2715,982,2670,2867,402,1002,420,2495,2383,2748,808,3595,1905,521,1912,2578,1910,1878,1112,605,1272,1148,1825,386,3802,3908,1022,96,1887,584,1832,3439,1824,1288,870,1185,1549,1265,86,2140,1318,993,2007,450,4022,141,205,3675,2335,2743,2436,2100,502,2117,606,1037,1322,378,1821,2629,3513,1917,1492,3047,368,881,1170,2974,4024,2777,2420,119,892,1943,2443,3333,1488,2078,1668,449,3564,775,2020,997,3116,1847,462,1139,161,3070,117,3507,2494,1303,976,576,3817,3064,2131,19,890,3257,2745,994,229,1175,979,998,389,3826,2492,2129,1916,1409,151,1886,1064,2477,1612,316,1277,382,1314,1285,3227,467,1122,897,3248,3788,113,401,1681,3814,2733,1150,2366,1055,1351,932,614,3253,3347,1230,983,3611,2812,856,3950,1287,1619,691,3046,2580,1545,2236,914,1249,1879,1888,1161,1224,69,888,797,3516,1274,1930,1311,1691,373,291,3761,1258,1136,3659,3518,3396,3373,72,858,1154,872,2234,869,554,609,1309,618,380,802,2794,2669,490,197,1801,565,1341,2346,381,2330,2814,1033,118,1329,211,1048,1242,1145,2328,2958,3022,2126,1831,2630,894,329,1108,2579,3947,257,807,2319,500,656,1595,645,893,2365,2053,2052,1088,571,2362,2193,164,591,659,2121,3435,2800,3765,549,1357,794,1058,2982,1845,213,1049,383,835,1338,1253,2001,604,2382,1247,2935,2070,1034,1542,1813,1105,2783,2353,88,2318,2316,3512,2540,1794,641,2314,1121,3830,847,1556,2742,784,2523,1607,2003,3692,3066,1929,2793,534,3050,2305,2879,3020,1045,2312,369,3346,1859,885,1864,3261,1063,3915,1188,1079,1245,1454,2792,882,1524,313,1554,1271,1335,214,2158,2370,3627,840,2064,3058,1086,3886,3784,146,79,805,3016,3436,2876,774,1111,1289,2115,1286,1834,2237,3506,1601,1144,3252,1606,485,1553,1240,375,1926,1297,832,3048,3949,1830,1270,1053,1118,1710,3057,3182,2489,2306,339,855,330,3438,1104,1241,3825,1120,2651,1081,1056,2127,2978,2975,1138,1119,2359,87,822,4016,1617,210,3798,404,1842,1143,1290,596,1727,3249,1141,486,196,2781,67,264,550,3800,2118,2809,1871,2576,1223,1605,36,1708,1278,2313,1074,277,865,2358,2002,1675,403,874,3049,1061,1452,823,73,866,2354,1266,1066,2380,2790,385,297,525,1767,2459,3837,660,1412,1799,2066,1149,263,1057,1073,2738,789,2605,208,864,3786,2227,1826,2493,2807,3069,1269,1938,798,3790,2369,464,2973,1453,964,97,886,1822,1082,2637,2325,1238,1172,2375,82,2483,289,323,2219,2333,1218,841,374,2802,2931,1925,1062,846,3810,3181,3818,3771,1333,651,2113,1030,1707,644,1719,1226,1724,703,2749,1802,321,2587,2490,2069,3867,271,1146,2157,1863,20,1875,2628,1613,258,3065,1451,2119,1252,1647,1137,3039,1939,787,2159,2766,1244,1222,1856,1922,1348,2221,2603,1884,3816,739,3799,461,2415,2604,2486,2776,1117,657,1284,1237,3040,295,2000,507,2311,3804,2986,1865,3195,1874,1029,1294,3180,912,1342,3511,1572,3032,810,3437,1028,2413,2488,370,821,1720,132,65,74,915,3797,147,296,806,1156,1330,2065,2095,1235,1096,1722,3042,2233,696,1709,3883,2267,23,83,2487,773,2943,2124,319,2565,1046,80,977,1106,1861,3628,78,356,762,282,285,1293,1092,129,2125,3099,2915,2340,2084,845,2004,326,281,3291,1124,535,2764,3419,916,1726,1798,2668,400,900,3823,1791,2919,2411,1936,3948,586,863,1956,1870,2786,3764,1872,1316,2326,3517,1555,735,2970,2966,228,1797,612,2864,2968,2917,529,2977,1225,3375,2760,588,1988,188,532,2984,2332,3034,1866,290,468,592,3033,3813,1077,2357,2356,3055,837,698,332,1908,2942,2114,1142,139,1459,453,1763,1299,2036,2969,583,388,2795,1387,3808,2985,579,2230,2203,1116,2752,1054,1296,980,179,1471,559,947,760,2952,3038,1659,531,695,95,3063,191,1435,209,2310,335,3776,3451,1078,2801,2043,528,1476,2813,70,190,116,1093,2155,978,702,743,996,2957,1815,3041,2093,1044,1153,707,265,3062,700,2067,1462,212,84,767,2226,2981,2381,1876,2914,3115,590,1731,1937,1334,2921,2317,3037,2956,687,215,94,305,314,71,1614,1602,3782,3809,844,2947,2972,76,786,2851,2027,839,3015,266,833,2877,144,1540,66,1814,1217,1541,1921,1012,2414,2831,2806,1308,3374,203,1310,943,3387,322,959,2094,2224,184,2941,287,1581,2774,1171,1846,518,2913,1168,1643,3030,2847,3509,1246,842,1043,484,1869,2412,47,2571,1515,2480,251,1391,1788,1232,2321,2782,861,93,3822,2936,288,595,1041,2171,2873,59,1552,293,145,790,3372,1862,334,4020,2920,3789,1531,1714,100,1519,958,268,327,2031,280,635,852,1786,81,1097,278,372,3785,1563,954,1140,276,2741,1627,1811,2229,3504,3505,516,838,1332,1221,1583,3045,1712,306,3828,1169,148,1098,2737,2922,286,2906,764,1844,2156,1298,761,772,1718,3014,907,850,2872,1107,667,558,1778,1784,1808,1042,913,2482,3795,1857,2878,311,431,2309,11,848,862,183,2937,1229,785,2951,2934,2761,548,3010,1091,1868,2372,2068,942,1721,2323,452,1725,1873,2918,2770,45,1419,272,820,3931,2784,2828,752,1785,3355,3018,1095,2780,3829,308,298,1858,441,1582,260,2811,2944,77,1940,953,2116,2990,971,2976,834,1995,1388,3787,459,686,3163,333,581,2905,3778,711,728,3371,3794,1089,442,284,2940,2395,2427,1579,46,2225,1047,2320,1967,2334,849,2564,517,1809,427,1743,719,1103,493,1076,3036,270,1604,1892,732,317,1517,951,1403,1754,577,3339,3147,2059,2754,1468,1645,2071,1268,759,2866,2965,623,2485,2758,754,1060,1239,2092,1580,279,1007,430,435,1483,1102,318,68,1371,186,884,262,1810,446,2938,2308,1776,1390,593,684,1198,2759,956,1470,428,578,1782,688,523,2930,261,738,1646,175,92,1783,815,2327,2785,324,3021,1094,557,3508,1463,2950,2842,269,2765,1456,1220,395,1713,1766,4027,697,2874,2481,791,1389,941,2635,1752,1197,1828,2954,2322,2929,2775,1924,447,3017,582,185,440,683,851,1465,804,788,1466,2933,589,274,1233,438,2228,860,182,733,1212,694,2901,2762,2028,2830,1234,2857,1214,1753,734,1019,2107,1963,1100,2030,2991,2029,1518,2967,2773,1757,310,730,1464,2865,429,1469,2962,1199,1090,2789,236,939,238,766,1812,1236,2912,1768,712,239,43,1750,685,3061,2805,3781,2841,2816,3796,2819,2740,178,2840,411,1796,235,2911,622,44,309,1203,3031,1717,3403,2324,556,940,1790,957,1735,729,2351,716,1770,1975,3792,3053,3812,1547,3026,3819,744,2902,172,1457,3027,2747,1769,836,1263,3803,946,1983,1461,181,174,1644,1458,2753,3051,3029,689,1499,2904,2910,690,171,3044,3024,1207,444,1740,2484,294,2949,701,3013,723,1931,952,1860,2845,779,923,445,1781,1777,2850,2844,2928,439,2856,2091,1195,432,1196,2788,2909,189,580,1101,237,2011,1759,746,944,176,2139,2350,3052,2771,3009,827,868,714,1716,539,1728,2903,367,2848,275,1215,726,1964,1966,2854,2349,2799,945,3054,3780,3793,1982,2895,722,1903,494,1765,1516,2363,2855,812,763,1355,433,1965,2946,219,2883,1899,3777,718,1208,2888,1325,1837,2899,3060,3025,2824,745,1758,2804,1163,1736,1005,2871,1004,1756,1003,3006,1006,3067,950,1734,2989,2894,619,3515,1789,1738,1839,753,756,603,2763,742,177,1179,1836,2870,1901,1851,2123,2829,727,1749,1206,2769,2826,1071,107,1976,2953,2853,813,1327,1259,292,1135,765,721,495,2798,110,2846,2927,3259,2880,111,3820,2779,1209,620,555,364,155,1760,1915,491,1971,475,1947,2858,621,1762,173,2379,1323,949,987,1981,1134,1751,434,758,2849,1730,1761,725,2315,704,2971,1260,1835,1262,814,736,1069,3821,2235,492,2768,1723,3007,1213,2818,1787,1339,1210,1780,2945,713,2964,1838,692,2898,1803,2987,1980,1261,2772,2075,2886,699,347,2916,1611,737,1035,1742,1291,437,2347,878,1902,2932,1133,2889,2980,2825,2838,1326,2955,27,2963,363,2988,2926,2995,3019,879,2890,2925,2348,875,2817,1204,587,1746,1747,2961,1819,1307,1202,693,2757,2885,1324,2908,1200,1275,1460,1068,1070,365,108,180,1737,715,1745,2331,1132,436,1131,2756,2491,303,2892,75,2887,301,1205,741,2837,2869,3028,2797,891,724,876,2960,2896,2999,1973,3004,811,1974,2881,710,3012,1201,1733,706,747,315,2796,2833,757,1970,366,877,2893,1729,331,109,1741,1977,1083,1969,795,1883,123,3035,1764,717,3005,2834,2822,1978,379,2923,1748,2875,1755,1867,2823,1744,740,1115,2835,948,2832,751,2863,2897,1227,955,2924,1968,720,1051,1900,267,1067,2900,1243,2860,709,1775,2868,859,843,2862,1147,1771,2821,2852,3002,91,2882,299,2839,2948,708,705,2994,2861,3000,3001,2836,302,731,443,2939,187,2998,1739,300,1467,2843,2820,2992,1774,283,1099,2827,2993,2891,749,1972,750,1732,2907,2859,1772,3003,2997,1979,2884,1211,1773,748,2996],"probs_ppm":[802,251,284,417,172,164,227,305,331,226,272,77,321,166,251,353,188,140,164,133,106,151,142,100,212,219,244,38,203,181,176,241,267,181,209,359,112,181,190,245,238,236,196,59,58,75,73,85,541,306,283,447,153,179,203,223,400,309,319,83,539,296,302,351,177,102,87,113,68,129,90,88,128,111,102,33,87,74,99,117,100,81,108,100,89,187,137,114,121,183,153,25,66,83,88,91,138,108,153,259,82,163,157,216,186,233,178,45,34,31,44,43,197,131,155,244,90,134,126,135,172,183,164,30,180,148,192,233,264,98,223,240,102,147,210,228,285,164,212,93,280,137,320,303,87,83,117,101,79,205,217,132,212,185,215,43,177,149,196,176,195,134,182,306,124,252,317,347,225,229,234,54,56,42,55,66,51,45,58,91,34,55,62,77,86,63,68,22,94,52,90,91,446,155,264,694,113,127,211,304,331,189,242,86,345,137,216,334,109,91,114,126,89,123,118,88,168,154,166,48,174,145,151,172,203,141,164,404,95,133,173,261,207,145,166,58,60,52,60,59,514,323,337,770,173,159,243,239,357,315,303,84,328,153,207,319,171,125,105,192,74,67,68,110,113,89,87,27,82,65,71,106,75,155,63,50,80,111,81,69,82,97,99,19,73,99,79,86,83,108,94,128,44,83,54,104,101,110,75,25,20,33,22,34,151,88,80,145,75,58,60,77,156,118,88,32,132,71,68,100,164,106,86,108,66,155,97,82,151,125,115,31,94,73,83,91,165,176,144,115,191,299,217,232,247,292,266,38,153,173,145,185,144,152,150,251,99,170,201,224,192,193,192,37,43,34,31,50,136,119,102,153,81,128,107,116,165,220,136,30,127,127,131,123,218,110,139,219,93,132,295,201,278,232,257,65,256,152,287,269,97,131,140,111,114,221,340,193,254,284,266,58,190,254,234,227,215,196,247,447,140,250,319,310,298,287,225,72,67,60,69,77,52,49,42,69,34,38,62,53,63,75,73,22,54,53,68,63,199,135,137,363,76,93,142,196,200,152,187,74,180,104,134,227,109,159,140,131,94,149,146,158,183,211,189,43,140,229,163,189,161,161,144,271,85,117,113,264,162,156,127,43,40,71,49,44,291,218,167,387,125,141,137,223,304,278,254,103,269,141,165,285,248,142,195,307,80,72,86,152,300,139,141,67,183,110,167,224,90,95,168,91,94,144,120,97,224,213,196,51,155,188,180,205,186,153,526,339,76,123,113,197,205,164,127,43,57,65,78,91,355,224,271,492,180,127,142,211,554,340,314,124,369,273,221,254,133,71,67,93,52,73,63,93,138,151,96,36,94,63,88,124,94,68,193,83,113,199,171,177,207,253,222,46,122,139,137,168,151,127,228,276,95,162,130,222,224,210,127,46,43,43,58,69,262,158,161,304,150,167,148,222,286,314,234,81,212,146,168,275,259,121,197,284,107,125,237,236,328,267,387,107,274,162,304,405,125,104,170,123,110,259,304,229,221,264,304,78,217,281,353,357,225,176,237,457,154,185,253,336,261,225,274,63,68,59,73,88,67,54,54,129,39,35,62,91,100,64,94,39,89,54,90,106,41,24,32,89,24,26,32,73,59,39,51,34,56,30,48,72,27,44,49,53,33,41,50,45,73,56,60,22,71,62,61,95,41,38,67,104,29,33,45,90,56,48,51,32,13,18,18,28,75,46,69,144,46,32,42,70,91,79,99,49,79,44,59,89,307,191,198,330,79,100,117,135,202,175,142,53,418,198,257,420,120,77,87,105,63,109,83,64,160,159,123,30,163,129,109,189,148,145,127,298,63,117,101,125,139,170,102,32,49,44,41,66,322,216,201,498,75,102,114,111,272,248,201,51,383,212,158,225,116,87,74,123,55,94,80,87,118,108,85,26,88,98,107,120,77,72,78,63,81,144,146,115,130,156,128,26,62,83,77,96,109,111,111,191,51,127,138,169,128,153,111,36,33,31,38,37,160,136,118,208,68,119,108,144,129,175,133,33,135,124,125,156,243,131,208,316,97,141,208,235,259,207,226,78,337,225,452,401,102,77,129,101,97,178,253,156,205,243,242,53,202,254,252,237,210,176,222,366,130,232,265,303,239,233,186,60,57,64,76,86,51,50,55,91,28,42,46,71,53,74,81,28,67,57,82,86,368,163,211,579,108,147,180,223,296,193,194,74,397,142,272,528,134,100,90,133,92,151,140,130,236,189,171,42,185,170,157,202,193,137,133,325,89,134,133,227,167,169,140,47,47,47,46,69,381,209,218,404,87,159,140,160,255,278,206,61,263,163,138,292,389,177,145,275,102,103,107,146,175,126,122,38,195,136,172,250,141,83,77,85,89,119,100,72,126,123,144,27,153,115,92,130,114,110,123,180,69,111,107,119,132,141,111,27,35,41,34,45,207,109,111,190,71,94,90,119,144,114,108,30,206,142,118,147,124,73,60,76,98,90,65,75,101,81,79,19,61,52,68,71,114,121,99,78,125,217,171,117,139,141,164,28,92,104,115,114,114,120,131,202,97,187,172,175,185,191,144,34,34,38,42,44,128,105,114,134,80,113,93,113,117,126,106,26,139,110,130,141,193,89,128,180,101,142,157,186,228,129,148,48,210,144,229,235,86,79,136,86,108,199,203,133,192,164,153,45,145,203,203,198,153,138,185,276,119,246,264,379,192,195,201,53,52,64,68,60,35,32,36,58,36,33,45,54,48,43,40,14,62,40,61,50,224,87,108,297,65,80,105,112,129,95,106,28,196,77,130,213,84,63,61,101,59,104,108,69,116,114,126,26,105,118,85,122,187,129,142,228,105,122,147,212,143,142,128,44,41,39,41,55,263,137,111,284,70,109,115,118,139,151,129,35,225,131,112,178,364,181,146,294,104,131,117,129,138,117,113,38,157,99,103,196,92,116,79,93,161,280,148,134,170,212,167,36,87,127,86,128,164,195,131,302,96,193,137,225,161,240,136,42,35,48,38,44,218,126,101,216,80,107,88,118,211,189,123,40,190,127,102,200,346,195,141,248,104,282,149,130,215,189,181,49,148,123,141,199,347,237,238,228,233,1506,319,241,346,455,456,68,218,280,224,306,258,298,281,554,187,538,403,434,418,522,340,93,74,64,68,84,346,250,189,341,150,361,203,219,285,348,267,71,266,220,201,393,278,132,191,296,110,210,304,246,322,254,268,75,334,244,382,447,198,182,232,228,208,470,628,300,434,526,567,91,345,417,459,461,386,362,364,722,237,566,574,630,513,563,423,105,111,108,118,150,65,56,55,93,35,55,89,65,60,63,63,20,70,60,67,91,271,169,201,494,90,166,216,219,213,185,207,68,221,150,191,287,135,149,153,182,136,380,274,273,252,315,308,54,213,323,186,263,253,223,226,494,166,277,292,520,273,287,231,84,49,71,60,82,414,281,252,552,118,264,246,261,297,410,337,82,355,223,264,446,256,179,184,378,87,87,122,149,227,129,157,56,223,138,142,282,83,116,118,95,120,232,208,161,371,312,290,81,170,182,172,224,197,212,249,404,102,228,206,266,292,286,188,73,69,86,75,80,464,265,258,552,150,211,246,269,465,412,352,125,437,287,232,390,149,117,88,165,71,112,117,120,193,153,165,38,132,106,88,167,166,114,180,129,155,256,327,242,400,457,477,80,171,214,201,229,231,217,253,436,189,329,534,442,456,531,284,86,55,70,66,105,385,281,277,485,229,293,344,354,465,551,375,91,393,232,234,404,358,146,219,412,135,207,359,305,376,236,345,111,443,285,481,601,168,131,210,183,165,409,580,314,473,440,712,128,347,393,422,464,389,308,347,789,193,419,563,685,403,361,424,107,112,100,115,142,80,64,82,162,51,58,78,107,102,76,101,40,106,76,97,113,51,31,42,88,17,32,46,57,47,34,46,22,54,31,38,72,29,34,36,36,30,45,59,42,64,61,71,29,47,60,48,51,43,42,43,93,30,49,64,110,59,55,56,26,16,14,20,26,68,53,78,158,39,53,67,66,78,75,81,40,84,46,57,96,198,144,121,279,58,95,97,110,147,127,106,39,235,142,164,246,77,72,68,80,59,121,87,89,141,161,140,36,180,136,108,188,138,139,109,206,64,149,116,125,138,200,117,41,45,48,39,46,228,169,113,211,79,123,86,134,213,201,163,45,239,161,163,187,105,77,75,119,53,99,83,106,119,103,94,29,76,85,96,112,96,76,103,106,89,196,139,129,159,186,165,30,104,191,132,138,129,168,145,222,71,191,175,227,193,250,171,48,27,45,38,49,163,139,143,198,94,169,139,399,139,180,141,43,132,136,170,180,166,87,104,170,64,107,116,150,169,120,128,53,206,150,241,237,96,88,109,105,74,175,207,135,162,191,182,43,188,228,334,242,181,174,162,299,96,194,215,252,194,185,175,61,50,49,50,72,27,30,31,43,18,32,32,56,44,31,30,15,39,42,49,55,283,151,167,451,94,142,179,206,199,164,162,74,306,172,240,371,103,122,111,120,97,201,188,137,203,237,245,52,182,205,184,288,218,188,182,367,134,219,225,337,246,238,183,87,61,60,61,82,374,254,224,458,93,211,174,196,274,220,200,90,369,200,179,384,418,245,273,355,124,124,167,189,308,217,209,70,260,216,252,339,118,101,110,89,76,106,122,70,291,162,195,39,158,144,135,204,286,241,267,414,98,167,194,212,251,234,214,53,69,89,86,101,439,248,229,417,137,149,176,174,335,293,220,61,387,258,308,281,141,107,93,117,74,137,112,105,198,123,157,45,100,98,125,114,146,132,171,133,147,339,255,174,231,230,229,51,137,173,190,204,270,288,351,554,196,414,401,399,369,402,362,90,79,106,118,105,243,189,256,319,160,209,204,252,309,249,216,83,292,253,292,263,298,162,259,375,169,193,294,320,879,292,314,159,320,265,540,422,150,124,174,165,153,280,439,231,378,260,315,92,268,323,428,328,352,352,538,676,209,516,646,679,477,373,424,108,157,104,147,160,86,72,89,109,62,80,92,150,173,101,127,41,129,117,178,141,724,362,467,1228,205,256,432,524,615,413,432,158,722,326,608,938,238,233,316,256,148,297,340,225,444,446,407,100,323,369,323,475,619,500,708,1367,256,515,679,728,555,525,511,161,183,180,234,216,939,550,608,1244,344,367,412,498,663,625,512,156,736,398,525,610,220,119,115,204,68,77,91,103,119,111,121,41,121,88,121,125,72,84,64,76,57,108,96,66,126,187,126,34,94,108,72,137,165,164,152,262,98,172,142,195,145,200,127,38,36,50,51,56,228,121,111,205,94,94,111,114,175,207,124,49,163,124,130,158,204,109,118,163,76,162,161,108,219,199,195,42,110,89,122,140,292,229,172,205,184,479,380,276,328,498,439,73,247,306,325,321,345,440,402,691,234,582,685,647,463,638,549,96,85,102,87,104,260,215,190,302,135,289,204,210,234,335,260,73,261,215,226,236,379,186,252,420,137,243,371,325,433,323,394,135,364,321,512,507,188,191,273,241,185,521,709,336,435,1188,638,110,453,570,654,526,464,427,529,1116,273,650,906,829,479,552,575,149,143,132,206,166,84,64,77,108,54,69,104,100,102,115,106,34,132,109,134,140,527,276,403,996,167,216,406,424,414,370,448,149,458,287,509,596,256,263,304,309,224,372,428,342,527,802,841,120,427,614,427,490,509,488,456,1138,296,500,629,1193,452,622,567,154,121,183,155,190,779,500,400,1075,206,288,351,461,553,642,524,143,648,459,510,652,455,226,293,451,72,100,249,164,303,183,269,84,301,178,243,358,112,153,139,125,129,227,196,155,458,452,511,106,208,258,232,337,258,261,371,502,151,201,250,310,435,350,290,104,104,109,141,152,656,357,377,824,169,217,274,285,686,542,507,166,625,418,448,524,288,148,159,236,106,136,125,153,292,236,214,64,191,108,171,229,175,146,206,174,212,363,360,305,484,613,672,114,245,269,274,375,287,335,467,798,192,450,466,628,628,798,468,153,97,127,140,175,619,383,400,793,280,377,377,390,722,630,514,160,570,386,448,679,527,190,317,524,160,250,404,325,442,312,430,171,474,315,661,678,243,153,230,227,158,386,594,291,458,533,702,140,365,425,524,545,543,363,475,988,198,477,587,646,478,444,1964,176,147,130,237,251,148,79,109,234,58,80,120,137,142,133,168,56,140,106,174,209,92,55,70,153,34,35,69,67,94,76,62,46,97,65,105,146,40,45,75,51,39,60,86,64,104,135,152,43,75,113,84,121,75,66,96,203,52,60,110,150,118,120,127,93,32,33,44,50,123,90,107,224,48,59,87,109,140,112,157,74,130,90,126,172,58,36,40,58,20,25,30,29,48,38,45,18,75,45,61,87,28,32,30,28,23,33,38,24,58,58,65,20,53,53,44,85,50,42,53,87,25,44,50,49,53,61,43,16,26,23,26,28,95,60,70,140,26,33,45,47,78,83,64,29,117,87,77,119,43,32,25,48,14,35,39,33,48,38,37,18,34,31,46,49,33,28,39,48,26,62,56,50,54,73,79,17,35,52,54,58,59,86,89,98,38,95,75,96,82,88,79,30,28,37,37,44,53,64,67,107,38,63,77,122,83,77,68,22,73,86,94,100,74,39,49,87,24,54,65,77,91,44,64,38,88,89,126,146,33,36,60,38,39,69,95,60,95,93,95,41,87,108,136,114,74,95,114,158,38,89,123,164,94,93,103,39,37,46,74,61,20,18,24,37,9,15,22,33,23,23,25,16,32,30,47,40,144,51,76,225,32,54,78,87,117,63,75,37,119,65,125,165,54,48,56,56,33,54,85,58,102,94,94,30,71,88,91,105,104,89,101,227,54,80,129,136,116,111,119,54,51,56,50,94,169,115,118,228,48,59,89,91,133,105,120,46,154,109,134,167,764,457,519,749,301,312,407,511,512,353,405,162,628,311,489,678,193,223,198,161,196,269,309,193,307,312,370,98,355,295,305,464,422,391,518,672,218,369,533,635,386,368,283,89,134,155,164,194,1306,760,747,1252,427,430,557,675,959,737,754,197,1224,716,804,995,330,207,228,274,156,277,245,212,276,236,256,70,235,142,194,204,196,185,214,153,220,491,448,334,271,380,359,73,189,182,225,409,342,418,415,728,273,586,621,625,584,564,506,142,103,107,115,172,598,497,474,662,264,493,537,473,429,675,529,103,666,487,568,620,593,280,482,586,252,427,692,602,727,395,568,229,784,430,785,696,179,180,247,180,241,531,753,420,398,462,489,131,362,415,463,491,492,390,513,872,377,924,1053,1052,567,571,788,168,184,168,228,170,131,113,149,223,117,130,257,183,168,133,162,44,201,119,211,192,981,400,666,1703,290,386,562,807,675,428,622,210,1036,316,606,866,197,179,252,226,200,347,405,268,414,390,378,97,379,331,370,440,538,438,610,1428,346,497,764,1054,606,523,470,205,183,153,192,242,1328,794,893,2143,422,498,748,794,865,877,798,251,1072,495,737,836,376,235,238,381,163,135,172,201,258,199,200,70,243,283,184,299,146,207,119,130,174,260,222,175,208,289,240,75,203,445,202,225,294,331,256,441,142,272,210,330,247,297,225,73,83,128,87,95,337,234,217,353,181,187,191,257,348,340,306,86,319,224,193,308,324,186,157,301,128,271,223,209,345,310,275,57,183,141,206,230,285,332,316,272,344,719,526,514,445,689,601,97,334,471,390,511,409,401,457,785,273,598,615,715,426,628,570,123,117,102,115,138,390,292,233,431,244,454,313,373,379,581,476,91,437,339,303,442,411,202,290,481,222,360,688,456,556,483,691,182,634,404,648,695,164,225,307,198,214,535,779,402,496,819,707,147,444,822,659,575,488,575,527,1039,326,605,926,995,621,723,744,186,178,186,213,187,80,80,117,134,65,85,148,102,121,136,150,46,129,96,128,166,596,356,408,931,230,302,412,680,658,498,648,176,487,515,484,682,284,469,386,300,282,555,605,521,540,693,830,153,593,3525,654,716,472,402,464,1029,275,528,522,1081,508,574,503,178,135,239,162,220,841,586,521,1093,382,418,496,839,748,821,828,228,733,445,519,1013,601,328,389,709,172,174,205,346,514,289,336,139,424,250,324,561,157,190,174,150,213,318,245,237,462,394,468,130,289,440,465,358,326,326,582,694,191,284,265,473,395,386,273,118,99,152,183,168,1024,497,598,1249,347,317,381,634,1452,824,768,295,983,575,536,882,336,211,273,394,146,236,215,271,439,357,426,128,225,209,227,293,196,215,243,248,342,510,543,504,614,761,703,137,286,426,385,388,416,439,571,1014,256,615,551,955,640,748,544,196,120,158,179,247,886,644,700,1361,470,623,655,959,1129,1824,1000,328,957,635,690,1062,710,341,474,868,246,431,734,720,798,538,819,265,664,470,988,1185,228,225,405,270,221,605,877,545,593,645,796,175,536,572,690,848,522,459,709,1347,291,661,839,1052,558,647,752,194,198,227,234,319,189,128,160,345,96,123,161,263,208,209,342,107,225,147,314,431,91,48,73,204,50,59,88,172,117,81,109,74,131,82,109,203,56,50,73,77,58,101,114,104,112,142,139,55,103,203,155,188,93,88,107,273,56,94,130,248,104,133,107,56,43,41,83,97,146,114,132,324,79,75,120,206,190,150,218,159,210,110,168,252,783,439,471,793,233,245,259,347,484,381,296,144,749,508,566,922,212,205,225,168,197,314,280,206,415,472,389,106,441,366,331,609,381,387,462,860,173,351,313,470,358,412,301,100,148,151,118,199,1145,634,763,1351,289,389,385,414,887,859,598,199,1343,709,614,923,323,197,202,481,138,231,244,247,404,305,290,119,216,173,251,368,221,207,242,245,227,518,395,372,351,649,414,75,204,266,329,348,404,406,473,827,205,515,659,635,482,586,443,125,96,116,129,149,484,539,533,878,250,459,438,611,450,634,466,161,518,638,575,738,568,293,522,568,229,386,594,662,685,500,573,216,759,539,885,883,234,192,449,250,224,573,770,425,611,659,693,141,574,648,765,729,573,530,660,1009,295,725,875,878,548,578,612,197,218,200,216,314,114,141,173,311,82,146,137,240,135,176,206,64,200,159,306,216,915,419,559,1848,260,456,605,710,825,466,568,216,777,379,604,1091,277,232,286,290,296,538,424,380,538,540,536,150,421,380,426,611,587,486,574,1262,279,565,618,847,562,545,497,232,191,241,235,236,1317,647,849,1596,377,586,635,689,835,924,789,248,825,504,526,2976]};
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/' + 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(3) + '%).';
(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 c = DATA.curve, V = DATA.vocab, maxP = c[0].p, baseY = padT + ch;
const X = (r) => padL + ((r - 1) / (V - 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(' ');
const gx = X(DATA.gt_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)
'<line x1="' + padL + '" y1="' + YC(0).toFixed(1) + '" x2="' + (padL + cw) + '" y2="' + YC(1).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
'<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>' +
// x-axis ticks
'<text x="' + padL + '" y="' + (H - 9) + '" font-family="JetBrains Mono, monospace" font-size="10" fill="#8a8a83">rank 1 (most likely)</text>' +
'<text x="' + (padL + cw) + '" y="' + (H - 9) + '" text-anchor="end" font-family="JetBrains Mono, monospace" font-size="10" fill="#8a8a83">rank ' + V.toLocaleString() + '</text>';
})();
// top-8 chips
document.getElementById('w3-top').innerHTML =
DATA.top.map((x) => '<span class="w3-topchip"><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 likely base)
// Scale every bar to a shared max across all positions so a peaked column reads as fuller than a flat one.
const gmax = Math.max(0.0001, ...DATA.marginals.reduce((a, r) => a.concat(r), []));
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 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 / gmax) * 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>