| <!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> |
|
|
