Update templates/interface.html

templates/interface.html

@@ -94,30 +94,42 @@
 </script>
 
 </form>
-<script>
-        const selectedModelDropdown = document.getElementById("selected_model");
-        const speakerDropdown = document.getElementById("selected_speaker_id");
+    <script>
+        const modelSelect = document.getElementById('selected_model');
+        const speakerSelect = document.getElementById('selected_speaker_id');
 
-        selectedModelDropdown.addEventListener("change", () => {
-            const selectedModel = selectedModelDropdown.value;
+        // Function to load speaker options based on the selected model
+        function loadSpeakers() {
+            const selectedModel = modelSelect.value;
 
-            // Fetch speaker options for the selected model
+            // 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 => {
-                    const speakerIdMap = data.speaker_id_map;
-                    speakerDropdown.innerHTML = ""; // Clear existing options
+                    // Clear existing options
+                    while (speakerSelect.firstChild) {
+                        speakerSelect.removeChild(speakerSelect.firstChild);
+                    }
 
-                    for (const [speakerId, speakerName] of Object.entries(speakerIdMap)) {
-                        const option = document.createElement("option");
+                    // 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 = speakerId;
                         option.textContent = speakerName;
-                        speakerDropdown.appendChild(option);
+                        speakerSelect.appendChild(option);
                     }
                 })
-                .catch(error => console.error("Error fetching speaker options:", error));
-        });
-</script>
+                .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>
 <!-- Move the JavaScript code outside the conditional block -->
 
 </body>