Long-sequence rendering: coarse spans, incremental append, rAF throttle, lpRange-threshold full repaint

index.html

@@ -169,7 +169,8 @@
   .seq-block.empty { color: #aaa; font-weight: 300; letter-spacing: normal; }
   .seq-line { white-space: pre; }
   .pos { color: #bbb; user-select: none; font-weight: 300; }
-  .cursor {
+  .seq-line.tail::after {
+    content: "";
     display: inline-block; width: 7px; height: 14px;
     background: #1a1a1a; vertical-align: text-bottom;
     margin-left: 2px;
@@ -470,38 +471,119 @@ function basesPerLine() {
   return Math.max(10, Math.min(blocks, 30) * 10);
 }
 
-function renderSequence() {
-  if (colorMode === "logprob") recomputeLpRange();
+// Cheap discriminator: bases sharing a key inside the same 10-block fold into one span.
+function colorKey(absIdx, base) {
+  if (absIdx < promptBases.length) return "p";
+  if (colorMode === "none") return "g";
+  if (colorMode === "bases") return "b" + base;
+  if (colorMode === "logprob") return "t" + genTokenAtBase[absIdx - promptBases.length];
+  return "g";
+}
+
+function buildLineHTML(start, lineBases) {
+  const pos = String(start + 1).padStart(5, " ");
+  let html = `<span class="pos">${pos}</span>  `;
+  let j = 0;
+  while (j < lineBases.length) {
+    if (j > 0 && j % 10 === 0) html += "  ";
+    const startAbs = start + j;
+    const startKey = colorKey(startAbs, lineBases[j]);
+    const blockEnd = Math.min(lineBases.length, Math.floor(j / 10) * 10 + 10);
+    let runEnd = j + 1;
+    while (runEnd < blockEnd && colorKey(start + runEnd, lineBases[runEnd]) === startKey) runEnd++;
+    const runText = lineBases.slice(j, runEnd);
+    const [r, g, b] = rgbForBase(startAbs, lineBases[j]);
+    const tinted = colorMode !== "none" && startAbs >= promptBases.length;
+    const bg = tinted ? `;background:rgba(${r},${g},${b},${BG_ALPHA})` : "";
+    html += `<span style="color:rgb(${r},${g},${b})${bg}">${runText}</span>`;
+    j = runEnd;
+  }
+  return html;
+}
+
+function updateTail() {
+  const prev = els.seq.querySelector(".seq-line.tail");
+  if (prev) prev.classList.remove("tail");
+  const last = els.seq.lastElementChild;
+  if (abortCtrl && last && last.classList.contains("seq-line")) last.classList.add("tail");
+}
+
+// Re-render frequency for logprob: tolerance is max of 0.2 absolute and 5% of current range.
+function lpRangeShifted(prev, curr) {
+  if (!prev || !curr) return prev !== curr;
+  const range = Math.max(0.1, prev.max - prev.min);
+  const tol = Math.max(0.2, range * 0.05);
+  return Math.abs(prev.min - curr.min) > tol
+      || Math.abs(prev.mid - curr.mid) > tol
+      || Math.abs(prev.max - curr.max) > tol;
+}
+
+let lastRenderedMode = null;
+let lastRenderedBpl = null;
+let lastRenderedLpRange = null;
+
+function fullRender(bpl) {
   const total = promptBases + genText;
-  els.copy.disabled = total.length === 0;
   if (!total) {
     els.seq.classList.add("empty");
     els.seq.textContent = "prompt + generated bases will stream here";
-    return;
+  } else {
+    els.seq.classList.remove("empty");
+    const parts = [];
+    for (let i = 0; i < total.length; i += bpl) {
+      parts.push(`<div class="seq-line">${buildLineHTML(i, total.slice(i, i + bpl))}</div>`);
+    }
+    els.seq.innerHTML = parts.join("");
   }
-  els.seq.classList.remove("empty");
+  lastRenderedMode = colorMode;
+  lastRenderedBpl = bpl;
+  lastRenderedLpRange = lpRange ? { ...lpRange } : null;
+  updateTail();
+}
 
-  const bpl = basesPerLine();
-  const lines = [];
-  for (let i = 0; i < total.length; i += bpl) {
-    const lineBases = total.slice(i, i + bpl);
-    const pos = String(i + 1).padStart(5, " ");
-    let html = `<span class="pos">${pos}</span>  `;
-    for (let j = 0; j < lineBases.length; j++) {
-      if (j > 0 && j % 10 === 0) html += "  ";
-      const absIdx = i + j;
-      const base = lineBases[j];
-      const [r, g, b] = rgbForBase(absIdx, base);
-      const tinted = colorMode !== "none" && absIdx >= promptBases.length;
-      const bg = tinted ? `;background:rgba(${r},${g},${b},${BG_ALPHA})` : "";
-      html += `<span style="color:rgb(${r},${g},${b})${bg}">${base}</span>`;
-    }
-    if (abortCtrl && i + lineBases.length === total.length) {
-      html += `<span class="cursor"></span>`;
+function incrementalRender(bpl) {
+  const total = promptBases + genText;
+  const totalLines = Math.ceil(total.length / bpl);
+  const lineDivs = els.seq.children;
+  if (lineDivs.length > 0) {
+    const lastIdx = lineDivs.length - 1;
+    const start = lastIdx * bpl;
+    lineDivs[lastIdx].innerHTML = buildLineHTML(start, total.slice(start, start + bpl));
+  }
+  if (totalLines > lineDivs.length) {
+    const parts = [];
+    for (let li = lineDivs.length; li < totalLines; li++) {
+      const start = li * bpl;
+      parts.push(`<div class="seq-line">${buildLineHTML(start, total.slice(start, start + bpl))}</div>`);
     }
-    lines.push(`<div class="seq-line">${html}</div>`);
+    els.seq.insertAdjacentHTML("beforeend", parts.join(""));
   }
-  els.seq.innerHTML = lines.join("");
+  lastRenderedLpRange = lpRange ? { ...lpRange } : null;
+  updateTail();
+}
+
+function renderSequence() {
+  if (colorMode === "logprob") recomputeLpRange();
+  const total = promptBases + genText;
+  els.copy.disabled = total.length === 0;
+  const bpl = basesPerLine();
+  const totalLines = total ? Math.ceil(total.length / bpl) : 0;
+  const renderedLines = els.seq.children.length;
+  const needFull =
+    !total ||
+    lastRenderedMode !== colorMode ||
+    lastRenderedBpl !== bpl ||
+    totalLines < renderedLines ||
+    (colorMode === "logprob" && lpRangeShifted(lastRenderedLpRange, lpRange));
+  if (needFull) fullRender(bpl);
+  else incrementalRender(bpl);
+}
+
+let renderQueued = false;
+function scheduleRender() {
+  if (renderQueued) return;
+  renderQueued = true;
+  requestAnimationFrame(() => { renderQueued = false; renderSequence(); });
 }
 
 // --- Stats ---
@@ -619,7 +701,7 @@ async function generate() {
         }
         if (data.text) {
           genText += cleanPrompt(data.text);
-          renderSequence();
+          scheduleRender();
         }
       }
     }