Add article generator route

Co-authored-by: Codex <codex@openai.com>

FIELD_NOTES.md

@@ -36,6 +36,8 @@ The judge evidence bundle lives at `/api/evidence-bundle`. That endpoint returns
 
 Image provenance lives in `/api/image-descriptions`. Each article illustration carries the planned FLUX.2 klein model id, prompt, seed, asset URL, and fallback status so the generated-image claim is inspectable.
 
+The Generate route uses `/api/generate-article` to turn a user's topic into a short semantic article. It uses the reader-brain model path for article text when llama.cpp is online, keeps a deterministic fallback draft for demos, and attaches thumbnail provenance from `black-forest-labs/FLUX.2-klein-4B`.
+
 Accessibility evidence lives at `/api/accessibility-audit`. It records the reader-mode choices that matter most for this prototype: semantic reading order, keyboard navigation, reader cursor state, shortcut safety, live narration, image alt text, transcript review, user-controlled playback, and fallback resilience.
 
 ## Reader Mode Behavior

README.md

@@ -12,7 +12,7 @@ license: apache-2.0
 
 # Tiny Narrator
 
-Tiny Narrator is a Build Small Hackathon prototype: a custom Gradio Server article app that can switch into a guided screen-reader mode.
+Tiny Narrator is a Build Small Hackathon prototype: a custom Gradio Server app with two routes: a guided screen-reader article and a small-model article generator.
 
 For the hackathon form, see [SUBMISSION.md](SUBMISSION.md).
 
