Update src/streamlit_app.py

src/streamlit_app.py

@@ -12,86 +12,56 @@ st.set_page_config(
     initial_sidebar_state="collapsed"
 )
 
-# Custom CSS matching the NaviTrace website
+# Custom CSS for Nerfies-style design
 st.markdown("""
 <style>
-    /* Import Google Fonts - matching website */
-    @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600;700&display=swap');
+    /* Import Font Awesome */
     @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');
     
-    /* Global font and colors */
-    html, body, [class*="css"] {
-        font-family: 'Source Sans Pr o', sans-serif;
-        color: #4a4a4a;
-    }
-    
     /* Limit page width */
     .main .block-container {
-        max-width: 1152px;
+        max-width: 1200px;
         padding-top: 3rem;
-        padding-bottom: 3rem;
     }
     
-    /* Main title styling - matching website h1 */
+    /* Main title styling */
     .main-title {
         text-align: center;
-        font-size: 2.5rem;
-        font-weight: 600;
-        line-height: 1.125;
-        margin-top: 1.5rem;
-        margin-bottom: 1.5rem;
-        color: #363636;
-    }
-    
-    /* Section headers - matching website h2 */
-    .section-header {
-        font-size: 2rem;
-        font-weight: 600;
-        line-height: 1.125;
-        margin-top: 3rem;
-        margin-bottom: 1.5rem;
-        color: #363636;
-    }
-    
-    /* Subsection headers - matching website h3 */
-    .subsection-header {
-        font-size: 1.5rem;
+        font-size: 5rem;
         font-weight: 600;
-        margin-top: 2rem;
-        margin-bottom: 1rem;
+        margin-top: 1rem;
+        margin-bottom: 2rem;
         color: #363636;
     }
     
-    /* Button links container */
+    /* Button links container - Nerfies style */
     .button-links {
         display: flex;
         justify-content: center;
-        gap: 0.75rem;
-        margin-bottom: 2.5rem;
-        margin-top: 1.5rem;
+        gap: 1rem;
+        margin-bottom: 3rem;
         flex-wrap: wrap;
     }
     
-    /* Button styling - matching website */
     .button-link {
         display: inline-flex;
         align-items: center;
         gap: 0.5rem;
-        padding: 0.5rem 1.25rem;
+        padding: 0.6rem 1.5rem;
         background-color: #363636;
-        border: 1px solid transparent;
-        border-radius: 4px;
+        border: 1px solid #363636;
+        border-radius: 50px;
         text-decoration: none;
         color: #ffffff;
         font-weight: 400;
-        font-size: 1rem;
-        transition: all 0.2s ease;
-        cursor: pointer;
+        transition: all 0.3s ease;
+        font-size: 0.95rem;
     }
     
     .button-link:hover {
-        background-color: #292929;
-        border-color: #292929;
+        background-color: #5E5E5E;
+        transform: translateY(-2px);
+        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
         color: #ffffff;
         text-decoration: none;
     }
@@ -100,24 +70,12 @@ st.markdown("""
         font-size: 1rem;
     }
     
