Spaces:
Running
Running
File size: 6,485 Bytes
3ce6dc6 d3f22a2 3ce6dc6 daf5d92 3ce6dc6 a7f56c1 d3f22a2 3ce6dc6 b6b02d5 104a977 4a5ed96 b6b02d5 1fbe202 7a9f263 ab96fb1 b6b02d5 8fbbdf8 2cb1592 8b015e4 58193f8 b6b02d5 d3f22a2 b6b02d5 d3f22a2 b6b02d5 d3f22a2 bc1d298 b6b02d5 d3f22a2 b6b02d5 d3f22a2 19abe1c b6b02d5 d3f22a2 b6b02d5 d3f22a2 19abe1c b6b02d5 4b32868 d3f22a2 3ff1634 70ee0db 3ff1634 f77add3 2a650fb 70ee0db 83c44c8 70ee0db 4a5ed96 6aaa280 81a4e7a f77add3 81a4e7a f77add3 81a4e7a f77add3 81a4e7a f77add3 81a4e7a e45cc03 5dc78e3 81a4e7a f77add3 81a4e7a 6de6985 ab96fb1 5bebc6d 6de6985 70ee0db 6dd46b2 3ce6dc6 d3f22a2 70ee0db |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 |
<!DOCTYPE html>
<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>
|