142 lines
6.5 KiB
HTML
142 lines
6.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Chatterbox TTS Frontend</title>
|
|
<link rel="stylesheet" href="css/style.css">
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<div class="container">
|
|
<h1>Chatterbox TTS</h1>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="container" role="main">
|
|
<div class="panel-grid">
|
|
<section id="dialog-editor" class="panel full-width-panel" aria-labelledby="dialog-editor-title">
|
|
<h2 id="dialog-editor-title">Dialog Editor</h2>
|
|
<div class="card">
|
|
<table id="dialog-items-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Type</th>
|
|
<th>Speaker</th>
|
|
<th>Text / Duration</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="dialog-items-container">
|
|
<!-- Dialog items will be rendered here by JavaScript as <tr> -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div id="temp-input-area" class="card">
|
|
<!-- Temporary inputs for speech/silence will go here -->
|
|
</div>
|
|
<div class="dialog-controls form-row">
|
|
<button id="add-speech-line-btn">Add Speech Line</button>
|
|
<button id="add-silence-line-btn">Add Silence Line</button>
|
|
<button id="generate-dialog-btn">Generate Dialog</button>
|
|
</div>
|
|
<div class="dialog-controls form-row">
|
|
<label for="output-base-name">Output Base Name:</label>
|
|
<input type="text" id="output-base-name" name="output-base-name" value="dialog_output" required>
|
|
</div>
|
|
<div class="dialog-controls form-row">
|
|
<button id="save-script-btn">Save Script</button>
|
|
<input type="file" id="load-script-input" accept=".jsonl" style="display: none;">
|
|
<button id="load-script-btn">Load Script</button>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<!-- Results below -->
|
|
<section id="results-display" class="panel" aria-labelledby="results-display-title">
|
|
<h2 id="results-display-title">Results</h2>
|
|
<div class="card">
|
|
<details id="generation-log-details">
|
|
<summary style="cursor:pointer;font-weight:500;">Show Generation Log</summary>
|
|
<pre id="generation-log-content" style="margin-top:12px;">(Generation log will appear here)</pre>
|
|
</details>
|
|
</div>
|
|
<div class="card">
|
|
<h3>Concatenated Audio:</h3>
|
|
<audio id="concatenated-audio-player" controls src=""></audio>
|
|
</div>
|
|
<div class="card">
|
|
<h3>Download Archive:</h3>
|
|
<a id="zip-archive-link" href="#" download style="display: none;">Download ZIP</a>
|
|
<p id="zip-archive-placeholder">(ZIP download link will appear here)</p>
|
|
</div>
|
|
</section>
|
|
<!-- Speaker management row below Results, side by side -->
|
|
<div class="speaker-mgmt-row">
|
|
<div id="speaker-list-container" class="card">
|
|
<h3>Available Speakers</h3>
|
|
<ul id="speaker-list">
|
|
<!-- Speakers will be populated here by JavaScript -->
|
|
</ul>
|
|
</div>
|
|
<div id="add-speaker-container" class="card">
|
|
<h3>Add New Speaker</h3>
|
|
<form id="add-speaker-form">
|
|
<div class="form-row">
|
|
<label for="speaker-name">Speaker Name:</label>
|
|
<input type="text" id="speaker-name" name="name" required>
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="speaker-sample">Audio Sample (WAV or MP3):</label>
|
|
<input type="file" id="speaker-sample" name="audio_file" accept=".wav,.mp3" required>
|
|
</div>
|
|
<button type="submit">Add Speaker</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<footer>
|
|
<div class="container">
|
|
<p>© 2024 Chatterbox TTS</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- TTS Settings Modal -->
|
|
<div id="tts-settings-modal" class="modal" style="display: none;">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3>TTS Settings</h3>
|
|
<button class="modal-close" id="tts-modal-close">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="settings-group">
|
|
<label for="tts-exaggeration">Exaggeration:</label>
|
|
<input type="range" id="tts-exaggeration" min="0" max="2" step="0.1" value="0.5">
|
|
<span id="tts-exaggeration-value">0.5</span>
|
|
<small>Controls expressiveness. Higher values = more exaggerated speech.</small>
|
|
</div>
|
|
<div class="settings-group">
|
|
<label for="tts-cfg-weight">CFG Weight:</label>
|
|
<input type="range" id="tts-cfg-weight" min="0" max="2" step="0.1" value="0.5">
|
|
<span id="tts-cfg-weight-value">0.5</span>
|
|
<small>Alignment with prompt. Higher values = more aligned with speaker characteristics.</small>
|
|
</div>
|
|
<div class="settings-group">
|
|
<label for="tts-temperature">Temperature:</label>
|
|
<input type="range" id="tts-temperature" min="0" max="2" step="0.1" value="0.8">
|
|
<span id="tts-temperature-value">0.8</span>
|
|
<small>Randomness. Lower values = more deterministic, higher = more varied.</small>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button id="tts-settings-save" class="btn-primary">Save Settings</button>
|
|
<button id="tts-settings-cancel" class="btn-secondary">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="js/api.js" type="module"></script>
|
|
<script src="js/app.js" type="module" defer></script>
|
|
</body>
|
|
</html>
|