diffusiongemma-codegen-8192

Running on Zero

File size: 26,161 Bytes

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DiffusionGemma · Live Builder</title>
<style>
  :root {
    --bg: #0b0e14;
    --panel: #121722;
    --panel-2: #0f141d;
    --border: #222a38;
    --text: #e6edf3;
    --muted: #8b97a7;
    --accent: #7c5cff;
    --accent-2: #18c29c;
    --amber: #f5c451;
    --green: #2ea043;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; height: 100%; }
  body {
    background: radial-gradient(1200px 600px at 70% -10%, #1a2030 0%, var(--bg) 55%);
    color: var(--text);
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    display: flex; flex-direction: column; height: 100vh; overflow: hidden;
  }
  header {
    padding: 14px 22px; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 14px; flex: 0 0 auto;
  }
  header .logo { font-size: 22px; }
  header h1 { font-size: 16px; margin: 0; font-weight: 650; letter-spacing: .2px; }
  header p { margin: 0; color: var(--muted); font-size: 12.5px; }
  .pill {
    margin-left: auto; font-size: 12px; color: var(--muted);
    border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px;
    display: flex; align-items: center; gap: 8px; white-space: nowrap;
  }
  .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
  .dot.live { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
  .dot.done { background: var(--green); box-shadow: 0 0 8px var(--green); }
  .dot.err { background: #f85149; box-shadow: 0 0 8px #f85149; }

  main { flex: 1 1 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 14px 18px; min-height: 0; }
  .panel { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
  .panel .cap { padding: 9px 14px; border-bottom: 1px solid var(--border); font-size: 12.5px; font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: 8px; }
  .panel .cap .sub { font-weight: 400; color: #5d6b7a; }

  /* Code / diffusion view */
  #code { flex: 1 1 auto; overflow: auto; margin: 0; padding: 12px 0; font-family: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace; font-size: 12px; line-height: 1.55; background: var(--panel-2); }
  #code .ln { padding: 0 14px; white-space: pre-wrap; word-break: break-word; min-height: 1.55em; border-left: 3px solid transparent; }
  #code .ln.live { animation: flash .6s ease-out; background: rgba(245,196,81,.05); }
  #code .ln.diff { background: rgba(46,160,67,.13); border-left-color: var(--green); }
  @keyframes flash {
    0% { background: rgba(245,196,81,.42); }
    100% { background: rgba(245,196,81,.05); }
  }
  #code::-webkit-scrollbar, .scroll::-webkit-scrollbar { width: 9px; height: 9px; }
  #code::-webkit-scrollbar-thumb, .scroll::-webkit-scrollbar-thumb { background: #2a3344; border-radius: 8px; }

  /* Website preview */
  #preview { flex: 1 1 auto; border: 0; width: 100%; background: #fff; }

  /* Bottom dock */
  footer { flex: 0 0 auto; border-top: 1px solid var(--border); padding: 12px 18px; background: var(--panel-2); }
  .row { display: flex; gap: 12px; align-items: flex-start; }
  textarea#prompt {
    flex: 1 1 auto; resize: none; height: 72px; background: var(--panel); color: var(--text);
    border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; font-size: 14px; font-family: inherit;
  }
  textarea#prompt:focus { outline: none; border-color: var(--accent); }
  .btns { display: flex; flex-direction: column; gap: 8px; width: 150px; }
  button { font-family: inherit; font-size: 13.5px; font-weight: 600; border-radius: 10px; padding: 9px 12px; cursor: pointer; border: 1px solid var(--border); }
  button.primary { background: linear-gradient(180deg, #8a6bff, #6b48f0); color: #fff; border: 0; }
  button.primary:disabled { opacity: .5; cursor: not-allowed; }
  button.ghost { background: transparent; color: var(--muted); }
  button.ghost:hover:not(:disabled) { color: var(--text); border-color: #36405230; }
  button.ghost:disabled { opacity: .4; cursor: not-allowed; }

  .meta { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 11px; color: var(--muted); font-size: 12px; }
  .meta label { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
  .meta input[type="range"] { accent-color: var(--accent); width: 120px; }
  .meta input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; }
  .meta .val { color: var(--text); font-variant-numeric: tabular-nums; min-width: 30px; }
  .chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 11px; }
  .chip { font-size: 12px; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 5px 11px; cursor: pointer; background: transparent; }
  .chip:hover { color: var(--text); border-color: var(--accent); }
  .history { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; max-height: 46px; overflow: auto; }
  .turn { font-size: 11.5px; color: var(--muted); border: 1px solid var(--border); border-radius: 8px; padding: 3px 9px; }
  .turn b { color: var(--accent-2); }

  /* Mode switcher */
  .mode-switch {
    display: inline-flex; border: 1px solid var(--border); border-radius: 999px;
    padding: 3px; background: var(--panel-2); margin-left: 8px;
  }
  .mode-switch button {
    font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 999px;
    border: 0; background: transparent; color: var(--muted); cursor: pointer;
  }
  .mode-switch button.active {
    background: linear-gradient(180deg, #8a6bff, #6b48f0); color: #fff;
  }

  /* Python mode right panel */
  #pyView { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
  #pyCode {
    flex: 1 1 auto; overflow: auto; margin: 0; padding: 12px 14px;
    font-family: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
    font-size: 12.5px; line-height: 1.55; background: var(--panel-2); color: var(--text);
    white-space: pre; tab-size: 4;
  }
  #pyCode .tok-kw { color: #ff7b72; }
  #pyCode .tok-str { color: #a5d6ff; }
  #pyCode .tok-com { color: #6e7681; font-style: italic; }
  #pyCode .tok-num { color: #79c0ff; }
  #pyCode .tok-fn  { color: #d2a8ff; }
  #pyCode .tok-bi  { color: #ffa657; }
  #pyConsole {
    flex: 0 0 180px; overflow: auto; margin: 0; padding: 10px 14px;
    font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
    font-size: 12px; line-height: 1.5; background: #07090d; color: #c9d1d9;
    border-top: 1px solid var(--border); white-space: pre-wrap;
  }
  #pyConsole .err { color: #f85149; }
  #pyConsole .out { color: #8b97a7; }
  .py-bar { padding: 8px 14px; border-bottom: 1px solid var(--border); display: flex; gap: 8px; align-items: center; }
  .py-bar button { font-size: 12px; padding: 6px 12px; }
  .py-bar .py-status { color: var(--muted); font-size: 12px; margin-left: auto; }
  .py-bar .py-opt { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 5px; cursor: pointer; }
  .py-bar .py-opt input { accent-color: var(--accent); width: 14px; height: 14px; }
</style>
</head>
<body>
  <header>
    <span class="logo">🌫️→🌐</span>
    <div>
      <h1>DiffusionGemma · Live Builder</h1>
      <p id="subtitle">Describe a website and a block-diffusion LLM writes the HTML by denoising — every token updates at once. Watch the raw canvas take shape (left) while it renders into a live page (right), then send follow-up prompts to tweak it.</p>
    </div>
    <div class="mode-switch" id="modeSwitch">
      <button data-mode="webpage" class="active">🌐 Webpage</button>
      <button data-mode="python">🐍 Python</button>
    </div>
    <span class="pill"><span class="dot" id="statusDot"></span><span id="statusText">idle</span></span>
  </header>

  <main>
    <section class="panel">
      <div class="cap">🧠 Model's view — diffusion canvas <span class="sub" id="capInfo"></span></div>
      <div id="code" class="scroll"></div>
    </section>
    <section class="panel" id="rightPanel">
      <!-- Webpage mode -->
      <div id="webMode" style="display:flex;flex-direction:column;flex:1;min-height:0;">
        <div class="cap">🌐 Live website</div>
        <iframe id="preview" sandbox="allow-scripts"></iframe>
      </div>
      <!-- Python mode -->
      <div id="pyMode" style="display:none;flex-direction:column;flex:1;min-height:0;">
        <div class="cap">🐍 Python code
          <span class="sub" id="pyCapInfo"></span>
        </div>
        <div id="pyView">
          <pre id="pyCode"></pre>
          <div class="py-bar">
            <button class="primary" id="runBtn">▶ Run</button>
            <button class="ghost" id="clearConsoleBtn">Clear</button>
            <label class="py-opt"><input type="checkbox" id="autoFeedErr" checked> auto-fix on error</label>
            <label class="py-opt"><input type="checkbox" id="autoRetryRun" checked> auto-retry run</label>
            <span class="py-status" id="pyStatus"></span>
          </div>
          <pre id="pyConsole"></pre>
        </div>
      </div>
    </section>
  </main>

  <footer>
    <div class="row">
      <textarea id="prompt" placeholder="Describe a website or Python script…"></textarea>
      <div class="btns">
        <button class="primary" id="buildBtn">Build / Tweak</button>
        <button class="ghost" id="resetBtn">Reset</button>
      </div>
    </div>
    <div class="chips" id="chips"></div>
    <div class="meta">
      <label>tokens <input type="range" id="maxTokens" min="2048" max="8192" step="256" value="8192"><span class="val" id="maxTokensV">8192</span></label>
      <label>iterations/block <input type="range" id="maxIters" min="8" max="120" step="8" value="120"><span class="val" id="maxItersV">120</span></label>
      <label>anim delay <input type="range" id="delay" min="0" max="0.3" step="0.02" value="0"><span class="val" id="delayV">0.0s</span></label>
      <label><input type="checkbox" id="fullDenoise"> run all denoising steps (no early stop)</label>
      <label><input type="checkbox" id="warmStart" checked> tweak in place (diffuse from current artifact, not noise)</label>
      <span class="history" id="history"></span>
    </div>
  </footer>

<script type="module">
import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";

const $ = (id) => document.getElementById(id);
const codeEl = $("code"), preview = $("preview");
const statusDot = $("statusDot"), statusText = $("statusText"), capInfo = $("capInfo");
const buildBtn = $("buildBtn"), resetBtn = $("resetBtn"), promptEl = $("prompt");
const webMode = $("webMode"), pyMode = $("pyMode"), modeSwitch = $("modeSwitch");
const pyCodeEl = $("pyCode"), pyConsole = $("pyConsole"), runBtn = $("runBtn");
const clearConsoleBtn = $("clearConsoleBtn"), pyStatus = $("pyStatus"), pyCapInfo = $("pyCapInfo");
const subtitle = $("subtitle");

let client = null;
let busy = false;
let messages = [];
let prevFrameLines = [];
let lastFinalLines = [];
let previewScrollY = 0;
let currentMode = "webpage";
let pyodideReady = null;
let currentPySource = "";
let autoFixRetries = 0;
const MAX_AUTO_RETRIES = 3;

const SUBTITLES = {
  webpage: "Describe a website and a block-diffusion LLM writes the HTML by denoising — every token updates at once. Watch the raw canvas take shape (left) while it renders into a live page (right), then send follow-up prompts to tweak it.",
  python: "Describe a Python program and a block-diffusion LLM writes the code by denoising — every token updates at once. Watch the raw canvas take shape (left) while it appears as syntax-highlighted code (right). Press Run to execute it in your browser via Pyodide.",
};

const EXAMPLES = {
  webpage: [
    "A bold landing page for a startup called 'Nimbus' that sells AI weather forecasting, with a hero section, three feature cards, and a call-to-action button.",
    "A cozy personal blog homepage with a warm color palette, a header, an about section, and a list of three recent posts.",
    "A neon synthwave portfolio page for a music producer with an animated gradient background.",
    "A clean pricing page with three tiers (Free, Pro, Team), a feature comparison, and a FAQ.",
    "A restaurant landing page with a hero image area, a menu grid, opening hours, and a reservation button.",
    "A sleek product page for wireless headphones with specs, an image placeholder, and an add-to-cart bar.",
    "A dark-mode dashboard mockup with a sidebar, four stat cards, and a placeholder chart.",
    "A playful 'coming soon' page with a countdown vibe, an email signup box, and floating shapes.",
  ],
  python: [
    "A CLI todo-list manager using only the standard library (argparse + json file storage).",
    "A function that generates a random maze and prints it as ASCII art.",
    "A simple HTTP server using http.server that returns the current time as JSON.",
    "A Conway's Game of Life simulation printed to the terminal with ANSI escapes.",
    "A recursive fractal tree drawn with turtle graphics.",
    "A text-based Tic-Tac-Toe game for two human players in the terminal.",
    "A script that walks a directory tree and prints the largest N files by size.",
    "A sieve of Eratosthenes that prints all primes below a given N.",
  ],
};

window.addEventListener("message", (e) => {
  if (e.data && typeof e.data.__gdiffScrollY === "number") previewScrollY = e.data.__gdiffScrollY;
});

// ---------- helpers ----------
function esc(s) { return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"); }

function setStatus(kind, text) {
  statusDot.className = "dot" + (kind ? " " + kind : "");
  statusText.textContent = text;
}

function unchangedSet(a, b) {
  const n = a.length, m = b.length;
  const dp = Array.from({ length: n + 1 }, () => new Int32Array(m + 1));
  for (let i = n - 1; i >= 0; i--)
    for (let j = m - 1; j >= 0; j--)
      dp[i][j] = a[i] === b[j] ? dp[i + 1][j + 1] + 1 : Math.max(dp[i + 1][j], dp[i][j + 1]);
  const keep = new Set();
  let i = 0, j = 0;
  while (i < n && j < m) {
    if (a[i] === b[j]) { keep.add(j); i++; j++; }
    else if (dp[i + 1][j] >= dp[i][j + 1]) i++; else j++;
  }
  return keep;
}

function renderCode(source, { liveAgainst = null, diffAgainst = null } = {}) {
  const lines = source.split("\n");
  const liveKeep = liveAgainst ? unchangedSet(liveAgainst, lines) : null;
  const diffKeep = diffAgainst ? unchangedSet(diffAgainst, lines) : null;
  const html = lines.map((ln, idx) => {
    let cls = "ln";
    if (diffKeep && !diffKeep.has(idx)) cls += " diff";
    else if (liveKeep && !liveKeep.has(idx)) cls += " live";
    return `<div class="${cls}">${esc(ln) || "&nbsp;"}</div>`;
  }).join("");
  codeEl.innerHTML = html;
  return lines;
}

function normalizeHtml(src) {
  const lower = src.toLowerCase();
  const dt = lower.indexOf("<!doctype");
  if (dt !== -1) return src.slice(dt);
  const h = lower.indexOf("<html");
  if (h !== -1) return "<!DOCTYPE html>\n" + src.slice(h);
  const hd = lower.indexOf("<head");
  if (hd !== -1) return '<!DOCTYPE html>\n<html lang="en">\n' + src.slice(hd);
  const bd = lower.indexOf("<body");
  if (bd !== -1) return '<!DOCTYPE html>\n<html lang="en">\n<head><meta charset="UTF-8"></head>\n' + src.slice(bd);
  return src;
}

function renderPreview(source) {
  if (!source || !source.trim()) { preview.srcdoc = ""; previewScrollY = 0; return; }
  source = normalizeHtml(source);
  const y = Math.round(previewScrollY);
  const inject =
    "<script>(function(){var y=" + y + ";" +
    "function r(){window.scrollTo(0,y);}" +
    "r();requestAnimationFrame(r);window.addEventListener('load',r);" +
    "window.addEventListener('scroll',function(){" +
    "parent.postMessage({__gdiffScrollY:window.scrollY||document.documentElement.scrollTop||0},'*');" +
    "},{passive:true});})();<\/script>";
  const idx = source.toLowerCase().lastIndexOf("</body>");
  preview.srcdoc = idx !== -1 ? source.slice(0, idx) + inject + source.slice(idx) : source + inject;
}

// ---------- python highlighting + run ----------
const PY_KW = new Set(["def","class","return","if","elif","else","for","while","in","not","and","or","is","import","from","as","with","try","except","finally","raise","yield","lambda","pass","break","continue","global","nonlocal","assert","del","async","await","True","False","None"]);
const PY_BI = new Set(["print","len","range","int","str","float","list","dict","set","tuple","open","input","enumerate","zip","map","filter","sorted","sum","min","max","abs","type","isinstance","super","self","__init__","__main__"]);

function highlightPython(src) {
  const lines = src.split("\n");
  return lines.map((line) => {
    let out = "";
    let i = 0;
    while (i < line.length) {
      const c = line[i];
      if (c === "#") { out += `<span class="tok-com">${esc(line.slice(i))}</span>`; break; }
      if (c === '"' || c === "'") {
        const quote = c;
        let j = i + 1;
        if (line.slice(i, i + 3) === quote.repeat(3)) {
          j = i + 3;
          while (j < line.length && line.slice(j, j + 3) !== quote.repeat(3)) j++;
          j = Math.min(line.length, j + 3);
        } else {
          while (j < line.length && line[j] !== quote) { if (line[j] === "\\" ) j++; j++; }
          j = Math.min(line.length, j + 1);
        }
        out += `<span class="tok-str">${esc(line.slice(i, j))}</span>`;
        i = j; continue;
      }
      if (/[0-9]/.test(c) && (i === 0 || !/[A-Za-z_]/.test(line[i - 1]))) {
        let j = i;
        while (j < line.length && /[0-9._eExXbBoOa-fA-F]/.test(line[j])) j++;
        out += `<span class="tok-num">${esc(line.slice(i, j))}</span>`;
        i = j; continue;
      }
      if (/[A-Za-z_]/.test(c)) {
        let j = i;
        while (j < line.length && /[A-Za-z0-9_]/.test(line[j])) j++;
        const word = line.slice(i, j);
        let k = j; while (k < line.length && line[k] === " ") k++;
        if (PY_KW.has(word)) out += `<span class="tok-kw">${esc(word)}</span>`;
        else if (PY_BI.has(word)) out += `<span class="tok-bi">${esc(word)}</span>`;
        else if (line[k] === "(") out += `<span class="tok-fn">${esc(word)}</span>`;
        else out += esc(word);
        i = j; continue;
      }
      out += esc(c);
      i++;
    }
    return out;
  }).join("\n");
}

function renderPython(source) {
  currentPySource = source || "";
  pyCodeEl.innerHTML = highlightPython(currentPySource) || "&nbsp;";
}

async function ensurePyodide() {
  if (pyodideReady) return pyodideReady;
  pyStatus.textContent = "loading Pyodide…";
  if (!window.loadPyodide) {
    await new Promise((resolve, reject) => {
      const s = document.createElement("script");
      s.src = "https://cdn.jsdelivr.net/pyodide/v0.26.2/full/pyodide.js";
      s.onload = resolve; s.onerror = reject;
      document.head.appendChild(s);
    });
  }
  pyodideReady = window.loadPyodide({
    indexURL: "https://cdn.jsdelivr.net/pyodide/v0.26.2/full/",
  });
  const py = await pyodideReady;
  pyStatus.textContent = "Pyodide ready";
  return py;
}

async function runPython() {
  if (!currentPySource.trim()) return;
  pyConsole.innerHTML = "";
  const log = (cls, s) => {
    const span = document.createElement("span");
    span.className = cls; span.textContent = s;
    pyConsole.appendChild(span);
    pyConsole.appendChild(document.createTextNode("\n"));
  };
  try {
    pyStatus.textContent = "running…";
    const py = await ensurePyodide();
    py.setStdout({ batched: (s) => log("out", s) });
    py.setStderr({ batched: (s) => log("err", s) });
    await py.runPythonAsync(currentPySource);
    pyStatus.textContent = "done";
    autoFixRetries = 0; // Reset retry count on successful run
  } catch (e) {
    const errMsg = String(e && e.message ? e.message : e);
    log("err", errMsg);
    pyStatus.textContent = "error";

    // Auto-fix logic
    if ($("autoFeedErr").checked && autoFixRetries < MAX_AUTO_RETRIES && currentMode === "python") {
      autoFixRetries++;
      pyStatus.textContent = `auto-fixing (${autoFixRetries}/${MAX_AUTO_RETRIES})...`;
      
      const errorPrompt = `The previous Python code failed with the following error:\n\n\`\`\`\n${errMsg}\n\`\`\`\n\nPlease fix the error and return the full updated script.`;
      promptEl.value = errorPrompt;
      
      const success = await run(); // Trigger the build/tweak process
      
      // If the model successfully generated new code, and auto-retry is checked, run it again.
      if (success && $("autoRetryRun").checked && currentPySource.trim()) {
        await runPython();
      }
    } else if (autoFixRetries >= MAX_AUTO_RETRIES) {
      log("err", "Max auto-fix retries reached. Please debug manually.");
      pyStatus.textContent = "max retries reached";
    }
  }
}

// ---------- mode switching ----------
function setMode(mode) {
  currentMode = mode;
  [...modeSwitch.children].forEach((b) => b.classList.toggle("active", b.dataset.mode === mode));
  const isPy = mode === "python";
  webMode.style.display = isPy ? "none" : "flex";
  pyMode.style.display = isPy ? "flex" : "none";
  subtitle.textContent = SUBTITLES[mode];
  renderChips();
}

function renderChips() {
  const list = EXAMPLES[currentMode] || [];
  $("chips").innerHTML = list.map((e, i) =>
    `<button class="chip" data-i="${i}">${esc(e.slice(0, 42))}…</button>`).join("");
}

// ---------- generation ----------
async function ensureClient() {
  if (!client) { setStatus("", "connecting…"); client = await Client.connect(window.location.origin); }
  return client;
}

async function run() {
  if (busy) return false;
  const prompt = promptEl.value.trim();
  if (!prompt) { promptEl.focus(); return false; }

  busy = true; buildBtn.disabled = true;
  const isTweak = messages.length > 0;
  setStatus("live", isTweak ? "tweaking…" : "diffusing…");
  prevFrameLines = [];
  if (!isTweak) { previewScrollY = 0; pyConsole.innerHTML = ""; }
  const isPy = currentMode === "python";

  let success = false;
  try {
    const c = await ensureClient();
    const payload = {
      prompt,
      history_json: JSON.stringify(messages),
      max_new_tokens: parseInt($("maxTokens").value, 10),
      max_iters: parseInt($("maxIters").value, 10),
      full_denoise: $("fullDenoise").checked,
      anim_delay: parseFloat($("delay").value),
      warm_start: $("warmStart").checked,
      mode: currentMode,
    };

    let finalSource = "";
    const sub = c.submit("/generate", payload);
    for await (const ev of sub) {
      if (ev.type === "data") {
        const frame = JSON.parse(ev.data[0]);
        if (frame.kind === "error") { setStatus("err", "error"); renderCode("/* " + frame.message + " */"); break; }
        if (frame.kind === "done") {
          finalSource = frame.source;
          prevFrameLines = renderCode(finalSource, { diffAgainst: isTweak ? lastFinalLines : null });
          if (isPy) renderPython(finalSource); else renderPreview(finalSource);
          setStatus("done", "done");
          continue;
        }
        const src = frame.source || "";
        prevFrameLines = renderCode(src, { liveAgainst: prevFrameLines });
        if (isPy) {
          renderPython(src);
          pyCapInfo.textContent = `block ${frame.block} · step ${frame.step}/${frame.max_iters}`;
        } else {
          renderPreview(src);
          capInfo.textContent = `block ${frame.block} · step ${frame.step}/${frame.max_iters} · ${frame.canvas} tokens update simultaneously`;
        }
        setStatus("live", `${frame.kind === "draft" ? "diffusing" : "committed"} · block ${frame.block} · step ${frame.step}`);
      } else if (ev.type === "status" && ev.stage === "error") {
        setStatus("err", "error"); break;
      }
    }

    if (finalSource) {
      messages.push({ role: "user", content: prompt });
      messages.push({ role: "assistant", content: finalSource });
      lastFinalLines = finalSource.split("\n");
      promptEl.value = "";
      renderHistory();
      success = true;
    }
  } catch (e) {
    setStatus("err", "error");
    renderCode("/* connection error: " + (e && e.message ? e.message : e) + " */");
  } finally {
    busy = false; buildBtn.disabled = false;
  }
  return success;
}

function renderHistory() {
  const turns = messages.filter((m) => m.role === "user");
  $("history").innerHTML = turns.map((m, i) =>
    `<span class="turn"><b>${i === 0 ? "build" : "tweak " + i}</b> · ${esc(m.content.slice(0, 40))}${m.content.length > 40 ? "…" : ""}</span>`
  ).join("");
}

function reset() {
  messages = []; prevFrameLines = []; lastFinalLines = [];
  previewScrollY = 0; pyConsole.innerHTML = ""; currentPySource = "";
  autoFixRetries = 0;
  codeEl.innerHTML = ""; renderPreview(""); renderPython("");
  $("history").innerHTML = "";
  capInfo.textContent = ""; pyCapInfo.textContent = "";
  setStatus("", "idle"); promptEl.value = "";
}

// ---------- wiring ----------
buildBtn.addEventListener("click", run);
resetBtn.addEventListener("click", reset);
runBtn.addEventListener("click", runPython);
clearConsoleBtn.addEventListener("click", () => { pyConsole.innerHTML = ""; });
modeSwitch.addEventListener("click", (e) => {
  const m = e.target.getAttribute("data-mode");
  if (m) setMode(m);
});
promptEl.addEventListener("keydown", (e) => {
  if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) { e.preventDefault(); run(); }
});
for (const [id, fmt] of [["maxTokens", (v) => v], ["maxIters", (v) => v], ["delay", (v) => (+v).toFixed(1) + "s"]]) {
  const el = $(id), out = $(id + "V");
  el.addEventListener("input", () => (out.textContent = fmt(el.value)));
}
$("chips").addEventListener("click", (e) => {
  const i = e.target.getAttribute("data-i");
  if (i !== null) { promptEl.value = EXAMPLES[currentMode][+i]; promptEl.focus(); }
});

setMode("webpage");
renderPreview("");
renderPython("");
setStatus("", "idle");
</script>
</body>
</html>