fix: use CSS class with !important to force text visibility in aux info box

app.py

@@ -228,10 +228,8 @@ def _render_mbench_a_aux(task: dict) -> str:
     """Render auxiliary HTML info based on task subset."""
     subset = task["subset"]
 
-    # Shared style: visible on both light and dark themes
-    box = 'style="background:#e8edf2;color:#1a1a1a;padding:12px;border-radius:8px;margin-bottom:12px;border:1px solid #c0c8d0"'
-    label_style = 'style="margin:0 0 4px;color:#1a1a1a;font-weight:bold"'
-    text_style = 'style="margin:0;color:#2a2a2a;font-size:14px;line-height:1.5"'
+    # Use CSS class for guaranteed visibility (Gradio themes can override inline styles)
+    box = 'class="aux-info-box"'
 
     # Camera motion info (shown for ALL subsets)
     motion = task.get("camera_motion", "left_then_right")
@@ -239,22 +237,21 @@ def _render_mbench_a_aux(task: dict) -> str:
     gif_url = _mbench_a_asset_hf_url(f"camera_diagrams/{motion}.gif")
     camera_html = (
         f'<div style="flex:0 0 200px">'
-        f'<p {label_style}>🎬 预期相机运动</p>'
-        f'<p style="margin:0 0 8px;color:#2a2a2a">{motion_desc}</p>'
-        f'<img src="{gif_url}" style="width:180px;border-radius:4px;border:1px solid #aaa">'
+        f'<p><b>🎬 预期相机运动</b></p>'
+        f'<p style="margin:0 0 8px">{motion_desc}</p>'
+        f'<img src="{gif_url}" style="width:180px">'
         f'</div>'
     )
 
     if subset == "object":
-        # Show mask overlay image from HF assets
         sample_id = task["sample_id"]
         mask_url = _mbench_a_asset_hf_url(f"mask_viz/{sample_id}.png")
         return (
             f'<div {box}>'
             f'<div style="display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start">'
             f'<div style="flex:1;min-width:300px">'
-            f'<p {label_style}>🎯 请关注画面中被标注（高亮）的物体</p>'
-            f'<img src="{mask_url}" style="max-width:100%;max-height:280px;border-radius:4px;margin-top:8px;border:1px solid #aaa">'
+            f'<p><b>🎯 请关注画面中被标注（高亮）的物体</b></p>'
+            f'<img src="{mask_url}" style="max-width:100%;max-height:280px;margin-top:8px">'
             f'</div>'
             f'{camera_html}'
             f'</div></div>'
@@ -267,8 +264,8 @@ def _render_mbench_a_aux(task: dict) -> str:
             f'<div style="display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start">'
             f'{camera_html}'
             f'<div style="flex:1;min-width:250px">'
-            f'<p {label_style}>📝 场景描述</p>'
-            f'<p {text_style}>{caption}</p>'
+            f'<p><b>📝 场景描述</b></p>'
+            f'<p style="font-size:14px;line-height:1.5">{caption}</p>'
             f'</div>'
             f'</div></div>'
         )
@@ -278,7 +275,7 @@ def _render_mbench_a_aux(task: dict) -> str:
             f'<div {box}>'
             f'<div style="display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start">'
             f'<div style="flex:1;min-width:250px">'
-            f'<p {text_style}><b>👤 请关注视频中的人物</b>：观察人物离开画面再回来后，面部和外观是否保持一致。</p>'
+            f'<p><b>👤 请关注视频中的人物</b>：观察人物离开画面再回来后，面部和外观是否保持一致。</p>'
             f'</div>'
             f'{camera_html}'
             f'</div></div>'
@@ -289,7 +286,7 @@ def _render_mbench_a_aux(task: dict) -> str:
             f'<div {box}>'
             f'<div style="display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start">'
             f'<div style="flex:1;min-width:250px">'
-            f'<p {text_style}><b>🏞️ 请关注整体场景</b>：观察相机转回来后，场景的布局、风格、光照是否保持一致。</p>'
+            f'<p><b>🏞️ 请关注整体场景</b>：观察相机转回来后，场景的布局、风格、光照是否保持一致。</p>'
             f'</div>'
             f'{camera_html}'
             f'</div></div>'
@@ -771,6 +768,22 @@ CUSTOM_CSS = """
 #prompt_box textarea { height: 300px !important; overflow-y: auto !important; }
 .video-pair { display: flex; gap: 12px; }
 .video-pair > div { flex: 1; }
+/* Force aux info box to be visible regardless of Gradio theme */
+.aux-info-box {
+    background: #e3e8ef !important;
+    color: #111 !important;
+    padding: 14px !important;
+    border-radius: 8px !important;
+    margin-bottom: 12px !important;
+    border: 1px solid #b0b8c4 !important;
+}
+.aux-info-box * {
+    color: #111 !important;
+}
+.aux-info-box img {
+    border: 1px solid #999;
+    border-radius: 4px;
+}
 """
 
 with gr.Blocks(title="MBench 标注", theme=gr.themes.Soft(), css=CUSTOM_CSS) as demo: