Force darker demo text styling

app.py

@@ -39,11 +39,31 @@ APP_THEME = gr.themes.Soft(
 )
 APP_CSS = """
 .gradio-container {
+    --body-text-color: #000000;
+    --body-text-color-subdued: #000000;
+    --block-label-text-color: #000000;
+    --block-title-text-color: #000000;
     color: #2f281d;
     background:
         radial-gradient(circle at top left, #f7d58d 0%, rgba(247, 213, 141, 0.22) 22%, transparent 45%),
         linear-gradient(180deg, #f7f4ea 0%, #efe8d7 100%);
 }
+.gradio-container .prose,
+.gradio-container .prose p,
+.gradio-container .prose span,
+.gradio-container .prose strong,
+.gradio-container .prose li,
+.gradio-container label,
+.gradio-container .block-title,
+.gradio-container .block-label,
+.gradio-container .gr-form,
+.gradio-container .gr-form * {
+    color: #2f281d;
+}
+.gradio-container .prose a,
+.gradio-container a {
+    color: #744d12;
+}
 .app-shell {
     max-width: 1280px;
     margin: 0 auto;
@@ -68,6 +88,10 @@ APP_CSS = """
     color: #6e4b10;
     font-weight: 600;
 }
+.hero code {
+    color: #000000;
+    background: #eadfc7;
+}
 .result-card {
     padding: 18px 20px;
     border: 1px solid rgba(99, 75, 39, 0.16);
@@ -79,10 +103,11 @@ APP_CSS = """
     margin: 0 0 8px;
     font-size: 1.2rem;
     letter-spacing: -0.02em;
+    color: #241d14;
 }
 .result-card p {
     margin: 0 0 10px;
-    color: #3a3226;
+    color: #31291f;
 }
 .result-section {
     margin-top: 14px;
@@ -91,7 +116,8 @@ APP_CSS = """
     font-size: 0.9rem;
     text-transform: uppercase;
     letter-spacing: 0.08em;
-    color: #5a492d;
+    color: #000000 !important;
+    font-weight: 800 !important;
     margin-bottom: 8px;
 }
 .result-list {
@@ -101,6 +127,10 @@ APP_CSS = """
 }
 .result-list li {
     margin: 4px 0;
+    color: #000000;
+}
+.result-list li span {
+    color: #000000;
 }
 .result-chip-row {
     display: flex;
@@ -114,7 +144,8 @@ APP_CSS = """
     border-radius: 999px;
     background: #efe1bf;
     border: 1px solid rgba(114, 87, 38, 0.14);
-    color: #4d3c22;
+    color: #000000;
+    font-weight: 700;
     font-size: 0.92rem;
 }
 .reference-grid {
@@ -143,13 +174,19 @@ APP_CSS = """
     font-size: 0.76rem;
     letter-spacing: 0.08em;
     text-transform: uppercase;
-    color: #604d2f;
+    color: #000000 !important;
+    font-weight: 800 !important;
     margin-bottom: 6px;
 }
+.result-card .result-section-title,
+.reference-card .reference-card-index {
+    color: #000000 !important;
+    font-weight: 800 !important;
+}
 .reference-card-title {
     font-size: 0.98rem;
     line-height: 1.3;
-    color: #30271d;
+    color: #241d14;
     font-weight: 600;
 }
 .upload-panel {
@@ -170,6 +207,13 @@ APP_CSS = """
 .results-toggle label {
     color: #2f281d;
 }
+.upload-panel label,
+.upload-panel .block-title,
+.upload-panel .block-label,
+.results-toggle .label-wrap,
+.results-toggle .label-wrap span {
+    color: #241d14;
+}
 """
 APP_ALLOWED_PATHS = [str(ASSETS_DIR)]
 
@@ -479,33 +523,33 @@ def format_prediction_report(
         start=1,
     ):
         top_prediction_items.append(
-            "<li>"
+            "<li style='color:#000;'>"
             f"{html.escape(class_names[class_idx])} "
-            f"<span>({prob * 100:.2f}%)</span>"
+            f"<span style='color:#000;'>({prob * 100:.2f}%)</span>"
             "</li>"
         )
 
     reference_chips = []
     for idx in reference_indices:
         reference_chips.append(
-            f"<span class='result-chip'>{html.escape(class_names[idx])}</span>"
+            f"<span class='result-chip' style='color:#000;font-weight:700;'>{html.escape(class_names[idx])}</span>"
         )
 
     return f"""
-    <div class="result-card">
-      <h3>{html.escape(class_names[target_index])}</h3>
-      <p>
+    <div class="result-card" style="color:#000;">
+      <h3 style="color:#000;font-weight:700;">{html.escape(class_names[target_index])}</h3>
+      <p style="color:#000;">
         Predicted CUB class
-        <span class="result-chip">index {target_index}</span>
+        <span class="result-chip" style="color:#000;font-weight:700;">index {target_index}</span>
       </p>
       <div class="result-section">
-        <div class="result-section-title">Top Predictions</div>
+        <div class="result-section-title" style="color:#000;font-weight:800;">Top Predictions</div>
         <ol class="result-list">
           {''.join(top_prediction_items)}
         </ol>
       </div>
       <div class="result-section">
-        <div class="result-section-title">Reference Classes Used By Finer-CAM</div>
+        <div class="result-section-title" style="color:#000;font-weight:800;">Reference Classes Used By Finer-CAM</div>
         <div class="result-chip-row">
           {''.join(reference_chips) if reference_chips else '<span class="result-chip">None</span>'}
         </div>
@@ -553,7 +597,7 @@ def build_reference_cards_html(
             <div class="reference-card">
               <img src="{image_path_to_data_uri(image_path)}" alt="{html.escape(class_names[idx])}">
               <div class="reference-card-body">
-                <div class="reference-card-index">Reference Class {idx}</div>
+                <div class="reference-card-index" style="color:#000;font-weight:800;">Reference Class {idx}</div>
                 <div class="reference-card-title">{html.escape(class_names[idx])}</div>
               </div>
             </div>
@@ -562,16 +606,16 @@ def build_reference_cards_html(
 
     if not cards:
         return """
-        <div class="result-card">
-          <h3>Reference Class Images</h3>
-          <p>No reference classes were available for display.</p>
+        <div class="result-card" style="color:#000;">
+          <h3 style="color:#000;font-weight:700;">Reference Class Images</h3>
+          <p style="color:#000;">No reference classes were available for display.</p>
         </div>
         """
 
     return f"""
-    <div class="result-card">
-      <h3>Reference Class Images</h3>
-      <p>Representative CUB images retrieved for the reference classes used by Finer-CAM.</p>
+    <div class="result-card" style="color:#000;">
+      <h3 style="color:#000;font-weight:700;">Reference Class Images</h3>
+      <p style="color:#000;">Representative CUB images retrieved for the reference classes used by Finer-CAM.</p>
       <div class="reference-grid">
         {''.join(cards)}
       </div>
@@ -658,18 +702,18 @@ def run_visualization(
 def build_demo():
     with gr.Blocks() as demo:
         with gr.Column(elem_classes=["app-shell"]):
-            gr.Markdown(
+            gr.HTML(
                 """
                 <div class="hero">
                   <h1>CUB Finer-CAM Playground</h1>
-                  <p>
+                  <p style="color:#000; opacity:1;">
                     This demo is fixed to the CUB classifier trained on top of
-                    <code>facebookresearch/dinov2</code> <code>dinov2_vitb14</code>.
+                    <code style="color:#000;">facebookresearch/dinov2</code> <code style="color:#000;">dinov2_vitb14</code>.
                     Upload a bird image or pick a CUB example, then run Grad-CAM / Finer-CAM directly.
                   </p>
-                  <p>
+                  <p style="color:#000; opacity:1;">
                     For more information on the
-                    <a href="https://github.com/Imageomics/Finer-CAM" target="_blank" rel="noopener noreferrer">FinerCAM Project GitHub</a>.
+                    <a href="https://github.com/Imageomics/Finer-CAM" target="_blank" rel="noopener noreferrer" style="color:#000; font-weight:700; text-decoration:underline;">FinerCAM Project GitHub</a>.
                   </p>
                 </div>
                 """
@@ -742,9 +786,9 @@ def build_demo():
                         finer_cam_output = gr.Image(label="Finer-CAM")
                     reference_gallery = gr.HTML(
                         """
-                        <div class="result-card">
-                          <h3>Reference Class Images</h3>
-                          <p>Run Finer-CAM to retrieve representative CUB images for the reference classes.</p>
+                        <div class="result-card" style="color:#000;">
+                          <h3 style="color:#000;font-weight:700;">Reference Class Images</h3>
+                          <p style="color:#000;">Run Finer-CAM to retrieve representative CUB images for the reference classes.</p>
                         </div>
                         """
                     )
@@ -755,9 +799,9 @@ def build_demo():
                     ):
                         prediction_report = gr.HTML(
                             """
-                            <div class="result-card">
-                              <h3>Prediction Summary</h3>
-                              <p>Run Finer-CAM to see the predicted class, top predictions, and reference classes.</p>
+                            <div class="result-card" style="color:#000;">
+                              <h3 style="color:#000;font-weight:700;">Prediction Summary</h3>
+                              <p style="color:#000;">Run Finer-CAM to see the predicted class, top predictions, and reference classes.</p>
                             </div>
                             """
                         )