Demo polish: header specs, primer rewrite, hide endpoint URL, tab rename

- Banner: 393,216 bp context (was 49,152); footer model badge removed
- Intro tab: rewrite primer §0/§1/§3/§4 paragraphs; clarify 1T tokens (6T bp)
- DNA Lab intro: use "Carbon-3B" to differentiate from upcoming releases
- Hide endpoint URL in frontend (sandbox header + code snippets); /config
no longer returns it; backend still uses real ENDPOINT_URL via env/default
- Code snippets: rename tabs to "API" / "transformers", generic
https://<your-endpoint>/v1/ placeholder, escape angle brackets
- Sandbox: fold "Connected to {model}" into the Input card header
- Rename tabs demo->dna-lab and model->recipe (URLs now #dna-lab, #recipe)

app.py

@@ -158,7 +158,7 @@ def social_banner():
 
 @app.get("/config")
 def config():
-    return {"model": MODEL_NAME, "endpoint": ENDPOINT_URL}
+    return {"model": MODEL_NAME}
 
 
 @app.get("/genes")

assets/js/sections/sandbox.js

@@ -450,7 +450,7 @@
   // Init meta from /config (fires regardless of which tab is active).
   // Reuses the shared promise from fetchConfig(), no double network roundtrip.
   fetchConfig().then(cfg => {
-    els.meta.textContent = `${cfg.model} · ${cfg.endpoint}`;
+    els.meta.textContent = cfg.model;
   }).catch(() => { els.meta.textContent = "config unavailable"; });
 
   updateStats();

assets/js/shared/config.js

@@ -15,7 +15,6 @@ async function loadConfig() {
   try {
     const cfg = await fetchConfig();
     document.getElementById("meta").textContent = cfg.model;
-    document.getElementById("footer-model").textContent = cfg.model;
   } catch {
     document.getElementById("meta").textContent = "config unavailable";
   }

assets/js/tabs.js

@@ -2,7 +2,7 @@
 // Tab switching + hash routing
 // =========================================================================
 (function initTabs() {
-  const TABS = ["intro", "demo", "model", "sandbox"];
+  const TABS = ["intro", "dna-lab", "recipe", "sandbox"];
   // What we land on when the URL has no hash. Also the safety fallback
   // when setTab is called with an unrecognised tab name.
   const DEFAULT_TAB = "intro";
@@ -30,8 +30,8 @@
   // Map a section anchor → which tab contains it
   const SECTION_TO_TAB = {
     primer: "intro",
-    completion: "demo", vep: "demo", track: "demo", species: "demo", folding: "demo", umap: "demo",
-    tokenizer: "model", loss: "model", data: "model", architecture: "model", longcontext: "model", results: "model", efficiency: "model",
+    completion: "dna-lab", vep: "dna-lab", track: "dna-lab", species: "dna-lab", folding: "dna-lab", umap: "dna-lab",
+    tokenizer: "recipe", loss: "recipe", data: "recipe", architecture: "recipe", longcontext: "recipe", results: "recipe", efficiency: "recipe",
     sandbox: "sandbox",
   };
 

assets/styles/sandbox.css

@@ -34,22 +34,10 @@
   color: #3a2a04;
 }
 
-/* --- Connection header strip (model + endpoint at the top of the panel).
-   Same paper/border treatment as the .sb-card panels below so the whole
-   page reads as a stack of layered cards. --- */
-#panel-sandbox .sb-header {
-  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
-  padding: 12px 18px;
-  background: #fbfaf3;
-  border: 1px solid var(--hairline);
-  border-radius: 4px;
-  margin-bottom: 18px;
-}
 #panel-sandbox .sb-header__meta {
   font-family: "JetBrains Mono", monospace;
   font-size: 11px; color: #555; font-weight: 400;
   letter-spacing: 0.4px; word-break: break-all;
-  flex: 1 1 0; min-width: 0;
 }
 
 /* --- Card panel (Prompt / Sequence). Replaces the old .sb-section-title
@@ -94,6 +82,15 @@
   padding: 1px 5px; border-radius: 2px;
   color: #1f1f1d;
 }
+#panel-sandbox .sb-card__header--with-meta {
+  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
+}
+#panel-sandbox .sb-card__heading { min-width: 0; }
+#panel-sandbox .sb-card__meta {
+  text-align: right;
+  flex: 0 0 auto;
+  max-width: 50%;
+}
 #panel-sandbox .sb-card__body {
   padding: 16px 20px 22px;
 }

demo.html

@@ -102,8 +102,8 @@
            that separates the banner from the page content (margin-bottom: -1px). -->
       <nav id="tab-nav" class="banner-tabs">
       <button class="tab active" data-tab="intro">Intro</button>
-      <button class="tab" data-tab="demo">DNA Lab</button>
-      <button class="tab" data-tab="model">Carbon Recipe</button>
+      <button class="tab" data-tab="dna-lab">DNA Lab</button>
+      <button class="tab" data-tab="recipe">Carbon Recipe</button>
       <button class="tab" data-tab="sandbox">Sandbox</button>
     </nav>
   </div>
@@ -133,8 +133,8 @@
     </a>
     <div class="sticky-nav__tabs">
       <button class="tab active" data-tab="intro">Intro</button>
-      <button class="tab" data-tab="demo">DNA Lab</button>
-      <button class="tab" data-tab="model">Carbon Recipe</button>
+      <button class="tab" data-tab="dna-lab">DNA Lab</button>
+      <button class="tab" data-tab="recipe">Carbon Recipe</button>
       <button class="tab" data-tab="sandbox">Sandbox</button>
     </div>
   </div>
@@ -173,9 +173,9 @@
     <ul class="intro-guide-list">
       <li><a href="#primer">Intro<span class="arrow" aria-hidden="true">↓</span></a>
         continue reading to learn the basics of genetics.</li>
-      <li><a href="#demo">DNA Lab<span class="arrow" aria-hidden="true">→</span></a>
+      <li><a href="#dna-lab">DNA Lab<span class="arrow" aria-hidden="true">→</span></a>
         explore what the model can do, with live interactions against the 3B checkpoint.</li>
-      <li><a href="#model">Carbon Recipe<span class="arrow" aria-hidden="true">→</span></a>
+      <li><a href="#recipe">Carbon Recipe<span class="arrow" aria-hidden="true">→</span></a>
         learn how Carbon was trained: tokenizer, loss, dataset, results.</li>
       <li><a href="#sandbox">Sandbox<span class="arrow" aria-hidden="true">→</span></a>
         run Carbon on your own DNA sequences.</li>
@@ -202,9 +202,9 @@
         <div class="section-num">§1 · Bases</div>
         <div class="section-title">A four-letter alphabet</div>
         <p class="lede">
-          The alphabet of DNA is <em>four small molecules</em>: adenine, cytosine, guanine, thymine.
-          Two purines (A, G, twin-ring) and two pyrimidines (C, T, single-ring). Everything
-          that follows is built out of these.
+          DNA is written in <em>four small molecules</em>: adenine, cytosine, guanine, thymine.
+          Two are purines (A and G, twin-ring), two are pyrimidines (C and T, single-ring).
+          Everything that follows is built from these four.
         </p>
       </div>
       <div class="section-body">
@@ -261,9 +261,10 @@
         <div class="section-num">§3 · Gene</div>
         <div class="section-title">Promoter, exons, introns</div>
         <p class="lede">
-          Most of the string is non-coding. The functional regions are organised into a
-          <em>promoter</em> (where the cell starts reading), with the coding sequence broken into
-          <em>exons</em> (kept) interrupted by <em>introns</em> (spliced out).
+          A gene is a stretch of DNA that the cell turns into protein. Most of the genome is
+          not. Each gene begins with a <em>promoter</em>, where the cell starts reading. What
+          follows is broken into two kinds of segment: <em>exons</em>, which the cell keeps,
+          and <em>introns</em>, which it splices out and often serve regulatory purposes.
         </p>
       </div>
       <div class="section-body">
@@ -285,9 +286,9 @@
         <div class="section-num">§4 · RNA</div>
         <div class="section-title">Splicing into the working copy</div>
         <p class="lede">
-          The gene gets read and copied into RNA, then the <em>introns are spliced out</em> and the
-          <em>exons joined together</em>. What's left is the working mRNA: just the coding parts,
-          in order. (And T is rewritten as U along the way: a small alphabet quirk between DNA
+          The cell copies the gene into RNA. Then it <em>splices out the introns</em> and
+          <em>joins the exons together</em>. What's left is the working mRNA: just the exons,
+          in order. (T is rewritten as U along the way: a small alphabet quirk between DNA
           and RNA.)
         </p>
       </div>
@@ -366,19 +367,20 @@
   </div>
 </div>
 
-<div class="tab-panel" id="panel-demo" data-tab="demo">
+<div class="tab-panel" id="panel-dna-lab" data-tab="dna-lab">
 
 <div class="tab-lede">
   <div class="tab-lede__rail">
     <span class="tab-lede__eyebrow">Intro</span>
     <p>
-      <strong>Carbon</strong> is a 3-billion-parameter language model for DNA. We trained it
-      on roughly 1&nbsp;trillion bases of genomic sequence with a single objective: given some
-      DNA, predict what comes next (six bases at a time, autoregressively). That's it: no
-      annotations, no labels, no biology curriculum. Just <em>read DNA, predict more DNA</em>.
+      <strong>Carbon-3B</strong> is a 3-billion-parameter language model for DNA. We trained it
+      on roughly 1&nbsp;trillion tokens (6&nbsp;trillion base pairs) of genomic sequence with a
+      single objective: given some DNA, predict what comes next (six bases at a time,
+      autoregressively). That's it: no annotations, no labels, no biology curriculum.
+      Just <em>read DNA, predict more DNA</em>.
     </p>
     <p class="tab-lede__note">
-      The interesting question is what else falls out of that. We didn't tell Carbon what an
+      The interesting question is what else falls out of that. We didn't tell Carbon-3B what an
       exon is. We didn't tell it which mutations are pathogenic. We didn't tell it how genes
       differ between species. The sections below are ways to read what it picked up
       anyway: autocomplete a gene <a class="lede-chip" href="#completion">§1</a>, see
@@ -508,17 +510,17 @@
     <summary>Run this from code</summary>
     <div class="code-snippet__body">
       <div class="code-snippet__tabs">
-        <button class="code-snippet__tab active" data-tab="endpoint" type="button">Endpoint</button>
-        <button class="code-snippet__tab"        data-tab="local"    type="button">Local (transformers)</button>
+        <button class="code-snippet__tab active" data-tab="endpoint" type="button">API</button>
+        <button class="code-snippet__tab"        data-tab="local"    type="button">transformers</button>
       </div>
       <button class="code-snippet__copy" type="button">Copy</button>
       <div class="code-snippet__panel active" data-tab="endpoint"><pre><code>from huggingface_hub import get_token
 from openai import OpenAI
 
-# Carbon-3B is served behind a private HF inference endpoint; an HF token
-# with access is required (`huggingface-cli login` or HF_TOKEN env var).
+# Carbon-3B can be served behind any OpenAI-compatible API (vLLM, TGI, an
+# HF inference endpoint, etc.). Point base_url at your deployment.
 client = OpenAI(
-    base_url="https://cr2l9w72ys5pp8le.us-east-1.aws.endpoints.huggingface.cloud/v1/",
+    base_url="https://&lt;your-endpoint&gt;/v1/",
     api_key=get_token(),
 )
 
@@ -630,15 +632,15 @@ print(tok.decode(new_ids))</code></pre></div>
     <summary>Run this from code</summary>
     <div class="code-snippet__body">
       <div class="code-snippet__tabs">
-        <button class="code-snippet__tab active" data-tab="endpoint" type="button">Endpoint</button>
-        <button class="code-snippet__tab"        data-tab="local"    type="button">Local (transformers)</button>
+        <button class="code-snippet__tab active" data-tab="endpoint" type="button">API</button>
+        <button class="code-snippet__tab"        data-tab="local"    type="button">transformers</button>
       </div>
       <button class="code-snippet__copy" type="button">Copy</button>
       <div class="code-snippet__panel active" data-tab="endpoint"><pre><code>from huggingface_hub import get_token
 from openai import OpenAI
 
 client = OpenAI(
-    base_url="https://cr2l9w72ys5pp8le.us-east-1.aws.endpoints.huggingface.cloud/v1/",
+    base_url="https://&lt;your-endpoint&gt;/v1/",
     api_key=get_token(),
 )
 
@@ -744,15 +746,15 @@ for t, lp in zip(tok.convert_ids_to_tokens(ids[0, 1:].tolist()),
     <summary>Run this from code</summary>
     <div class="code-snippet__body">
       <div class="code-snippet__tabs">
-        <button class="code-snippet__tab active" data-tab="endpoint" type="button">Endpoint</button>
-        <button class="code-snippet__tab"        data-tab="local"    type="button">Local (transformers)</button>
+        <button class="code-snippet__tab active" data-tab="endpoint" type="button">API</button>
+        <button class="code-snippet__tab"        data-tab="local"    type="button">transformers</button>
       </div>
       <button class="code-snippet__copy" type="button">Copy</button>
       <div class="code-snippet__panel active" data-tab="endpoint"><pre><code>from huggingface_hub import get_token
 from openai import OpenAI
 
 client = OpenAI(
-    base_url="https://cr2l9w72ys5pp8le.us-east-1.aws.endpoints.huggingface.cloud/v1/",
+    base_url="https://&lt;your-endpoint&gt;/v1/",
     api_key=get_token(),
 )
 
@@ -868,8 +870,8 @@ print(f"delta = {delta:+.2f}  (less likely if negative)")</code></pre></div>
     <summary>Run this from code</summary>
     <div class="code-snippet__body">
       <div class="code-snippet__tabs">
-        <button class="code-snippet__tab active" data-tab="endpoint" type="button">Endpoint</button>
-        <button class="code-snippet__tab"        data-tab="local"    type="button">Local (transformers)</button>
+        <button class="code-snippet__tab active" data-tab="endpoint" type="button">API</button>
+        <button class="code-snippet__tab"        data-tab="local"    type="button">transformers</button>
       </div>
       <button class="code-snippet__copy" type="button">Copy</button>
       <div class="code-snippet__panel active" data-tab="endpoint"><pre><code>from huggingface_hub import get_token
@@ -877,7 +879,7 @@ from openai import OpenAI
 from concurrent.futures import ThreadPoolExecutor
 
 client = OpenAI(
-    base_url="https://cr2l9w72ys5pp8le.us-east-1.aws.endpoints.huggingface.cloud/v1/",
+    base_url="https://&lt;your-endpoint&gt;/v1/",
     api_key=get_token(),
 )
 
@@ -1177,9 +1179,9 @@ for name, ids in zip(species_prefixes, new_ids):
 
 </div>
 
-</div> <!-- /panel-demo -->
+</div> <!-- /panel-dna-lab -->
 
-<div class="tab-panel" id="panel-model" data-tab="model">
+<div class="tab-panel" id="panel-recipe" data-tab="recipe">
 
 <div class="tab-lede">
   <div class="tab-lede__rail">
@@ -1341,7 +1343,7 @@ for name, ids in zip(species_prefixes, new_ids):
 
   <div class="section-body">
   <div class="demo" id="demo9">
-    <div class="seq-label" style="margin-top:0">corpus composition · 1T bases</div>
+    <div class="seq-label" style="margin-top:0">corpus composition · 1T tokens (6T base pairs)</div>
     <div id="d9-bars" class="d9-bars" style="margin-bottom:22px"></div>
 
     <div class="seq-label">signal-to-noise · raw genome vs annotation-aware curation</div>
@@ -1526,7 +1528,7 @@ for name, ids in zip(species_prefixes, new_ids):
 
 </div>
 
-</div> <!-- /panel-model -->
+</div> <!-- /panel-recipe -->
 
 <!-- ============================================================ -->
 <!-- TAB 3 · SANDBOX (the open-ended playground)                  -->
@@ -1554,17 +1556,18 @@ for name, ids in zip(species_prefixes, new_ids):
      Same eyebrow + value pattern reused by the two card headers below so
      the whole panel reads as a single layered stack rather than a flat
      wall of controls. -->
-<div class="sb-header">
-  <span class="sb-card__eyebrow">Connected to</span>
-  <div id="sb-meta" class="sb-header__meta">loading…</div>
-</div>
-
 <!-- INPUT card: examples → prompt → controls → status. -->
 <section class="sb-card">
-  <header class="sb-card__header">
-    <span class="sb-card__eyebrow">§ Input</span>
-    <h2 class="sb-card__title">Prompt</h2>
-    <p class="sb-card__hint">DNA prefix in <code>{A, C, G, T}</code>: pick an example or type your own.</p>
+  <header class="sb-card__header sb-card__header--with-meta">
+    <div class="sb-card__heading">
+      <span class="sb-card__eyebrow">§ Input</span>
+      <h2 class="sb-card__title">Prompt</h2>
+      <p class="sb-card__hint">DNA prefix in <code>{A, C, G, T}</code>: pick an example or type your own.</p>
+    </div>
+    <div class="sb-card__meta">
+      <span class="sb-card__eyebrow">Connected to</span>
+      <div id="sb-meta" class="sb-header__meta">loading…</div>
+    </div>
   </header>
 
   <div class="sb-card__body">
@@ -1657,10 +1660,6 @@ for name, ids in zip(species_prefixes, new_ids):
 </div>
 </div> <!-- /panel-sandbox -->
 
-<footer>
-  <span style="color:#888">model:</span> <span id="footer-model">…</span>
-</footer>
-
 <!-- Modular JS, served from /assets/js/. Load order matters because
      section IIFEs reference shared globals (lerp, logprobRgb, GENES,
      loadConfig, etc.) defined in shared/. Each file ends with its own