improve ui look

app/static/index.html

@@ -4,61 +4,110 @@
   <meta charset="UTF-8" />
   <title>🎤 Real-Time ASR Demo</title>
   <style>
-    /* Ensure the transcript preserves spacing and scrolls */
-    #transcript {
-      white-space: pre-wrap;
-      overflow-y: auto;
-    }
-
-    /* Finalized utterances in green, with a bit of right-margin */
-    #transcript .final {
-      color: green;
-      display: inline;
-      margin-right: 0.5em;
-    }
-
-    /* Interim utterance in red */
-    #transcript .interim {
-      color: red;
-      display: inline;
-    }
+    /* Page layout */
     body {
       font-family: "Segoe UI", sans-serif;
       background-color: #f5f6fa;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      min-height: 100vh;
       margin: 0;
       padding: 2rem;
       color: #2f3640;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
     }
-
     h1 {
-      margin-bottom: 1rem;
       font-size: 2rem;
+      margin-bottom: 1rem;
+    }
+    section {
+      width: 100%;
+      max-width: 900px;
+      margin-bottom: 1.5rem;
+      background: white;
+      border-radius: 8px;
+      padding: 1rem;
+      box-shadow: 0 0 8px rgba(0,0,0,0.1);
+    }
+    section h2 {
+      margin-top: 0;
+      font-size: 1.2rem;
+      border-bottom: 1px solid #dcdde1;
+      padding-bottom: 0.5rem;
+      color: #2f3640;
+    }
+
+    /* Grid for controls */
+    .controls-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 1rem;
+      margin-top: 1rem;
+    }
+    .control-item {
+      display: flex;
+      flex-direction: column;
+    }
+    .control-item > label {
+      font-weight: 600;
+      margin-bottom: 0.3rem;
+    }
+    .control-item > select,
+    .control-item > input,
+    .control-item > textarea {
+      padding: 0.5rem;
+      border: 1px solid #dcdde1;
+      border-radius: 5px;
+      font-size: 1rem;
+      background: white;
     }
-  
-    /* Added for Hotword Bias status */
+    .control-item > textarea {
+      resize: vertical;
+      min-height: 4rem;
+    }
+    .control-item > button {
+      margin-top: 0.5rem;
+      padding: 0.5rem;
+      border: none;
+      border-radius: 5px;
+      background-color: #44bd32;
+      color: white;
+      font-size: 1rem;
+      cursor: pointer;
+      transition: background-color 0.2s;
+    }
+    .control-item > button:hover {
+      background-color: #4cd137;
+    }
+
+    /* Status text */
     #hotwordStatus {
+      margin-top: 0.5rem;
       font-size: 0.9rem;
       color: #e1b12c;
       font-weight: bold;
+      text-align: center;
     }
 
+    /* Mic info and volume */
+    .mic-info {
+      font-size: 0.9rem;
+      color: #353b48;
+      margin-top: 1rem;
+    }
+    .mic-info .label {
+      font-weight: bold;
+    }
     #vol {
-      width: 300px;
+      width: 100%;
+      max-width: 500px;
       height: 20px;
-      margin-bottom: 1rem;
+      margin-top: 0.5rem;
       appearance: none;
     }
-
     #vol::-webkit-progress-bar {
       background-color: #dcdde1;
       border-radius: 8px;
     }
-
     #vol::-webkit-progress-value {
       background-color: #44bd32;
       border-radius: 8px;
@@ -70,90 +119,40 @@
       transition: width 0.2s;
     }
 
-    .output {
-      width: 90%;
-      max-width: 800px;
-      text-align: left;
-      margin-top: 2rem;
-      background: white;
-      padding: 1rem 1.5rem;
-      border-radius: 10px;
-      box-shadow: 0 0 10px rgba(0,0,0,0.1);
-      display: flex;
-      flex-direction: column;
-    }
+    /* Transcript */
     .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 */
+      max-height: 300px;
+      overflow-y: auto;
+      white-space: pre-wrap;
       font-size: 1.1rem;
       color: #353b48;
     }
