Spaces:
Running
Running
File size: 4,572 Bytes
3ce6dc6 d3f22a2 3ce6dc6 daf5d92 3ce6dc6 a7f56c1 d3f22a2 3ce6dc6 b6b02d5 104a977 4a5ed96 b6b02d5 1fbe202 7a9f263 b6b02d5 d3f22a2 4d53cd1 2cb1592 b6b02d5 d79b214 8b015e4 638e425 0d7f71b f09651a d3f22a2 b6b02d5 d3f22a2 b6b02d5 d3f22a2 b6b02d5 d3f22a2 19abe1c b6b02d5 d3f22a2 b6b02d5 d3f22a2 19abe1c b6b02d5 d3f22a2 b6b02d5 d3f22a2 19abe1c b6b02d5 4b32868 d3f22a2 3ff1634 70ee0db 3ff1634 638e425 c3f2cc3 638e425 0d7f71b c3f2cc3 2a650fb 70ee0db 4a5ed96 6aaa280 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 |
<!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 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>
</div>
<div>
<label for="selected_model">Select a model:</label>
<select id="selected_model" name="selected_model">
{% for model_name in model_names %}
<option {% if model_name == selected_model %}selected{% endif %}>{{ model_name }}</option>
{% endfor %}
</select>
</div>
<div>
<label for="speaker_select">Select a speaker:</label>
<!-- Your existing select element for choosing a speaker -->
<select id="speaker_select" name="speaker_select">
{% for speaker_id, speaker_name in speaker_id_map.items() %}
<option value="{{ speaker_id }}">{{ 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>
<!-- Your script to fetch and populate the select element -->
<script>
// Add an event listener to load the speaker_id_map when the page loads
window.addEventListener("load", function() {
// Fetch the speaker_id_map from the server
fetch("/get_speaker_id_map")
.then(response => response.json())
.then(data => {
// Get a reference to the existing select element
var speakerSelect = document.getElementById("speaker_select");
// Remove existing options (if any) from the select element
while (speakerSelect.firstChild) {
speakerSelect.removeChild(speakerSelect.firstChild);
}
// Populate the select element with speaker names
for (var speakerId in data.speaker_id_map) {
var option = document.createElement("option");
option.value = speakerId;
option.textContent = data.speaker_id_map[speakerId];
speakerSelect.appendChild(option);
}
});
});
</script>
{% 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="{{ 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>
<!-- Move the JavaScript code outside the conditional block -->
</body>
</html>
|