@@ -52,7 +52,7 @@ Start the app:
 python app.py
 ```
 
-Open the local URL printed by Gradio. The article page calls `/api/reader-brain`, `/api/image-descriptions`, `/api/describe-image`, `/api/speak`, and `/api/model-budget`; the remaining evidence endpoints stay available for docs and submission checks.
+Open the local URL printed by Gradio. The Reader route calls `/api/reader-brain`, `/api/image-descriptions`, `/api/describe-image`, `/api/speak`, and `/api/model-budget`. The Generate route calls `/api/generate-article`, which drafts an article with the reader-brain model path and attaches a Klein thumbnail receipt.
 
 Useful environment variables:
 
@@ -76,12 +76,14 @@ The verifier checks syntax, static assets, Space metadata consistency, determini
 
 `/api/runtime-setup` exposes the commands, environment values, and fallback paths used for the model stack so the demo can be reproduced from the same data the UI displays.
 
-`/api/demo-script` exposes a compact judge runbook with the visible actions, API checks, sample bodies, curl commands, and PowerShell-friendly `curl.exe` commands that prove the submission claims. The commands use `PUBLIC_BASE_URL` so they can be copied from the API response or submission notes.
+`/api/demo-script` exposes a compact judge runbook with the visible actions, API checks, sample bodies, curl commands, and PowerShell-friendly `curl.exe` commands that prove the submission claims, including `/api/generate-article`. The commands use `PUBLIC_BASE_URL` so they can be copied from the API response or submission notes.
 
 `/api/accessibility-audit` exposes structured evidence for semantic reading order, keyboard navigation, reader cursor state, shortcut safety, live narration, image alt text, transcript review, user-controlled playback, and fallback resilience.
 
 `/api/image-descriptions` includes image-generation provenance for every article illustration: the planned FLUX.2 klein model, prompt, seed, bundled asset URL, and fallback-ready status.
 
+`/api/generate-article` accepts a topic and returns a generated article draft plus thumbnail provenance from `black-forest-labs/FLUX.2-klein-4B`.
+
 `/api/submission-readiness` aggregates the judging receipts into one pass/fail payload covering model budget, award evidence, custom frontend assets, runtime setup, runtime status, accessibility, image receipts, demo API checks, and command base URL checks.
 
 The readiness rollup only passes the demo API check when POST entries include executable sample bodies.
@@ -138,3 +140,7 @@ The sidebar model stack reads `/api/model-budget` so judges can see each role's
 `/api/runtime-setup` summarizes each model path's runtime, setup command, and fallback, keeping the live demo honest about what is online and what is deterministic.
 
 `/api/runtime-status` performs a short readiness check for llama.cpp and local speech dependencies, then reports which fallback paths are ready for a live demo.
+
+## Generate Route
+
+The header exposes two routes: Reader and Generate. Generate lets a user enter a topic, calls `/api/generate-article`, and renders a short semantic article with a thumbnail receipt. The text path uses the configured llama.cpp reader-brain model when available and falls back to deterministic article structure. The thumbnail path uses the planned Klein image model metadata and bundled fallback assets until the full image adapter is online.

SUBMISSION.md

@@ -6,7 +6,7 @@ Tiny Narrator turns an article into a guided screen-reader experience using smal
 
 ## Short description
 
-Tiny Narrator is a custom Gradio Server app that looks like an article/blog reader until screen-reader mode is switched on. In reader mode, the app builds an internal semantic reading queue, narrates headings and paragraphs, describes generated images, summarizes the current section, speaks with Kokoro, and keeps a visible transcript of the spoken path with reader position, runtime, and latency.
+Tiny Narrator is a custom Gradio Server app with a Reader route and a Generate route. Reader looks like an article/blog reader until screen-reader mode is switched on: it builds an internal semantic reading queue, narrates headings and paragraphs, describes generated images, summarizes the current section, speaks with Kokoro, and keeps a visible transcript of the spoken path with reader position, runtime, and latency. Generate creates a short article from a user topic and attaches a Klein thumbnail receipt.
 
 The prototype is designed for a live hackathon demo: every model-facing path has a deterministic fallback, runtime readiness is labeled in the UI, and the repo exposes machine-readable evidence for model size, setup, demo flow, and accessibility behavior.
 
@@ -33,7 +33,8 @@ The prototype is designed for a live hackathon demo: every model-facing path has
 3. Use `Heading`, `Image`, and `Summary` to navigate by article meaning instead of by raw page order.
 4. Show the reader-first session panel: current item, live narration, reader queue, transcript, and latency.
 5. Point to the model stack panel for model id, runtime, parameter count, and Tiny Titan pass status.
-6. Mention that `/api/demo-script` exposes the judge runbook and API evidence checks as structured data.
+6. Open the Generate route, enter a topic, and show the generated article plus `black-forest-labs/FLUX.2-klein-4B` thumbnail receipt.
+7. Mention that `/api/demo-script` exposes the judge runbook and API evidence checks as structured data.
 
 ## Evidence endpoints
 
@@ -44,10 +45,11 @@ The prototype is designed for a live hackathon demo: every model-facing path has
 - `/api/accessibility-audit`: semantic queue, keyboard navigation, reader cursor state, shortcut safety, live narration, alt text, transcript, user control, and fallback evidence.
 - `/api/demo-script`: repeatable judge runbook and API checks.
 - `/api/image-descriptions`: generated article image descriptions plus prompt, seed, model, asset URL, and fallback status receipts.
+- `/api/generate-article`: topic-to-article generation using the reader-brain path plus Klein thumbnail provenance.
 - `/api/submission-readiness`: one pass/fail rollup for model budget, award evidence, custom frontend, runtime setup, runtime status, accessibility, image receipts, and demo API checks.
 - `/api/evidence-bundle`: copyable JSON bundle containing schema version, generation time, core judge evidence receipts, runtime status, and readiness rollup.
 
-The checks in `/api/demo-script` include copyable curl and PowerShell-friendly `curl.exe` commands generated from `PUBLIC_BASE_URL`, and the POST checks include sample JSON bodies for `/api/reader-brain` and `/api/speak`.
+The checks in `/api/demo-script` include copyable curl and PowerShell-friendly `curl.exe` commands generated from `PUBLIC_BASE_URL`, and the POST checks include sample JSON bodies for `/api/reader-brain`, `/api/speak`, and `/api/generate-article`.
 
 The accessibility audit also documents reader-mode details that matter during judging: the active item is exposed as a reader cursor with focus, visible outline, stable id, and `aria-current`; global shortcuts ignore form controls so voice, speed, and auto-advance settings remain usable while reader mode is active; reader controls expose `aria-keyshortcuts` plus visible Repeat and Stop commands.
 

app.py

@@ -262,6 +262,12 @@ def demo_script_core() -> dict[str, Any]:
                 "speed": READER_SETTINGS["default_speed"],
             },
         },
+        {
+            "method": "POST",
+            "path": "/api/generate-article",
+            "expect": "generated article draft with Klein thumbnail receipt",
+            "sample_body": {"topic": "accessible robotics for classrooms"},
+        },
     ]
     for check in api_checks:
         check["curl"] = demo_curl_command(check)
@@ -384,6 +390,7 @@ def submission_readiness_core() -> dict[str, Any]:
                 "/api/image-descriptions",
                 "/api/reader-brain",
                 "/api/speak",
+                "/api/generate-article",
             }.issubset(api_paths)
             and post_samples_ready
             else "fail",
@@ -544,6 +551,10 @@ class ImageGenerationRequest(BaseModel):
     seed: int | None = None
 
 
+class ArticleGenerationRequest(BaseModel):
+    topic: str
+
+
 def _json(data: dict[str, Any], status_code: int = 200) -> JSONResponse:
     return JSONResponse(data, status_code=status_code)
 
@@ -617,6 +628,55 @@ def _compact_text(text: str, limit: int = 220) -> str:
     return f"{normalized[: limit - 1].rstrip()}."
 
 
+def _topic_seed(topic: str) -> int:
+    return (sum(ord(char) for char in topic) % 997) + 1
+
+
+def _fallback_article(topic: str) -> dict[str, Any]:
+    clean_topic = _compact_text(topic, 80).rstrip(".") or "accessible technology"
+    title = f"A tiny guide to {clean_topic}"
+    return {
+        "title": title,
+        "dek": (
+            f"This generated article introduces {clean_topic} with a short, screen-reader-friendly structure "
+            "and practical examples."
+        ),
+        "sections": [
+            {
+                "heading": f"Why {clean_topic} matters",
+                "body": (
+                    f"{clean_topic.capitalize()} is easier to understand when the page explains the main idea first, "
+                    "then moves through examples in a predictable order."
+                ),
+            },
+            {
+                "heading": "How a tiny narrator helps",
+                "body": (
+                    "A small reader model can turn each heading, paragraph, and image caption into concise narration "
+                    "without turning the article into a chatbot."
+                ),
+            },
+            {
+                "heading": "What to try next",
+                "body": (
+                    "Use the reader controls to move by heading or image, then compare the transcript with the article "
+                    "to check whether the generated structure is easy to follow."
+                ),
+            },
+        ],
+    }
+
+
+def _article_generation_prompt(topic: str) -> str:
+    return (
+        "Write a short accessible article for Tiny Narrator.\n"
+        f"Topic: {topic}\n\n"
+        "Return strict JSON with keys title, dek, and sections. "
+        "sections must contain exactly three objects with heading and body. "
+        "Keep every body under 45 words. Do not include markdown."
+    )
+
+
 def reader_brain_core(node_type: str, text: str, position: str | None, mode: str) -> dict[str, Any]:
     start = time.perf_counter()
     if mode == "summarize":
@@ -811,11 +871,90 @@ def generate_image_core(prompt: str, seed: int | None) -> dict[str, Any]:
     }
 
 
+def generate_article_core(topic: str) -> dict[str, Any]:
+    start = time.perf_counter()
+    clean_topic = _compact_text(topic, 100).strip()
+    if not clean_topic:
+        clean_topic = "accessible technology"
+
+    article = _fallback_article(clean_topic)
+    runtime = "fallback"
+    warning = None
+    try:
+        body = json.dumps(
+            {
+                "model": LLAMA_CPP_MODEL,
+                "messages": [
+                    {
+                        "role": "system",
+                        "content": (
+                            "You are Tiny Narrator's article generator. "
+                            "Create concise, semantic, accessible article drafts."
+                        ),
+                    },
+                    {"role": "user", "content": _article_generation_prompt(clean_topic)},
+                ],
+                "temperature": 0.35,
+                "max_tokens": 420,
+            }
+        ).encode("utf-8")
+        request = urllib.request.Request(
+            f"{LLAMA_CPP_BASE_URL}/chat/completions",
+            data=body,
+            headers={"Content-Type": "application/json"},
+            method="POST",
+        )
+        with urllib.request.urlopen(request, timeout=45) as response:
+            payload = json.loads(response.read().decode("utf-8"))
+        generated = json.loads(payload["choices"][0]["message"]["content"].strip())
+        sections = generated.get("sections", [])
+        if (
+            isinstance(generated.get("title"), str)
+            and isinstance(generated.get("dek"), str)
+            and isinstance(sections, list)
+            and len(sections) == 3
+            and all(isinstance(item.get("heading"), str) and isinstance(item.get("body"), str) for item in sections)
+        ):
+            article = {
+                "title": _compact_text(generated["title"], 90),
+                "dek": _compact_text(generated["dek"], 180),
+                "sections": [
+                    {"heading": _compact_text(item["heading"], 80), "body": _compact_text(item["body"], 260)}
+                    for item in sections
+                ],
+            }
+            runtime = "llama.cpp"
+    except (OSError, urllib.error.URLError, TimeoutError, KeyError, json.JSONDecodeError) as exc:
+        warning = f"llama.cpp unavailable: {exc.__class__.__name__}"
+
+    image_prompt = f"Editorial thumbnail for an accessible article about {clean_topic}."
+    thumbnail = generate_image_core(image_prompt, seed=_topic_seed(clean_topic))
+    return {
+        "ok": True,
+        "topic": clean_topic,
+        "runtime": runtime,
+        "model": MODEL_MANIFEST["reader_brain"]["id"],
+        "warning": warning,
+        "article": article,
+        "thumbnail": {
+            **thumbnail,
+            "role": "thumbnail",
+            "generation_model": MODEL_MANIFEST["image_generation"]["id"],
+        },
+        "elapsed_ms": _elapsed_ms(start),
+    }
+
+
 @app.get("/", response_class=HTMLResponse)
 async def home() -> str:
     return (STATIC_DIR / "index.html").read_text(encoding="utf-8")
 
 
+@app.get("/generate", response_class=HTMLResponse)
+async def generate_page() -> str:
+    return (STATIC_DIR / "generate.html").read_text(encoding="utf-8")
+
+
 @app.get("/api/health")
 async def health() -> JSONResponse:
     return _json(
@@ -900,6 +1039,11 @@ async def generate_image_endpoint(payload: ImageGenerationRequest) -> JSONRespon
     return _json(generate_image_core(payload.prompt, payload.seed))
 
 
+@app.post("/api/generate-article")
+async def generate_article_endpoint(payload: ArticleGenerationRequest) -> JSONResponse:
+    return _json(generate_article_core(payload.topic))
+
+
 @app.api(name="reader_brain")
 def reader_brain_api(node_type: str, text: str, position: str = "", mode: str = "narrate") -> str:
     return json.dumps(reader_brain_core(node_type, text, position, mode))
@@ -955,6 +1099,11 @@ def generate_image_api(prompt: str, seed: int | None = None) -> str:
     return json.dumps(generate_image_core(prompt, seed))
 
 
+@app.api(name="generate_article")
+def generate_article_api(topic: str) -> str:
+    return json.dumps(generate_article_core(topic))
+
+
 @app.exception_handler(Exception)
 async def handle_exception(_: Request, exc: Exception) -> JSONResponse:
     return _json({"ok": False, "error": exc.__class__.__name__, "detail": str(exc)}, status_code=500)

scripts/verify.py

@@ -23,8 +23,10 @@ def verify_static_assets() -> None:
         ROOT / "LICENSE",
         ROOT / "SUBMISSION.md",
         ROOT / "static" / "index.html",
+        ROOT / "static" / "generate.html",
         ROOT / "static" / "app.css",
         ROOT / "static" / "app.js",
+        ROOT / "static" / "generate.js",
         ROOT / "static" / "generated" / "desk-reader.svg",
         ROOT / "static" / "generated" / "model-map.svg",
         ROOT / "static" / "generated" / "field-notes.svg",
@@ -33,7 +35,17 @@ def verify_static_assets() -> None:
         assert_true(path.exists(), f"Missing required asset: {path}")
 
     app_js = (ROOT / "static" / "app.js").read_text(encoding="utf-8")
+    generate_js = (ROOT / "static" / "generate.js").read_text(encoding="utf-8")
     index_html = (ROOT / "static" / "index.html").read_text(encoding="utf-8")
+    generate_html = (ROOT / "static" / "generate.html").read_text(encoding="utf-8")
+    assert_true('href="/" aria-current="page">Reader' in index_html, "Reader page should mark Reader route current")
+    assert_true('href="/generate">Generate' in index_html, "Reader page should link to Generate route")
+    assert_true('href="/">Reader' in generate_html, "Generate page should link back to Reader route")
+    assert_true('href="/generate" aria-current="page">Generate' in generate_html, "Generate page should mark Generate route current")
+    assert_true("articleGeneratorForm" in generate_html, "Generate page should expose the article generator form")
+    assert_true("generatedThumbnail" in generate_html, "Generate page should expose a generated thumbnail preview")
+    assert_true("/api/generate-article" in generate_js, "Generate frontend should call article generation API")
+    assert_true("thumbnail.generation_model" in generate_js, "Generate frontend should render Klein thumbnail receipt")
     assert_true('data-reader-type="heading"' in index_html, "Article should mark heading reader nodes")
     assert_true('data-reader-type="image"' in index_html, "Article should mark image reader nodes")
     assert_true('href="#notes"' not in index_html, "Article navigation should not include the Field Notes section")
@@ -104,6 +116,7 @@ def verify_static_assets() -> None:
         "/api/demo-script",
         "/api/submission-readiness",
         "/api/evidence-bundle",
+        "/api/generate-article",
     ]:
         assert_true(endpoint in submission, f"Submission packet should mention {endpoint}")
     assert_true(
@@ -207,6 +220,15 @@ def verify_core_fallbacks() -> None:
     assert_true(generated["ok"], "Image generation placeholder should return ok")
     assert_true(isinstance(generated["elapsed_ms"], int), "Image generation should include elapsed_ms")
 
+    article = app.generate_article_core("tiny classroom robotics")
+    assert_true(article["ok"], "Article generation should return ok")
+    assert_true(article["model"] == app.MODEL_MANIFEST["reader_brain"]["id"], "Article generation should use reader-brain model")
+    assert_true(len(article["article"]["sections"]) == 3, "Article generation should return three sections")
+    assert_true(
+        article["thumbnail"]["generation_model"] == app.MODEL_MANIFEST["image_generation"]["id"],
+        "Article generation should use the Klein image model for thumbnail receipt",
+    )
+
 
 def verify_output_retention() -> None:
     keep_path = app.OUTPUT_DIR / "speech-retention-keep.wav"
@@ -235,6 +257,7 @@ def verify_routes() -> None:
     home = client.get("/")
     assert_true(home.status_code == 200, "Home route should return 200")
     assert_true("Tiny Narrator" in home.text, "Home route should include app title")
+    assert_true('href="/generate">Generate' in home.text, "Home route should link to Generate route")
     assert_true("readerToggle" in home.text, "Home route should include reader toggle")
     assert_true("summaryButton" in home.text, "Home route should include summary control")
     assert_true("imageStatus" in home.text, "Home route should include image status")
@@ -250,6 +273,12 @@ def verify_routes() -> None:
     assert_true("/evidence" not in home.text, "Home route should not link to a removed evidence page")
     assert_true("copyEvidenceButton" not in home.text, "Home route should keep judge evidence off the reader sidebar")
 
+    generate_page = client.get("/generate")
+    assert_true(generate_page.status_code == 200, "Generate route should return 200")
+    assert_true("Generate a readable article" in generate_page.text, "Generate route should include generator title")
+    assert_true("articleGeneratorForm" in generate_page.text, "Generate route should include article generator form")
+    assert_true("generatedThumbnail" in generate_page.text, "Generate route should include generated thumbnail")
+
     health = client.get("/api/health")
     assert_true(health.status_code == 200, "Health route should return 200")
     payload = health.json()
@@ -425,6 +454,16 @@ def verify_routes() -> None:
         "Speech sample payload should return an output audio URL",
     )
 
+    article_sample = client.post("/api/generate-article", json={"topic": "accessible classroom robotics"})
+    assert_true(article_sample.status_code == 200, "Article generation route should return 200")
+    article_sample_payload = article_sample.json()
+    assert_true(article_sample_payload["ok"], "Article generation payload should return ok")
+    assert_true(len(article_sample_payload["article"]["sections"]) == 3, "Article generation payload should include three sections")
+    assert_true(
+        article_sample_payload["thumbnail"]["generation_model"] == app.MODEL_MANIFEST["image_generation"]["id"],
+        "Article generation payload should include Klein thumbnail provenance",
+    )
+
     audit = client.get("/api/accessibility-audit")
     assert_true(audit.status_code == 200, "Accessibility audit route should return 200")
     audit_payload = audit.json()

static/app.css

@@ -177,6 +177,79 @@ select:focus-visible {
 
 .article { min-width: 0; }
 
+.generator-shell {
+  display: grid;
+  grid-template-columns: minmax(280px, 420px) minmax(0, 680px);
+  gap: clamp(32px, 6vw, 72px);
+  width: min(1180px, calc(100% - 40px));
+  margin: 56px auto 120px;
+  align-items: start;
+}
+
+.generator-controls {
+  position: sticky;
+  top: 88px;
+}
+
+.generator-form {
+  display: grid;
+  gap: 10px;
+  margin-top: 28px;
+}
+
+.generator-form label {
+  color: var(--muted);
+  font-family: var(--mono);
+  font-size: 0.72rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.generator-input-row {
+  display: grid;
+  grid-template-columns: 1fr max-content;
+  gap: 8px;
+}
+
+.generator-input-row input {
+  min-height: 44px;
+  border: 1px solid var(--line);
+  background: var(--surface);
+  color: var(--ink);
+  padding: 0 12px;
+}
+
+.generator-input-row button,
+.route-action {
+  min-height: 44px;
+  border: 2px solid var(--ink);
+  padding: 0 16px;
+  font-family: var(--mono);
+  font-size: 0.76rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.route-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--ink);
+  text-decoration: none;
+  background: var(--surface);
+}
+
+.generated-article {
+  min-width: 0;
+}
+
+.generated-sections {
+  display: grid;
+  gap: 8px;
+}
+
 /* ─── ARTICLE TYPOGRAPHY ─── */
 .kicker {
   display: inline-block;
@@ -692,6 +765,18 @@ dd {
     grid-template-columns: 1fr;
   }
 
+  .generator-shell {
+    grid-template-columns: 1fr;
+  }
+
+  .generator-controls {
+    position: static;
+  }
+
+  .generator-input-row {
+    grid-template-columns: 1fr;
+  }
+
   h1 {
     max-width: 14ch;
     font-size: clamp(2.8rem, 15vw, 4.5rem);

static/generate.html

@@ -0,0 +1,66 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Tiny Narrator Generator</title>
+    <link rel="stylesheet" href="/static/app.css" />
+  </head>
+  <body>
+    <header class="topbar">
+      <a class="brand" href="/" aria-label="Tiny Narrator home">
+        <span class="brand-mark" aria-hidden="true">TN</span>
+        <span>Tiny Narrator</span>
+      </a>
+      <nav class="topnav" aria-label="Primary routes">
+        <a href="/">Reader</a>
+        <a href="/generate" aria-current="page">Generate</a>
+      </nav>
+      <a class="reader-toggle route-action" href="/">Reader App</a>
+    </header>
+
+    <main class="generator-shell" aria-labelledby="generatorTitle">
+      <section class="generator-controls">
+        <p class="kicker">Small-model article lab</p>
+        <h1 id="generatorTitle">Generate a readable article</h1>
+        <p class="dek">
+          Pick a topic and Tiny Narrator drafts a short semantic article with the llama.cpp reader brain,
+          then asks the Klein image path for a thumbnail receipt.
+        </p>
+        <form id="articleGeneratorForm" class="generator-form">
+          <label for="topicInput">Topic</label>
+          <div class="generator-input-row">
+            <input
+              id="topicInput"
+              name="topic"
+              type="text"
+              minlength="3"
+              maxlength="100"
+              value="accessible robotics for classrooms"
+              required
+            />
+            <button id="generateArticleButton" type="submit">Generate</button>
+          </div>
+        </form>
+        <p id="generatorStatus" class="live-narration" aria-live="polite">Ready to generate.</p>
+      </section>
+
+      <article id="generatedArticle" class="generated-article" aria-labelledby="generatedTitle">
+        <figure class="hero-figure">
+          <img id="generatedThumbnail" src="/static/generated/model-map.svg" alt="Generated article thumbnail preview." />
+          <figcaption id="thumbnailReceipt">
+            Thumbnail will use black-forest-labs/FLUX.2-klein-4B.
+          </figcaption>
+        </figure>
+        <p id="generatedKicker" class="kicker">Generated draft</p>
+        <h1 id="generatedTitle">Your generated article will appear here</h1>
+        <p id="generatedDek" class="dek">
+          The result will include a title, summary, three readable sections, model runtime, and thumbnail receipt.
+        </p>
+        <div id="generatedSections" class="generated-sections"></div>
+      </article>
+    </main>
+
+    <script src="/static/generate.js" type="module"></script>
+  </body>
+</html>

static/generate.js

@@ -0,0 +1,81 @@
+const form = document.querySelector("#articleGeneratorForm");
+const topicInput = document.querySelector("#topicInput");
+const generateArticleButton = document.querySelector("#generateArticleButton");
+const generatorStatus = document.querySelector("#generatorStatus");
+const generatedKicker = document.querySelector("#generatedKicker");
+const generatedTitle = document.querySelector("#generatedTitle");
+const generatedDek = document.querySelector("#generatedDek");
+const generatedSections = document.querySelector("#generatedSections");
+const generatedThumbnail = document.querySelector("#generatedThumbnail");
+const thumbnailReceipt = document.querySelector("#thumbnailReceipt");
+
+function escapeHtml(value) {
+  return String(value).replace(/[&<>"']/g, (char) => ({
+    "&": "&amp;",
+    "<": "&lt;",
+    ">": "&gt;",
+    '"': "&quot;",
+    "'": "&#39;",
+  }[char]));
+}
+
+function formatElapsed(ms) {
+  if (!Number.isFinite(ms)) {
+    return "n/a";
+  }
+  return ms < 1000 ? `${Math.round(ms)} ms` : `${(ms / 1000).toFixed(2)} s`;
+}
+
+async function postJson(url, payload) {
+  const response = await fetch(url, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(payload),
+  });
+  if (!response.ok) {
+    throw new Error(`${response.status} ${response.statusText}`);
+  }
+  return response.json();
+}
+
+function renderArticle(payload) {
+  const article = payload.article;
+  const thumbnail = payload.thumbnail;
+  generatedKicker.textContent = `${payload.runtime} article`;
+  generatedTitle.textContent = article.title;
+  generatedDek.textContent = article.dek;
+  generatedThumbnail.src = thumbnail.image_url;
+  generatedThumbnail.alt = `Generated thumbnail for ${payload.topic}.`;
+  thumbnailReceipt.textContent =
+    `${thumbnail.generation_model} | seed ${thumbnail.seed} | ${thumbnail.runtime}`;
+  generatedSections.innerHTML = article.sections
+    .map((section) => `
+      <section>
+        <h2>${escapeHtml(section.heading)}</h2>
+        <p>${escapeHtml(section.body)}</p>
+      </section>
+    `)
+    .join("");
+  generatorStatus.textContent =
+    `Generated with ${payload.model}; thumbnail from ${thumbnail.generation_model}; ${formatElapsed(payload.elapsed_ms)}.`;
+}
+
+form.addEventListener("submit", async (event) => {
+  event.preventDefault();
+  const topic = topicInput.value.trim();
+  if (!topic) {
+    generatorStatus.textContent = "Enter a topic first.";
+    return;
+  }
+
+  generateArticleButton.disabled = true;
+  generatorStatus.textContent = "Generating article and Klein thumbnail.";
+  try {
+    const payload = await postJson("/api/generate-article", { topic });
+    renderArticle(payload);
+  } catch (error) {
+    generatorStatus.textContent = `Generation failed: ${error.message}`;
+  } finally {
+    generateArticleButton.disabled = false;
+  }
+});

static/index.html

@@ -12,9 +12,9 @@
         <span class="brand-mark" aria-hidden="true">TN</span>
         <span>Tiny Narrator</span>
       </a>
-      <nav class="topnav" aria-label="Article sections">
-        <a href="#why">Why</a>
-        <a href="#models">Models</a>
+      <nav class="topnav" aria-label="Primary routes">
+        <a href="/" aria-current="page">Reader</a>
+        <a href="/generate">Generate</a>
       </nav>
       <button id="readerToggle" class="reader-toggle" type="button" aria-pressed="false">
         <span class="toggle-dot" aria-hidden="true"></span>