update

app.py

@@ -503,13 +503,13 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue="indigo", radius_size="md"), css
                     end_time = gr.Slider(minimum=0, maximum=10, value=3, step=0.01, label="End Time (s)")
             
             gr.HTML("""
-            <div class="alert-box" style="background-color: #f0fdf4; border-left: 4px solid #22c55e; color: #15803d;">
-                <strong style="color: #15803d;">💡 Use Tips:</strong>
-                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; font-size: 0.85em; line-height: 1.4; color: #15803d;">
-                    <div>1. Contain only a <strong>single person</strong>.</div>
-                    <div>2. <strong>No occlusion</strong> (self-occlusion is fine).</div>
-                    <div>3. Keep the <strong>full body</strong> mostly visible.</div>
-                    <div>4. Subject should <strong>not be too small</strong>.</div>
+            <div style="background-color: #f0fdf4; border-left: 4px solid #22c55e; padding: 1rem; border-radius: 0.5rem; margin-bottom: 1rem; color: #15803d !important;">
+                <div style="font-weight: bold; margin-bottom: 8px; color: #15803d !important;">💡 Use Tips:</div>
+                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 0.9em; line-height: 1.4; color: #15803d !important;">
+                    <div style="color: #15803d !important;">1. Contain only a <strong style="color: #15803d !important;">single person</strong>.</div>
+                    <div style="color: #15803d !important;">2. <strong style="color: #15803d !important;">No occlusion</strong> (self-occlusion is fine).</div>
+                    <div style="color: #15803d !important;">3. Keep the <strong style="color: #15803d !important;">full body</strong> mostly visible.</div>
+                    <div style="color: #15803d !important;">4. Subject should <strong style="color: #15803d !important;">not be too small</strong>.</div>
                 </div>
             </div>
             """)
@@ -536,13 +536,14 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue="indigo", radius_size="md"), css
                 )
             
             gr.HTML("""
-            <div class="alert-box" style="background-color: #fefce8; border-left: 4px solid #eab308; color: #854d0e;">
-                <strong style="color: #854d0e;">⚡ Performance Note:</strong><br>
-                Inference (feed-forward) is very fast, but generating visualization assets (meshing & rendering) takes up most of the processing time.
+            <div style="background-color: #fefce8; border-left: 4px solid #eab308; padding: 1rem; border-radius: 0.5rem; margin-bottom: 1rem; color: #854d0e !important;">
+                <strong style="color: #854d0e !important;">⚡ Performance Note:</strong><br>
+                <span style="color: #854d0e !important;">Inference (feed-forward) is very fast, but generating visualization assets (meshing & rendering) takes up most of the processing time.</span>
             </div>
-            <div class="alert-box" style="background-color: #eff6ff; border-left: 4px solid #3b82f6; color: #1e40af;">
-                <strong style="color: #1e40af;">👁️ Visual Quality:</strong><br>
-                The displayed results are downsampled for better web rendering performance.
+            
+            <div style="background-color: #eff6ff; border-left: 4px solid #3b82f6; padding: 1rem; border-radius: 0.5rem; margin-bottom: 1rem; color: #1e40af !important;">
+                <strong style="color: #1e40af !important;">👁️ Visual Quality:</strong><br>
+                <span style="color: #1e40af !important;">The displayed results are downsampled for better web rendering performance.</span>
             </div>
             """)