Update templates/interface.html

templates/interface.html

@@ -36,11 +36,12 @@
 
         <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 {% if speaker_id == selected_speaker_id %}selected{% endif %} value="{{ speaker_id }}">{{ speaker_name }}</option>
-                {% endfor %}
-            </select>
+            <!-- Add a select element to choose the speaker -->
+<select id="speaker_select" name="selected_speaker_id">
+    {% 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;">
@@ -71,7 +72,22 @@
         <div>
         <button type="submit" id="synthesize_button">Synthesize</button>
         </div>
-        
+  // 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 => {
+        // Populate the select element with speaker names
+        var speakerSelect = document.getElementById("speaker_select");
+        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);
+        }
+    });
+});      
 
 
 {% if file_url %}