mirror of
https://github.com/supertone-inc/supertonic.git
synced 2026-06-02 01:38:48 +02:00
ANLGBOY
79 lines
3.4 KiB
HTML
79 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Supertonic - Web Demo</title>
|
||
<link rel="stylesheet" href="/style.css">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<h1>🎤 Supertonic</h1>
|
||
<p class="subtitle">Text-to-Speech with ONNX Runtime Web</p>
|
||
|
||
<div id="statusBox" class="status-box">
|
||
<div class="status-text-wrapper">
|
||
<div id="statusText">ℹ️ <strong>Loading models...</strong>
|
||
Please wait...</div>
|
||
</div>
|
||
<div id="backendBadge" class="backend-badge">WebAssembly</div>
|
||
</div>
|
||
|
||
<div class="main-content">
|
||
<div class="left-panel">
|
||
<div class="section">
|
||
<div class="ref-audio-label">
|
||
<label for="voiceStyleSelect">Voice Style: </label>
|
||
<span id="voiceStyleInfo"
|
||
class="ref-audio-info">Loading...</span>
|
||
</div>
|
||
<select id="voiceStyleSelect">
|
||
<option value="assets/voice_styles/M1.json">Male 1 (M1)</option>
|
||
<option value="assets/voice_styles/M2.json">Male 2 (M2)</option>
|
||
<option value="assets/voice_styles/F1.json">Female 1 (F1)</option>
|
||
<option value="assets/voice_styles/F2.json">Female 2 (F2)</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<label for="text">Text to Synthesize:</label>
|
||
<textarea id="text"
|
||
placeholder="Enter the text you want to convert to speech...">This morning, I took a walk in the park, and the sound of the birds and the breeze was so pleasant that I stopped for a long time just to listen.</textarea>
|
||
</div>
|
||
|
||
<div class="params-grid">
|
||
<div class="section">
|
||
<label for="totalStep">Total Steps (higher = better
|
||
quality):</label>
|
||
<input type="number" id="totalStep" value="5"
|
||
min="1" max="50">
|
||
</div>
|
||
|
||
<div class="section">
|
||
<label for="speed">Speed (0.9-1.5 recommended):</label>
|
||
<input type="number" id="speed" value="1.05"
|
||
min="0.5" max="2.0" step="0.05">
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<button id="generateBtn">Generate Speech</button>
|
||
|
||
<div id="error" class="error"></div>
|
||
</div>
|
||
|
||
<div class="right-panel">
|
||
<div id="results" class="results">
|
||
<div class="results-placeholder">
|
||
<div class="results-placeholder-icon">🎤</div>
|
||
<p>Generated speech will appear here</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script type="module" src="/main.js"></script>
|
||
</body>
|
||
</html>
|