Spaces:
Running
Running
| <html> | |
| <head> | |
| <title>Fast TTS</title> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="stylesheet" href="/static/styles.css"> <!-- Link to your external CSS file --> | |
| <!-- Add any CSS links or styles here --> | |
| </head> | |
| <body> | |
| <form method="post" action="/" onsubmit="showLoadingMessage()"> | |
| <div> | |
| <label for="text_input">Text to synthesize:</label> | |
| <textarea id="text_input" name="text_input" rows="5" cols="50">{{ text_input }}</textarea> | |
| </div> | |
| <div> | |
| <label for="selection">Select Language:</label> | |
| <select id="speaker" name="speaker"> | |
| {% for option in data.speaker_options %} | |
| <option value="{{ option }}" {% if option == selected_speaker %}selected{% endif %}>{{ option }}</option> | |
| {% endfor %} | |
| </select> | |
| </div> | |
| <!-- Select a model --> | |
| <div> | |
| <label for="selected_model">Select a model:</label> | |
| <select id="selected_model" name="selected_model"> | |
| {% for model_name in model_names %} | |
| <option value="{{ model_name }}" {% if model_name == selected_model %}selected{% endif %}>{{ model_name }}</option> | |
| {% endfor %} | |
| </select> | |
| </div> | |
| <!-- Display speaker options --> | |
| <div> | |
| <label for="selected_speaker_id">Select a speaker:</label> | |
| <select id="selected_speaker_id" name="selected_speaker_id"> | |
| {% for speaker_id, speaker_name in speaker_id_map.items() %} | |
| <option value="{{ speaker_id }}" {% if speaker_id == selected_speaker_id %}selected{% endif %}>{{ speaker_name }}</option> | |
| {% endfor %} | |
| </select> | |
| </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" | |
| name="speed_slider" min="0.25" max="2" step="0.1" value="1"> | |
| </div> | |
| <div> | |
| <label for="noise_scale_slider">Phoneme noise scale:</label> | |
| <input type="range" id="noise_scale_slider" name="noise_scale_slider" min="0.25" max="1" 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" name="noise_scale_w_slider" min="0.25" max="1" step="0.1" value="1"> | |
| </div> | |
| <!-- Add a div with the "loading-message" ID for the loading message --> | |
| <div id="loading-message"></div> | |
| <!-- Include the dynamic content from response_html --> | |
| {{ response_html|safe }} | |
| <div> | |
| <button type="submit" id="synthesize_button">Synthesize</button> | |
| </div> | |
| {% if file_url %} | |
| <h2>Generated Audio</h2> | |
| <audio controls id="audio-player"> | |
| <source src="{{ file_url }}" type="audio/mpeg"> | |
| Your browser does not support the audio element. | |
| </audio> | |
| <a href="https://www.buymeacoffee.com/gregniuki" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a> | |
| <a href="{{ file_url }}" download>Download Audio</a> | |
| {% endif %} | |
| <script> | |
| function showLoadingMessage() { | |
| // Display the loading message | |
| document.getElementById("loading-message").innerText = "Generating your audio, please wait..."; | |
| // Optionally, you can disable the form elements to prevent further interactions while waiting | |
| document.getElementById("synthesize_button").disabled = true; | |
| } | |
| </script> | |
| </form> | |
| <script> | |
| const modelSelect = document.getElementById('selected_model'); | |
| const speakerSelect = document.getElementById('selected_speaker_id'); | |
| // Function to load speaker options based on the selected model | |
| function loadSpeakers() { | |
| const selectedModel = modelSelect.value; | |
| // Fetch the speaker options for the selected model from the server | |
| fetch(`/get_speaker_id_map?selected_model=${selectedModel}`) | |
| .then(response => response.json()) | |
| .then(data => { | |
| // Clear existing options | |
| while (speakerSelect.firstChild) { | |
| speakerSelect.removeChild(speakerSelect.firstChild); | |
| } | |
| // Populate the speaker options based on data received | |
| for (const [speakerId, speakerName] of Object.entries(data.speaker_id_map)) { | |
| const option = document.createElement('option'); | |
| option.value = speakerName; | |
| option.textContent = speakerId; | |
| speakerSelect.appendChild(option); | |
| } | |
| }) | |
| .catch(error => { | |
| console.error('Error fetching speaker options:', error); | |
| }); | |
| } | |
| // Add an event listener to load speakers when the model selection changes | |
| modelSelect.addEventListener('change', loadSpeakers); | |
| // Initialize the speaker options based on the default selected model | |
| loadSpeakers(); | |
| </script> | |
| <script> | |
| // Function to send the request | |
| function sendRequest() { | |
| var xhr = new XMLHttpRequest(); | |
| xhr.open("POST", "https://gregniuki-pipertts.hf.space/", true); | |
| xhr.setRequestHeader("Content-Type", "application/json"); | |
| // Use the injected authorization token | |
| var token = read_key; | |
| xhr.setRequestHeader("Authorization", "Bearer " + token); | |
| // Access input data by element ID | |
| var textInput = document.getElementById("text_input").value; | |
| // Define your request payload | |
| var data = JSON.stringify({ data: [textInput] }); | |
| // Define the callback function to handle the response | |
| xhr.onload = function () { | |
| if (xhr.status === 200) { | |
| // Handle the successful response here | |
| var response = xhr.responseText; | |
| console.log(response); | |
| } | |
| }; | |
| // Send the request | |
| xhr.send(data); | |
| } | |
| // Event listener to trigger the request when the button is clicked | |
| document.getElementById("synthesize_button").addEventListener("click", sendRequest); | |
| </script> | |
| <!-- Move the JavaScript code outside the conditional block --> | |
| </body> | |
| </html> | |