UI: Fix header, logo, layout and add debug logs

app.py

@@ -27,6 +27,8 @@ except Exception as e:
 
 # --- HTML Templates (Extracted from dashVector_benchmark.html) ---
 
+# --- HTML Templates (Extracted from dashVector_benchmark.html) ---
+
 HEAD_HTML = """
 <script src="https://cdn.tailwindcss.com"></script>
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
@@ -52,12 +54,21 @@ HEAD_HTML = """
         padding: 0.75rem 1rem !important;
         font-size: 1rem !important;
         box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
+        height: 50px !important; /* Fixed height for alignment */
     }
     #custom-input textarea:focus {
         outline: 2px solid #3b82f6 !important; /* blue-500 */
         border-color: #3b82f6 !important;
     }
     
+    /* Search Bar Layout Fix */
+    .search-row {
+        display: flex !important;
+        flex-direction: row !important;
+        align-items: flex-start !important; /* Align top to handle potential textarea growth */
+        gap: 1rem !important;
+    }
+    
     /* Loader Overlay */
     .loader-overlay {
         position: absolute; inset: 0; background: rgba(255,255,255,0.8); 
@@ -77,20 +88,15 @@ NAVBAR_HTML = """
 <header class="bg-white border-b border-slate-200 sticky top-0 z-40 shadow-sm w-full">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
         <div class="flex items-center gap-2">
-            <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center text-white font-bold text-lg shadow-sm">
-                d
-            </div>
-            <h1 class="text-xl font-bold tracking-tight text-slate-900">dashVector <span class="text-slate-400 font-normal text-sm ml-1">Search Benchmark</span></h1>
+            <!-- User Logo -->
+            <img src="file/logo.png" alt="dashVector Logo" class="h-8 w-auto" />
+            <h1 class="text-xl font-bold tracking-tight text-slate-900">dashVector</h1>
         </div>
         <div class="flex items-center gap-4">
             <div class="hidden md:flex items-center gap-1.5 px-3 py-1 bg-slate-100 rounded-full border border-slate-200">
                 <span class="material-symbols-outlined text-slate-500 text-sm">database</span>
                 <span class="text-xs font-medium text-slate-600">Dataset: <span class="font-bold text-slate-800">MS Marco</span></span>
             </div>
-            <div class="hidden md:flex items-center gap-1.5 px-3 py-1 bg-orange-50 rounded-full border border-orange-100">
-                <span class="material-symbols-outlined text-orange-600 text-sm">bolt</span>
-                <span class="text-xs font-medium text-orange-800">Powered by Qdrant</span>
-            </div>
         </div>
     </div>
 </header>
@@ -233,6 +239,8 @@ def generate_table_html(rows):
     """
 
 def run_benchmark(query):
+    print(f"DEBUG: Starting benchmark for query: {query}")
+    
     # 1. Yield Loader
     yield LOADER_HTML
     
@@ -241,19 +249,26 @@ def run_benchmark(query):
     
     # Generate Embedding
     try:
+        print("DEBUG: Generating embedding...")
         query_vec = get_embedding(query)
+        print("DEBUG: Embedding generated.")
     except Exception as e:
-        print(f"Embedding failed: {e}")
+        print(f"ERROR: Embedding failed: {e}")
         query_vec = [0.0] * VECTOR_SIZE # Dummy
 
     # Router Prediction
     if router:
+        print("DEBUG: Predicting cluster...")
         target_cluster, confidence = router.predict(query_vec)
+        print(f"DEBUG: Predicted cluster {target_cluster} with confidence {confidence}")
     else:
+        print("DEBUG: No router loaded, using mock.")
         target_cluster, confidence = 0, 0.95 # Mock
         
     # Search
+    print("DEBUG: Searching Qdrant...")
     results, mode = vector_db.search_hybrid(query_vec, target_cluster, confidence)
+    print(f"DEBUG: Search complete. Found {len(results)} results.")
     
     end_total = time.time()
     latency_ms = (end_total - start_total) * 1000
@@ -306,6 +321,7 @@ def run_benchmark(query):
     
     all_rows = [live_row] + ref_rows
     
+    print("DEBUG: Yielding final HTML.")
     # 4. Yield Final HTML
     yield generate_table_html(all_rows)
 
@@ -318,7 +334,9 @@ with gr.Blocks(theme=gr.themes.Base(), css=None, head=HEAD_HTML) as demo:
         # Search Section
         with gr.Group(elem_classes="bg-white p-6 rounded-2xl shadow-sm border border-slate-200 mb-6"):
             gr.HTML('<label class="block text-sm font-medium text-slate-700 mb-2">Evaluate Search Architecture</label>')
-            with gr.Row():
+            
+            # Use a Row with custom CSS class for Flexbox layout
+            with gr.Row(elem_classes="search-row"):
                 query_input = gr.Textbox(
                     placeholder="Enter a benchmark query (e.g., 'climate change impact')...",
                     show_label=False,
@@ -330,7 +348,7 @@ with gr.Blocks(theme=gr.themes.Base(), css=None, head=HEAD_HTML) as demo:
                     "Run Benchmark", 
                     variant="primary", 
                     scale=1,
-                    elem_classes="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-xl shadow-md transition-all"
+                    elem_classes="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-xl shadow-md transition-all h-[50px]" # Fixed height to match input
                 )
         
         # Results Section