Spaces:

HuggingFaceBio
/

carbon-demo

Running

tfrere HF Staff Cursor commited on 23 days ago

Commit

286aae5

1 Parent(s): 543de2f

§5 Folding: HTML + CSS scaffolding with 3Dmol side-by-side viewers

Replaces the "coming soon" stub with a real section that wires up the
/fold backend to a pair of 3Dmol cartoon viewers. Layout mirrors §1's
two-track convention (carbon completion on the left, reference on the
right) so the comparison feels native to the rest of the demo.

Frontend:
- Pulls 3Dmol 2.5.1 from jsDelivr (defer) — small enough to inline-cache,
no bundler needed. Pinned version for reproducibility.
- New CSS classes (.fold-grid, .fold-viewer, .fold-viewer-label,
.fold-legend, .fold-legend-bar). Two-column at >=720px, stacked below.
- Cartoon coloured by B-factor via 3Dmol's rwb gradient — ESMFold writes
pLDDT into the B-factor column so per-residue confidence shading is
free. Legend shows the same red→white→blue map.
- Hand-rolled pill UI for gene selection (HBB / INS / LYZ), reusing the
existing .pill and .pills classes.
- Stat row (residues, pLDDT mean carbon, pLDDT mean ref, 1D identity)
reuses .stat-row / .stat-pair, so the typography matches §1-§4.
- Viewers spin (auto-rotate) once loaded, like the ↻ glyph the stub used
to promise.

Scaffolding caveat:
For this commit both viewers are fed the same PDB so we can verify the
render path, the colouring, and the stat row end-to-end with a single
NIM call. The full DNA→ORF→AA→fold pipeline that produces a real
divergence between the two viewers lands in the next commit.

Touches only the §5 section + 3 small zones (<head> script, CSS block,
JS IIFE between §4 and §7). Everything else is left alone.

Co-authored-by: Cursor <cursoragent@cursor.com>

Files changed (1) hide show

demo.html +243 -7

demo.html CHANGED Viewed

@@ -7,6 +7,9 @@
 <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&family=Inter:wght@300;400;500;600&display=swap">
 <style>
   * { margin: 0; padding: 0; box-sizing: border-box; }
   html { scroll-behavior: smooth; }
