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 - Text to Speech</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script type="module"> | |
| import { pipeline } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.8.0'; | |
| window.pipeline = pipeline; | |
| </script> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header> | |
| <div class="header-content"> | |
| <h1>🎙️ Supertonic TTS</h1> | |
| <p>Transform text to natural speech using cutting-edge AI</p> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-badge" aria-label="Built with anycoder"> | |
| Built with anycoder | |
| </a> | |
| </div> | |
| </header> | |
| <main class="main-content"> | |
| <div class="controls"> | |
| <div class="input-section"> | |
| <label for="textInput" class="sr-only">Enter text to convert to speech</label> | |
| <textarea | |
| id="textInput" | |
| placeholder="Type your text here... (e.g., 'Hello, this is a test of the Supertonic TTS system!')" | |
| rows="4" | |
| maxlength="500" | |
| ></textarea> | |
| <div class="input-info"> | |
| <span id="charCount">0/500</span> | |
| </div> | |
| </div> | |
| <div class="voice-section"> | |
| <label for="voiceSelect" class="voice-label">Voice:</label> | |
| <select id="voiceSelect"> | |
| <option value="F1">Female 1</option> | |
| <option value="F2">Female 2</option> | |
| <option value="M1">Male 1</option> | |
| <option value="M2">Male 2</option> | |
| </select> | |
| </div> | |
| <div class="device-section"> | |
| <label class="device-toggle-label"> | |
| <input type="checkbox" id="deviceToggle" /> | |
| <span class="toggle-switch"> | |
| <span class="toggle-knob"></span> | |
| </span> | |
| <span class="toggle-text"> | |
| <span id="deviceText">CPU Mode</span> | |
| </span> | |
| </label> | |
| </div> | |
| <button id="generateBtn" class="generate-btn" disabled> | |
| <span class="btn-content"> | |
| <span class="btn-text">Generate Speech</span> | |
| <div class="spinner" style="display: none;"></div> | |
| </span> | |
| </button> | |
| </div> | |
| <div id="status" class="status hidden"></div> | |
| <div id="audioSection" class="audio-section hidden"> | |
| <div class="audio-controls"> | |
| <button id="playBtn" class="play-btn" aria-label="Play audio"> | |
| <svg viewBox="0 0 24 24" fill="currentColor"> | |
| <path d="M8 5v14l11-7z"/> | |
| </svg> | |
| </button> | |
| <button id="downloadBtn" class="download-btn" aria-label="Download audio" disabled> | |
| <svg viewBox="0 0 24 24" fill="currentColor"> | |
| <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/> | |
| </svg> | |
| </button> | |
| <button id="regenerateBtn" class="regenerate-btn" aria-label="Generate new audio"> | |
| 🔄 New Audio | |
| </button> | |
| </div> | |
| <audio id="audioPlayer" preload="metadata"></audio> | |
| </div> | |
| </main> | |
| </div> | |
| <script type="module" src="index.js"></script> | |
| </body> | |
| </html> |