Update app.py

app.py

@@ -7,6 +7,7 @@
 # - Fixed [[PAGE=...]] regex
 # - NEW: Lightweight instrumentation (JSONL logs per RAG turn)
 # - UPDATED THEME: Dark-blue tabs + Evaluate tab + k-slider styling
+# - PATCH: Per-question/aggregate File + JSON outputs now dark-themed via elem_id hooks
 # - OPTIONAL JS: Adds .eval-active class when Evaluate tab is selected
 # ================================================================
 
@@ -19,7 +20,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
+from typing import List, Dict, Any, Optional
 
 import numpy as np
 import pandas as pd
@@ -918,6 +919,67 @@ input[type="checkbox"], .gr-checkbox, .gr-checkbox > * { pointer-events: auto !i
   border-radius: 50%;
 }
 
+/* ======== PATCH: Style the File + JSON outputs by ID ======== */
+#perq-file, #agg-file {
+  background: rgba(8, 13, 26, 0.9) !important;
+  border: 1px solid #3b82f6 !important;
+  border-radius: 12px !important;
+  padding: 8px !important;
+}
+#perq-file * , #agg-file * { color: #dbeafe !important; }
+#perq-file a, #agg-file a {
+  background: #0e2a57 !important;
+  color: #e0f2fe !important;
+  border: 1px solid #60a5fa !important;
+  border-radius: 8px !important;
+  padding: 6px 10px !important;
+  text-decoration: none !important;
+}
+#perq-file a:hover, #agg-file a:hover {
+  background: #10356f !important;
+  border-color: #93c5fd !important;
+}
+/* File preview wrappers (covers multiple Gradio render modes) */
+#perq-file .file-preview, #agg-file .file-preview,
+#perq-file .wrap, #agg-file .wrap {
+  background: rgba(2, 6, 23, 0.85) !important;
+  border-radius: 10px !important;
+  border: 1px solid rgba(148,163,184,.3) !important;
+}
+
+/* JSON output: dark panel + readable text */
+#agg-json {
+  background: rgba(2, 6, 23, 0.85) !important;
+  border: 1px solid rgba(148,163,184,.35) !important;
+  border-radius: 12px !important;
+  padding: 8px !important;
+}
+#agg-json *, #agg-json .json, #agg-json .wrap { color: #e6f2ff !important; }
+#agg-json pre, #agg-json code {
+  background: rgba(4, 10, 24, 0.9) !important;
+  color: #e2e8f0 !important;
+  border: 1px solid rgba(148,163,184,.35) !important;
+  border-radius: 10px !important;
+}
+/* Tree/overflow modes */
+#agg-json [data-testid="json-tree"],
+#agg-json [role="tree"],
+#agg-json .overflow-auto {
+  background: rgba(4, 10, 24, 0.9) !important;
+  color: #e6f2ff !important;
+  border-radius: 10px !important;
+  border: 1px solid rgba(148,163,184,.35) !important;
+}
+
+/* Eval log markdown */
+#eval-log, #eval-log * { color: #cfe6ff !important; }
+#eval-log pre, #eval-log code {
+  background: rgba(2, 6, 23, 0.85) !important;
+  color: #e2e8f0 !important;
+  border: 1px solid rgba(148,163,184,.3) !important;
+  border-radius: 10px !important;
+}
+
 /* When Evaluate tab is active and JS has added .eval-active, bump contrast subtly */
 #eval-tab.eval-active .block, 
 #eval-tab.eval-active .group {
@@ -957,15 +1019,12 @@ with gr.Blocks(css=CSS, theme=theme, fill_height=True) as demo:
           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>
@@ -1092,15 +1151,14 @@ 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)
-                # 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")
             with gr.Row():
-                out_perq = gr.File(label="Per-question metrics (CSV)")
-                out_agg  = gr.File(label="Aggregate metrics (JSON)")
-            out_json = gr.JSON(label="Aggregate summary")
-            out_log  = gr.Markdown(label="Run log")
+                out_perq = gr.File(label="Per-question metrics (CSV)", elem_id="perq-file")
+                out_agg  = gr.File(label="Aggregate metrics (JSON)", elem_id="agg-file")
+            out_json = gr.JSON(label="Aggregate summary", elem_id="agg-json")
+            out_log  = gr.Markdown(label="Run log", elem_id="eval-log")
 
             def _run_eval_inproc(gold_path: str, k: int = 8):
                 import json as _json