@@ -329,6 +332,51 @@
   .stat-pair-val { color: #1f1f1d; font-variant-numeric: tabular-nums; }
   .stat-pair-val.muted { color: #aaa; }
   /* Mismatch highlighting in reference row */
   .ref-mismatch { background: rgba(188, 46, 37, 0.18); color: #b00020; }
   .ref-match { color: #999; }
@@ -933,22 +981,67 @@
 </section>
 <!-- ============================================================ -->
-<!-- §5 — FOLDING (stub, coming soon)                             -->
 <!-- ============================================================ -->
 <section id="folding">
-  <div class="section-num">§5 · Coming soon</div>
   <div class="section-title">From sequence to structure</div>
   <p class="lede">
     When Carbon completes an open reading frame, the resulting bases translate to a protein —
-    a protein that folds. We'll plug the generated ORF into a folding model and render the
     3D structure inline, alongside the same protein folded from the reference sequence so you
     can see whether Carbon's continuation produced something biologically plausible.
   </p>
-  <div class="stub" style="padding:64px 24px">
-    <div class="stub-tag">coming soon</div>
-    <div style="margin-top:6px">DNA → mRNA → protein → 3D structure</div>
-    <div style="margin-top:18px;font-size:9px;color:#bbb;letter-spacing:1px">A T G G C C → M A → 🧬 ↻</div>
   </div>
 </section>
@@ -2426,6 +2519,149 @@ function loadGenes() {
   window.addEventListener("resize", () => renderAll());
 })();
 // =========================================================================
 // §7 — Tokenizer (1-mer vs 6-mer)
 // =========================================================================

 <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&family=Inter:wght@300;400;500;600&display=swap">
+<!-- 3Dmol.js: lightweight WebGL molecular viewer, used by §5 (folding) to
+     render ESMFold-predicted protein cartoons. Pinned for reproducibility. -->
+<script defer src="https://cdn.jsdelivr.net/npm/3dmol@2.5.1/build/3Dmol-min.js"></script>
 <style>
   * { margin: 0; padding: 0; box-sizing: border-box; }
   html { scroll-behavior: smooth; }
   .stat-pair-val { color: #1f1f1d; font-variant-numeric: tabular-nums; }
   .stat-pair-val.muted { color: #aaa; }
+  /* --- §5 Folding viewers --- */
+  /* Two square 3Dmol canvases side by side. On narrow screens (<720px) we
+     stack them vertically so each viewer keeps a comfortable size. */
+  .fold-grid {
+    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
+    margin-top: 12px;
+  }
+  .fold-viewer-col { display: flex; flex-direction: column; }
+  .fold-viewer-label {
+    font-family: "JetBrains Mono", monospace;
+    font-size: 9px; color: #888; text-transform: uppercase; letter-spacing: 1.5px;
+    margin-bottom: 4px;
+  }
+  .fold-viewer {
+    position: relative;
+    width: 100%; aspect-ratio: 1 / 1;
+    background: #fafaf7;
+    border: 1px solid #eee;
+    overflow: hidden;
+  }
+  .fold-viewer canvas { display: block; }
+  .fold-viewer .fold-empty {
+    position: absolute; inset: 0;
+    display: flex; align-items: center; justify-content: center;
+    font-family: "JetBrains Mono", monospace; font-size: 10px;
+    color: #bbb; letter-spacing: 1.5px; text-transform: uppercase;
+    pointer-events: none;
+  }
+  .fold-legend {
+    font-family: "JetBrains Mono", monospace;
+    font-size: 9px; color: #888; text-transform: uppercase; letter-spacing: 1.2px;
+    display: flex; align-items: center; gap: 8px;
+    margin-top: 10px;
+  }
+  /* pLDDT colour key: red = low confidence, white = mid, blue = high.
+     Matches the 3Dmol "rwb" gradient applied to cartoon B-factors. */
+  .fold-legend-bar {
+    width: 120px; height: 6px;
+    background: linear-gradient(to right, #b00020 0%, #f0e8e0 50%, #2c5aa0 100%);
+    border-radius: 1px;
+  }
+  @media (max-width: 720px) {
+    .fold-grid { grid-template-columns: 1fr; }
+  }
   /* Mismatch highlighting in reference row */
   .ref-mismatch { background: rgba(188, 46, 37, 0.18); color: #b00020; }
   .ref-match { color: #999; }
 </section>
 <!-- ============================================================ -->
+<!-- §5 — FOLDING (DNA → protein → 3D structure via ESMFold)      -->
 <!-- ============================================================ -->
 <section id="folding">
+  <div class="section-num">§5 · Folding</div>
   <div class="section-title">From sequence to structure</div>
   <p class="lede">
     When Carbon completes an open reading frame, the resulting bases translate to a protein —
+    a protein that folds. We feed the resulting ORF into ESMFold and render the
     3D structure inline, alongside the same protein folded from the reference sequence so you
     can see whether Carbon's continuation produced something biologically plausible.
   </p>
+  <div class="demo" id="demoFold">
+    <div class="demo-toolbar">
+      <span>gene</span>
+      <span id="dfold-pills" class="pills"></span>
+      <span class="spacer"></span>
+      <button id="dfold-go" class="action primary">▶ fold</button>
+      <span class="status" id="dfold-status"><span class="dot"></span><span>idle</span></span>
+    </div>
+    <div class="gene-info" id="dfold-info">pick a gene and hit fold</div>
+    <div class="seq-label">protein sequence (translated from reference ORF)</div>
+    <div class="seq-block" id="dfold-aa">—</div>
+    <div class="fold-grid">
+      <div class="fold-viewer-col">
+        <div class="fold-viewer-label">carbon completion</div>
+        <div class="fold-viewer" id="dfold-viewer-carbon">
+          <div class="fold-empty">— no structure yet —</div>
+        </div>
+      </div>
+      <div class="fold-viewer-col">
+        <div class="fold-viewer-label">reference</div>
+        <div class="fold-viewer" id="dfold-viewer-ref">
+          <div class="fold-empty">— no structure yet —</div>
+        </div>
+      </div>
+    </div>
+    <div class="fold-legend">
+      pLDDT
+      <span class="fold-legend-bar" aria-hidden="true"></span>
+      low → high · drag to rotate · scroll to zoom
+    </div>
+    <div class="stat-row" id="dfold-stats">
+      <div class="stat-pair"><span class="stat-pair-label">residues</span><span class="stat-pair-val muted" id="dfold-n">—</span></div>
+      <div class="stat-pair"><span class="stat-pair-label">pLDDT mean (carbon)</span><span class="stat-pair-val muted" id="dfold-plddt-c">—</span></div>
+      <div class="stat-pair"><span class="stat-pair-label">pLDDT mean (ref)</span><span class="stat-pair-val muted" id="dfold-plddt-r">—</span></div>
+      <div class="stat-pair"><span class="stat-pair-label">identity (1D)</span><span class="stat-pair-val muted" id="dfold-id">—</span></div>
+    </div>
+  </div>
+  <div class="takeaway">
+    <strong>What to look for</strong>
+    A high <em>pLDDT</em> means ESMFold is confident the predicted structure
+    is correct for that residue. When Carbon's completion diverges at the
+    base level but still produces a sequence whose 3D fold matches the
+    reference, the model has captured something deeper than memorization.
   </div>
 </section>
   window.addEventListener("resize", () => renderAll());
 })();
+// =========================================================================
+// §5 — Folding (ESMFold via /fold + 3Dmol cartoon)
+//
+// SCAFFOLDING NOTE
+// ----------------
+// For this commit we hard-code three short reference proteins (HBB, INS,
+// LYZ) and fold each one to populate both viewers with the same structure.
+// That's enough to validate the layout, the 3Dmol render path, the pLDDT
+// colouring, and the stat row. The full DNA→ORF→AA→fold pipeline (which
+// will make the two viewers actually disagree) lands in the next commit.
+// =========================================================================
+(function initDemoFold() {
+  // Famous short proteins, hand-picked because they fit ESMFold's 1024 aa
+  // cap with room to spare and have textbook folds that are instantly
+  // recognisable (HBB = the 8-helix globin sandwich, INS = the disulfide
+  // hairpin, LYZ = the α+β lysozyme architecture).
+  const SEQS = {
+    HBB: "MVHLTPEEKSAVTALWGKVNVDEVGGEALGRLLVVYPWTQRFFESFGDLSTPDAVMGNPKVKAHGKKVLGAFSDGLAHLDNLKGTFATLSELHCDKLHVDPENFRLLGNVLVCVLAHHFGKEFTPPVQAAYQKVVAGVANALAHKYH",
+    INS: "MALWMRLLPLLALLALWGPDPAAAFVNQHLCGSHLVEALYLVCGERGFFYTPKTRREAEDLQVGQVELGGGPGAGSLQPLALEGSLQKRGIVEQCCTSICSLYQLENYCN",
+    LYZ: "MKALIVLGLVLLSVTVQGKVFERCELARTLKRLGMDGYRGISLANWMCLAKWESGYNTRATNYNAGDRSTDYGIFQINSRYWCNDGKTPGAVNACHLSCSALLQDNIADAVACAKRVVRDPQGIRAWVAWRNRCQNRDVRQYVQGCGV",
+  };
+  let currentGene = "HBB";
+  let viewerCarbon = null;
+  let viewerRef = null;
+  const els = {
+    pills:      document.getElementById("dfold-pills"),
+    info:       document.getElementById("dfold-info"),
+    aa:         document.getElementById("dfold-aa"),
+    go:         document.getElementById("dfold-go"),
+    status:     document.getElementById("dfold-status"),
+    statusText: document.querySelector("#dfold-status span:last-child"),
+    vCarbon:    document.getElementById("dfold-viewer-carbon"),
+    vRef:       document.getElementById("dfold-viewer-ref"),
+    nRes:       document.getElementById("dfold-n"),
+    plddtC:     document.getElementById("dfold-plddt-c"),
+    plddtR:     document.getElementById("dfold-plddt-r"),
+    identity:   document.getElementById("dfold-id"),
+  };
+  function renderPills() {
+    els.pills.innerHTML = "";
+    for (const g of Object.keys(SEQS)) {
+      const b = document.createElement("button");
+      b.className = "pill" + (g === currentGene ? " active" : "");
+      b.dataset.gene = g;
+      b.textContent = g;
+      b.addEventListener("click", () => {
+        currentGene = g;
+        renderPills();
+        renderInfo();
+      });
+      els.pills.appendChild(b);
+    }
+  }
+  function renderInfo() {
+    const seq = SEQS[currentGene];
+    els.info.innerHTML = `<strong>${currentGene}</strong> · ${seq.length} aa · click <em>fold</em> to predict structure`;
+    // Wrap at 60 chars for readability — matches the seq-block widths used in §1.
+    els.aa.textContent = seq.replace(/(.{60})/g, "$1\n");
+  }
+  function setStatus(text, cls) {
+    els.status.className = "status" + (cls ? " " + cls : "");
+    els.statusText.textContent = text;
+  }
+  async function fold(sequence) {
+    const resp = await fetch("/fold", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ sequence }),
+    });
+    return resp.json();
+  }
+  function makeViewer(host) {
+    if (!window.$3Dmol) return null;
+    // Clear placeholder.
+    host.innerHTML = "";
+    return $3Dmol.createViewer(host, {
+      backgroundColor: "#fafaf7",
+      antialias: true,
+    });
+  }
+  function renderStructure(viewer, pdb) {
+    if (!viewer) return;
+    viewer.removeAllModels();
+    viewer.addModel(pdb, "pdb");
+    // Cartoon coloured by B-factor (pLDDT) using the rwb gradient.
+    // ESMFold writes pLDDT into the B-factor column on every atom, so
+    // this gives us per-residue confidence shading for free.
+    viewer.setStyle({}, {
+      cartoon: {
+        colorscheme: { prop: "b", gradient: "rwb", min: 50, max: 100 },
+      },
+    });
+    viewer.zoomTo();
+    viewer.render();
+    viewer.spin(true);
+  }
+  async function runFold() {
+    if (!window.$3Dmol) {
+      setStatus("3Dmol not loaded — retry in a sec", "error");
+      return;
+    }
+    const seq = SEQS[currentGene];
+    setStatus(`folding ${currentGene}…`, "streaming");
+    els.go.disabled = true;
+    try {
+      const result = await fold(seq);
+      if (result.error) throw new Error(result.error);
+      // Scaffolding: feed the same PDB to both viewers. Commit 4 will fold
+      // a Carbon-generated sequence here and produce a real divergence.
+      if (!viewerCarbon) viewerCarbon = makeViewer(els.vCarbon);
+      if (!viewerRef)    viewerRef    = makeViewer(els.vRef);
+      renderStructure(viewerCarbon, result.pdb);
+      renderStructure(viewerRef,    result.pdb);
+      els.nRes.textContent     = result.n_residues ?? "—";
+      els.plddtC.textContent   = (result.plddt_mean ?? 0).toFixed(1);
+      els.plddtR.textContent   = (result.plddt_mean ?? 0).toFixed(1);
+      els.identity.textContent = "100%";
+      for (const el of [els.nRes, els.plddtC, els.plddtR, els.identity]) {
+        el.classList.remove("muted");
+      }
+      setStatus(result.cached ? "folded (cached)" : "folded", "");
+    } catch (e) {
+      setStatus("error: " + (e.message || e), "error");
+    } finally {
+      els.go.disabled = false;
+    }
+  }
+  renderPills();
+  renderInfo();
+  els.go.addEventListener("click", runFold);
+})();
 // =========================================================================
 // §7 — Tokenizer (1-mer vs 6-mer)
 // =========================================================================