Update src/streamlit_app.py

src/streamlit_app.py

@@ -20,20 +20,28 @@ st.markdown("""
     
     /* Limit page width */
     .main .block-container {
-        max-width: 1200px;
+        max-width: 1500px;
         padding-top: 3rem;
     }
-    
-    /* Main title styling */
-    .main-title {
+
+    /* Headings */
+    h1 {
         text-align: center;
-        font-size: 50rem;
+        font-size: 4.5rem !important;
         font-weight: 500;
         margin-top: 1rem;
         margin-bottom: 2rem;
         color: #363636;
     }
     
+    h2 {
+        font-size: 2rem !important;
+        font-weight: 500;
+        margin-top: 3rem;
+        margin-bottom: 1.5rem;
+        color: #363636;
+    }
+    
     /* Links container */
     .links-container {
         text-align: center;
@@ -52,16 +60,7 @@ st.markdown("""
     .links-container a:hover {
         color: #764ba2;
     }
-    
-    /* Section headers */
-    .section-header {
-        font-size: 1.8rem;
-        font-weight: 500;
-        margin-top: 3rem;
-        margin-bottom: 1.5rem;
-        color: #363636;
-    }
-    
+        
     /* Instructions styling */
     .instruction-item {
         display: flex;
@@ -274,17 +273,17 @@ st.markdown('<h1 class="main-title">NaviTrace Leaderboard</h1>', unsafe_allow_ht
 
 # Nerfies-style button links
 st.markdown("""
-<div class="button-links">
-    <a href="https://your-paper-website.com" target="_blank" class="button-link">
+<div class="links-container">
+    <a href="https://your-paper-website.com" target="_blank">
         <i class="fas fa-file-pdf"></i> Paper
     </a>
-    <a href="https://huggingface.co/datasets/your-username/navitrace" target="_blank" class="button-link">
+    <a href="https://huggingface.co/datasets/your-username/navitrace" target="_blank">
         <i class="fas fa-database"></i> Dataset
     </a>
-    <a href="https://github.com/your-username/navitrace" target="_blank" class="button-link">
+    <a href="https://github.com/your-username/navitrace" target="_blank">
         <i class="fab fa-github"></i> Code
     </a>
-    <a href="https://your-demo-link.com" target="_blank" class="button-link">
+    <a href="https://your-demo-link.com" target="_blank">
         <i class="far fa-images"></i> Demo
     </a>
 </div>
@@ -299,8 +298,8 @@ if 'user_results' in st.session_state:
     df = pd.concat([user_row, df], ignore_index=True)
 
 # Leaderboard section
-st.markdown('<div id="leaderboard"></div>', unsafe_allow_html=True)
-st.markdown('<h2 class="section-header">Leaderboard</h2>', unsafe_allow_html=True)
+st.title("NaviTrace Leaderboard")
+st.header("Leaderboard")
 
 # View selector
 view_type = st.selectbox(
@@ -337,10 +336,7 @@ with st.expander("Embed Chart in Your Website"):
         mime="text/html"
     )
 
-# Instructions section
-st.markdown('<h2 class="section-header">Evaluate Your Model</h2>', unsafe_allow_html=True)
-
-with st.expander("How to Test Your Model", expanded=False):
+with st.expander("How to Test Your Model", expanded=True):
     # Step 1
     st.markdown("""
     <div class="instruction-item">