A web page with live slide previews

public/app.js

// The browser side: send the brief, show progress as NDJSON events arrive, preview
// each slide as soon as it's written, and offer the finished file for download.

import { PREVIEW_CSS, slideToHtml } from "./preview.js";

const form = document.querySelector("#brief");
const status = document.querySelector("#status");
const slides = document.querySelector("#slides");
const download = document.querySelector("#download");
document.querySelector("#preview-css").textContent = PREVIEW_CSS;

const STAGE_NAMES = { research: "Researching", outline: "Planning the slides", deck: "Writing slides", repair: "Fixing layout problems" };

form.addEventListener("submit", async (event) => {
  event.preventDefault();
  const data = new FormData(form);
  const button = form.querySelector("button");
  button.disabled = true;
  slides.innerHTML = "";
  download.hidden = true;
  setStatus("Starting…");

  try {
    const response = await fetch("/api/deck/stream", {
      method: "POST",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({
        topic: data.get("topic"),
        slideCount: Number(data.get("slideCount")),
        theme: data.get("theme"),
        research: data.get("research") === "on",
      }),
    });
    if (!response.ok) throw new Error((await response.json()).error ?? "The request failed.");
    await readEvents(response, handleEvent);
  } catch (error) {
    setStatus(error.message, true);
  } finally {
    button.disabled = false;
  }
});

/** Split the streamed body into lines, and each line into one JSON event. */
async function readEvents(response, onEvent) {
  const reader = response.body.pipeThrough(new TextDecoderStream()).getReader();
  let buffer = "";
  for (;;) {
    const { value, done } = await reader.read();
    if (done) break;
    buffer += value;
    let newline;
    while ((newline = buffer.indexOf("\n")) !== -1) {
      const line = buffer.slice(0, newline);
      buffer = buffer.slice(newline + 1);
      if (line.trim()) onEvent(JSON.parse(line));
    }
  }
}

function handleEvent(event) {
  if (event.type === "stage" && event.status === "start") setStatus(`${STAGE_NAMES[event.stage] ?? event.stage}…`);
  if (event.type === "slide") slides.insertAdjacentHTML("beforeend", slideToHtml(event.slide));
  if (event.type === "retry") setStatus(`Gemini is busy, retrying in ${Math.round(event.delayMs / 1000)}s…`);
  if (event.type === "fallback") setStatus("Switching to a less busy model…");
  if (event.type === "error") setStatus(event.error, true);
  if (event.type === "done") showDeck(event.deck);
}

function showDeck(deck) {
  // Replace the streamed previews with the final, harmonized slides.
  slides.innerHTML = deck.slides.map(slideToHtml).join("");
  const bytes = Uint8Array.from(atob(deck.file), (char) => char.charCodeAt(0));
  download.href = URL.createObjectURL(new Blob([bytes], { type: "application/vnd.openxmlformats-officedocument.presentationml.presentation" }));
  download.download = `${deck.title.replace(/[^\w]+/g, "-").toLowerCase() || "deck"}.pptx`;
  download.hidden = false;
  const problems = deck.problems.length ? ` · ${deck.problems.length} layout warnings` : "";
  setStatus(`${deck.slides.length} slides ready${deck.cached ? " (saved copy)" : ""}${problems}`);
}

// textContent, never innerHTML, for anything that could contain model or error text.
function setStatus(message, isError = false) {
  status.textContent = message;
  status.className = isError ? "error" : "";
}