Refactor control group layout in index.html for improved styling and organization of clustering options and search mode selection.

index.html

@@ -46,6 +46,23 @@
             background: #4caf50;
             transition: width 0.2s;
         }
+
+        .control-group {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            gap: 10px;
+            margin-bottom: 10px;
+        }
+
+        .control-group label {
+            margin: 0;
+        }
+
+        .control-group input,
+        .control-group select {
+            margin-left: 5px;
+        }
     </style>
 </head>
 
@@ -56,29 +73,26 @@
         import { sentences } from './sentences.js';
         document.getElementById("input").value = sentences.join("\n");
     </script>
-    <label for="kmeans-k" style="margin-left:10px;">Clusters:</label>
-    <input id="kmeans-k" type="number" min="2" max="100" value="7" style="width:60px;">
-    <label for="kmeans-beta" style="margin-left:10px;">Beta (Larger β forces clusters toward equal sizes.):</label>
-    <input id="kmeans-beta" type="number" min="0" max="10" step="0.000001" value="0.000005" style="width:80px;">
-    <label for="kmeans-type" style="margin-left:10px;">Clustering Type:</label>
-    <select id="kmeans-type" style="width:180px;">
-        <option value="balancedKMeans">Balanced K-Means</option>
-        <option value="kmeans">K-Means (standard)</option>
-    </select>
-    <button id="kmeans-btn">Clustering</button>
-    <button id="naming-btn">Generate Name</button>
-    <button id="clusterplot-btn">Cluster Plot</button>
-
-    <!-- Add this dropdown for search cluster sorting mode -->
-    <div style="margin-bottom: 10px;">
-      <label for="search-sort-mode">Search Cluster Sort Mode:</label>
-      <select id="search-sort-mode">
+    <div class="control-group">
+        <label for="kmeans-k">Clusters:</label>
+        <input id="kmeans-k" type="number" min="2" max="100" value="7" style="width:60px;">
+        <label for="kmeans-beta">Beta (Larger β forces clusters toward equal sizes.):</label>
+        <input id="kmeans-beta" type="number" min="0" max="10" step="0.000001" value="0.000005" style="width:80px;">
+        <label for="kmeans-type">Clustering Type:</label>
+        <select id="kmeans-type" style="width:180px;">
+            <option value="balancedKMeans">Balanced K-Means</option>
+            <option value="kmeans">K-Means (standard)</option>
+        </select>
+        <button id="kmeans-btn">Clustering</button>
+        <button id="naming-btn">Generate Name</button>
+        <button id="clusterplot-btn">Cluster Plot</button>
+    </div>
+    <label for="search-sort-mode">Search Cluster Sort Mode:</label>
+    <select id="search-sort-mode">
         <option value="group">By Group Similarity</option>
         <option value="line">By Max Search Line</option>
-      </select>
-    </div>
-
-    <button id="heatmap-btn">Similarity</button>
+    </select>
+    <button id="heatmap-btn">Similarity Search</button>
     <div id="progress-bar">
         <div id="progress-bar-inner"></div>
     </div>