Improve header styling with robust gr.HTML

app.py

@@ -93,12 +93,15 @@ css_styling = """
 """
 
 with gr.Blocks() as demo:
-    gr.Markdown(
+    gr.HTML(
+        """
+        <div style="text-align: center; max-width: 800px; margin: 0 auto 2rem auto; font-family: system-ui, -apple-system, sans-serif;">
+            <h1 style="font-size: 2.2rem; color: #4f46e5; margin-bottom: 0.5rem; font-weight: 700;">🔍 DiffLens AI — Visual Comparison & Change Analysis</h1>
+            <p style="font-size: 1.1rem; color: #4b5563; line-height: 1.6; margin: 0;">
+                Compare <b>Before</b> and <b>After</b> images of structures, scenes, or objects. The system aligns the images, detects change zones, runs segmentation (SAM2) and semantic filtering (DINOv2), and writes a detailed natural language explanation of changes.
+            </p>
+        </div>
         """
-        # 🔍 DiffLens AI — Visual Comparison & Change Analysis
-        Compare **Before** and **After** images of structures, scenes, or objects. The system aligns the images, detects change zones, runs segmentation (SAM2) and semantic filtering (DINOv2), and writes a detailed natural language explanation of changes.
-        """,
-        elem_classes="header"
     )
     
     with gr.Row():