UI: Major overhaul with structured layout and premium styling

app.py

@@ -2,6 +2,7 @@ import gradio as gr
 import pandas as pd
 import os
 import time
+import json
 from src.vector_db import UnifiedQdrant
 from src.router import LearnedRouter
 from src.comparison import ComparisonEngine
@@ -11,10 +12,9 @@ from config import COLLECTION_NAME, NUM_CLUSTERS, FRESHNESS_SHARD_ID, MRL_DIMS
 print("Initializing dashVectorspace App...")
 
 # 1. Initialize DB
-# Note: In a real HF Space, secrets are in os.environ
 db = UnifiedQdrant(
     collection_name=COLLECTION_NAME,
-    vector_size=384, # Assuming MiniLM for demo
+    vector_size=384,
     num_clusters=NUM_CLUSTERS,
     freshness_shard_id=FRESHNESS_SHARD_ID
 )
@@ -27,11 +27,7 @@ if os.path.exists(ROUTER_PATH):
 else:
     print("WARNING: Router model not found. Creating a DUMMY router for demo UI.")
     router = LearnedRouter(model_type="lightgbm", n_clusters=NUM_CLUSTERS, mrl_dims=MRL_DIMS)
-    # We can't really predict without training, but let's mock it or fail gracefully.
-    # For the UI to load, we need an object.
-    # If we try to predict, it will crash if not trained.
-    # Let's mock the predict method if not trained.
-    router.predict = lambda x: (0, 0.99) # Mock prediction: Cluster 0, High Confidence
+    router.predict = lambda x: (0, 0.99)
 
 # 3. Initialize Engine
 engine = ComparisonEngine(db, router, embedding_model_name="minilm")
@@ -41,86 +37,135 @@ def run_comparison(query):
     if not query:
         return "Please enter a query.", None, None, None, None
 
-    # Run Direct Search
     res_direct = engine.direct_search(query)
-    
-    # Run xVector Search
     res_xvector = engine.xvector_search(query)
     
-    # Format Results
     def format_results(res_dict):
         points = res_dict["results"]
-        text_res = ""
+        html = "<div style='display: flex; flex-direction: column; gap: 10px;'>"
         for p in points:
-            # Payload might be dict or object depending on client version/mock
             payload = p.payload
             text = payload.get("text", "No text") if payload else "No text"
             score = p.score
-            text_res += f"- [{score:.4f}] {text[:100]}...\n"
-        return text_res
+            # Card style for results
+            html += f"""
+            <div style="padding: 10px; border-radius: 8px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);">
+                <div style="font-size: 0.8em; color: #aaa; margin-bottom: 4px;">Score: {score:.4f}</div>
+                <div style="font-size: 0.95em;">{text[:200]}...</div>
+            </div>
+            """
+        html += "</div>"
+        return html
 
     out_direct = format_results(res_direct)
     out_xvector = format_results(res_xvector)
     
-    # Metrics
-    metrics_df = pd.DataFrame({
-        "Metric": ["Latency (ms)", "Shards Searched"],
-        "Brute Force": [res_direct["latency_ms"], res_direct["shards_searched"]],
-        "xVector": [res_xvector["latency_ms"], res_xvector["shards_searched"]]
-    })
+    # Metrics for JSON
+    metrics_data = {
+        "Brute Force": {
+            "Latency": f"{res_direct['latency_ms']:.2f} ms",
+            "Shards Searched": res_direct['shards_searched']
+        },
+        "xVector": {
+            "Latency": f"{res_xvector['latency_ms']:.2f} ms",
+            "Shards Searched": res_xvector['shards_searched'],
+            "Mode": res_xvector['mode']
+        }
+    }
     
-    # Compute Savings
+    # Savings
     savings = (1 - (res_xvector["shards_searched"] / res_direct["shards_searched"])) * 100
-    savings_text = f"Compute Savings: {savings:.1f}%"
+    savings_html = f"""
+    <div style="text-align: center; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; color: white;">
+        <div style="font-size: 1.2em; opacity: 0.9;">Compute Savings</div>
+        <div style="font-size: 3em; font-weight: bold;">{savings:.1f}%</div>
+        <div style="font-size: 0.9em; opacity: 0.8;">{res_xvector['shards_searched']} shards vs {res_direct['shards_searched']}</div>
+    </div>
+    """
     
     # Telemetry
-    telemetry = f"""
-    **Search Mode:** {res_xvector['mode']}
-    **Router Confidence:** {res_xvector.get('confidence', 0):.4f}
-    **Target Cluster:** {res_xvector.get('target_cluster', 'N/A')}
-    **Shards Scanned:** {res_xvector['shards_searched']} vs {res_direct['shards_searched']}
-    """
+    telemetry_data = {
+        "Router Confidence": f"{res_xvector.get('confidence', 0):.4f}",
+        "Target Cluster": int(res_xvector.get('target_cluster', -1)),
+        "Search Mode": res_xvector['mode']
+    }
     
