Update templates/index.html

templates/index.html

@@ -20,12 +20,15 @@
     </header>
 
     <div id="configPanel" class="bg1 rounded p-4 mb-4 hidden transition-all duration-500 overflow-hidden max-h-full">
-      <h2 class="text-lg font-semibold mb-2">Model Selection</h2>
+
+      <h2 class="text-lg font-semibold mb-4">Model Selection</h2> <!-- Moved up and margin adjusted -->
+
       <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
 
+        <!-- Model Zone A -->
         <div class="model-zone">
           <label class="block mb-1 model-label">LLM-A</label>
-          <div class="model-name hidden mb-1 font-semibold"></div> <!-- inserted -->
+          <div class="model-name hidden mb-1 font-semibold"></div>
           <div id="modelA" class="model-dropdown relative bg-statusline1 text-fg0 rounded p-2 cursor-pointer select-none">
             <span class="selected block">Select a model</span>
             <div class="options hidden absolute left-0 right-0 mt-2 bg-[#282828] rounded shadow-lg z-10 max-h-60 overflow-y-auto"></div>
@@ -33,9 +36,10 @@
           <div id="loaderA" class="loader hidden mt-2 flex justify-center"></div>
         </div>
 
+        <!-- Model Zone B -->
         <div class="model-zone">
           <label class="block mb-1 model-label">LLM-B</label>
-          <div class="model-name hidden mb-1 font-semibold"></div> <!-- inserted -->
+          <div class="model-name hidden mb-1 font-semibold"></div>
           <div id="modelB" class="model-dropdown relative bg-statusline1 text-fg0 rounded p-2 cursor-pointer select-none">
             <span class="selected block">Select a model</span>
             <div class="options hidden absolute left-0 right-0 mt-2 bg-[#282828] rounded shadow-lg z-10 max-h-60 overflow-y-auto"></div>
@@ -43,9 +47,10 @@
           <div id="loaderB" class="loader hidden mt-2 flex justify-center"></div>
         </div>
 
+        <!-- Model Zone C -->
         <div class="model-zone">
           <label class="block mb-1 model-label">LLM-C</label>
-          <div class="model-name hidden mb-1 font-semibold"></div> <!-- inserted -->
+          <div class="model-name hidden mb-1 font-semibold"></div>
           <div id="modelC" class="model-dropdown relative bg-statusline1 text-fg0 rounded p-2 cursor-pointer select-none">
             <span class="selected block">Select a model</span>
             <div class="options hidden absolute left-0 right-0 mt-2 bg-[#282828] rounded shadow-lg z-10 max-h-60 overflow-y-auto"></div>
@@ -53,9 +58,10 @@
           <div id="loaderC" class="loader hidden mt-2 flex justify-center"></div>
         </div>
 
+        <!-- Model Zone Aggregator -->
         <div class="model-zone">
           <label class="block mb-1 model-label">LLM-D (Aggregator)</label>
-          <div class="model-name hidden mb-1 font-semibold"></div> <!-- inserted -->
+          <div class="model-name hidden mb-1 font-semibold"></div>
           <div id="aggregator" class="model-dropdown relative bg-statusline1 text-fg0 rounded p-2 cursor-pointer select-none">
             <span class="selected block">Select a model</span>
             <div class="options hidden absolute left-0 right-0 mt-2 bg-[#282828] rounded shadow-lg z-10 max-h-60 overflow-y-auto"></div>