Spaces:
Running
Running
| <html> | |
| <head> | |
| <title>Your FastAPI App</title> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="stylesheet" href="styles.css"> <!-- Link to your external CSS file --> | |
| <!-- Add any CSS links or styles here --> | |
| </head> | |
| <body> | |
| <form method="post" action="/synthesize"> | |
| <div> | |
| <label for="text_input">Text to synthesize:</label> | |
| <input type="text" id="text_input" name="text_input" placeholder="Enter your text here"> | |
| </div> | |
| <div> | |
| <label for="selection">Select speaker:</label> | |
| <select id="speaker" name="speaker"> | |
| {% for option in data.speaker_options %} | |
| <option {% if option == data.default_speaker %}selected{% endif %}>{{ option }}</option> | |
| {% endfor %} | |
| </select> | |
| <button id="load_btn">Load it!</button> | |
| </div> | |
| <div id="speaker_selection" style="display: none;"> | |
| <!-- Dropdown for speaker selection --> | |
| </div> | |
| <div> | |
| <label for="speed_slider">Rate scale:</label> | |
| <input type="range" id="speed_slider" min="0.25" max="4" step="0.1" value="1"> | |
| </div> | |
| <div> | |
| <label for="noise_scale_slider">Phoneme noise scale:</label> | |
| <input type="range" id="noise_scale_slider" min="0.25" max="4" step="0.1" value="0.667"> | |
| </div> | |
| <div> | |
| <label for="noise_scale_w_slider">Phoneme stressing scale:</label> | |
| <input type="range" id="noise_scale_w_slider" min="0.25" max="4" step="0.1" value="1"> | |
| </div> | |
| <div> | |
| <label for="play">Auto-play:</label> | |
| <input type="checkbox" id="play" checked> | |
| </div> | |
| <!-- Add other input fields and elements here --> | |
| <div> | |
| <button type="submit" id="synthesize_button">Synthesize</button> | |
| <button type="button" id="close_button" onclick="closeGUI()">Exit</button> | |
| </div> | |
| </form> | |
| <script> | |
| // JavaScript function for handling the "Exit" button click | |
| function closeGUI() { | |
| // Add logic to close the GUI if needed | |
| alert("Closing the GUI"); | |
| } | |
| </script> | |
| <div> | |
| <!-- HTML audio element to play the generated audio --> | |
| <audio controls> | |
| <source src="/generate_audio" type="audio/wav"> <!-- Replace "/generate_audio" with your FastAPI route URL --> | |
| Your browser does not support the audio element. | |
| </audio> | |
| </div> | |
| <!-- Add any JavaScript scripts or functions here --> | |
| </body> | |
| </html> | |