Nice touches.

app.py

@@ -87,10 +87,17 @@ div.stButton > button {
 
 st.markdown(full_width_button_css, unsafe_allow_html=True)
 
+# Create a button that triggers the JavaScript function
+# if st.button(button_text):
+#     st.markdown('<script type="text/javascript">openUrl()</script>', unsafe_allow_html=True)
+
 # Place a button in each column
 with col1:
-    if st.button("Blog"):
-        st.write("Button 1 clicked")
+    st.link_button(
+        "Data",
+        "https://huggingface.co/datasets/llm-council/emotional_application",
+        use_container_width=True,
+    )
 
 with col2:
     if st.button("Paper"):
@@ -103,7 +110,7 @@ with col3:
 # Custom CSS to center title and header
 center_css = """
 <style>
-h1, h2{
+h1, h2, h6{
     text-align: center;
 }
 </style>
@@ -128,7 +135,22 @@ centered_image_html = f"""
 st.markdown(centered_image_html, unsafe_allow_html=True)
 
 st.title("Language Model Council")
-st.subheader("Benchmarking Foundation Models on Highly Subjective Tasks by Consensus")
+st.markdown(
+    "###### Benchmarking Foundation Models on Highly Subjective Tasks by Consensus"
+)
+
+with st.expander("Abstract (abridged)"):
+    st.markdown(
+        """Many tasks such as those related to emotional intelligence, creative writing, or persuasiveness, are highly subjective and often lack majoritarian agreement. To address the challenge of ranking LLMs on highly subjective tasks, we propose a novel benchmarking framework, the **Language Model Council (LMC)**. The LMC operates through a democratic process to: 
+
+1. Formulate a test set through equal participation.
+2. Administer the test among council members.
+3. Evaluate responses as a collective jury.
+    """
+    )
+st.markdown(
+    "This leaderboard comes from deploying a Council of 20 LLMs on an **open-ended emotional intelligence task: responding to interpersonal dilemmas**."
+)
 
 # Create horizontal tabs
 tabs = st.tabs(["Leaderboard Results", "Data Samples", "About Us"])
@@ -137,6 +159,22 @@ tabs = st.tabs(["Leaderboard Results", "Data Samples", "About Us"])
 with tabs[0]:
     st.dataframe(df_leaderboard)
 
+
+# HTML and CSS to create a text box with specified color
+def colored_text_box(text, background_color, text_color="black"):
+    html_code = f"""
+    <div style="
+        background-color: {background_color};
+        color: {text_color};
+        padding: 10px;
+        border-radius: 5px;
+        ">
+        {text}
+    </div>
+    """
+    return html_code
+
+
 with tabs[1]:
     st.markdown("### 1. Select a scenario.")
     # Create the selectors
@@ -152,7 +190,13 @@ with tabs[1]:
         ].iloc[0]
 
         # Display the detailed dilemma and additional information
-        st.write(scenario_details["detailed_dilemma"])
+        # st.write(scenario_details["detailed_dilemma"])
+        st.markdown(
+            colored_text_box(
+                scenario_details["detailed_dilemma"], "#eeeeeeff", "black"
+            ),
+            unsafe_allow_html=True,
+        )
         with st.expander("Additional Information"):
             st.write(f"**LLM Author:** {scenario_details['llm_author']}")
             st.write(f"**Problem:** {scenario_details['problem']}")
@@ -180,7 +224,13 @@ with tabs[1]:
             ].iloc[0]
 
             # Display the response string
-            st.write(response_details_fixed["response_string"])
+            # st.write(response_details_fixed["response_string"])
+            st.markdown(
+                colored_text_box(
+                    response_details_fixed["response_string"], "#eeeeeeff", "black"
+                ),
+                unsafe_allow_html=True,
+            )
 
     with col2:
         selected_model = st.selectbox(
@@ -195,7 +245,13 @@ with tabs[1]:
             ].iloc[0]
 
             # Display the response string
-            st.write(response_details_dynamic["response_string"])
+            # st.write(response_details_dynamic["response_string"])
+            st.markdown(
+                colored_text_box(
+                    response_details_dynamic["response_string"], "#eeeeeeff", "black"
+                ),
+                unsafe_allow_html=True,
+            )
 
     st.divider()
 
@@ -219,11 +275,9 @@ with tabs[1]:
             (df_response_judging["first_completion_by"] == selected_model)
             & (df_response_judging["second_completion_by"] == fixed_model)
         ]["pairwise_choice"].value_counts()
-
         st.bar_chart(pairwise_counts_right)
 
     # Create the llm_judge selector
-    # st.write("**Select an individual judge for detailed inpsection.**")
     st.markdown("#### Individudal LLM judges")
     selected_judge = st.selectbox(
         "Select Judge", judge_options, label_visibility="hidden"
@@ -260,7 +314,15 @@ with tabs[1]:
                 st.write(
                     f"**Pairwise Choice:** {judging_details_left['pairwise_choice']}"
                 )
-                st.code(judging_details_left["judging_response_string"])
+                # st.code(judging_details_left["judging_response_string"])
+                st.markdown(
+                    colored_text_box(
+                        judging_details_left["judging_response_string"],
+                        "#eeeeeeff",
+                        "black",
+                    ),
+                    unsafe_allow_html=True,
+                )
             else:
                 st.write("No judging details found for the selected combination.")
 
@@ -270,21 +332,26 @@ with tabs[1]:
                 st.write(
                     f"**Pairwise Choice:** {judging_details_right['pairwise_choice']}"
                 )
-                st.code(judging_details_right["judging_response_string"])
+                # st.code(judging_details_right["judging_response_string"])
+                st.markdown(
+                    colored_text_box(
+                        judging_details_right["judging_response_string"],
+                        "#eeeeeeff",
+                        "black",
+                    ),
+                    unsafe_allow_html=True,
+                )
             else:
                 st.write("No judging details found for the selected combination.")
 
 with tabs[2]:
-    st.write("This is the about us page.")
-    # Add your about us content here
     st.write(
         """
-    **Our Mission:**
-    To provide the best service and data insights.
+    Please reach out if you are interested in collaborating!
 
     **Our Team:**
-    - Alice
-    - Bob
-    - Charlie
+    - Justin Zhao ([email protected])
+    - Flor Plaza ([email protected])
+    - Amanda Cercas Curry ([email protected])
     """
     )