UI: Single screen redesign with benchmarking table

app.py

@@ -2,7 +2,6 @@ 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
@@ -35,137 +34,120 @@ engine = ComparisonEngine(db, router, embedding_model_name="minilm")
 # --- UI Logic ---
 def run_comparison(query):
     if not query:
-        return "Please enter a query.", None, None, None, None
+        return None, None, "Please enter a query."
 
+    # Run Searches
     res_direct = engine.direct_search(query)
     res_xvector = engine.xvector_search(query)
     
-    def format_results(res_dict):
-        points = res_dict["results"]
-        html = "<div style='display: flex; flex-direction: column; gap: 10px;'>"
-        for p in points:
-            payload = p.payload
-            text = payload.get("text", "No text") if payload else "No text"
-            score = p.score
-            # 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 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']
-        }
-    }
+    # --- 1. Benchmarking Table Data ---
+    # Sketch Cols: Embedding Model | Router | dash Vector (Time, Shards) | Qdrant Search (Time, Shards)
+    # We will format this as a Pandas DataFrame for the gr.Dataframe component
     
-    # Savings
-    savings = (1 - (res_xvector["shards_searched"] / res_direct["shards_searched"])) * 100
-    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>
+    df = pd.DataFrame({
+        "Embedding Model": ["MiniLM-L6-v2"],
+        "Router": ["LightGBM"],
+        "dashVector (Optimized)": [f"{res_xvector['latency_ms']:.1f} ms | {res_xvector['shards_searched']} Shards"],
+        "Qdrant (Baseline)": [f"{res_direct['latency_ms']:.1f} ms | {res_direct['shards_searched']} Shards"],
+        "Savings": [f"{(1 - res_xvector['shards_searched']/res_direct['shards_searched'])*100:.1f}%"]
+    })
+
+    # --- 2. Search Results (Top 3) ---
+    # Just showing top result text to prove it works, as per sketch focus on table
+    def format_top_result(res_dict):
+        if not res_dict["results"]:
+            return "No results found."
+        top_res = res_dict["results"][0]
+        payload = top_res.payload
+        text = payload.get("text", "No text") if payload else "No text"
+        return f"Top Result: {text[:150]}..."
+
+    results_preview = f"""
+    <div style="display: flex; gap: 20px; margin-top: 10px;">
+        <div style="flex: 1; padding: 10px; background: rgba(255,255,255,0.05); border-radius: 8px;">
+            <strong>dashVector:</strong> {format_top_result(res_xvector)}
+        </div>
+        <div style="flex: 1; padding: 10px; background: rgba(255,255,255,0.05); border-radius: 8px;">
+            <strong>Qdrant:</strong> {format_top_result(res_direct)}
+        </div>
     </div>
     """
     
-    # Telemetry
-    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_data, savings_html, telemetry_data
+    return df, results_preview
 
-# --- Custom CSS ---
+# --- Custom CSS for Single Screen Layout ---
 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; }
+body { background-color: #0b0f19; color: #e0e0e0; overflow: hidden; }
+.gradio-container { max-width: 1200px !important; margin: 0 auto; height: 100vh; display: flex; flex-direction: column; justify-content: center; }
+h1 { font-size: 2.5em; margin-bottom: 0.2em; text-align: center; background: -webkit-linear-gradient(45deg, #667eea, #764ba2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
+.input-box textarea { background: #1a1f2e !important; border: 1px solid #333 !important; font-size: 1.2em; }
+.dataset-box { border: 1px solid #444; padding: 10px 20px; border-radius: 8px; text-align: center; font-weight: bold; background: #1a1f2e; display: inline-block; }
+.scope-box { margin-top: 20px; padding: 15px; border-left: 4px solid #667eea; background: rgba(102, 126, 234, 0.1); }
+.table-wrap { margin-top: 20px; }
+footer { display: none !important; }
 """
 
 # --- Gradio Layout ---
 with gr.Blocks(title="dashVectorspace", theme=gr.themes.Soft(primary_hue="indigo", secondary_hue="slate"), css=custom_css) as demo:
     
-    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>
-        """)
-        
-        # 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")
-            
-            # Right: xVector
-            with gr.Column():
-                gr.Markdown("### ⚡ xVector (Optimized)")
-                out_optimized = gr.HTML(label="Results")
+    # Title
+    gr.Markdown("# 🚀 dashVectorspace")
+    
+    # Search Section (Centered)
+    with gr.Row(elem_id="search-row"):
+        with gr.Column(scale=4):
+            query_input = gr.Textbox(
+                placeholder="Enter your search query here...", 
+                show_label=False, 
+                elem_classes="input-box",
+                lines=1
+            )
+        with gr.Column(scale=1):
+            submit_btn = gr.Button("Search", variant="primary", size="lg")
 
-        gr.Markdown("---")
+    # Benchmarking Table
+    gr.Markdown("### ⚡ Benchmarking Results (Live)")
+    results_table = gr.Dataframe(
+        headers=["Embedding Model", "Router", "dashVector (Optimized)", "Qdrant (Baseline)", "Savings"],
+        datatype=["str", "str", "str", "str", "str"],
+        interactive=False,
+        elem_classes="table-wrap"
+    )
+    
+    # Result Preview (Hidden initially, shown after search)
+    results_html = gr.HTML()
 
-        # Metrics Section
-        with gr.Row():
-            with gr.Column(scale=1):
-                gr.Markdown("### 📊 Performance Metrics")
-                metrics_display = gr.JSON(label="Detailed Metrics")
-            
-            with gr.Column(scale=1):
-                gr.Markdown("### 💰 Efficiency")
-                savings_display = gr.HTML()
+    # Footer Section: Dataset & Scope
+    with gr.Row(style="margin-top: 40px; align-items: center;"):
+        with gr.Column(scale=1):
+            gr.HTML("""
+            <div class="dataset-box">
+                Dataset: MS MARCO
+            </div>
+            """)
         
-        # Telemetry (Accordion)
-        with gr.Accordion("🛠️ System Telemetry (Debug Info)", open=False):
-            telemetry_display = gr.JSON(label="Router Decisions")
+        with gr.Column(scale=2):
+            gr.HTML("""
+            <div class="scope-box">
+                <strong>Project Scope:</strong>
+                <ul style="margin-top: 5px; padding-left: 20px;">
+                    <li><strong>Learned Routing:</strong> Predicts target clusters to reduce search space by 90%.</li>
+                    <li><strong>Custom Sharding:</strong> Explicit data partitioning for targeted retrieval.</li>
+                    <li><strong>Matryoshka Embeddings:</strong> Adaptive dimensionality for high-speed filtering.</li>
+                </ul>
+            </div>
+            """)
 
-    # Event Listener
+    # Event Listeners
     submit_btn.click(
         run_comparison, 
         inputs=[query_input], 
-        outputs=[out_baseline, out_optimized, metrics_display, savings_display, telemetry_display]
+        outputs=[results_table, results_html]
     )
-    
-    # Allow Enter key to submit
     query_input.submit(
         run_comparison, 
         inputs=[query_input], 
-        outputs=[out_baseline, out_optimized, metrics_display, savings_display, telemetry_display]
+        outputs=[results_table, results_html]
     )
 
 if __name__ == "__main__":