static/generate.html

<!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>
      <button id="readerToggle" class="reader-toggle" type="button" aria-pressed="false">
        <span class="toggle-dot" aria-hidden="true"></span>
        Screen reader off
      </button>
    </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="deep sea bioluminescence"
              required
            />
            <button id="generateArticleButton" type="submit">Generate</button>
          </div>
        </form>
        <p id="generatorStatus" class="live-narration" aria-live="polite">Ready to generate.</p>
        <dl class="generator-status-grid">
          <div>
            <dt>Mode</dt>
            <dd id="modeStatus">Reader off</dd>
          </div>
          <div>
            <dt>Current</dt>
            <dd id="currentStatus">No item selected</dd>
          </div>
          <div>
            <dt>Runtime</dt>
            <dd id="runtimeStatus">Waiting</dd>
          </div>
          <div>
            <dt>Voice</dt>
            <dd id="voiceStatus">Waiting</dd>
          </div>
          <div>
            <dt>Latency</dt>
            <dd id="latencyStatus">Waiting</dd>
          </div>
        </dl>
        <p id="liveNarration" class="live-narration" aria-live="polite">
          Generate an article, then turn on screen reader mode.
        </p>
        <div class="history-header">
          <h3>Transcript</h3>
          <button id="copyTranscriptButton" type="button">Copy</button>
          <button id="clearTranscriptButton" type="button">Clear</button>
        </div>
        <ol id="transcriptLog" class="transcript-log" aria-label="Generated article narration transcript"></ol>
      </section>

      <article id="generatedArticle" class="generated-article" aria-labelledby="generatedTitle">
        <figure class="hero-figure speakable" data-reader-type="image">
          <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 speakable" data-reader-type="paragraph">Generated draft</p>
        <h1 id="generatedTitle" class="speakable" data-reader-type="heading">Your generated article will appear here</h1>
        <p id="generatedDek" class="dek speakable" data-reader-type="paragraph">
          The result will include a title, summary, five readable sections, model runtime, and thumbnail receipt.
        </p>
        <div id="generatedSections" class="generated-sections"></div>
      </article>
    </main>

    <section class="reader-bar" aria-label="Generated article screen reader controls" hidden>
      <button id="prevButton" type="button" title="Previous item" aria-keyshortcuts="P">Prev</button>
      <button id="playButton" type="button" title="Play or pause" aria-keyshortcuts="Space">Play</button>
      <button id="nextButton" type="button" title="Next item" aria-keyshortcuts="N">Next</button>
      <button id="headingButton" type="button" title="Next heading" aria-keyshortcuts="H">Heading</button>
      <button id="imageButton" type="button" title="Next image" aria-keyshortcuts="I">Image</button>
      <button id="summaryButton" type="button" title="Summarize generated article" aria-keyshortcuts="S">Summary</button>
      <button id="repeatButton" type="button" title="Repeat current item" aria-keyshortcuts="R">Repeat</button>
      <button id="stopButton" type="button" title="Stop audio" aria-keyshortcuts="Escape">Stop</button>
      <label>
        Voice
        <select id="voiceControl" aria-label="Reader voice"></select>
      </label>
      <label>
        Speed
        <input id="speedControl" type="range" min="0.75" max="1.35" value="1" step="0.05" />
        <output id="speedValue" for="speedControl">1.00x</output>
      </label>
      <label>
        Auto
        <input id="autoAdvanceControl" type="checkbox" />
      </label>
      <audio id="speechAudio"></audio>
    </section>

    <script src="/static/generate.js" type="module"></script>
  </body>
</html>