1<!doctype html>2<html lang="en">3<meta charset="utf-8">4<meta name="viewport" content="width=device-width, initial-scale=1">5<title>SANA 1.5 1.6B</title>6<style>7  :root { color-scheme: light dark; --fg: #1d1d1f; --bg: #f6f5f2; --muted: #6b6b70; --line: #d8d6d0; --accent: #c2410c; }8  @media (prefers-color-scheme: dark) { :root { --fg: #ecebe8; --bg: #161616; --muted: #9a9a9f; --line: #333; --accent: #fb923c; } }9  * { box-sizing: border-box; }10  body { margin: 0; padding: 24px 16px; font: 15px/1.45 system-ui, sans-serif; color: var(--fg); background: var(--bg); }11  main { max-width: 760px; margin: 0 auto; }12  h1 { font-size: 20px; margin: 0 0 4px; }13  .sub { color: var(--muted); margin: 0 0 20px; font-size: 13px; }14  form { display: grid; grid-template-columns: 1fr 120px auto; gap: 8px; }15  @media (max-width: 560px) { form { grid-template-columns: 1fr 1fr; } textarea { grid-column: 1 / -1; } }16  textarea, input, button { font: inherit; color: inherit; background: transparent; border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; }17  textarea { resize: vertical; min-height: 42px; }18  button { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; cursor: pointer; }19  button:disabled { opacity: .5; cursor: progress; }20  #status { margin: 14px 0; color: var(--muted); font-size: 13px; min-height: 1.4em; }21  #status.err { color: #dc2626; }22  figure { margin: 0; }23  img { display: block; width: 100%; max-width: 1024px; aspect-ratio: 1; border-radius: 6px; background: var(--line); object-fit: cover; }24  figcaption { color: var(--muted); font-size: 13px; margin-top: 6px; }25  a { color: var(--accent); }26</style>27<main>28  <h1>SANA 1.5 1.6B</h1>29  <p class="sub">1024x1024, 20 steps, guidance 4.5 (fixed by this capsule). Same prompt + seed = same image. API: <a href="../agent">/agent</a></p>30  <form id="f">31    <textarea id="prompt" rows="2" required>a lighthouse at sunset</textarea>32    <input id="seed" type="number" min="0" step="1" placeholder="seed (random)">33    <button id="go" type="submit">Generate</button>34  </form>35  <div id="status"></div>36  <figure id="fig" hidden>37    <img id="img" alt="">38    <figcaption id="cap"></figcaption>39  </figure>40</main>41<script>42const $ = (id) => document.getElementById(id);43const statusEl = $("status");44function say(text, err) { statusEl.textContent = text; statusEl.className = err ? "err" : ""; }4546async function waitReady() {47  for (;;) {48    let s;49    try { s = await (await fetch("../status")).json(); } catch (e) { s = { phase: "unreachable" }; }50    if (s.phase === "ready") { say(""); return true; }51    if (s.phase === "error" || s.phase === "stopped") { say("Service " + s.phase + ": " + (s.detail || ""), true); return false; }52    say("Starting: " + s.phase + (s.detail ? " (" + s.detail + ")" : "") + (s.eta_seconds ? ", ~" + s.eta_seconds + " s left" : ""));53    await new Promise((r) => setTimeout(r, 3000));54  }55}5657$("f").addEventListener("submit", async (ev) => {58  ev.preventDefault();59  const body = { prompt: $("prompt").value.trim() };60  if (!body.prompt) return;61  const seedText = $("seed").value.trim();62  if (seedText !== "") body.seed = Number(seedText);63  $("go").disabled = true;64  try {65    if (!(await waitReady())) return;66    say("Generating...");67    const t0 = performance.now();68    const r = await fetch("../v1/images/generations", {69      method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body),70    });71    const d = await r.json().catch(() => ({}));72    if (!r.ok) {73      const msg = typeof d.error === "string" ? d.error : (d.detail ? JSON.stringify(d.detail) : "HTTP " + r.status);74      say(msg, true);75      return;76    }77    $("img").src = "data:image/png;base64," + d.data[0].b64_json;78    $("img").alt = body.prompt;79    $("cap").textContent = "seed " + d.seed + " · " + ((performance.now() - t0) / 1000).toFixed(1) + " s";80    $("fig").hidden = false;81    say("");82  } catch (e) {83    say("Request failed: " + e, true);84  } finally {85    $("go").disabled = false;86  }87});88waitReady();89</script>90</html>