pin to the bottom of transcript so user can always follow the latest part of it

app/static/index.html

@@ -54,6 +54,21 @@
       padding: 1rem 1.5rem;
       border-radius: 10px;
       box-shadow: 0 0 10px rgba(0,0,0,0.1);
+      display: flex;
+      flex-direction: column;
+    }
+    .transcript-container {
+      flex: 1;                   /* take remaining vertical space */
+      max-height: 300px;         /* adjust as you like */
+      margin-top: 0.5rem;
+      padding: 0.5rem;
+      background: #fff;
+      border: 1px solid #dcdde1;
+      border-radius: 8px;
+      overflow-y: auto;          /* make it scrollable */
+      white-space: pre-wrap;     /* preserve line breaks */
+      font-size: 1.1rem;
+      color: #353b48;
     }
 
     .label {
@@ -115,8 +130,8 @@
 
     <label for="precisionSelect">Precision:</label>
     <select id="precisionSelect">
-      <option value="int8">INT8</option>
       <option value="fp32">FP32</option>
+      <option value="int8">INT8</option>
     </select>
   </div>
 
@@ -127,7 +142,8 @@
   <progress id="vol" max="1" value="0"></progress>
 
   <div class="output">
-    <div><span class="label">Transcript:</span> <span id="partial">...</span></div>
+    <div><span class="label">Transcript:</span></div>
+    <div id="transcript" class="transcript-container">...</div>
   </div>
 
   <script>
@@ -185,7 +201,7 @@
       updateModelInfo();
 
       // Now that we know the sample rate, open the WS
-      ws = new WebSocket(`wss://${location.host}/ws`);
+      ws = new WebSocket(`ws://${location.host}/ws`);
       ws.onopen = () => sendConfig();
       ws.onerror = err => console.error("WebSocket error:", err);
       ws.onclose = () => console.log("WebSocket closed");
@@ -195,7 +211,10 @@
           vol.value = Math.min(msg.volume * 20.0, 1.0);
         }
         if (msg.partial) {
-          partial.textContent = msg.partial;
+          // replace content…
+          transcript.textContent = msg.partial;
+          // …then scroll to bottom
+          transcript.scrollTop = transcript.scrollHeight;
         }
       };