Spaces:
Running
Running
Update templates/interface.html
Browse files- templates/interface.html +26 -18
templates/interface.html
CHANGED
@@ -35,9 +35,9 @@
|
|
35 |
</div>
|
36 |
|
37 |
<div>
|
38 |
-
<label for="
|
39 |
-
|
40 |
-
<select id="speaker_select" name="
|
41 |
{% for speaker_id, speaker_name in speaker_id_map.items() %}
|
42 |
<option value="{{ speaker_id }}">{{ speaker_name }}</option>
|
43 |
{% endfor %}
|
@@ -72,23 +72,31 @@
|
|
72 |
<div>
|
73 |
<button type="submit" id="synthesize_button">Synthesize</button>
|
74 |
</div>
|
|
|
75 |
<script>
|
76 |
-
|
77 |
-
window.addEventListener("load", function() {
|
78 |
-
|
79 |
-
|
80 |
-
|
81 |
-
|
82 |
-
|
83 |
-
|
84 |
-
|
85 |
-
|
86 |
-
|
87 |
-
|
88 |
-
|
89 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
90 |
});
|
91 |
-
});
|
92 |
</script>
|
93 |
|
94 |
{% if file_url %}
|
|
|
35 |
</div>
|
36 |
|
37 |
<div>
|
38 |
+
<label for="speaker_select">Select a speaker:</label>
|
39 |
+
<!-- Your existing select element for choosing a speaker -->
|
40 |
+
<select id="speaker_select" name="speaker_select">
|
41 |
{% for speaker_id, speaker_name in speaker_id_map.items() %}
|
42 |
<option value="{{ speaker_id }}">{{ speaker_name }}</option>
|
43 |
{% endfor %}
|
|
|
72 |
<div>
|
73 |
<button type="submit" id="synthesize_button">Synthesize</button>
|
74 |
</div>
|
75 |
+
<!-- Your script to fetch and populate the select element -->
|
76 |
<script>
|
77 |
+
// Add an event listener to load the speaker_id_map when the page loads
|
78 |
+
window.addEventListener("load", function() {
|
79 |
+
// Fetch the speaker_id_map from the server
|
80 |
+
fetch("/get_speaker_id_map")
|
81 |
+
.then(response => response.json())
|
82 |
+
.then(data => {
|
83 |
+
// Get a reference to the existing select element
|
84 |
+
var speakerSelect = document.getElementById("speaker_select");
|
85 |
+
|
86 |
+
// Remove existing options (if any) from the select element
|
87 |
+
while (speakerSelect.firstChild) {
|
88 |
+
speakerSelect.removeChild(speakerSelect.firstChild);
|
89 |
+
}
|
90 |
+
|
91 |
+
// Populate the select element with speaker names
|
92 |
+
for (var speakerId in data.speaker_id_map) {
|
93 |
+
var option = document.createElement("option");
|
94 |
+
option.value = speakerId;
|
95 |
+
option.textContent = data.speaker_id_map[speakerId];
|
96 |
+
speakerSelect.appendChild(option);
|
97 |
+
}
|
98 |
+
});
|
99 |
});
|
|
|
100 |
</script>
|
101 |
|
102 |
{% if file_url %}
|