Update templates/interface.html

templates/interface.html

@@ -25,25 +25,25 @@
         </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 {% if model_name == selected_model %}selected{% endif %}>{{ model_name }}</option>
-                {% endfor %}
-            </select>
+        <label for="selected_model">Select a model:</label>
+        <select id="selected_model" name="selected_model">
+            {% for model_name in onnx_models %}
+            <option value="{{ model_name }}">{{ model_name }}</option>
+            {% endfor %}
+        </select>
         </div>
 
+            <!-- Display speaker options -->
         <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>
+        <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 }}">{{ speaker_name }}</option>
+            {% endfor %}
+        </select>
         </div>
-
         <div id="speaker_selection" style="display: none;">
         <!-- Dropdown for speaker selection -->
         </div>
@@ -72,32 +72,7 @@
         <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>
@@ -119,7 +94,30 @@
 </script>
 
 </form>
-
+<script>
+        const selectedModelDropdown = document.getElementById("selected_model");
+        const speakerDropdown = document.getElementById("selected_speaker_id");
+
+        selectedModelDropdown.addEventListener("change", () => {
+            const selectedModel = selectedModelDropdown.value;
+
+            // Fetch speaker options for the selected model
+            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
+
+                    for (const [speakerId, speakerName] of Object.entries(speakerIdMap)) {
+                        const option = document.createElement("option");
+                        option.value = speakerId;
+                        option.textContent = speakerName;
+                        speakerDropdown.appendChild(option);
+                    }
+                })
+                .catch(error => console.error("Error fetching speaker options:", error));
+        });
+</script>
 <!-- Move the JavaScript code outside the conditional block -->
 
 </body>