-    /* Content text */
-    .content {
-        font-size: 1rem;
-        line-height: 1.7;
-        color: #4a4a4a;
-    }
-    
-    .content.has-text-justified {
-        text-align: justify;
-    }
-    
-    .content.has-text-centered {
-        text-align: center;
-    }
-    
-    /* Highlight text - matching dnerf class */
-    .dnerf {
-        font-weight: 600;
+    /* Section headers */
+    .section-header {
+        font-size: 1.8rem;
+        font-weight: 500;
+        margin-top: 3rem;
+        margin-bottom: 1.5rem;
         color: #363636;
     }
     
@@ -127,10 +85,6 @@ st.markdown("""
         gap: 1.5rem;
         margin: 2rem 0;
         align-items: flex-start;
-        background-color: #fafafa;
-        padding: 1.5rem;
-        border-radius: 6px;
-        border-left: 4px solid #363636;
     }
     
     .instruction-number {
@@ -138,13 +92,13 @@ st.markdown("""
         width: 40px;
         height: 40px;
         border-radius: 50%;
-        background-color: #363636;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
         color: white;
         display: flex;
         align-items: center;
         justify-content: center;
         font-weight: 700;
-        font-size: 1.25rem;
+        font-size: 1.2rem;
     }
     
     .instruction-content {
@@ -153,105 +107,51 @@ st.markdown("""
     }
     
     .instruction-title {
-        font-size: 1.15rem;
+        font-size: 1.1rem;
         font-weight: 600;
         margin-bottom: 0.5rem;
         color: #363636;
     }
     
     .instruction-desc {
-        color: #4a4a4a;
-        line-height: 1.7;
-        font-size: 1rem;
+        color: #666;
+        line-height: 1.6;
     }
     
     /* Streamlit button styling */
     .stButton>button {
-        background-color: #363636;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
         color: white;
         font-weight: 600;
-        border: 1px solid transparent;
-        padding: 0.5rem 1.5rem;
-        border-radius: 4px;
-        font-size: 1rem;
-        transition: all 0.2s ease;
+        border: none;
+        padding: 0.5rem 2rem;
+        border-radius: 6px;
+        transition: transform 0.2s;
     }
     
     .stButton>button:hover {
-        background-color: #292929;
-        border-color: #292929;
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
     }
     
+    /* Hide streamlit branding */
+    #MainMenu {visibility: hidden;}
+    footer {visibility: hidden;}
+    
     /* Expander styling */
     .streamlit-expanderHeader {
-        font-size: 1.15rem;
+        font-size: 1.1rem;
         font-weight: 600;
-        color: #363636;
-        background-color: #fafafa;
-        border-radius: 4px;
     }
     
     /* File uploader */
     [data-testid="stFileUploader"] {
-        margin: 1.5rem 0;
-        border: 2px dashed #dbdbdb;
-        border-radius: 6px;
-        padding: 1.5rem;
-    }
-    
-    /* Selectbox */
-    .stSelectbox label {
-        font-weight: 600;
-        color: #363636;
-        font-size: 1rem;
-    }
-    
-    /* Dataframe styling */
-    .dataframe {
-        font-size: 0.95rem;
-    }
-    
-    /* Info/Success/Error boxes */
-    .stAlert {
-        border-radius: 6px;
-        border-left: 4px solid;
-    }
-    
-    /* Hide streamlit branding */
-    #MainMenu {visibility: hidden;}
-    footer {visibility: hidden;}
-    header {visibility: hidden;}
-    
-    /* Divider */
-    hr {
-        background-color: #dbdbdb;
-        border: none;
-        height: 2px;
-        margin: 2rem 0;
-    }
-    
-    /* Links */
-    a {
-        color: #3273dc;
-        text-decoration: none;
-    }
-    
-    a:hover {
-        color: #363636;
-        text-decoration: underline;
-    }
-    
-    /* Footer text */
-    .footer-text {
-        text-align: center;
-        color: #7a7a7a;
-        font-size: 0.95rem;
-        padding: 2rem 0;
+        margin: 1rem 0;
     }
 </style>
 """, unsafe_allow_html=True)
 
-# Sample data
+# Sample data - Replace with your actual data
 def load_sample_data():
     return pd.DataFrame({
         'Model': ['GPT-4', 'Claude-3.5-Sonnet', 'Gemini-Pro', 'Llama-3-70B', 'Mistral-Large'],
@@ -265,7 +165,27 @@ def load_sample_data():
     })
 
 def calculate_score_backend(results_df):
+    """
+    Calculate score using private test split ground truth.
+    This function should:
+    1. Load the private test split ground truth (not exposed to users)
+    2. Compare uploaded predictions with ground truth
+    3. Calculate metrics per embodiment and category
+    4. Return detailed scores
+    
+    Args:
+        results_df: DataFrame with columns ['sample_id', 'prediction', ...]
+    
+    Returns:
+        dict: Scores breakdown or None if error
+    """
     try:
+        # TODO: Implement your scoring logic here
+        # Example structure:
+        # ground_truth = load_private_test_split()  # From secure location
+        # scores = evaluate_predictions(results_df, ground_truth)
+        
+        # Placeholder - replace with actual calculation
         scores = {
             'Total Score': 85.0,
             'Embodiment-A': 87.0,
@@ -281,9 +201,12 @@ def calculate_score_backend(results_df):
         return None
 
 def validate_tsv_format(uploaded_file):
+    """Validate that the uploaded TSV has the correct format"""
     try:
         df = pd.read_csv(uploaded_file, sep='\t')
-        required_cols = ['sample_id', 'prediction']
+        # TODO: Add your specific validation logic
+        # Check for required columns, data types, etc.
+        required_cols = ['sample_id', 'prediction']  # Adjust as needed
         if not all(col in df.columns for col in required_cols):
             return False, f"Missing required columns. Expected: {required_cols}"
         return True, df
@@ -291,12 +214,13 @@ def validate_tsv_format(uploaded_file):
         return False, f"Error reading file: {str(e)}"
 
 def create_bar_chart(df, view_type):
+    """Create interactive bar chart based on view type"""
     if view_type == "Total Score":
         fig = go.Figure(data=[
             go.Bar(
                 x=df['Model'],
                 y=df['Total Score'],
-                marker_color='#363636',
+                marker_color=px.colors.sequential.Purples_r,
                 text=df['Total Score'].round(1),
                 textposition='outside',
             )
@@ -311,16 +235,14 @@ def create_bar_chart(df, view_type):
     
     elif view_type == "Per Embodiment":
         embodiment_cols = [col for col in df.columns if col.startswith('Embodiment-')]
-        colors = ['#363636', '#4a4a4a', '#7a7a7a']
         fig = go.Figure()
-        for idx, col in enumerate(embodiment_cols):
+        for col in embodiment_cols:
             fig.add_trace(go.Bar(
                 name=col.replace('Embodiment-', ''),
                 x=df['Model'],
                 y=df[col],
                 text=df[col].round(1),
                 textposition='outside',
-                marker_color=colors[idx % len(colors)]
             ))
         fig.update_layout(
             title="Model Performance - Per Embodiment",
@@ -333,16 +255,14 @@ def create_bar_chart(df, view_type):
     
     else:  # Per Category
         category_cols = [col for col in df.columns if col.startswith('Category-')]
-        colors = ['#363636', '#4a4a4a', '#7a7a7a']
         fig = go.Figure()
-        for idx, col in enumerate(category_cols):
+        for col in category_cols:
             fig.add_trace(go.Bar(
                 name=col.replace('Category-', ''),
                 x=df['Model'],
                 y=df[col],
                 text=df[col].round(1),
                 textposition='outside',
-                marker_color=colors[idx % len(colors)]
             ))
         fig.update_layout(
             title="Model Performance - Per Category",
@@ -357,19 +277,19 @@ def create_bar_chart(df, view_type):
     fig.update_layout(
         plot_bgcolor='rgba(0,0,0,0)',
         paper_bgcolor='rgba(0,0,0,0)',
-        font=dict(family='Source Sans Pro, sans-serif', size=12, color='#4a4a4a'),
+        font=dict(size=12),
         showlegend=(view_type != "Total Score"),
         margin=dict(t=80, b=60, l=60, r=60),
     )
     fig.update_xaxes(showgrid=False)
-    fig.update_yaxes(showgrid=True, gridcolor='#dbdbdb', gridwidth=1)
+    fig.update_yaxes(showgrid=True, gridcolor='lightgray', gridwidth=0.5)
     
     return fig
 
 # Main content
 st.markdown('<h1 class="main-title">NaviTrace Leaderboard</h1>', unsafe_allow_html=True)
 
-# Button links matching website style
+# Nerfies-style button links
 st.markdown("""
 <div class="button-links">
     <a href="https://your-paper-website.com" target="_blank" class="button-link">
@@ -421,7 +341,7 @@ st.plotly_chart(fig, use_container_width=True, config={
 
 # Detailed table
 with st.expander("View Detailed Scores"):
-    st.dataframe(df.style.background_gradient(cmap='Greys', subset=df.columns[1:]), use_container_width=True)
+    st.dataframe(df.style.background_gradient(cmap='Purples', subset=df.columns[1:]), use_container_width=True)
 
 # Export chart HTML for embedding
 with st.expander("Embed Chart in Your Website"):
@@ -484,12 +404,15 @@ with st.expander("How to Test Your Model", expanded=False):
     if uploaded_file is not None:
         if st.button("Calculate Score", use_container_width=False):
             with st.spinner("Validating and calculating scores..."):
+                # Validate format
                 is_valid, result = validate_tsv_format(uploaded_file)
                 if is_valid:
+                    # Calculate score using private ground truth
                     scores = calculate_score_backend(result)
                     if scores is not None:
                         st.success(f"✅ Score calculated successfully: **{scores['Total Score']:.1f}**")
                         
+                        # Store in session state
                         st.session_state.user_results = {
                             'Model': 'Your Model',
                             **scores
@@ -521,7 +444,7 @@ with st.expander("How to Test Your Model", expanded=False):
 # Footer
 st.markdown("---")
 st.markdown("""
-<div class="footer-text">
-    <p>NaviTrace Benchmark | <a href="mailto:your-email@domain.com">Contact</a></p>
+<div style="text-align: center; color: #666; padding: 2rem 0;">
+    <p>NaviTrace Benchmark | <a href="mailto:your-email@domain.com" style="color: #667eea;">Contact</a></p>
 </div>
 """, unsafe_allow_html=True)