format header markdwon

app.py

@@ -120,10 +120,29 @@ def build_plot(min_score, max_models_per_month, toggle_annotations):
     return fig
 
 
-demo = gr.Blocks()
-
-with demo:
-    gr.Markdown("# Proprietary vs Open LLMs (LMSYS Arena ELO)")
+with gr.Blocks(
+    theme=gr.themes.Soft(
+        primary_hue=gr.themes.colors.sky,
+        secondary_hue=gr.themes.colors.green,
+        font=[
+            gr.themes.GoogleFont("Open Sans"),
+            "ui-sans-serif",
+            "system-ui",
+            "sans-serif",
+        ],
+    )
+) as demo:
+    gr.Markdown(
+        """
+        <div style="text-align: center; max-width: 650px; margin: auto;">
+            <h1 style="font-weight: 900; margin-top: 5px;">🔬 Progress Tracker: Proprietary vs Open LLMs
+            </h1>
+            <p style="text-align: left; margin-top: 10px; margin-bottom: 10px; line-height: 20px;">
+            This app visualizes the progress of proprietary and open-source LLMs in the LMSYS Arena ELO leaderboard. The idea is inspired by <a href="https://www.linkedin.com/posts/maxime-labonne_arena-elo-graph-updated-with-new-models-activity-7187062633735368705-u2jB?utm_source=share&utm_medium=member_desktop">this great work</a> from <a href="https://huggingface.co/mlabonne/">Maxime Labonne</a>.
+            </p>
+        </div>
+        """
+    )
     with gr.Row():
         min_score = gr.Slider(
             minimum=min_elo_score,