clean up styling

app.py

@@ -102,6 +102,7 @@ def build_plot(min_score, max_models_per_month, toggle_annotations, set_selector
     )
 
     # construct plot
+    custom_colors = {"Open": "#ff7f0e", "Proprietary": "#1f77b4"}
     fig = px.scatter(
         filtered_df,
         x="Release Date",
@@ -110,10 +111,17 @@ def build_plot(min_score, max_models_per_month, toggle_annotations, set_selector
         hover_name="Model",
         hover_data=["Organization", "License", "Link"],
         trendline="ols",
-        title=f"Open vs Proprietary LLMs by LMSYS Arena ELO Score (as of {date_updated})",
+        title=f"Open vs Proprietary LLMs by LMSYS Arena ELO Score<br>(as of {date_updated})",
         labels={"rating": "Arena ELO", "Release Date": "Release Date"},
         height=800,
-        template="seaborn",
+        template="plotly_dark",
+        color_discrete_map=custom_colors,
+    )
+
+    fig.update_layout(
+        plot_bgcolor="rgba(0,0,0,0)",  # Set background color to transparent
+        paper_bgcolor="rgba(0,0,0,0)",  # Set paper (plot) background color to transparent
+        title={"x": 0.5},
     )
 
     fig.update_traces(marker=dict(size=10, opacity=0.6))
@@ -152,11 +160,12 @@ with gr.Blocks(
     gr.Markdown(
         """
         <div style="text-align: center; max-width: 650px; margin: auto;">
-            <h1 style="font-weight: 900; margin-top: 5px;">🔬 Progress Tracker: Open vs. Proprietary LLMs
+            <h1 style="font-weight: 900; margin-top: 5px;">🔬 Progress Tracker: Open vs. Proprietary 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 over time.
-            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 style="text-align: left; margin-top: 5px; margin-bottom: 30px; line-height: 20px;">
+            This app visualizes the progress of proprietary and open-source LLMs over time as scored by the <a hfref="https://arena.lmsys.org/">LMSYS Chatbot Arena</a>.
+            The idea is inspired by <a href="https://www.linkedin.com/posts/maxime-labonne_arena-elo-graph-updated-with-new-models-activity-7187062633735368705-u2jB">this great work</a> 
+            from <a href="https://huggingface.co/mlabonne/">Maxime Labonne</a>, and is intended to stay up-to-date as new models are released and evaluated.
             </p>
         </div>
         """
@@ -222,4 +231,13 @@ with gr.Blocks(
         outputs=plot,
     )
 
+    gr.Markdown(
+        """
+                <div style="text-align: center; max-width: 650px; margin: auto;">
+                <p style="margin-top: 40px;"> If you have any questions, feel free to open an Discussion or <a href="https://twitter.com/andrewrreed">reach out to me on social</a>. </p>
+                </p>
+                </div>
+                """
+    )
+
 demo.launch()