mARTin-B78
d99395480a
## Script Rehearser (new feature)
- New section s-rehearser.html + rehearser.js + nav/loader wiring
- Phase 1: paste/upload script (.txt), auto-detect characters from
'CHARACTER: dialog' or ALL-CAPS screenplay format
- Phase 2: assign a TTS voice per character, or mark 'I play this'
- Phase 3: step-through rehearsal — synthesizes other characters via TTS,
shows level-meter + oscilloscope for your own lines, records them from mic
- Phase 4: session summary with per-line audio playback + download
## Connect Apps
- Removed duplicate standalone MCP/speak/hotkey full-width cards
- Kept the integration-grid cards (they use the real server URL from JS)
- Added Global Hotkey Daemon as a proper integration card with snippet-hotkey
populated by integrations.js (uses proxyBase URL dynamically)
## About page
- GET /api/changelog endpoint reads CHANGELOG.md and returns it as text
- Collapsible 'Changelog' <details> card fetches and displays it lazily
## Try It Out
- Reorganised into three cards: Voice & backend / Text to synthesize / Generate
- Backend help panel moved below the voice row (not in the same flex row)
- Style instruction field gains a dynamic badge ('style-aware ✓' / 'weak style')
and a yellow warning when a non-style-aware backend is selected while the
field is filled — wired to both backend-select change and input events
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
125 lines
7.8 KiB
HTML
125 lines
7.8 KiB
HTML
<div class="section-head">
|
|
<span class="section-icon"><span class="mdi mdi-theater"></span></span>
|
|
<div class="section-title">
|
|
<h2>Script Rehearser</h2>
|
|
<p>Upload a script, assign voices to characters, then synthesize the other parts while you record your own.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-content" id="tab-rehearser">
|
|
|
|
<!-- ── Phase 1: Script input ──────────────────────────────────── -->
|
|
<div class="reh-phase" id="reh-phase-1">
|
|
<div class="card">
|
|
<h2><span class="mdi mdi-script-text-outline"></span> Step 1 — Paste or upload your script</h2>
|
|
<p class="card-subtitle">Supported formats: <code>CHARACTER: dialog</code> on one line, or screenplay style (character name on its own ALL-CAPS line followed by dialog). Each speaker is detected automatically.</p>
|
|
<div class="reh-input-row">
|
|
<textarea id="reh-script-text" placeholder="ALICE Hello, how are you today? BOB I'm doing great, thank you for asking! ALICE That's wonderful to hear." spellcheck="false"></textarea>
|
|
<div class="reh-input-side">
|
|
<label class="btn-secondary" style="cursor:pointer;display:inline-flex;align-items:center;gap:6px">
|
|
<span class="mdi mdi-upload"></span> Upload .txt
|
|
<input type="file" id="reh-file-input" accept=".txt,.md" style="display:none">
|
|
</label>
|
|
<p class="note" style="margin-top:8px">Format hints:<br>• <code>CHARACTER: text</code><br>• All-caps name on own line + dialog below<br>• Lines starting with <code>#</code> are stage directions (skipped)</p>
|
|
</div>
|
|
</div>
|
|
<div class="btn-row" style="margin-top:12px">
|
|
<button class="btn-primary" id="reh-parse-btn"><span class="mdi mdi-auto-fix"></span> Parse characters</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── Phase 2: Cast assignment ───────────────────────────────── -->
|
|
<div class="reh-phase" id="reh-phase-2" hidden>
|
|
<div class="card">
|
|
<h2><span class="mdi mdi-account-group-outline"></span> Step 2 — Cast your characters</h2>
|
|
<p class="card-subtitle">Assign a TTS voice to each character, or mark a character as <strong>Me</strong> — those lines will be recorded from your microphone during rehearsal.</p>
|
|
<div id="reh-cast-list" class="reh-cast-list"></div>
|
|
<div class="field" style="margin-top:14px">
|
|
<label>TTS backend for synthesis</label>
|
|
<div style="display:flex;gap:8px;align-items:center">
|
|
<select id="reh-backend-select"><option value="">Checking…</option></select>
|
|
<button class="btn-secondary" id="reh-fetch-voices-btn">Fetch voices</button>
|
|
</div>
|
|
</div>
|
|
<div class="btn-row" style="margin-top:14px">
|
|
<button class="btn-secondary" id="reh-back-1-btn"><span class="mdi mdi-arrow-left"></span> Back</button>
|
|
<button class="btn-primary" id="reh-start-btn"><span class="mdi mdi-play"></span> Start rehearsal</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── Phase 3: Rehearsal ─────────────────────────────────────── -->
|
|
<div class="reh-phase" id="reh-phase-3" hidden>
|
|
<div class="card">
|
|
<h2><span class="mdi mdi-microphone-outline"></span> Step 3 — Rehearse</h2>
|
|
<div class="reh-progress-bar-wrap">
|
|
<div class="reh-progress-bar" id="reh-progress-bar"></div>
|
|
</div>
|
|
<div class="reh-progress-label" id="reh-progress-label">Line 0 / 0</div>
|
|
|
|
<!-- Current line display -->
|
|
<div class="reh-line-card" id="reh-line-card">
|
|
<div class="reh-line-speaker" id="reh-line-speaker"></div>
|
|
<div class="reh-line-text" id="reh-line-text"></div>
|
|
<div class="reh-line-actions" id="reh-line-actions"></div>
|
|
</div>
|
|
|
|
<!-- My-turn recording controls -->
|
|
<div class="reh-record-panel" id="reh-record-panel" hidden>
|
|
<div class="mic-monitor-box" style="margin-bottom:10px">
|
|
<div class="mic-monitor-head">
|
|
<span>Input level</span>
|
|
<span class="meter-readout" id="reh-db-readout">-∞ dB</span>
|
|
</div>
|
|
<div class="mic-meter" id="reh-mic-meter" aria-hidden="true"></div>
|
|
<canvas id="reh-live-wave" class="mic-live-wave" width="300" height="48" aria-hidden="true"></canvas>
|
|
</div>
|
|
<div class="btn-row">
|
|
<button class="btn-red" id="reh-rec-start"><span class="mdi mdi-record-circle-outline"></span> Record my line</button>
|
|
<button class="btn-secondary" id="reh-rec-stop" disabled><span class="mdi mdi-stop-circle-outline"></span> Stop</button>
|
|
<span class="mic-timer" id="reh-rec-time">0:00</span>
|
|
<button class="btn-secondary" id="reh-skip-line">Skip</button>
|
|
</div>
|
|
<audio id="reh-rec-preview" controls style="display:none;margin-top:8px;width:100%"></audio>
|
|
<div class="btn-row" style="margin-top:6px" id="reh-rec-confirm-row" hidden>
|
|
<button class="btn-green" id="reh-rec-keep"><span class="mdi mdi-check"></span> Keep & next</button>
|
|
<button class="btn-secondary" id="reh-rec-redo"><span class="mdi mdi-refresh"></span> Re-record</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- TTS playback status -->
|
|
<div class="reh-tts-panel" id="reh-tts-panel" hidden>
|
|
<div id="reh-tts-status" class="note" style="margin-bottom:8px">Synthesizing…</div>
|
|
<audio id="reh-tts-audio" controls style="width:100%"></audio>
|
|
<div class="btn-row" style="margin-top:8px">
|
|
<button class="btn-primary" id="reh-tts-next"><span class="mdi mdi-skip-next"></span> Next</button>
|
|
<button class="btn-secondary" id="reh-tts-replay"><span class="mdi mdi-replay"></span> Replay</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Navigation -->
|
|
<div class="btn-row" style="margin-top:14px;border-top:1px solid var(--border);padding-top:14px">
|
|
<button class="btn-secondary" id="reh-prev-line"><span class="mdi mdi-chevron-left"></span> Prev</button>
|
|
<button class="btn-secondary" id="reh-stop-reh"><span class="mdi mdi-stop"></span> Stop rehearsal</button>
|
|
<div style="flex:1"></div>
|
|
<span id="reh-session-info" class="note"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── Phase 4: Session summary ────────────────────────────────── -->
|
|
<div class="reh-phase" id="reh-phase-4" hidden>
|
|
<div class="card">
|
|
<h2><span class="mdi mdi-check-circle-outline"></span> Rehearsal complete</h2>
|
|
<p class="card-subtitle">Your recorded lines and all synthesized lines from this session.</p>
|
|
<div id="reh-summary-list" class="reh-summary-list"></div>
|
|
<div class="btn-row" style="margin-top:14px">
|
|
<button class="btn-secondary" id="reh-new-session-btn"><span class="mdi mdi-refresh"></span> New script</button>
|
|
<button class="btn-secondary" id="reh-resume-btn"><span class="mdi mdi-play"></span> Resume rehearsal</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- /tab-rehearser -->
|