Add descriptions and switch order of tabs

app.py

@@ -9,6 +9,18 @@ import random
 st.set_page_config(layout="wide")
 
 
+# Custom CSS to center title and header
+center_css = """
+<style>
+h1, h2, h3, h6{
+    text-align: center;
+}
+</style>
+"""
+
+st.markdown(center_css, unsafe_allow_html=True)
+
+
 def prep_rankings_table(df, y_column):
     # Create a copy of the dataframe.
     df_copy = df.copy()
@@ -121,9 +133,50 @@ def app():
             st.session_state.instruction_options
         )
 
-    st.title("AlpacaEval Visualizations")
+    st.title("🦙 AlpacaEval Explorer 🦙")
+
+    st.markdown(
+        "### An interactive tool to analyze and explore the data behind the [AlpacaEval Leaderboard](https://tatsu-lab.github.io/alpaca_eval/) in more depth"
+    )
+
+    st.markdown(
+        "###### Created and maintained by [Justin Zhao](https://x.com/justinxzhao)"
+    )
+
+    col1, col2, col3 = st.columns(3)
+
+    with col1:
+        with st.expander("About AlpacaEval"):
+            st.markdown(
+                """- [AlpacaEval](https://github.com/tatsu-lab/alpaca_eval) is an evaluation benchmark to assess the performance of large language models (LLMs).
+- It has high correlation with Chatbot Arena, and is a fast and affordable benchmark for chat LLMs that uses LLMs (specifically GPT-4) to estimate response quality.
+- LLM responses are assessed in a pairwise fashion (arena), where each model's responses are compared to a reference model's responses. 
+- The reference model is GPT-4-1106. The LLM Judge is also GPT-4-1106.
 
-    outer_tabs = st.tabs(["Length bias in overall win rate", "Data explorer"])
+"""
+            )
+
+    with col2:
+        with st.expander("About this tool"):
+            st.markdown(
+                """- There are 2 main tabs: **Data explorer** and **Length bias explorer**.
+- Use the Data explorer to look at individual pairwise battles between models.
+- Use the Length bias explorer to look at how response lengths affect win rates.
+"""
+            )
+
+    with col3:
+        with st.expander("Motivation"):
+            st.markdown(
+                """
+- Several arena-based benchmarks (ours included) have demonstrated that a clear ranking among LLMs can be established, but there is a general dearth of analysis and understanding as to why the rankings are the way they are. For example, it's hard to discern how factors like feel and style
+are weighed against correctness.
+- I created this tool to provide a more interactive and intuitive way to explore the data behind the AlpacaEval leaderboard. It allows users to easily compare responses between models, look at individual battles, and analyze how response lengths affect win rates.
+- If you have any feedback on the tool, please reach out on [Twitter](https://twitter.com/justinxzhao)!
+    """
+            )
+
+    outer_tabs = st.tabs(["Data explorer", "Length bias explorer"])
 
     # Load the data
     df = pd.read_json("data/model_win_rates.jsonl", lines=True, orient="records")
@@ -135,7 +188,7 @@ def app():
     # Prepare the model selector options
     model_options = df_response_judging["generator_2"].unique().tolist()
 
-    with outer_tabs[0]:
+    with outer_tabs[1]:
         # Define the preset groups
         presets = {
             "gpt": df[df["model_name"].str.contains("openai|gpt", case=False)][
@@ -159,8 +212,6 @@ def app():
             options=["custom", "gpt", "claude", "moa", "llama"],
         )
 
-        st.divider()
-
         # Add multiselect for custom model selection
         if preset_selection == "custom":
             selected_models = st.multiselect(
@@ -169,6 +220,8 @@ def app():
         else:
             selected_models = presets[preset_selection]
 
+        st.divider()
+
         def create_scatter_plot(df, y_column, selected_models, title):
             fig = go.Figure()
 
@@ -266,7 +319,7 @@ def app():
 
             return fig, r_squared_words, r_squared_tokens
 
-        st.markdown("## Overall win rate")
+        st.markdown("#### Overall win rate")
         y_column1 = "length_controlled_winrate"
         y_column2 = "win_rate"
         y_column3 = "discrete_win_rate"
@@ -326,7 +379,7 @@ def app():
                     f"- R² (Words vs {y_column3}): {r_squared_words_3:.2f}\n- R² (Tokens vs {y_column3}): {r_squared_tokens_3:.2f}"
                 )
 
-        st.markdown("## Length bias in battles")
+        st.markdown("#### Length bias in battles")
 
         df_response_judging_copy = df_response_judging.copy()
         if not selected_models:
@@ -406,9 +459,9 @@ def app():
             st.dataframe(df)
 
     # Data explorer
-    with outer_tabs[1]:
+    with outer_tabs[0]:
         # Add randomize button at the top of the app
-        st.markdown("## Choose example")
+        st.markdown("#### Choose example")
         st.button(
             ":game_die: Randomize!",
             on_click=randomize_selection,
@@ -450,12 +503,12 @@ def app():
 
         st.divider()
 
-        st.markdown(f"## Selected instruction")
+        st.markdown(f"#### Selected instruction")
         st.info(st.session_state.selected_instruction)
 
         st.divider()
 
-        st.markdown(f"## Overall Battles")
+        st.markdown(f"#### Overall Battles")
         all_models_judgings_details["output_1_num_words"] = all_models_judgings_details[
             "output_1"
         ].apply(lambda x: len(x.split()))
@@ -517,7 +570,7 @@ def app():
             better_models["output_2_num_words"] > num_words_for_fixed_model
         ]
         col3.markdown(
-            f"### Models that are better than {fixed_model} ({num_words_for_fixed_model})"
+            f"##### Models that are better than {fixed_model} ({num_words_for_fixed_model})"
         )
         if shorter_models.size != 0:
             shorter_models_string = ""
@@ -539,7 +592,7 @@ def app():
             col3.write("None")
 
         # Judging details.
-        st.markdown(f"## Individual Battle Details")
+        st.markdown(f"#### Individual Battle Details")
         judging_details = df_response_judging[
             (df_response_judging["generator_1"] == fixed_model)
             & (df_response_judging["generator_2"] == st.session_state.selected_model)
@@ -577,7 +630,7 @@ def app():
                 )
 
         # Create two columns for model selectors
-        st.markdown("## Responses")
+        st.markdown("#### Responses")
         col1, col2 = st.columns(2)
 
         with col1: