Font color visible

app.py

@@ -61,28 +61,33 @@ def _render_view(view, token_logprobs, semantic_result, answer):
 # Status banners
 # ---------------------------------------------------------------------------
 
-_STATUS_BASE = (
-    "display:flex; align-items:center; gap:10px; padding:8px 12px; "
-    "border-radius:6px; font-size:0.9em; color:{fg};"
-)
-_STATUS_COMPUTING = (
-    f"<div style='{_STATUS_BASE.format(fg='#5d4a00')} background:#fff8e1; border:1px solid #f0c040;'>"
-    "<span style='font-size:1.3em;'>⏳</span>"
-    "<span>Computing semantic entropy in the background — this may take 30–120 s. "
-    "Please wait, or view <strong>Token probability</strong> below.</span>"
-    "</div>"
+def _status_banner(icon, text, bg, border, fg):
+    # Set the color directly on the text span with !important so Gradio's theme
+    # CSS can't override it to a light color.
+    return (
+        f"<div style='display:flex; align-items:center; gap:10px; padding:8px 12px; "
+        f"border-radius:6px; font-size:0.95em; background:{bg}; border:1px solid {border};'>"
+        f"<span style='font-size:1.3em;'>{icon}</span>"
+        f"<span style='color:{fg} !important; font-weight:500;'>{text}</span>"
+        "</div>"
+    )
+
+
+_STATUS_COMPUTING = _status_banner(
+    "⏳",
+    "Computing semantic entropy in the background — this may take 30–120 s. "
+    "Please wait, or view <strong style='color:#3a2e00 !important;'>Token probability</strong> below.",
+    bg="#fff8e1", border="#e0a800", fg="#3a2e00",
 )
-_STATUS_READY = (
-    f"<div style='{_STATUS_BASE.format(fg='#14532d')} background:#e6f4ea; border:1px solid #34a853;'>"
-    "<span style='font-size:1.3em;'>✅</span>"
-    "<span>Semantic entropy ready — click <strong>Show probabilities</strong> to view.</span>"
-    "</div>"
+_STATUS_READY = _status_banner(
+    "✅",
+    "Semantic entropy ready — click <strong style='color:#0b3d1a !important;'>Show probabilities</strong> to view.",
+    bg="#e6f4ea", border="#2e7d32", fg="#0b3d1a",
 )
-_STATUS_FAILED = (
-    f"<div style='{_STATUS_BASE.format(fg='#8a1c1c')} background:#fdecea; border:1px solid #e08080;'>"
-    "<span style='font-size:1.3em;'>⚠️</span>"
-    "<span>Semantic entropy computation failed. Token probability view is still available.</span>"
-    "</div>"
+_STATUS_FAILED = _status_banner(
+    "⚠️",
+    "Semantic entropy computation failed. Token probability view is still available.",
+    bg="#fdecea", border="#c62828", fg="#5c1010",
 )
 
 
@@ -293,12 +298,11 @@ with gr.Blocks(title="Probabot") as demo:
     user_input.submit(fn=None, inputs=None, outputs=None, cancels=_running_pipelines)
 
     # Manual cancel button: abort the running pipeline and reset the UI.
-    _STATUS_CANCELLED = (
-        "<div style='display:flex; align-items:center; gap:10px; padding:8px 12px; "
-        "background:#f3f3f3; border:1px solid #bbb; border-radius:6px; font-size:0.9em;'>"
-        "<span style='font-size:1.3em;'>🛑</span>"
-        "<span>Semantic entropy computation cancelled. Token probability is still "
-        "available via the toggle.</span></div>"
+    _STATUS_CANCELLED = _status_banner(
+        "🛑",
+        "Semantic entropy computation cancelled. Token probability is still "
+        "available via the toggle.",
+        bg="#f0f0f0", border="#888", fg="#222",
     )
 
     def _on_cancel():