File size: 5,472 Bytes
ce52764 fb88a58 ce52764 f1d674e ce52764 fb88a58 ce52764 fb88a58 ce52764 fb88a58 8a826e8 ce52764 fb88a58 ce52764 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 | <!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>
|