File size: 9,350 Bytes
f72f54e a13e743 f72f54e a13e743 f72f54e a13e743 f72f54e a95f296 921d7f6 a95f296 d19068b b958872 48d1717 f72f54e bb63fe8 cc093a3 a95f296 d1b4ad4 0347c74 38c87e2 d1b4ad4 38c87e2 eee651b 8b872c3 eee651b 79c2c78 e898b4a f32d42c f72f54e d1cf993 5b9a6bf d1cf993 4ed989e f72f54e 4ed989e f72f54e a1018e3 f72f54e | 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 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 | <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Tiny Narrator</title>
<link rel="stylesheet" href="/static/app.css" />
</head>
<body>
<header class="topbar">
<a class="brand" href="#article" aria-label="Tiny Narrator home">
<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>
<a href="#notes">Field Notes</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 id="article" class="article-shell">
<article class="article" aria-labelledby="articleTitle">
<p class="kicker speakable" data-reader-type="paragraph">Build Small Hackathon concept</p>
<h1 id="articleTitle" class="speakable" data-reader-type="heading">
A tiny model reader that turns articles into guided narration
</h1>
<p class="dek speakable" data-reader-type="paragraph">
Tiny Narrator is an accessibility-first article experience. It can describe generated images,
build a reading path, and speak each part of the page with a lightweight local voice.
</p>
<figure class="hero-figure speakable" data-reader-type="image" data-image-id="desk-reader">
<img
src="/static/generated/desk-reader.svg"
alt="Illustration of an article reader with narration controls and a highlighted reading path."
/>
<figcaption>
The article view doubles as the demo surface, so every feature has a real reading task.
</figcaption>
</figure>
<section id="why" aria-labelledby="whyTitle">
<h2 id="whyTitle" class="speakable" data-reader-type="heading">Why it belongs in a tiny-model hackathon</h2>
<p class="speakable" data-reader-type="paragraph">
Accessibility tools should feel immediate, private, and personal. Small models help because they
can run closer to the reader, keep latency low, and make the experience easier to inspect.
</p>
<blockquote class="speakable" data-reader-type="quote">
The goal is not to read the whole page at the user. The goal is to make the page navigable by sound.
</blockquote>
</section>
<section id="models" aria-labelledby="modelsTitle">
<h2 id="modelsTitle" class="speakable" data-reader-type="heading">The model map</h2>
<p class="speakable" data-reader-type="paragraph">
The reader brain runs through llama.cpp, the vision model writes practical alt text, Kokoro speaks
the final narration, and a four-billion-parameter image model creates article illustrations.
</p>
<figure class="inline-figure speakable" data-reader-type="image" data-image-id="model-map">
<img
src="/static/generated/model-map.svg"
alt="Diagram showing the reader brain, vision, speech, and image generation models working together."
/>
<figcaption>Each model stays at or below four billion parameters for Tiny Titan eligibility.</figcaption>
</figure>
</section>
<section id="notes" aria-labelledby="notesTitle">
<h2 id="notesTitle" class="speakable" data-reader-type="heading">Field notes as a feature</h2>
<p class="speakable" data-reader-type="paragraph">
The build report will show parameter counts, latency notes, keyboard decisions, and where the app
uses deterministic fallbacks so the accessibility layer remains dependable during a live demo.
</p>
<figure class="inline-figure speakable" data-reader-type="image" data-image-id="field-notes">
<img
src="/static/generated/field-notes.svg"
alt="Notebook-style field notes about model sizes, keyboard controls, and accessibility checks."
/>
<figcaption>Field notes document the choices behind the screen-reader behavior.</figcaption>
</figure>
</section>
</article>
<aside class="status-panel" aria-label="Tiny Narrator status">
<h2>Session</h2>
<dl>
<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>Model Stack</dt>
<dd id="modelStatus">Loading</dd>
</div>
<div>
<dt>Readiness</dt>
<dd id="readinessStatus">Checking</dd>
</div>
<div>
<dt>Image Alt</dt>
<dd id="imageStatus">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">
Turn on screen reader mode to begin.
</p>
<div class="reader-queue-header">
<h3>Reader Queue</h3>
<span id="readerQueueStatus">Loading</span>
</div>
<ol id="readerQueueList" class="runtime-list" aria-label="Semantic reader queue"></ol>
<ul id="runtimeStatusList" class="runtime-list" aria-label="Live model runtime status"></ul>
<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="Narration transcript"></ol>
<div class="demo-script-header">
<h3>Judge Runbook</h3>
<span id="demoScriptStatus">Loading</span>
</div>
<ol id="demoScriptList" class="demo-script-list" aria-label="Judge demo runbook"></ol>
<ul id="demoApiCheckList" class="demo-api-check-list" aria-label="Judge API evidence checks"></ul>
<div class="award-header">
<h3>Award Evidence</h3>
</div>
<ul id="awardEvidenceList" class="award-list" aria-label="Hackathon bonus evidence"></ul>
<div class="submission-header">
<h3>Submission Readiness</h3>
<span id="submissionReadinessStatus">Checking</span>
<button id="copyEvidenceButton" type="button">Copy Evidence</button>
</div>
<ul id="submissionReadinessList" class="award-list" aria-label="Submission readiness checks"></ul>
<div class="budget-header">
<h3>Model Budget</h3>
<span id="budgetStatus">Checking</span>
</div>
<ul id="modelBudgetList" class="budget-list" aria-label="Tiny Titan model budget"></ul>
<div class="runtime-header">
<h3>Runtime Plan</h3>
<span id="runtimeSetupStatus">Loading</span>
</div>
<ul id="runtimeSetupList" class="runtime-list" aria-label="Model runtime setup plan"></ul>
<div class="image-receipt-header">
<h3>Image Receipts</h3>
<span id="imageReceiptStatus">Loading</span>
</div>
<ul id="imageReceiptList" class="image-receipt-list" aria-label="Generated image provenance"></ul>
</aside>
</main>
<section class="reader-bar" aria-label="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 current section" 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/app.js" type="module"></script>
</body>
</html>
|