Update index.html

index.html

@@ -111,7 +111,12 @@
 
         tvmjsGlobalEnv.getTokenizer = getTokenizer;
       </script>
-
+<div>
+  Select Model:   <select name="model" id="modelId">
+    <option selected="selected">Stable-Diffusion-XL</option>
+    <option>Stable-Diffusion-1.5</option>
+  </select>
+</div>
       <script src="dist/stable_diffusion.js"></script>
 
       <div>
@@ -160,7 +165,31 @@
         </div>
         <button onclick="tvmjsGlobalEnv.asyncOnGenerate()">Generate</button>
       </div>
+<script>
+  function updateSchedulerBasedOnModel() {
+      var selectedModel = document.getElementById('modelId').value;
+      var schedulerDropdown = document.getElementById('schedulerId');
+      
+      if (selectedModel === 'Stable-Diffusion-XL') {
+          schedulerDropdown.value = '2'; // Set to Multi-step DPM Solver
+          // Optionally, disable other options
+          for (var i = 0; i < schedulerDropdown.options.length; i++) {
+              schedulerDropdown.options[i].disabled = (schedulerDropdown.options[i].value !== '2');
+          }
+      } else {
+          schedulerDropdown.value = '0'; // Set to Multi-step DPM Solver
+          // Optionally, disable other options
+          for (var i = 0; i < schedulerDropdown.options.length; i++) {
+              schedulerDropdown.options[i].disabled = (schedulerDropdown.options[i].value !== '0' && schedulerDropdown.options[i].value !== '1');
+          }
+      }
+  }
 
+  window.onload = function() {
+      updateSchedulerBasedOnModel(); // Run when page loads
+      document.getElementById('modelId').addEventListener('change', updateSchedulerBasedOnModel); // Also run on model change
+  }
+</script>
       <div>
         <canvas id="canvas" width="512" height="512"></canvas>
       </div>