Update app.py

app.py

@@ -6,7 +6,8 @@
 # - Stable categoricals ("NA"); no over-strict completeness gate
 # - Fixed [[PAGE=...]] regex
 # - NEW: Lightweight instrumentation (JSONL logs per RAG turn)
-# - UPDATED UI COLORS: Dark-blue theme for tabs + Evaluate k-slider
+# - UPDATED THEME: Dark-blue tabs + Evaluate tab + k-slider styling
+# - OPTIONAL JS: Adds .eval-active class when Evaluate tab is selected
 # ================================================================
 
 # ---------------------- Runtime flags (HF-safe) ----------------------
@@ -18,7 +19,7 @@ os.environ["TOKENIZERS_PARALLELISM"] = "false"
 # ------------------------------- Imports ------------------------------
 import re, joblib, warnings, json, traceback, time, uuid, subprocess, sys
 from pathlib import Path
-from typing import List, Dict, Any, Optional, Tuple
+from typing import List, Dict, Any
 
 import numpy as np
 import pandas as pd
@@ -741,7 +742,7 @@ def rag_reply(
         "retrieval": {"hits": retr_list, "latency_ms_retriever": latency_ms_retriever},
         "output": {
             "final_answer": final,
-            "used_sentences": [{"sent": s["sent"], "doc": s["doc"], "page": s["page"]} for s in selected]
+            "used_sentences": [{"sent": s['sent'], "doc": s['doc'], "page": s['page']} for s in selected]
         },
         "latency_ms_total": total_ms,
         "latency_ms_llm": llm_latency_ms,
@@ -819,7 +820,7 @@ input[type="checkbox"], .gr-checkbox, .gr-checkbox > * { pointer-events: auto !i
     color: #eef6ff !important;
 }
 
-/* NEW — Evaluate tab dark/high-contrast styling */
+/* Evaluate tab dark/high-contrast styling */
 #eval-tab .block, #eval-tab .group, #eval-tab .accordion {
     background: linear-gradient(165deg, #0a0f1f 0%, #0d1a31 60%, #0a1c2e 100%) !important;
     border-radius: 12px;
@@ -851,7 +852,7 @@ input[type="checkbox"], .gr-checkbox, .gr-checkbox > * { pointer-events: auto !i
 /* Predictor output emphasis */
 #pred-out .wrap { font-size: 20px; font-weight: 700; color: #ecfdf5; }
 
-/* === (ADDED) Tab header: darker blue theme for all tabs === */
+/* Tab header: darker blue theme for all tabs */
 .gradio-container .tab-nav button[role="tab"] {
   background: #0b1b34 !important;
   color: #cfe6ff !important;
@@ -863,7 +864,7 @@ input[type="checkbox"], .gr-checkbox, .gr-checkbox > * { pointer-events: auto !i
   border-color: #3b82f6 !important;
 }
 
-/* === (ADDED) Evaluate tab: enforce dark-blue text for labels/marks === */
+/* Evaluate tab: enforce dark-blue text for labels/marks */
 #eval-tab .label, 
 #eval-tab label, 
 #eval-tab .gr-slider .label,
@@ -872,10 +873,10 @@ input[type="checkbox"], .gr-checkbox, .gr-checkbox > * { pointer-events: auto !i
 #eval-tab .markdown, 
 #eval-tab p, 
 #eval-tab span {
-  color: #cfe6ff !important; /* soft, not pure white */
+  color: #cfe6ff !important; /* softer than pure white */
 }
 
-/* === (ADDED) Target the specific k-slider label strongly === */
+/* Target the specific k-slider label strongly */
 #k-slider .label, 
 #k-slider label, 
 #k-slider .wrap .label {
@@ -883,7 +884,7 @@ input[type="checkbox"], .gr-checkbox, .gr-checkbox > * { pointer-events: auto !i
   text-shadow: 0 1px 0 rgba(0,0,0,0.35);
 }
 
-/* === (ADDED) Slider track/thumb (dark blue gradient + blue thumb) === */
+/* Slider track/thumb (dark blue gradient + blue thumb) */
 #eval-tab input[type="range"] { 
   accent-color: #3b82f6 !important; /* fallback */
 }
@@ -916,6 +917,15 @@ input[type="checkbox"], .gr-checkbox, .gr-checkbox > * { pointer-events: auto !i
   border: 1px solid #60a5fa;
   border-radius: 50%;
 }
+
+/* When Evaluate tab is active and JS has added .eval-active, bump contrast subtly */
+#eval-tab.eval-active .block, 
+#eval-tab.eval-active .group {
+  border-color: #60a5fa !important;
+}
+#eval-tab.eval-active .label {
+  color: #e6f2ff !important;
+}
 """
 
 theme = gr.themes.Soft(
@@ -933,6 +943,34 @@ theme = gr.themes.Soft(
 )
 
 with gr.Blocks(css=CSS, theme=theme, fill_height=True) as demo:
+    # Optional: JS to toggle .eval-active when Evaluate tab selected
+    gr.HTML("""
+    <script>
+    (function(){
+      const applyEvalActive = () => {
+        const selected = document.querySelector('.tab-nav button[role="tab"][aria-selected="true"]');
+        const evalPanel = document.querySelector('#eval-tab');
+        if (!evalPanel) return;
+        if (selected && /Evaluate/.test(selected.textContent)) {
+          evalPanel.classList.add('eval-active');
+        } else {
+          evalPanel.classList.remove('eval-active');
+        }
+      };
+      // After tab clicks
+      document.addEventListener('click', function(e) {
+        if (e.target && e.target.getAttribute('role') === 'tab') {
+          setTimeout(applyEvalActive, 50);
+        }
+      }, true);
+      // On initial load
+      document.addEventListener('DOMContentLoaded', applyEvalActive);
+      // Fallback timer in case of hydration delays
+      setTimeout(applyEvalActive, 300);
+    })();
+    </script>
+    """)
+    
     gr.Markdown(
         "<h1 style='margin:0'>Self-Sensing Concrete Assistant</h1>"
         "<p style='opacity:.9'>"
@@ -1054,7 +1092,7 @@ with gr.Blocks(css=CSS, theme=theme, fill_height=True) as demo:
             gr.Markdown("Upload your **gold.csv** and compute metrics against the app logs.")
             with gr.Row():
                 gold_file = gr.File(label="gold.csv", file_types=[".csv"], interactive=True)
-                # (ADDED elem_id to target k slider with CSS)
+                # Add elem_id so CSS can target this slider
                 k_slider  = gr.Slider(3, 12, value=8, step=1, label="k for Hit/Recall/nDCG", elem_id="k-slider")
             with gr.Row():
                 btn_eval = gr.Button("Compute Metrics", variant="primary")