-    return out_direct, out_xvector, metrics_df, savings_text, telemetry
+    return out_direct, out_xvector, metrics_data, savings_html, telemetry_data
+
+# --- Custom CSS ---
+custom_css = """
+body { background-color: #0b0f19; color: #e0e0e0; }
+.gradio-container { font-family: 'Inter', sans-serif; }
+h1 { background: -webkit-linear-gradient(45deg, #667eea, #764ba2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
+.result-box { border: 1px solid #333; border-radius: 8px; padding: 10px; }
+"""
 
 # --- Gradio Layout ---
-with gr.Blocks(title="dashVectorspace: Learned Hybrid Retrieval", theme=gr.themes.Soft()) as demo:
-    gr.Markdown("# 🚀 dashVectorspace: Learned Hybrid Retrieval Engine")
-    gr.Markdown("Comparing **Brute Force Vector Search** vs **xVector (Learned Router + Custom Sharding)**.")
+with gr.Blocks(title="dashVectorspace", theme=gr.themes.Soft(primary_hue="indigo", secondary_hue="slate"), css=custom_css) as demo:
     
-    with gr.Row():
-        query_input = gr.Textbox(label="Enter your query", placeholder="e.g., What is the impact of AI on healthcare?", lines=2)
-        submit_btn = gr.Button("🚀 Run Comparison", variant="primary")
-    
-    with gr.Row():
-        with gr.Column(scale=1):
-            gr.Markdown("### 🐢 Brute Force (Standard)")
-            out_baseline = gr.Textbox(label="Results", lines=10)
+    with gr.Column(elem_id="main-container"):
+        # Header
+        gr.HTML("""
+        <div style="text-align: center; margin-bottom: 30px;">
+            <h1 style="font-size: 3em; margin-bottom: 10px;">🚀 dashVectorspace</h1>
+            <p style="font-size: 1.2em; color: #888;">Production-Grade Learned Hybrid Retrieval Engine</p>
+        </div>
+        """)
         
-        with gr.Column(scale=1):
-            gr.Markdown("### ⚡ xVector (Optimized)")
-            out_optimized = gr.Textbox(label="Results", lines=10)
+        # Input Section
+        with gr.Row(variant="panel"):
+            with gr.Column(scale=4):
+                query_input = gr.Textbox(
+                    label="Search Query", 
+                    placeholder="Ask a complex question (e.g., 'How does AI impact healthcare efficiency?')", 
+                    lines=1,
+                    show_label=False,
+                    container=False,
+                    scale=4
+                )
+            with gr.Column(scale=1):
+                submit_btn = gr.Button("🔍 Search", variant="primary", scale=1)
+
+        # Results Section
+        with gr.Row():
+            # Left: Brute Force
+            with gr.Column():
+                gr.Markdown("### 🐢 Brute Force (Baseline)")
+                out_baseline = gr.HTML(label="Results")
             
-    with gr.Row():
-        with gr.Column():
-            metrics_plot = gr.BarPlot(
-                x="Metric",
-                y="Brute Force",
-                title="Performance Comparison",
-                tooltip=["Metric", "Brute Force", "xVector"],
-                # Gradio BarPlot expects long format usually, but let's try simple DF display first if BarPlot is complex
-            )
-            # Actually, let's use a simple DataFrame for metrics first, it's cleaner.
-            metrics_table = gr.Dataframe(label="Performance Metrics")
+            # Right: xVector
+            with gr.Column():
+                gr.Markdown("### ⚡ xVector (Optimized)")
+                out_optimized = gr.HTML(label="Results")
+
+        gr.Markdown("---")
+
+        # Metrics Section
+        with gr.Row():
+            with gr.Column(scale=1):
+                gr.Markdown("### 📊 Performance Metrics")
+                metrics_display = gr.JSON(label="Detailed Metrics")
             
-        with gr.Column():
-            savings_display = gr.Markdown("### Compute Savings: --%")
-            telemetry_display = gr.Markdown("### Telemetry\nWaiting for query...")
+            with gr.Column(scale=1):
+                gr.Markdown("### 💰 Efficiency")
+                savings_display = gr.HTML()
+        
+        # Telemetry (Accordion)
+        with gr.Accordion("🛠️ System Telemetry (Debug Info)", open=False):
+            telemetry_display = gr.JSON(label="Router Decisions")
 
+    # Event Listener
     submit_btn.click(
         run_comparison, 
         inputs=[query_input], 
-        outputs=[out_baseline, out_optimized, metrics_table, savings_display, telemetry_display]
+        outputs=[out_baseline, out_optimized, metrics_display, savings_display, telemetry_display]
+    )
+    
+    # Allow Enter key to submit
+    query_input.submit(
+        run_comparison, 
+        inputs=[query_input], 
+        outputs=[out_baseline, out_optimized, metrics_display, savings_display, telemetry_display]
     )
 
 if __name__ == "__main__":