use slider to determine boost value

app/static/index.html

@@ -94,7 +94,9 @@
       color: #2f3640;
     }
     .controls select,
-    .controls input[type="number"],
+    .controls input[type="range"] {
+      width: 150px;
+    }
     .controls textarea {
       padding: 0.3rem;
       border-radius: 5px;
@@ -158,10 +160,10 @@
     <!-- Hotwords List Input -->
     <label for="hotwordsList">Hotwords:</label>
     <textarea id="hotwordsList" placeholder="Enter one hotword per line"></textarea>
-    <!-- Global Boost Score Input -->  
-    <label for="boostScore">Boost Score:</label>
-    <input type="number" id="boostScore" min="0" max="10" step="0.1" value="2.0" />
-    <!-- ← NEW button to submit hotword changes -->
+    <!-- Boost Score Slider -->
+    <label for="boostScore">Boost Score: <span id="boostValue">2.0</span></label>
+    <input type="range" id="boostScore" min="0" max="10" step="0.1" value="2.0" />
+    <!-- Button to apply hotword settings -->
     <button id="applyHotwords">Apply Hotwords</button>
   </div>
 
@@ -211,6 +213,7 @@
     const precisionSelect = document.getElementById("precisionSelect");
     const hotwordsList = document.getElementById("hotwordsList");
     const boostScore = document.getElementById("boostScore");
+    const boostValue = document.getElementById("boostValue");
     const applyBtn      = document.getElementById("applyHotwords");
     const hotwordStatus = document.getElementById("hotwordStatus");
     const modelLangs = document.getElementById("modelLangs");
@@ -290,15 +293,17 @@
         sendConfig();
         updateHotwordStatus();
       });
-      // hotwordsList.addEventListener("input", sendConfig);
-      // boostScore.addEventListener("input", sendConfig);
-
-      // ← Re-send config & update indicator when the button is clicked
       applyBtn.addEventListener("click", () => {
         sendConfig();
         updateHotwordStatus();
       });
 
+      // Update boost display and status on slider input
+      boostScore.addEventListener("input", () => {
+        boostValue.textContent = boostScore.value;
+        updateHotwordStatus();
+      });
+
       const source = context.createMediaStreamSource(stream);
       const processor = context.createScriptProcessor(4096, 1, 1);
       source.connect(processor);