Update app.py

app.py

@@ -91,8 +91,8 @@ def prob_to_color(p: float) -> str:
         r = int(245 + (248 - 245) * t)
         g = int(191 + (80  - 191) * t)
         b = int(66  + (80  - 66)  * t)
-    # Low-opacity fill so text stays readable on dark background.
-    return f"rgba({r}, {g}, {b}, 0.28)"
+    # Higher opacity for a vivid highlight; text is forced light on top.
+    return f"rgba({r}, {g}, {b}, 0.42)"
 
 
 def border_color(p: float) -> str:
@@ -124,12 +124,17 @@ def render_heatmap(sentences, scores) -> str:
         pct = int(round(p * 100))
         safe = html.escape(sent)
         pieces.append(
-            f"<span title='AI likelihood: {pct}%' "
-            f"style='background:{bg}; border-bottom:2px solid {bd}; "
-            f"padding:2px 4px; margin:1px 2px; border-radius:4px; "
-            f"line-height:2.1;'>{safe} "
-            f"<span style='font-size:0.72em; color:#cbd5e1; "
-            f"vertical-align:super;'>{pct}%</span></span>"
+            f"<span class='awa-sent' title='AI likelihood: {pct}%' "
+            f"style='background:{bg} !important; "
+            f"border-bottom:2px solid {bd} !important; "
+            f"color:#f8fafc !important; "
+            f"text-shadow:0 1px 2px rgba(0,0,0,0.65); "
+            f"padding:3px 6px; margin:2px 1px; border-radius:5px; "
+            f"box-decoration-break:clone; -webkit-box-decoration-break:clone; "
+            f"line-height:2.3;'>{safe} "
+            f"<span style='font-size:0.72em; color:#f1f5f9 !important; "
+            f"font-weight:600; vertical-align:super; "
+            f"text-shadow:0 1px 2px rgba(0,0,0,0.7);'>{pct}%</span></span>"
         )
 
     body = " ".join(pieces)
@@ -268,6 +273,19 @@ button.secondary, .secondary button {
     border-radius: 10px !important;
 }
 footer { display: none !important; }
+
+/* Force light text inside our custom HTML output — Gradio 6's prose styles
+   otherwise darken anything rendered inside gr.HTML. */
+.gradio-container .prose,
+.gradio-container .prose * ,
+.gradio-container .html-container,
+.gradio-container .html-container * {
+    color: #e2e8f0 !important;
+}
+.gradio-container .awa-sent,
+.gradio-container .awa-sent * {
+    color: #f8fafc !important;
+}
 """
 
 HEADER_HTML = """