Update src/streamlit_app.py

src/streamlit_app.py

@@ -8,71 +8,118 @@ import json
 # Page config
 st.set_page_config(
     page_title="NaviTrace Leaderboard",
-    page_icon="🧭",
-    layout="wide",
+    page_icon="logo.svg",  # Place your SVG file in the repository root
+    layout="centered",
     initial_sidebar_state="collapsed"
 )
 
 # Custom CSS for Nerfies-style design
 st.markdown("""
 <style>
+    /* Import Font Awesome */
+    @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');
+    
+    /* Limit page width */
+    .main .block-container {
+        max-width: 900px;
+        padding-top: 3rem;
+    }
+    
     /* Main title styling */
     .main-title {
         text-align: center;
-        font-size: 3.5rem;
+        font-size: 3rem;
         font-weight: 700;
-        margin-top: 2rem;
-        margin-bottom: 1rem;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        background-clip: text;
+        margin-top: 1rem;
+        margin-bottom: 2rem;
+        color: #333;
     }
     
-    /* Links container */
-    .links-container {
-        text-align: center;
+    /* Button links container - Nerfies style */
+    .button-links {
+        display: flex;
+        justify-content: center;
+        gap: 1rem;
         margin-bottom: 3rem;
-        font-size: 1.1rem;
+        flex-wrap: wrap;
     }
     
-    .links-container a {
-        margin: 0 1rem;
+    .button-link {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.6rem 1.5rem;
+        background-color: #f8f9fa;
+        border: 1px solid #dee2e6;
+        border-radius: 50px;
         text-decoration: none;
-        color: #667eea;
-        font-weight: 600;
-        transition: color 0.3s;
+        color: #333;
+        font-weight: 500;
+        transition: all 0.3s ease;
+        font-size: 0.95rem;
     }
     
-    .links-container a:hover {
-        color: #764ba2;
+    .button-link:hover {
+        background-color: #e9ecef;
+        transform: translateY(-2px);
+        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+        color: #333;
+        text-decoration: none;
+    }
+    
+    .button-link i {
+        font-size: 1rem;
     }
     
     /* Section headers */
     .section-header {
-        font-size: 2rem;
+        font-size: 1.8rem;
         font-weight: 600;
-        margin-top: 2rem;
-        margin-bottom: 1rem;
+        margin-top: 3rem;
+        margin-bottom: 1.5rem;
         color: #333;
     }
     
-    /* Instructions box */
-    .instructions-box {
-        background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);
-        border-left: 4px solid #667eea;
-        padding: 2rem;
-        border-radius: 8px;
+    /* Instructions styling */
+    .instruction-item {
+        display: flex;
+        gap: 1.5rem;
         margin: 2rem 0;
+        align-items: flex-start;
     }
     
-    .instruction-step {
+    .instruction-number {
+        flex-shrink: 0;
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: 700;
+        font-size: 1.2rem;
+    }
+    
+    .instruction-content {
+        flex-grow: 1;
+        padding-top: 0.3rem;
+    }
+    
+    .instruction-title {
         font-size: 1.1rem;
-        margin: 1rem 0;
-        padding-left: 1.5rem;
+        font-weight: 600;
+        margin-bottom: 0.5rem;
+        color: #333;
+    }
+    
+    .instruction-desc {
+        color: #666;
+        line-height: 1.6;
     }
     
-    /* Button styling */
+    /* Streamlit button styling */
     .stButton>button {
         background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
         color: white;
@@ -92,15 +139,16 @@ st.markdown("""
     #MainMenu {visibility: hidden;}
     footer {visibility: hidden;}
     
-    /* Tab styling */
-    .stTabs [data-baseweb="tab-list"] {
-        gap: 2rem;
-    }
-    
-    .stTabs [data-baseweb="tab"] {
+    /* Expander styling */
+    .streamlit-expanderHeader {
         font-size: 1.1rem;
         font-weight: 600;
     }
+    
+    /* File uploader */
+    [data-testid="stFileUploader"] {
+        margin: 1rem 0;
+    }
 </style>
 """, unsafe_allow_html=True)
 
@@ -117,15 +165,54 @@ def load_sample_data():
         'Category-Object': [87.3, 84.7, 81.8, 77.6, 74.8],
     })
 
-def calculate_score(uploaded_file):
-    """Calculate score from uploaded TSV file"""
+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,
+            'Embodiment-B': 84.0,
+            'Embodiment-C': 84.0,
+            'Category-Spatial': 86.0,
+            'Category-Temporal': 85.0,
+            'Category-Object': 84.0,
+        }
+        return scores
+    except Exception as e:
+        st.error(f"Error calculating score: {str(e)}")
+        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')
-        # Replace this with your actual scoring logic
-        score = 85.0  # Placeholder
-        return score, df
+        # 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
     except Exception as e:
-        return None, str(e)
+        return False, f"Error reading file: {str(e)}"
 
 def create_bar_chart(df, view_type):
     """Create interactive bar chart based on view type"""
@@ -201,14 +288,23 @@ def create_bar_chart(df, view_type):
     return fig
 
 # Main content
-st.markdown('<h1 class="main-title">🧭 NaviTrace Leaderboard</h1>', unsafe_allow_html=True)
+st.markdown('<h1 class="main-title">NaviTrace Leaderboard</h1>', unsafe_allow_html=True)
 
-# Links
+# Nerfies-style button links
 st.markdown("""
-<div class="links-container">
-    <a href="https://your-paper-website.com" target="_blank">📄 Paper</a>
-    <a href="https://huggingface.co/datasets/your-username/navitrace" target="_blank">🤗 Dataset</a>
-    <a href="https://github.com/your-username/navitrace" target="_blank">💻 GitHub</a>
+<div class="button-links">
+    <a href="https://your-paper-website.com" target="_blank" class="button-link">
+        <i class="fas fa-file-pdf"></i> Paper
+    </a>
+    <a href="https://huggingface.co/datasets/your-username/navitrace" target="_blank" class="button-link">
+        <i class="fas fa-database"></i> Dataset
+    </a>
+    <a href="https://github.com/your-username/navitrace" target="_blank" class="button-link">
+        <i class="fab fa-github"></i> Code
+    </a>
+    <a href="https://your-demo-link.com" target="_blank" class="button-link">
+        <i class="far fa-images"></i> Demo
+    </a>
 </div>
 """, unsafe_allow_html=True)
 
@@ -222,16 +318,13 @@ if 'user_results' in st.session_state:
 
 # 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.markdown('<h2 class="section-header">Leaderboard</h2>', unsafe_allow_html=True)
 
 # View selector
-col1, col2, col3 = st.columns([1, 1, 1])
-with col1:
-    view_type = st.selectbox(
-        "Select View",
-        ["Total Score", "Per Embodiment", "Per Category"],
-        label_visibility="collapsed"
-    )
+view_type = st.selectbox(
+    "Select View",
+    ["Total Score", "Per Embodiment", "Per Category"],
+)
 
 # Display chart
 fig = create_bar_chart(df, view_type)
@@ -247,8 +340,12 @@ st.plotly_chart(fig, use_container_width=True, config={
     }
 })
 
+# Detailed table
+with st.expander("View Detailed Scores"):
+    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"):
+with st.expander("Embed Chart in Your Website"):
     html_str = fig.to_html(include_plotlyjs='cdn')
     st.code(html_str, language='html')
     st.download_button(
@@ -258,84 +355,97 @@ with st.expander("📎 Embed Chart in Your Website"):
         mime="text/html"
     )
 
-# Detailed table
-with st.expander("📋 View Detailed Scores"):
-    st.dataframe(df.style.background_gradient(cmap='Purples', subset=df.columns[1:]), use_container_width=True)
-
 # Instructions section
-st.markdown('<h2 class="section-header">🚀 Test Your Own Model</h2>', unsafe_allow_html=True)
-
-st.markdown("""
-<div class="instructions-box">
-    <p style="font-size: 1.2rem; font-weight: 600; margin-bottom: 1.5rem;">Follow these steps to evaluate your model on NaviTrace:</p>
-</div>
-""", unsafe_allow_html=True)
-
-# Step 1
-st.markdown("### Step 1: Run Evaluation")
-st.markdown("""
-Download and run our evaluation notebook on your model. The notebook will generate a TSV file with your model's predictions.
-""")
-col1, col2 = st.columns([1, 3])
-with col1:
-    st.link_button("📓 Evaluation Notebook", "https://colab.research.google.com/your-notebook-link")
+st.markdown('<h2 class="section-header">Evaluate Your Model</h2>', unsafe_allow_html=True)
 
-st.markdown("---")
-
-# Step 2
-st.markdown("### Step 2: Upload Results")
-st.markdown("Upload the TSV file generated by the evaluation notebook:")
-uploaded_file = st.file_uploader("Choose a TSV file", type=['tsv', 'txt'], label_visibility="collapsed")
-
-st.markdown("---")
-
-# Step 3
-st.markdown("### Step 3: Calculate Score")
-if uploaded_file is not None:
-    if st.button("🧮 Calculate Score", use_container_width=False):
-        with st.spinner("Calculating scores..."):
-            score, result = calculate_score(uploaded_file)
-            if score is not None:
-                st.success(f"✅ Score calculated successfully: **{score:.1f}**")
-                
-                # Store in session state (simplified example)
-                st.session_state.user_results = {
-                    'Model': 'Your Model',
-                    'Total Score': score,
-                    'Embodiment-A': score + 2,
-                    'Embodiment-B': score - 1,
-                    'Embodiment-C': score,
-                    'Category-Spatial': score + 1,
-                    'Category-Temporal': score - 1,
-                    'Category-Object': score,
-                }
-                
-                st.markdown("---")
-                
-                # Step 4
-                st.markdown("### Step 4: View Your Results")
-                st.markdown("Your model has been added to the leaderboard above!")
-                st.link_button("🔝 Go to Leaderboard", "#leaderboard")
-                
-            else:
-                st.error(f"❌ Error calculating score: {result}")
-else:
-    st.info("👆 Upload a TSV file to calculate your score")
-
-st.markdown("---")
-
-# Step 5
-st.markdown("### Step 5: Submit Your Model")
-st.markdown("""
-Happy with your results? Submit your model to appear on the official leaderboard!
-Fill out our submission form with your model details and results.
-""")
-st.link_button("📝 Submission Form", "https://forms.gle/your-google-form-link")
+with st.expander("How to Test Your Model", expanded=False):
+    # Step 1
+    st.markdown("""
+    <div class="instruction-item">
+        <div class="instruction-number">1</div>
+        <div class="instruction-content">
+            <div class="instruction-title">Run Evaluation</div>
+            <div class="instruction-desc">
+                Download and run our evaluation notebook on your model. The notebook will generate a TSV file with your model's predictions on the test set.
+            </div>
+        </div>
+    </div>
+    """, unsafe_allow_html=True)
+    
+    st.link_button("📓 Open Evaluation Notebook", "https://colab.research.google.com/your-notebook-link", use_container_width=False)
+    
+    # Step 2
+    st.markdown("""
+    <div class="instruction-item">
+        <div class="instruction-number">2</div>
+        <div class="instruction-content">
+            <div class="instruction-title">Upload Results</div>
+            <div class="instruction-desc">
+                Upload the TSV file generated by the evaluation notebook. Your predictions will be evaluated against our private test set.
+            </div>
+        </div>
+    </div>
+    """, unsafe_allow_html=True)
+    
+    uploaded_file = st.file_uploader("Choose a TSV file", type=['tsv', 'txt'])
+    
+    # Step 3
+    st.markdown("""
+    <div class="instruction-item">
+        <div class="instruction-number">3</div>
+        <div class="instruction-content">
+            <div class="instruction-title">Calculate Score</div>
+            <div class="instruction-desc">
+                Click the button below to evaluate your predictions. Scores are calculated using the private test set ground truth.
+            </div>
+        </div>
+    </div>
+    """, unsafe_allow_html=True)
+    
+    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
+                        }
+                        st.info("👆 Scroll up to see your model on the leaderboard!")
+                        st.rerun()
+                else:
+                    st.error(f"❌ Invalid file format: {result}")
+    else:
+        st.info("👆 Upload a TSV file to calculate your score")
+    
+    # Step 4
+    st.markdown("""
+    <div class="instruction-item">
+        <div class="instruction-number">4</div>
+        <div class="instruction-content">
+            <div class="instruction-title">Submit to Official Leaderboard</div>
+            <div class="instruction-desc">
+                Happy with your results? Submit your model to appear on the official leaderboard. 
+                All submissions undergo manual verification to ensure quality and prevent gaming. 
+                Fill out the form below with your model details and results.
+            </div>
+        </div>
+    </div>
+    """, unsafe_allow_html=True)
+    
+    st.link_button("Submit Model (Google Form)", "https://forms.gle/your-google-form-link", use_container_width=False)
 
 # Footer
 st.markdown("---")
 st.markdown("""
 <div style="text-align: center; color: #666; padding: 2rem 0;">
-    <p>NaviTrace Benchmark | Contact: your-email@domain.com</p>
+    <p>NaviTrace Benchmark | <a href="mailto:your-email@domain.com" style="color: #667eea;">Contact</a></p>
 </div>
 """, unsafe_allow_html=True)