53 lines
5.1 KiB
HTML
53 lines
5.1 KiB
HTML
<!doctype html>
|
||
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Caption Capture</title><link rel="icon" type="image/svg+xml" href="/static/favicon.svg"><link rel="stylesheet" href="/static/theme.css"><link rel="stylesheet" href="/static/capture.css"></head><body>
|
||
<a class="skip-link" href="#captureControls">Skip to caption controls</a>
|
||
<header><h1>Caption Capture</h1>
|
||
<p>Speech is processed by your Caption Local service. Choose your audio input, start captions, then Stop and download your transcript.</p></header>
|
||
<main>
|
||
<p class="cc-status-row"><span id="serviceDot" class="cc-dot" data-state="warn" aria-label="Checking service"></span><span id="capabilities" role="status">Checking speech service…</span></p>
|
||
|
||
<section class="panel" aria-labelledby="audioTitle">
|
||
<h2 id="audioTitle">Choose your audio and output</h2>
|
||
<div class="fields">
|
||
<label>Microphone<select id="microphone"><option value="">System default</option></select></label>
|
||
<label>Spoken language<select id="language"><option value="en" selected>English</option><option value="auto">Detect automatically</option></select></label>
|
||
<label>Microphone sensitivity<select id="sensitivity"><option value="0.0008">Quiet speech</option><option value="0.002" selected>Normal</option><option value="0.006">Noisy room</option></select></label>
|
||
<label>Caption interval<select id="captionInterval"><option value="3">3 seconds — earlier</option><option value="6" selected>6 seconds — balanced</option><option value="9">9 seconds — more context</option></select></label>
|
||
<label>Local preview<select id="mode"><option value="transcribe">Spoken-language captions</option><option value="translate">English translation</option><option value="both">Original + English</option></select></label>
|
||
</div>
|
||
<p class="hint" id="outputHint">Start with six-second captions. Select the spoken language explicitly for the most reliable translation.</p>
|
||
</section>
|
||
<section class="panel" id="captureControls" aria-labelledby="captionsTitle" tabindex="-1">
|
||
<h2 id="captionsTitle">Capture and save</h2>
|
||
<div class="actions">
|
||
<button id="start" disabled>Start captions</button> <button id="stop" disabled>Stop</button>
|
||
<button id="retry" hidden>Retry pending audio</button> <button id="discard" hidden>Discard pending audio</button>
|
||
</div>
|
||
<p class="cc-status-row"><span id="captureDot" class="cc-dot" data-state="idle" aria-label="Capture not started"></span><span id="status" role="status">Ready</span></p><p id="error" role="alert"></p>
|
||
<label>Microphone level<meter id="meter" min="0" max="0.1" value="0"></meter></label>
|
||
<div id="captions" role="log" aria-live="polite" aria-label="Live captions"></div>
|
||
<button id="download">Download transcript</button>
|
||
|
||
<p class="hint">Stop and let pending audio finish before downloading. Audio is not saved; closing the tab can lose pending audio and unsaved text.</p>
|
||
</section>
|
||
<details><summary>Send captions to captions.coop</summary>
|
||
<p>Optional: caption text will travel through the selected relay (the configured self-hosted relay by default). Audio stays on the inference host. Paste the editor’s <strong>private automatic-caption room</strong> below. The editor reviews these captions before publishing to its separate public room.</p>
|
||
<label>Audience output<select id="relayOutput"><option value="transcript">Original transcription</option><option value="translation">English translation</option></select></label>
|
||
<details><summary>Use a private relay</summary>
|
||
<label>Relay address<input id="relayAddress" type="url" value="" placeholder="wss://relay.example.org" spellcheck="false"></label>
|
||
<label>Caption website address<input id="captionSite" type="url" value="" placeholder="https://captions.example.org/" spellcheck="false"></label>
|
||
<label>Room publishing token<input id="relayToken" type="password" autocomplete="off" spellcheck="false"></label>
|
||
<label>Editor output room<input id="reviewRoom" value="output" autocomplete="off" maxlength="128"></label>
|
||
<p>A private relay needs its own room token, separate from the room admin link. The editor needs the source viewing token and output publishing token. Links carry the relay address, never tokens. Turn sharing off before changing these settings.</p>
|
||
</details>
|
||
<label>Source room<input id="room" value="source" autocomplete="off" maxlength="128"></label>
|
||
<label><input id="share" type="checkbox"> Send caption text to captions.coop</label>
|
||
<p class="cc-status-row"><span id="relayDot" class="cc-dot" data-state="idle" aria-label="Sharing off"></span><span id="relay" role="status">Sharing off</span></p>
|
||
<p id="overlayReady" hidden>Direct monitor: <a id="overlayLink" target="_blank" rel="noopener noreferrer">Open source overlay</a> (bypasses review; carries the viewing token in the link fragment).</p>
|
||
</details>
|
||
<p><a href="/capture-local.html">Connection settings and capture diagnostics</a></p>
|
||
</main>
|
||
<script src="/static/caption-status.js"></script><script src="/static/relay-config.js"></script><script src="/static/private-relay-client.js"></script><script src="/static/ws-publisher.js"></script><script src="/static/audio-buffer.js"></script><script src="/static/app.js"></script>
|
||
</body></html>
|