Download index.html from Pacific-i64/Token-Routing-Interactive-Paper: direct link, hf CLI and curl.
- Browser
- Download file 36.6 kB
-
https://huggingface.co/spaces/Pacific-i64/Token-Routing-Interactive-Paper/resolve/main/index.html
- Command line
-
hf download hf://spaces/Pacific-i64/Token-Routing-Interactive-Paper/index.html
-
curl -L -o index.html https://huggingface.co/spaces/Pacific-i64/Token-Routing-Interactive-Paper/resolve/main/index.html
36.6 kB
| <html lang="en" data-theme="dark"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <meta name="description" content="Interactive architecture, multi-hash routing and evaluation report for TR-HASH MoE 200M full SFT."> | |
| <title>TR-HASH MoE 200M — Interactive Multi-Hash Report</title> | |
| <link rel="stylesheet" href="./visualize.css"> | |
| <script defer src="https://unpkg.com/lucide@1.17.0/dist/umd/lucide.js"></script> | |
| <style> | |
| html { background: var(--background); } | |
| html > body { | |
| width: 100%; | |
| max-width: none; | |
| margin: 0; | |
| padding: clamp(14px, 2vw, 34px); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="tr-paper-demo"> | |
| <style> | |
| #tr-paper-demo { | |
| --tr-gap: clamp(12px, 2.2vw, 22px); | |
| color: var(--foreground); | |
| width: 100%; | |
| } | |
| #tr-paper-demo * { box-sizing: border-box; } | |
| #tr-paper-demo .tr-shell { display: grid; gap: var(--tr-gap); } | |
| #tr-paper-demo .tr-topbar, | |
| #tr-paper-demo .tr-brand, | |
| #tr-paper-demo .tr-actions, | |
| #tr-paper-demo .tr-tabs, | |
| #tr-paper-demo .tr-chip-row, | |
| #tr-paper-demo .tr-run-head, | |
| #tr-paper-demo .tr-legend, | |
| #tr-paper-demo .tr-node-head { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| flex-wrap: wrap; | |
| } | |
| #tr-paper-demo .tr-topbar { justify-content: space-between; } | |
| #tr-paper-demo .tr-mark { | |
| display: grid; | |
| place-items: center; | |
| width: 34px; | |
| height: 34px; | |
| border-radius: 10px; | |
| color: var(--primary); | |
| background: color-mix(in srgb, var(--primary) 12%, transparent); | |
| } | |
| #tr-paper-demo .tr-brand-copy { display: grid; gap: 1px; } | |
| #tr-paper-demo .tr-brand-copy strong { font-weight: 500; letter-spacing: .08em; } | |
| #tr-paper-demo .tr-brand-copy span { color: var(--muted-foreground); } | |
| #tr-paper-demo .tr-hero { | |
| display: grid; | |
| grid-template-columns: minmax(0, 1.35fr) minmax(250px, .65fr); | |
| gap: var(--tr-gap); | |
| align-items: end; | |
| padding: clamp(10px, 2vw, 18px) 0; | |
| } | |
| #tr-paper-demo .tr-hero-copy { display: grid; gap: 12px; } | |
| #tr-paper-demo .tr-kicker { | |
| color: var(--muted-foreground); | |
| letter-spacing: .12em; | |
| text-transform: uppercase; | |
| } | |
| #tr-paper-demo .tr-hero h2 { | |
| margin: 0; | |
| max-width: 760px; | |
| font-size: clamp(1.7rem, 4.6vw, 3.25rem); | |
| line-height: 1.02; | |
| letter-spacing: -.045em; | |
| font-weight: 500; | |
| } | |
| #tr-paper-demo .tr-hero p { | |
| margin: 0; | |
| max-width: 680px; | |
| color: var(--muted-foreground); | |
| } | |
| #tr-paper-demo .tr-note { | |
| border-left: 2px solid var(--primary); | |
| padding-left: 12px; | |
| color: var(--muted-foreground); | |
| } | |
| #tr-paper-demo .tr-tabs { | |
| border-bottom: 1px solid var(--border); | |
| padding-bottom: 10px; | |
| } | |
| #tr-paper-demo .tr-tab[aria-selected="true"] { | |
| color: var(--primary-foreground); | |
| background: var(--primary); | |
| } | |
| #tr-paper-demo .tr-view { display: none; } | |
| #tr-paper-demo .tr-view.is-active { display: grid; gap: var(--tr-gap); } | |
| #tr-paper-demo .tr-overview { | |
| grid-template-columns: minmax(0, 1.45fr) minmax(230px, .55fr); | |
| align-items: stretch; | |
| } | |
| #tr-paper-demo .tr-architecture { | |
| min-height: 370px; | |
| position: relative; | |
| display: grid; | |
| grid-template-columns: repeat(12, 1fr); | |
| grid-template-rows: repeat(7, minmax(36px, auto)); | |
| gap: 10px; | |
| padding: 18px 0; | |
| } | |
| #tr-paper-demo .tr-lines { | |
| position: absolute; | |
| inset: 0; | |
| width: 100%; | |
| height: 100%; | |
| pointer-events: none; | |
| color: var(--border); | |
| } | |
| #tr-paper-demo .tr-lines .active { | |
| color: var(--viz-series-1); | |
| transition: color .2s ease, stroke-width .2s ease; | |
| stroke-width: 2.5; | |
| } | |
| #tr-paper-demo .tr-node { | |
| position: relative; | |
| z-index: 1; | |
| display: grid; | |
| align-content: center; | |
| gap: 4px; | |
| min-width: 0; | |
| padding: 12px; | |
| border: 1px solid var(--border); | |
| border-radius: 12px; | |
| background: color-mix(in srgb, var(--card) 88%, transparent); | |
| color: var(--card-foreground); | |
| } | |
| #tr-paper-demo .tr-node strong { font-weight: 500; } | |
| #tr-paper-demo .tr-node span { color: var(--muted-foreground); } | |
| #tr-paper-demo .tr-node.route-active { | |
| border-color: var(--viz-series-1); | |
| background: color-mix(in srgb, var(--viz-series-1) 12%, var(--card)); | |
| } | |
| #tr-paper-demo .tr-context { grid-column: 2 / 7; grid-row: 1 / 2; } | |
| #tr-paper-demo .tr-token { grid-column: 8 / 12; grid-row: 1 / 2; } | |
| #tr-paper-demo .tr-shared { grid-column: 1 / 6; grid-row: 3 / 5; } | |
| #tr-paper-demo .tr-table { grid-column: 9 / 13; grid-row: 3 / 5; } | |
| #tr-paper-demo .tr-experts { | |
| grid-column: 6 / 9; | |
| grid-row: 3 / 5; | |
| display: grid; | |
| gap: 6px; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| } | |
| #tr-paper-demo .tr-expert { | |
| display: grid; | |
| place-items: center; | |
| min-height: 42px; | |
| border-radius: 8px; | |
| border: 1px solid var(--border); | |
| color: var(--muted-foreground); | |
| background: color-mix(in srgb, var(--muted) 45%, transparent); | |
| transition: background .2s ease, color .2s ease, border-color .2s ease; | |
| } | |
| #tr-paper-demo .tr-expert.route-active { | |
| color: var(--foreground); | |
| border-color: var(--viz-series-1); | |
| background: color-mix(in srgb, var(--viz-series-1) 18%, transparent); | |
| } | |
| #tr-paper-demo .tr-sum { | |
| grid-column: 5 / 9; | |
| grid-row: 6 / 7; | |
| place-self: center; | |
| width: 46px; | |
| height: 46px; | |
| border-radius: 50%; | |
| text-align: center; | |
| padding: 0; | |
| font-size: 1.3rem; | |
| } | |
| #tr-paper-demo .tr-output { grid-column: 9 / 13; grid-row: 6 / 7; } | |
| #tr-paper-demo .tr-side { display: grid; gap: 12px; align-content: start; } | |
| #tr-paper-demo .tr-metric-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 10px; | |
| } | |
| #tr-paper-demo .tr-route-detail { min-height: 52px; } | |
| #tr-paper-demo .tr-routing-layout, | |
| #tr-paper-demo .tr-results-layout, | |
| #tr-paper-demo .tr-compare-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: var(--tr-gap); | |
| } | |
| #tr-paper-demo .tr-token-grid { | |
| display: grid; | |
| grid-template-columns: repeat(4, minmax(0, 1fr)); | |
| gap: 8px; | |
| } | |
| #tr-paper-demo .tr-token-btn { justify-content: center; } | |
| #tr-paper-demo .tr-token-btn.is-selected { | |
| background: var(--primary); | |
| color: var(--primary-foreground); | |
| } | |
| #tr-paper-demo .tr-route-matrix { | |
| display: grid; | |
| grid-template-columns: 70px repeat(4, minmax(0, 1fr)); | |
| gap: 7px; | |
| align-items: center; | |
| } | |
| #tr-paper-demo .tr-route-cell { | |
| display: grid; | |
| place-items: center; | |
| min-height: 38px; | |
| border-radius: 8px; | |
| background: color-mix(in srgb, var(--muted) 55%, transparent); | |
| color: var(--muted-foreground); | |
| } | |
| #tr-paper-demo .tr-route-cell.is-on { | |
| background: color-mix(in srgb, var(--viz-series-1) 20%, transparent); | |
| color: var(--foreground); | |
| } | |
| #tr-paper-demo .tr-result-chart { | |
| min-height: 250px; | |
| display: flex; | |
| align-items: end; | |
| gap: 22px; | |
| padding: 30px 18px 24px; | |
| border-bottom: 1px solid var(--border); | |
| position: relative; | |
| } | |
| #tr-paper-demo .tr-bar-group { | |
| flex: 1; | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(24px, 60px)); | |
| justify-content: center; | |
| gap: 8px; | |
| align-items: end; | |
| height: 190px; | |
| position: relative; | |
| } | |
| #tr-paper-demo .tr-bar { | |
| border-radius: 8px 8px 2px 2px; | |
| min-height: 20px; | |
| background: color-mix(in srgb, var(--viz-series-2) 58%, var(--muted)); | |
| position: relative; | |
| transition: height .25s ease; | |
| } | |
| #tr-paper-demo .tr-bar.routed { | |
| background: color-mix(in srgb, var(--viz-series-1) 68%, var(--muted)); | |
| } | |
| #tr-paper-demo .tr-bar span { | |
| position: absolute; | |
| left: 50%; | |
| bottom: calc(100% + 7px); | |
| transform: translateX(-50%); | |
| color: var(--foreground); | |
| white-space: nowrap; | |
| } | |
| #tr-paper-demo .tr-bar-label { | |
| position: absolute; | |
| top: calc(100% + 9px); | |
| left: 0; | |
| right: 0; | |
| text-align: center; | |
| color: var(--muted-foreground); | |
| } | |
| #tr-paper-demo .tr-legend { justify-content: center; } | |
| #tr-paper-demo .tr-swatch { | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 3px; | |
| background: color-mix(in srgb, var(--viz-series-2) 58%, var(--muted)); | |
| } | |
| #tr-paper-demo .tr-swatch.routed { | |
| background: color-mix(in srgb, var(--viz-series-1) 68%, var(--muted)); | |
| } | |
| #tr-paper-demo .tr-generation { | |
| min-height: 172px; | |
| white-space: pre-wrap; | |
| overflow-wrap: anywhere; | |
| } | |
| #tr-paper-demo .tr-caret { | |
| display: inline-block; | |
| width: 1px; | |
| height: 1em; | |
| margin-left: 2px; | |
| vertical-align: -.12em; | |
| background: var(--primary); | |
| animation: tr-blink .8s steps(1) infinite; | |
| } | |
| #tr-paper-demo .tr-prompt-row { | |
| display: grid; | |
| grid-template-columns: minmax(0, 1fr) auto; | |
| gap: 10px; | |
| align-items: end; | |
| } | |
| #tr-paper-demo .tr-status { color: var(--muted-foreground); } | |
| #tr-paper-demo .tr-status.is-live { color: var(--foreground); } | |
| @keyframes tr-blink { 50% { opacity: 0; } } | |
| @media (prefers-reduced-motion: reduce) { | |
| #tr-paper-demo .tr-caret { animation: none; } | |
| } | |
| @media (max-width: 680px) { | |
| #tr-paper-demo .tr-hero, | |
| #tr-paper-demo .tr-overview, | |
| #tr-paper-demo .tr-routing-layout, | |
| #tr-paper-demo .tr-results-layout, | |
| #tr-paper-demo .tr-compare-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| #tr-paper-demo .tr-actions { display: none; } | |
| #tr-paper-demo .tr-architecture { min-height: 440px; } | |
| #tr-paper-demo .tr-context { grid-column: 1 / 8; } | |
| #tr-paper-demo .tr-token { grid-column: 8 / 13; } | |
| #tr-paper-demo .tr-shared { grid-column: 1 / 6; grid-row: 3 / 5; } | |
| #tr-paper-demo .tr-experts { grid-column: 6 / 10; grid-row: 3 / 5; } | |
| #tr-paper-demo .tr-table { grid-column: 10 / 13; grid-row: 3 / 5; } | |
| #tr-paper-demo .tr-sum { grid-column: 4 / 7; } | |
| #tr-paper-demo .tr-output { grid-column: 7 / 13; } | |
| #tr-paper-demo .tr-token-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } | |
| #tr-paper-demo .tr-prompt-row { grid-template-columns: 1fr; } | |
| } | |
| @media (max-width: 430px) { | |
| #tr-paper-demo .tr-tabs { gap: 6px; } | |
| #tr-paper-demo .tr-tab { padding-inline: 9px; } | |
| #tr-paper-demo .tr-architecture { | |
| display: flex; | |
| flex-direction: column; | |
| min-height: auto; | |
| } | |
| #tr-paper-demo .tr-lines, #tr-paper-demo .tr-sum { display: none; } | |
| #tr-paper-demo .tr-node, | |
| #tr-paper-demo .tr-context, | |
| #tr-paper-demo .tr-token, | |
| #tr-paper-demo .tr-shared, | |
| #tr-paper-demo .tr-table, | |
| #tr-paper-demo .tr-experts, | |
| #tr-paper-demo .tr-output { | |
| width: 100%; | |
| } | |
| #tr-paper-demo .tr-route-matrix { grid-template-columns: 54px repeat(4, minmax(0, 1fr)); } | |
| } | |
| </style> | |
| <div class="tr-shell"> | |
| <header class="tr-topbar"> | |
| <div class="tr-brand"> | |
| <span class="tr-mark"><i data-lucide="git-branch" aria-hidden="true"></i></span> | |
| <span class="tr-brand-copy"> | |
| <strong>COMPLEXITY</strong> | |
| <span class="text-small">TR-HASH MoE 200M companion</span> | |
| </span> | |
| </div> | |
| <nav class="tr-actions" aria-label="Research links"> | |
| <a class="btn btn-ghost" href="https://huggingface.co/AETHORIA-AI/TR-HASH-MoE-200M-160B-SFT" target="_blank" rel="noopener noreferrer"><i data-lucide="file-text" aria-hidden="true"></i> Model card</a> | |
| <a class="btn btn-ghost" href="https://github.com/Complexity-ML/complexity-framework" target="_blank" rel="noopener noreferrer"><i data-lucide="package-open" aria-hidden="true"></i> Training code</a> | |
| <a class="btn btn-ghost" href="https://huggingface.co/spaces/Pacific-i64/TR-hash-tiny" target="_blank" rel="noopener noreferrer"><i data-lucide="message-square" aria-hidden="true"></i> Live chat</a> | |
| </nav> | |
| </header> | |
| <section class="tr-hero"> | |
| <div class="tr-hero-copy"> | |
| <span class="tr-kicker text-small">PIQA-selected full-SFT checkpoint</span> | |
| <h2>TR-HASH MoE 200M</h2> | |
| <p>Explore how two deterministic, layer-specific token-ID hashes select a top-2 pair of residual experts while a shared dense SwiGLU path preserves contextual computation.</p> | |
| <div class="tr-chip-row"> | |
| <span class="viz-badge">201.2M parameters</span> | |
| <span class="viz-badge">≈162B source-token exposure</span> | |
| <span class="viz-badge">16 layers · multi-hash top-2</span> | |
| </div> | |
| </div> | |
| <div class="tr-note text-small"> | |
| Interactive companion — not additional experimental evidence. | |
| </div> | |
| </section> | |
| <nav class="tr-tabs" aria-label="Interactive paper sections"> | |
| <button class="btn tr-tab" type="button" role="tab" aria-selected="true" data-view="overview">Architecture</button> | |
| <button class="btn tr-tab" type="button" role="tab" aria-selected="false" data-view="routing">Routing lab</button> | |
| <button class="btn tr-tab" type="button" role="tab" aria-selected="false" data-view="results">Results</button> | |
| <button class="btn tr-tab" type="button" role="tab" aria-selected="false" data-view="compare">Live demo</button> | |
| </nav> | |
| <section class="tr-view tr-overview is-active" data-panel="overview" role="tabpanel"> | |
| <div> | |
| <div class="tr-chip-row" aria-label="Select a token"> | |
| <span class="text-small text-muted">Token</span> | |
| <button class="btn tr-token-choice is-selected" type="button" data-token="routing">routing</button> | |
| <button class="btn tr-token-choice" type="button" data-token="context">context</button> | |
| <button class="btn tr-token-choice" type="button" data-token="expert">expert</button> | |
| <button class="btn tr-token-choice" type="button" data-token="shared">shared</button> | |
| </div> | |
| <div class="tr-architecture" role="img" aria-label="The contextual hidden state enters both a shared SwiGLU branch and two residual experts selected by two deterministic token-ID hash channels. Token identity controls only the fixed route table."> | |
| <svg class="tr-lines" aria-hidden="true"> | |
| <path data-from=".tr-context" data-from-anchor="bottom" data-to=".tr-shared" data-to-anchor="top" fill="none" stroke="currentColor" stroke-width="1.5"/> | |
| <path class="active" data-from=".tr-context" data-from-anchor="bottom" data-to=".tr-experts" data-to-anchor="top" fill="none" stroke="currentColor"/> | |
| <path class="active" data-from=".tr-token" data-from-anchor="bottom" data-to=".tr-table" data-to-anchor="top" fill="none" stroke="currentColor"/> | |
| <path class="active" data-from=".tr-table" data-from-anchor="left" data-to=".tr-experts" data-to-anchor="right" fill="none" stroke="currentColor" stroke-dasharray="7 7"/> | |
| <path data-from=".tr-shared" data-from-anchor="bottom" data-to=".tr-sum" data-to-anchor="left" fill="none" stroke="currentColor" stroke-width="1.5"/> | |
| <path class="active" data-from=".tr-experts" data-from-anchor="bottom" data-to=".tr-sum" data-to-anchor="top" fill="none" stroke="currentColor"/> | |
| <path class="active" data-from=".tr-sum" data-from-anchor="right" data-to=".tr-output" data-to-anchor="left" fill="none" stroke="currentColor"/> | |
| </svg> | |
| <div class="tr-node tr-context"> | |
| <strong>Contextual hidden state <em>x<sub>t</sub></em></strong> | |
| <span class="text-small">The same contextual vector enters both branches</span> | |
| </div> | |
| <div class="tr-node tr-token route-active"> | |
| <strong>Token identifier <em>t</em></strong> | |
| <span class="text-small" data-token-id>routing · tokenizer ID 22447</span> | |
| </div> | |
| <div class="tr-node tr-shared"> | |
| <strong>Shared SwiGLU</strong> | |
| <span class="text-small">Width 3,072 · all tokens · contextual computation</span> | |
| </div> | |
| <div class="tr-node tr-table route-active"> | |
| <strong>Multi-hash route table <em>r<sub>l,1:2</sub>(t)</em></strong> | |
| <span class="text-small">Two deterministic hashes per layer · two of four experts</span> | |
| </div> | |
| <div class="tr-node tr-experts route-active"> | |
| <strong style="grid-column:1/-1">Residual experts · width 256 each</strong> | |
| <span class="tr-expert route-active" data-expert="0">E0</span> | |
| <span class="tr-expert" data-expert="1">E1</span> | |
| <span class="tr-expert route-active" data-expert="2">E2</span> | |
| <span class="tr-expert" data-expert="3">E3</span> | |
| </div> | |
| <button class="btn tr-sum" type="button" data-tooltip="Element-wise branch sum" aria-label="Add the branch outputs">+</button> | |
| <div class="tr-node tr-output"> | |
| <strong>Feed-forward output</strong> | |
| <span class="text-small">Shared + 2 × mean(E<span data-route-a>0</span>, E<span data-route-b>2</span>)</span> | |
| </div> | |
| </div> | |
| </div> | |
| <aside class="tr-side"> | |
| <div class="tr-metric-grid"> | |
| <div class="card viz-stat"> | |
| <span class="text-muted text-small">Final model</span> | |
| <span class="viz-stat-value">201.2M</span> | |
| <span class="text-small">trainable parameters</span> | |
| </div> | |
| <div class="card viz-stat"> | |
| <span class="text-muted text-small">Source exposure</span> | |
| <span class="viz-stat-value">≈162B</span> | |
| <span class="text-small">130B base + 32.07B refinement</span> | |
| </div> | |
| </div> | |
| <div class="card tr-route-detail"> | |
| <div class="tr-node-head"> | |
| <i data-lucide="route" aria-hidden="true"></i> | |
| <strong>Selected route</strong> | |
| </div> | |
| <p data-route-copy>“routing” selects E0 + E2 in layer 1. Both assignments are read from the checkpoint's two-channel multi-hash route table.</p> | |
| </div> | |
| <div class="card"> | |
| <strong>Scope of evidence</strong> | |
| <p class="text-muted">One 201.2M base/refinement trajectory followed by three epochs of full-parameter SFT. This is not LoRA and the model has no learned expert router.</p> | |
| </div> | |
| </aside> | |
| </section> | |
| <section class="tr-view" data-panel="routing" role="tabpanel"> | |
| <div class="tr-routing-layout"> | |
| <div> | |
| <div class="tr-run-head"> | |
| <div> | |
| <strong>Layer-specific deterministic routes</strong> | |
| <div class="text-small text-muted">Checkpoint-derived tokenizer IDs and deterministic two-hash top-2 assignments.</div> | |
| </div> | |
| </div> | |
| <div class="tr-token-grid" style="margin-top:12px"> | |
| <button class="btn tr-token-btn is-selected" type="button" data-lab-token="routing">routing</button> | |
| <button class="btn tr-token-btn" type="button" data-lab-token="context">context</button> | |
| <button class="btn tr-token-btn" type="button" data-lab-token="expert">expert</button> | |
| <button class="btn tr-token-btn" type="button" data-lab-token="shared">shared</button> | |
| <button class="btn tr-token-btn" type="button" data-lab-token="token">token</button> | |
| <button class="btn tr-token-btn" type="button" data-lab-token="model">model</button> | |
| <button class="btn tr-token-btn" type="button" data-lab-token="dense">dense</button> | |
| <button class="btn tr-token-btn" type="button" data-lab-token="learned">learned</button> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="tr-route-matrix" aria-label="Expert assignment matrix"> | |
| <span></span><span class="text-small text-center">E0</span><span class="text-small text-center">E1</span><span class="text-small text-center">E2</span><span class="text-small text-center">E3</span> | |
| <span class="text-small">Layer 1</span><span class="tr-route-cell is-on" data-cell="1-0">0.5</span><span class="tr-route-cell" data-cell="1-1">—</span><span class="tr-route-cell is-on" data-cell="1-2">0.5</span><span class="tr-route-cell" data-cell="1-3">—</span> | |
| <span class="text-small">Layer 4</span><span class="tr-route-cell" data-cell="4-0">—</span><span class="tr-route-cell is-on" data-cell="4-1">0.5</span><span class="tr-route-cell is-on" data-cell="4-2">0.5</span><span class="tr-route-cell" data-cell="4-3">—</span> | |
| <span class="text-small">Layer 8</span><span class="tr-route-cell" data-cell="8-0">—</span><span class="tr-route-cell is-on" data-cell="8-1">0.5</span><span class="tr-route-cell is-on" data-cell="8-2">0.5</span><span class="tr-route-cell" data-cell="8-3">—</span> | |
| <span class="text-small">Layer 12</span><span class="tr-route-cell" data-cell="12-0">—</span><span class="tr-route-cell" data-cell="12-1">—</span><span class="tr-route-cell is-on" data-cell="12-2">0.5</span><span class="tr-route-cell is-on" data-cell="12-3">0.5</span> | |
| <span class="text-small">Layer 16</span><span class="tr-route-cell" data-cell="16-0">—</span><span class="tr-route-cell" data-cell="16-1">—</span><span class="tr-route-cell is-on" data-cell="16-2">0.5</span><span class="tr-route-cell is-on" data-cell="16-3">0.5</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="tr-note text-small" data-lab-detail>Token “routing” follows the persisted route table of the final checkpoint. Every occurrence keeps the same expert pair at a given layer, while its hidden-state input still changes with context.</div> | |
| </section> | |
| <section class="tr-view" data-panel="results" role="tabpanel"> | |
| <div class="tr-results-layout"> | |
| <div> | |
| <div class="tr-run-head"> | |
| <div> | |
| <strong>Recorded training diagnostics</strong> | |
| <div class="text-small text-muted">Source and scheduled SFT evaluations · NLL, lower is better</div> | |
| </div> | |
| </div> | |
| <div class="tr-result-chart" role="img" aria-label="Held-out SFT NLL decreased from 1.7628 to 1.2209. PIQA normalized accuracy increased from 68.39 percent at the refinement source to 69.31 percent at selected SFT epoch 2."> | |
| <div class="tr-bar-group"> | |
| <div class="tr-bar" style="height:88%"><span>1.7628</span></div> | |
| <div class="tr-bar routed" style="height:61%"><span>1.2209</span></div> | |
| <div class="tr-bar-label text-small">Held-out SFT NLL</div> | |
| </div> | |
| <div class="tr-bar-group"> | |
| <div class="tr-bar" style="height:68.39%"><span>68.39%</span></div> | |
| <div class="tr-bar routed" style="height:69.31%"><span>69.31%</span></div> | |
| <div class="tr-bar-label text-small">PIQA acc_norm</div> | |
| </div> | |
| </div> | |
| <div class="tr-legend text-small" style="margin-top:30px"> | |
| <span class="tr-swatch"></span><span>Source</span> | |
| <span class="tr-swatch routed"></span><span>SFT measurement</span> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <table class="table table-sm"> | |
| <thead> | |
| <tr><th>Measurement</th><th class="text-end">Source</th><th class="text-end">SFT checkpoint</th></tr> | |
| </thead> | |
| <tbody> | |
| <tr><td>Held-out SFT NLL</td><td class="text-end">1.7628 @ source</td><td class="text-end">1.2209 @ epoch 3</td></tr> | |
| <tr><td>Held-out SFT PPL</td><td class="text-end">5.83</td><td class="text-end">3.39</td></tr> | |
| <tr><td>PIQA accuracy</td><td class="text-end">68.66% refinement</td><td class="text-end">68.82% epoch 2</td></tr> | |
| <tr><td>PIQA acc_norm</td><td class="text-end">68.39% refinement</td><td class="text-end">69.31% epoch 2</td></tr> | |
| <tr><td>SFT coverage</td><td class="text-end">209k records</td><td class="text-end">3 epochs · 238.9M tokens</td></tr> | |
| </tbody> | |
| </table> | |
| <p class="text-small text-muted">SFT loss uses the fixed 2,100-example held-out split. PIQA uses all 1,838 validation examples, zero-shot causal continuation likelihood, no chat template, and FP16 eager evaluation.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="tr-view" data-panel="compare" role="tabpanel"> | |
| <div class="tr-prompt-row"> | |
| <label class="form-label"> | |
| Prompt | |
| <input class="form-control" data-prompt value="Explain deterministic token routing in three short sentences." /> | |
| </label> | |
| <button class="btn btn-primary" type="button" data-run> | |
| <i data-lucide="play" aria-hidden="true"></i> Generate | |
| </button> | |
| </div> | |
| <div class="tr-compare-grid"> | |
| <div class="card"> | |
| <div class="tr-run-head"> | |
| <strong>TR-HASH MoE 200M · Full SFT</strong> | |
| <span class="viz-badge" data-routed-state>ready</span> | |
| </div> | |
| <p class="tr-generation" data-routed-output aria-live="polite">The model response will stream here token by token.</p> | |
| </div> | |
| <div class="card"> | |
| <strong>Decode configuration</strong> | |
| <p class="text-muted">Chat endpoint · temperature 0.4 · top-k 30 · top-p 0.85 · repetition penalty 1.1 · maximum 384 new tokens.</p> | |
| <p class="text-small text-muted">This is a qualitative demonstration of the released SFT checkpoint, not an evaluation result.</p> | |
| </div> | |
| </div> | |
| <div class="tr-status text-small" data-status>TR-HASH MoE 200M · live qualitative generation</div> | |
| </section> | |
| </div> | |
| <script> | |
| (() => { | |
| const root = document.getElementById("tr-paper-demo"); | |
| if (!root) return; | |
| const routes = { | |
| routing: { id: 22447, layers: [[0, 2], [1, 2], [2, 1], [2, 3], [3, 2]] }, | |
| context: { id: 4057, layers: [[2, 1], [2, 0], [3, 1], [2, 3], [1, 3]] }, | |
| expert: { id: 5217, layers: [[2, 3], [3, 0], [2, 0], [1, 3], [0, 1]] }, | |
| shared: { id: 5586, layers: [[2, 1], [2, 0], [3, 1], [1, 2], [2, 1]] }, | |
| token: { id: 23394, layers: [[1, 0], [1, 2], [0, 3], [1, 3], [0, 3]] }, | |
| model: { id: 2181, layers: [[2, 1], [3, 2], [3, 1], [1, 3], [1, 0]] }, | |
| dense: { id: 8581, layers: [[3, 1], [1, 2], [2, 3], [2, 0], [1, 2]] }, | |
| learned: { id: 4273, layers: [[1, 0], [2, 0], [3, 2], [0, 3], [3, 2]] } | |
| }; | |
| const tabs = [...root.querySelectorAll(".tr-tab")]; | |
| const panels = [...root.querySelectorAll(".tr-view")]; | |
| const architecture = root.querySelector(".tr-architecture"); | |
| const lineLayer = root.querySelector(".tr-lines"); | |
| const anchorPoint = (element, anchor, bounds) => { | |
| const rect = element.getBoundingClientRect(); | |
| const points = { | |
| top: { x: rect.left + rect.width / 2, y: rect.top }, | |
| right: { x: rect.right, y: rect.top + rect.height / 2 }, | |
| bottom: { x: rect.left + rect.width / 2, y: rect.bottom }, | |
| left: { x: rect.left, y: rect.top + rect.height / 2 } | |
| }; | |
| const point = points[anchor] || points.bottom; | |
| return { x: point.x - bounds.left, y: point.y - bounds.top }; | |
| }; | |
| const updateConnectorPaths = () => { | |
| if (!architecture || !lineLayer || !architecture.offsetParent) return; | |
| const bounds = architecture.getBoundingClientRect(); | |
| if (!bounds.width || !bounds.height) return; | |
| lineLayer.setAttribute("viewBox", `0 0 ${bounds.width} ${bounds.height}`); | |
| lineLayer.querySelectorAll("[data-from][data-to]").forEach((path) => { | |
| const from = architecture.querySelector(path.dataset.from); | |
| const to = architecture.querySelector(path.dataset.to); | |
| if (!from || !to) return; | |
| const start = anchorPoint(from, path.dataset.fromAnchor, bounds); | |
| const end = anchorPoint(to, path.dataset.toAnchor, bounds); | |
| const dx = end.x - start.x; | |
| const dy = end.y - start.y; | |
| let d; | |
| if (Math.abs(dx) > Math.abs(dy)) { | |
| const direction = Math.sign(dx) || 1; | |
| const bend = Math.min(Math.max(16, Math.abs(dx) * 0.42), Math.abs(dx) / 2); | |
| d = `M ${start.x} ${start.y} C ${start.x + direction * bend} ${start.y}, ${end.x - direction * bend} ${end.y}, ${end.x} ${end.y}`; | |
| } else { | |
| const direction = Math.sign(dy) || 1; | |
| const bend = Math.min(Math.max(16, Math.abs(dy) * 0.42), Math.abs(dy) / 2); | |
| d = `M ${start.x} ${start.y} C ${start.x} ${start.y + direction * bend}, ${end.x} ${end.y - direction * bend}, ${end.x} ${end.y}`; | |
| } | |
| path.setAttribute("d", d); | |
| }); | |
| }; | |
| tabs.forEach((tab) => { | |
| tab.addEventListener("click", () => { | |
| tabs.forEach((item) => item.setAttribute("aria-selected", String(item === tab))); | |
| panels.forEach((panel) => panel.classList.toggle("is-active", panel.dataset.panel === tab.dataset.view)); | |
| if (tab.dataset.view === "overview") requestAnimationFrame(updateConnectorPaths); | |
| }); | |
| }); | |
| if (architecture && "ResizeObserver" in window) { | |
| const connectorResizeObserver = new ResizeObserver(() => requestAnimationFrame(updateConnectorPaths)); | |
| connectorResizeObserver.observe(architecture); | |
| } | |
| window.addEventListener("resize", updateConnectorPaths); | |
| document.fonts?.ready.then(updateConnectorPaths); | |
| requestAnimationFrame(updateConnectorPaths); | |
| const updateArchitecture = (token) => { | |
| const route = routes[token]; | |
| if (!route) return; | |
| const pair = route.layers[0]; | |
| root.querySelector("[data-token-id]").textContent = `${token} · tokenizer ID ${route.id}`; | |
| root.querySelector("[data-route-a]").textContent = String(pair[0]); | |
| root.querySelector("[data-route-b]").textContent = String(pair[1]); | |
| root.querySelector("[data-route-copy]").textContent = | |
| `“${token}” selects E${pair[0]} + E${pair[1]} in layer 1. The pair comes from the two deterministic hash channels stored in the 200M checkpoint.`; | |
| root.querySelectorAll("[data-expert]").forEach((expert) => { | |
| expert.classList.toggle("route-active", pair.includes(Number(expert.dataset.expert))); | |
| }); | |
| root.querySelectorAll(".tr-token-choice").forEach((button) => { | |
| button.classList.toggle("is-selected", button.dataset.token === token); | |
| }); | |
| }; | |
| root.querySelectorAll(".tr-token-choice").forEach((button) => { | |
| button.addEventListener("click", () => updateArchitecture(button.dataset.token)); | |
| }); | |
| const updateMatrix = (token) => { | |
| const route = routes[token]; | |
| if (!route) return; | |
| const layers = [1, 4, 8, 12, 16]; | |
| layers.forEach((layer, layerIndex) => { | |
| const [a, b] = route.layers[layerIndex]; | |
| for (let expert = 0; expert < 4; expert += 1) { | |
| const cell = root.querySelector(`[data-cell="${layer}-${expert}"]`); | |
| const active = expert === a || expert === b; | |
| cell.classList.toggle("is-on", active); | |
| cell.textContent = active ? "0.5" : "—"; | |
| } | |
| }); | |
| root.querySelectorAll(".tr-token-btn").forEach((button) => { | |
| button.classList.toggle("is-selected", button.dataset.labToken === token); | |
| }); | |
| root.querySelector("[data-lab-detail]").textContent = | |
| `Token “${token}” (ID ${route.id}) follows these persisted two-channel, layer-specific multi-hash routes in the 200M checkpoint.`; | |
| }; | |
| root.querySelectorAll(".tr-token-btn").forEach((button) => { | |
| button.addEventListener("click", () => updateMatrix(button.dataset.labToken)); | |
| }); | |
| const CHAT_ENDPOINT = "https://pacific-i64-tr-hash-tiny.hf.space/v1/chat/completions"; | |
| let activeController = null; | |
| const consumeSSE = async (response, onEvent) => { | |
| if (!response.body) throw new Error("Streaming response body is unavailable."); | |
| const reader = response.body.getReader(); | |
| const decoder = new TextDecoder(); | |
| let buffer = ""; | |
| while (true) { | |
| const { done, value } = await reader.read(); | |
| if (done) break; | |
| buffer += decoder.decode(value, { stream: true }); | |
| const lines = buffer.split("\n"); | |
| buffer = lines.pop() || ""; | |
| for (const line of lines) { | |
| const trimmed = line.trim(); | |
| if (!trimmed.startsWith("data:")) continue; | |
| const payload = trimmed.slice(5).trim(); | |
| if (payload === "[DONE]") return; | |
| try { | |
| onEvent(JSON.parse(payload)); | |
| } catch { | |
| // Ignore malformed transport fragments. | |
| } | |
| } | |
| } | |
| }; | |
| root.querySelector("[data-run]").addEventListener("click", async () => { | |
| const runButton = root.querySelector("[data-run]"); | |
| const routedOutput = root.querySelector("[data-routed-output]"); | |
| const routedState = root.querySelector("[data-routed-state]"); | |
| const status = root.querySelector("[data-status]"); | |
| const prompt = root.querySelector("[data-prompt]").value.trim(); | |
| if (activeController) { | |
| activeController.abort(); | |
| activeController = null; | |
| runButton.textContent = "Generate"; | |
| routedState.textContent = "stopped"; | |
| status.textContent = "Generation stopped."; | |
| status.classList.remove("is-live"); | |
| return; | |
| } | |
| if (!prompt) { | |
| status.textContent = "Enter a prompt before generating."; | |
| return; | |
| } | |
| const controller = new AbortController(); | |
| activeController = controller; | |
| routedOutput.textContent = ""; | |
| routedState.textContent = "connecting"; | |
| runButton.textContent = "Stop generation"; | |
| status.textContent = "Connecting to the TR-HASH MoE 200M chat endpoint…"; | |
| status.classList.add("is-live"); | |
| try { | |
| const response = await fetch(CHAT_ENDPOINT, { | |
| method: "POST", | |
| headers: { "Content-Type": "application/json" }, | |
| body: JSON.stringify({ | |
| model: "tr-hash-moe-200m", | |
| messages: [{ role: "user", content: prompt }], | |
| max_tokens: 384, | |
| temperature: 0.4, | |
| top_k: 30, | |
| top_p: 0.85, | |
| repetition_penalty: 1.1, | |
| stream: true | |
| }), | |
| signal: controller.signal | |
| }); | |
| if (!response.ok) { | |
| const detail = (await response.text()).slice(0, 240); | |
| throw new Error(`Chat endpoint returned HTTP ${response.status}${detail ? `: ${detail}` : ""}`); | |
| } | |
| routedState.textContent = "streaming"; | |
| status.textContent = "Receiving the response token by token…"; | |
| await consumeSSE(response, (event) => { | |
| if (event.error) throw new Error(event.error.message || "Generation failed."); | |
| const text = event.choices?.[0]?.delta?.content || event.choices?.[0]?.text || event.text || ""; | |
| if (text) routedOutput.textContent += text; | |
| }); | |
| routedState.textContent = routedOutput.textContent ? "complete" : "no output"; | |
| status.textContent = "Generation complete · qualitative output only"; | |
| } catch (error) { | |
| if (error.name === "AbortError") return; | |
| routedState.textContent = "unavailable"; | |
| status.textContent = `Inference temporarily unavailable: ${error.message}`; | |
| } finally { | |
| if (activeController === controller) activeController = null; | |
| runButton.textContent = "Generate"; | |
| status.classList.remove("is-live"); | |
| } | |
| }); | |
| window.addEventListener("DOMContentLoaded", () => { | |
| globalThis.lucide?.createIcons({ attrs: { width: 16, height: 16 } }); | |
| }, { once: true }); | |
| })(); | |
| </script> | |
| </div> | |
| </body> | |
| </html> | |