-
-    .label {
-      font-weight: bold;
-      color: #718093;
-    }
-
-    .controls {
-      display: flex;
-      gap: 1rem;
-      margin-bottom: 1rem;
-      align-items: center;
-    }
-    .controls label {
-      font-weight: bold;
-      color: #2f3640;
-    }
-    .controls select,
-    .controls input[type="range"] {
-      width: 150px;
-    }
-    .controls textarea {
-      padding: 0.3rem;
-      border-radius: 5px;
-      border: 1px solid #dcdde1;
-      background: white;
-      font-size: 1rem;
-    }
-    .controls textarea {
-      flex: 1;
-      resize: vertical;
-      min-height: 4rem;
-    }
-
-    .model-info {
-      margin-bottom: 1rem;
-      font-size: 0.9rem;
-      color: #353b48;
-    }
-    .model-info span {
-      font-weight: bold;
-    }
-
-    .mic-info {
-      margin-bottom: 1rem;
-      font-size: 0.9rem;
-      color: #353b48;
+    .transcript-container .final {
+      color: green;
+      display: inline;
+      margin-right: 0.5em;
     }
-    .mic-info .label {
-      margin-right: 0.25rem;
+    .transcript-container .interim {
+      color: red;
+      display: inline;
     }
   </style>
 </head>
 <body>
-  <h1>🎤 Speak into your microphone</h1>
-
-  <div class="controls">
-    <label for="modelSelect">Model:</label>
-    <select id="modelSelect">
-      <option value="csukuangfj/k2fsa-zipformer-bilingual-zh-en-t">k2fsa-small-bilingual-zh-en</option>
+  <h1>🎤 Speak into Your Microphone</h1>
+
+  <section class="section--settings">
+    <h2>Recognition Settings</h2>
+    <div class="controls-grid">
+      <div class="control-item">
+        <label for="modelSelect">Model</label>
+        <select id="modelSelect">
+          <option value="csukuangfj/k2fsa-zipformer-bilingual-zh-en-t">k2fsa-small-bilingual-zh-en</option>
       <option value="pfluo/k2fsa-zipformer-chinese-english-mixed">k2fsa-chinese-english-mixed</option>
       <option value="k2-fsa/sherpa-onnx-streaming-zipformer-korean-2024-06-16">sherpa-onnx-zipformer-korean</option>
       <option value="k2-fsa/sherpa-onnx-streaming-zipformer-multi-zh-hans-2023-12-12">zipformer-multi-zh-hans</option>
@@ -166,61 +165,73 @@
       <option value="csukuangfj/sherpa-onnx-streaming-zipformer-zh-14M-2023-02-23">zipformer-zh-14M</option>
       <option value="csukuangfj/sherpa-onnx-streaming-zipformer-en-20M-2023-02-17">zipformer-en-20M</option>
       <option value="csukuangfj/sherpa-onnx-streaming-zipformer-ar_en_id_ja_ru_th_vi_zh-2025-02-10">zipformer-ar_en_id_ja_ru_th_vi_zh</option>
-    </select>
-
-    <label for="precisionSelect">Precision:</label>
-    <select id="precisionSelect">
-      <option value="fp32">FP32</option>
-      <option value="int8">INT8</option>
-    </select>
-  </div>
-
-  <div class="model-info" id="modelInfo">
-    Languages: <span id="modelLangs"></span> | Size: <span id="modelSize"></span> MB
-  </div>
-
-  <div class="controls">
-    <!-- Hotwords List Input -->
-    <label for="hotwordsList">Hotwords:</label>
-    <textarea id="hotwordsList" placeholder="Enter one hotword per line"></textarea>
-    <!-- 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>
-
-  <!-- ← NEW indicator showing whether biasing is ON or OFF -->
-  <div class="controls">
-    <span id="hotwordStatus">Hotword Bias: Off</span>
-  </div>
-
-  <div class="controls">
-    <!-- ⬇️ INSERT START: Endpoint Detection Controls ⬇️ -->
-    <label for="epRule1">Rule 1 (silence ≥ s):</label>
-    <input type="number" id="epRule1" step="0.1" value="2.4">
-
-    <label for="epRule2">Rule 2 (silence ≥ s):</label>
-    <input type="number" id="epRule2" step="0.1" value="1.2">
-
-    <label for="epRule3">Rule 3 (min utterance ms):</label>
-    <input type="number" id="epRule3" step="50" value="300">
-
-    <button id="applyEndpointConfig">Apply Endpoint Config</button>
-    <!-- ⬆️ INSERT END: Endpoint Detection Controls ⬆️ -->
-  </div>
-
-  <div class="mic-info">
-    <span class="label">Microphone:</span> <span id="micName">Detecting...</span><br>
-    <span class="label">Sample Rate:</span> <span id="sampleRate">-</span> Hz
-  </div>
-
-  <progress id="vol" max="1" value="0"></progress>
-
-  <div class="output">
-    <div><span class="label">Transcript:</span></div>
-    <div id="transcript" class="transcript-container">...</div>
-  </div>
+        </select>
+      </div>
+      <div class="control-item">
+        <label for="precisionSelect">Precision</label>
+        <select id="precisionSelect">
+          <option value="fp32">FP32</option>
+          <option value="int8">INT8</option>
+        </select>
+      </div>
+    </div>
+    <div class="model-info">
+      Languages: <span id="modelLangs"></span> | Size: <span id="modelSize"></span> MB
+    </div>
+  </section>
+
+  <section class="section--hotwords">
+    <h2>Hotword Settings</h2>
+    <div class="controls-grid">
+      <div class="control-item">
+        <label for="hotwordsList">Hotwords</label>
+        <textarea id="hotwordsList" placeholder="One per line"></textarea>
+      </div>
+      <div class="control-item">
+        <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" />
+      </div>
+      <div class="control-item">
+        <button id="applyHotwords">Apply Hotwords</button>
+      </div>
+    </div>
+    <div id="hotwordStatus">Hotword Bias: Off</div>
+  </section>
+
+  <section class="section--endpoint">
+    <h2>Endpoint Detection</h2>
+    <div class="controls-grid">
+      <div class="control-item">
+        <label for="epRule1">Rule 1 (silence ≥ s)</label>
+        <input type="number" id="epRule1" step="0.1" value="2.4" />
+      </div>
+      <div class="control-item">
+        <label for="epRule2">Rule 2 (silence ≥ s)</label>
+        <input type="number" id="epRule2" step="0.1" value="1.2" />
+      </div>
+      <div class="control-item">
+        <label for="epRule3">Rule 3 (min utt ms)</label>
+        <input type="number" id="epRule3" step="50" value="300" />
+      </div>
+      <div class="control-item">
+        <button id="applyEndpointConfig">Apply Endpoint Config</button>
+      </div>
+    </div>
+  </section>
+
+  <section class="section--mic">
+    <h2>Microphone</h2>
+    <div class="mic-info">
+      <span class="label">Device:</span> <span id="micName">Detecting…</span><br>
+      <span class="label">Sample Rate:</span> <span id="sampleRate">-</span> Hz
+    </div>
+    <progress id="vol" max="1" value="0"></progress>
+  </section>
+
+  <section class="section--transcript">
+    <h2>Transcript</h2>
+    <div id="transcript" class="transcript-container">…</div>
+  </section>
 
   <script>
     const MODEL_METADATA = {