Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Supertonic TTS - Transformers.js</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <!-- Import Transformers.js --> | |
| <script type="module"> | |
| import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@huggingface/[email protected]'; | |
| // Make available globally for the main script | |
| window.pipeline = pipeline; | |
| window.env = env; | |
| // Skip local model checks since we are running in browser | |
| env.allowLocalModels = false; | |
| </script> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="header-content"> | |
| <h1>Supertonic TTS</h1> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">Built with anycoder</a> | |
| </div> | |
| </header> | |
| <main> | |
| <div class="container"> | |
| <div class="card input-section"> | |
| <div class="controls-top"> | |
| <div class="select-group"> | |
| <label for="voice-select">Voice Persona</label> | |
| <select id="voice-select"> | |
| <option value="F1.bin">Female 1 (American)</option> | |
| <option value="F2.bin">Female 2 (British)</option> | |
| <option value="M1.bin">Male 1 (American)</option> | |
| <option value="M2.bin">Male 2 (British)</option> | |
| </select> | |
| </div> | |
| <div class="toggle-group"> | |
| <label class="switch"> | |
| <input type="checkbox" id="gpu-toggle"> | |
| <span class="slider round"></span> | |
| </label> | |
| <span id="device-label">Run on CPU</span> | |
| </div> | |
| </div> | |
| <div class="text-area-wrapper"> | |
| <textarea id="input-text" placeholder="Type something here to generate speech...">This is really cool! The browser is generating this audio entirely on your device.</textarea> | |
| <div class="char-count">0 / 500</div> | |
| </div> | |
| <button id="generate-btn">Generate Speech</button> | |
| <div id="status-container" class="hidden"> | |
| <div class="status-text" id="status-text">Loading model...</div> | |
| <div class="progress-bar-bg"> | |
| <div class="progress-bar-fill" id="progress-bar"></div> | |
| </div> | |
| </div> | |
| <div id="error-msg" class="error-msg hidden"></div> | |
| </div> | |
| <div class="card output-section hidden" id="output-card"> | |
| <h2>Generated Audio</h2> | |
| <div class="audio-player-wrapper"> | |
| <audio id="audio-player" controls></audio> | |
| </div> | |
| <a id="download-link" class="download-btn" download="speech.wav">Download WAV</a> | |
| </div> | |
| </div> | |
| </main> | |
| <script src="index.js" type="module"></script> | |
| </body> | |
| </html> |