Nav bar updates (#18)

about.py

@@ -1,7 +1,7 @@
 import gradio as gr
 
 
-with gr.Blocks() as demo:
+def build_page():
     gr.Markdown(
         """
 ## About AstaBench

app.py

@@ -1,12 +1,19 @@
 # app.py
 import gradio as gr
 import os
+import urllib.parse
 
 from apscheduler.schedulers.background import BackgroundScheduler
 from huggingface_hub import HfApi
-import literature_understanding, main_page, c_and_e, data_analysis, e2e, submission, about
 
 from content import css
+from main_page import build_page as build_main_page
+from literature_understanding import build_page as build_lit_page
+from c_and_e import build_page as build_c_and_e_page
+from data_analysis import build_page as build_data_analysis_page
+from e2e import build_page as build_e2e_page
+from submission import build_page as build_submission_page
+from about import build_page as build_about_page
 
 # --- Constants and Configuration  ---
 LOCAL_DEBUG = not (os.environ.get("system") == "spaces")
@@ -43,6 +50,8 @@ theme = gr.themes.Base(
     font_mono=[gr.themes.GoogleFont('Roboto Mono'), 'ui-monospace', 'monospace', 'monospace'],
 ).set(
     body_text_color='*neutral_950',
+    body_text_color_subdued='*neutral_950',
+    body_text_color_subdued_dark='*neutral_50',
     body_text_color_dark='*neutral_50',
     background_fill_primary='*neutral_50',
     background_fill_primary_dark='*neutral_900',
@@ -79,40 +88,75 @@ theme = gr.themes.Base(
     block_background_fill_dark="#032629",
     block_background_fill="#FAF2E9",
 )
-def render_logo():
-    return gr.Image(
-        value=LOGO_PATH,
-        show_label=False,
-        interactive=False,
-        container=False,
-        show_download_button=False,
-        show_fullscreen_button=False,
-        elem_id="logo-image"
-    )
+try:
+    with open(LOGO_PATH, "r") as f:
+        svg_content = f.read()
+    encoded_svg = urllib.parse.quote(svg_content)
+    home_icon_data_uri = f"data:image/svg+xml,{encoded_svg}"
+except FileNotFoundError:
+    print(f"Warning: Home icon file not found at {LOGO_PATH}.")
+    home_icon_data_uri = "none"
+
+# --- This part creates the JavaScript redirect. It is correct. ---
+redirect_script = """
+<script>
+    if (window.location.pathname === '/') { window.location.replace('/home'); }
+</script>
+"""
+
+# --- This is the final CSS ---
+final_css = css + f"""
+/* --- Find the "Home" button and replace its text with an icon --- */
+.nav-holder nav a[href$="/"] {{
+    display: none !important;
+}}
+.nav-holder nav a[href*="/home"] {{
+    grid-row: 1 !important;
+    grid-column: 1 !important;
+    justify-self: start !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+
+    /* 2. Hide the original "Home" text */
+    font-size: 0 !important;
+    text-indent: -9999px;
+
+    /* 3. Apply the icon as the background */
+    background-image: url("{home_icon_data_uri}") !important;
+    background-size: contain !important;
+    background-repeat: no-repeat !important;
+    background-position: center !important;
+
+    width: 240px !important;    
+    height: 50px !important;   
+    padding: 0 !important;
+    border: none !important;
+    outline: none !important;
+}}
+"""
 # --- Gradio App Definition ---
-demo = gr.Blocks(theme=theme, css=css, head=scroll_script)
-with demo:
-    render_logo()
-    main_page.demo.render()
+demo = gr.Blocks(theme=theme, css=final_css, head=scroll_script + redirect_script)
+with demo.route("Home", "/home"):
+    build_main_page()
+
 with demo.route("Literature Understanding", "/literature-understanding"):
-    render_logo()
-    literature_understanding.demo.render()
+    build_lit_page()
+
 with demo.route("Code & Execution", "/code-execution"):
-    render_logo()
-    c_and_e.demo.render()
+    build_c_and_e_page()
+
 with demo.route("Data Analysis", "/data-analysis"):
-    render_logo()
-    data_analysis.demo.render()
+    build_data_analysis_page()
+
 with demo.route("Discovery", "/discovery"):
-    render_logo()
-    e2e.demo.render()
+    build_e2e_page()
+
 with demo.route("About", "/about"):
-    render_logo()
-    about.demo.render()
-with demo.route(" 🚀 Submit an Agent"):
-    render_logo()
-    submission.demo.render()
+    build_about_page()
 
+with demo.route("🚀 Submit an Agent", "/submit"):
+    build_submission_page()
 # --- Scheduler and Launch
 def restart_space_job():
     print("Scheduler: Attempting to restart space.")
@@ -131,10 +175,10 @@ if __name__ == "__main__":
     if LOCAL_DEBUG:
         print("Launching in LOCAL_DEBUG mode.")
         def get_initial_global_tag_choices(): return ["Overall", "TagA"]
-        demo.launch(debug=True)
+        demo.launch(debug=True, allowed_paths=["assets"])
     else:
         print("Launching in Space mode.")
         # For Spaces, share=False is typical unless specific tunneling is needed.
         # debug=True can be set to False for a "production" Space.
-        demo.launch(server_name="0.0.0.0", server_port=7860, debug=True, share=False)
+        demo.launch(server_name="0.0.0.0", server_port=7860, debug=True, share=False, allowed_paths=["assets"])
 

c_and_e.py

@@ -5,6 +5,5 @@ from category_page_builder import build_category_page
 # Define the category for this page
 CATEGORY_NAME = "Code Execution"
 
-with gr.Blocks() as demo:
-    gr.Markdown(f"## Astabench {CATEGORY_NAME} Leaderboard")
+def build_page():
     build_category_page(CATEGORY_NAME, CODE_EXECUTION_DESCRIPTION)

category_page_builder.py

@@ -5,76 +5,77 @@ import pandas as pd
 from ui_components import create_leaderboard_display, create_benchmark_details_display, get_full_leaderboard_data, create_sub_navigation_bar
 
 def build_category_page(CATEGORY_NAME, PAGE_DESCRIPTION):
-    validation_df, validation_tag_map = get_full_leaderboard_data("validation")
-    test_df, test_tag_map = get_full_leaderboard_data("test")
-    gr.Markdown(PAGE_DESCRIPTION, elem_id="category-intro")
-    with gr.Column(elem_id="validation_nav_container", visible=False) as validation_nav_container:
-        create_sub_navigation_bar(validation_tag_map, CATEGORY_NAME)
+    with gr.Column(elem_id="page-content-wrapper"):
+        validation_df, validation_tag_map = get_full_leaderboard_data("validation")
+        test_df, test_tag_map = get_full_leaderboard_data("test")
+        with gr.Column(elem_id="validation_nav_container", visible=False) as validation_nav_container:
+            create_sub_navigation_bar(validation_tag_map, CATEGORY_NAME)
 
-    with gr.Column(elem_id="test_nav_container", visible=True) as test_nav_container:
-        create_sub_navigation_bar(test_tag_map, CATEGORY_NAME)
+        with gr.Column(elem_id="test_nav_container", visible=True) as test_nav_container:
+            create_sub_navigation_bar(test_tag_map, CATEGORY_NAME)
+        gr.Markdown(f"## Astabench{CATEGORY_NAME} Leaderboard")
+        gr.Markdown(PAGE_DESCRIPTION, elem_id="category-intro")
+        # --- This page now has two main sections: Validation and Test ---
+        with gr.Tabs():
+            with gr.Tab("Results: Test Set") as test_tab:
+                # Repeat the process for the "test" split
+                test_df, test_tag_map = get_full_leaderboard_data("test")
 
-    # --- This page now has two main sections: Validation and Test ---
-    with gr.Tabs():
-        with gr.Tab("Results: Test Set") as test_tab:
-            # Repeat the process for the "test" split
-            test_df, test_tag_map = get_full_leaderboard_data("test")
+                if not test_df.empty:
+                    create_leaderboard_display(
+                        full_df=test_df,
+                        tag_map=test_tag_map,
+                        category_name=CATEGORY_NAME,
+                        split_name="test"
+                    )
+                    create_benchmark_details_display(
+                        full_df=test_df,
+                        tag_map=test_tag_map,
+                        category_name=CATEGORY_NAME
+                    )
+                else:
+                    gr.Markdown("No data available for test split.")
+            with gr.Tab("Results: Validation Set") as validation_tab:
+                # 1. Load all necessary data for the "validation" split ONCE.
+                validation_df, validation_tag_map = get_full_leaderboard_data("validation")
 
-            if not test_df.empty:
-                create_leaderboard_display(
-                    full_df=test_df,
-                    tag_map=test_tag_map,
-                    category_name=CATEGORY_NAME,
-                    split_name="test"
-                )
-                create_benchmark_details_display(
-                    full_df=test_df,
-                    tag_map=test_tag_map,
-                    category_name=CATEGORY_NAME
-                )
-            else:
-                gr.Markdown("No data available for test split.")
-        with gr.Tab("Results: Validation Set") as validation_tab:
-            # 1. Load all necessary data for the "validation" split ONCE.
-            validation_df, validation_tag_map = get_full_leaderboard_data("validation")
+                if not validation_df.empty:
+                    # 2. Render the main category display using the loaded data.
+                    create_leaderboard_display(
+                        full_df=validation_df,
+                        tag_map=validation_tag_map,
+                        category_name=CATEGORY_NAME,
+                        split_name="validation"
+                    )
 
-            if not validation_df.empty:
-                # 2. Render the main category display using the loaded data.
-                create_leaderboard_display(
-                    full_df=validation_df,
-                    tag_map=validation_tag_map,
-                    category_name=CATEGORY_NAME,
-                    split_name="validation"
-                )
+                    # 3. Render the detailed breakdown for each benchmark in the category.
+                    create_benchmark_details_display(
+                        full_df=validation_df,
+                        tag_map=validation_tag_map,
+                        category_name=CATEGORY_NAME
+                    )
+                else:
+                    gr.Markdown("No data available for validation split.")
 
-                # 3. Render the detailed breakdown for each benchmark in the category.
-                create_benchmark_details_display(
-                    full_df=validation_df,
-                    tag_map=validation_tag_map,
-                    category_name=CATEGORY_NAME
-                )
-            else:
-                gr.Markdown("No data available for validation split.")
 
+        show_validation_js = """
+            () => {
+                document.getElementById('validation_nav_container').style.display = 'block';
+                document.getElementById('test_nav_container').style.display = 'none';
+                setTimeout(() => { window.dispatchEvent(new Event('resize')) }, 0);
+            }
+            """
 
-    show_validation_js = """
-        () => {
-            document.getElementById('validation_nav_container').style.display = 'block';
-            document.getElementById('test_nav_container').style.display = 'none';
-            setTimeout(() => { window.dispatchEvent(new Event('resize')) }, 0);
-        }
-        """
+        # JavaScript to show the TEST nav, hide the VALIDATION nav, AND fix the plots.
+        show_test_js = """
+            () => {
+                document.getElementById('validation_nav_container').style.display = 'none';
+                document.getElementById('test_nav_container').style.display = 'block';
+            }
+            """
 
-    # JavaScript to show the TEST nav, hide the VALIDATION nav, AND fix the plots.
-    show_test_js = """
-        () => {
-            document.getElementById('validation_nav_container').style.display = 'none';
-            document.getElementById('test_nav_container').style.display = 'block';
-        }
-        """
-
-    # Assign the pure JS functions to the select events. No Python `fn` is needed.
-    validation_tab.select(fn=None, inputs=None, outputs=None, js=show_validation_js)
-    test_tab.select(fn=None, inputs=None, outputs=None, js=show_test_js)
+        # Assign the pure JS functions to the select events. No Python `fn` is needed.
+        validation_tab.select(fn=None, inputs=None, outputs=None, js=show_validation_js)
+        test_tab.select(fn=None, inputs=None, outputs=None, js=show_test_js)
 
     return validation_nav_container, test_nav_container

content.py

@@ -144,10 +144,12 @@ css = """
 #intro-paragraph {
     font-size: 18px;
     max-width: 60%;
+    padding-left: 25px;
 }
 #about-content {
     font-size: 18px;
     max-width: 60%;
+    padding-left: 25px;
 }
 #category-intro {
     font-size: 18px;
@@ -160,6 +162,9 @@ css = """
     max-width: 250px;       
     height: auto;           
 }
+#page-content-wrapper{
+    padding-left: 25px;
+}
 .table-component{
     height: auto !important;
     max-height: none !important;
@@ -243,6 +248,12 @@ nav.svelte-ti537g.svelte-ti537g {
 .sub-nav-link-button:hover {
     text-decoration: underline;
 }
+.sub-nav-label {
+    font-weight: bold;
+    font-size: 16px;
+    display: flex;
+    align-items: center;
+}
 .wrap-header-df th span{
     white-space: normal !important;
     word-break: normal !important;
@@ -335,12 +346,6 @@ html:not(.dark) #legend-markdown .light-mode-icon,
     gap: 10px 20px !important; /* Vertical and horizontal spacing */
     width: 100% !important;
 }
-.nav-holder nav a[href*="/"] {
-    grid-row: 1 !important;
-    grid-column: 1 !important;
-    justify-self: start !important;
-    width: fit-content !important;
-}
 .nav-holder nav a[href*="about"] {
     grid-row: 1 !important;
     grid-column: 6 !important;
@@ -352,18 +357,26 @@ html:not(.dark) #legend-markdown .light-mode-icon,
 .nav-holder nav a[href*="literature-understanding"] {
     grid-row: 3 !important;
     grid-column: 1 !important;
+    width: fit-content !important;
+    justify-self: center !important;
 }
 .nav-holder nav a[href*="code-execution"] {
     grid-row: 3 !important;
     grid-column: 2 !important;
+    padding-right: 20px !important;
+    justify-self: center !important; 
 }
 .nav-holder nav a[href*="data-analysis"] {
     grid-row: 3 !important;
     grid-column: 3 !important;
+    padding-right: 20px !important;
+    justify-self: center !important;
 }
 .nav-holder nav a[href*="discovery"] {
     grid-row: 3 !important;
     grid-column: 4 !important;
+    padding-right: 20px !important;
+    justify-self: center !important;
 }
 .nav-holder nav::after {
     content: ''; /* Required for pseudo-elements to appear */

data_analysis.py

@@ -4,6 +4,5 @@ from category_page_builder import build_category_page
 # Define the category for this page
 CATEGORY_NAME = "Data Analysis"
 
-with gr.Blocks() as demo:
-    gr.Markdown(f"## Astabench{CATEGORY_NAME} Leaderboard")
+def build_page():
     build_category_page(CATEGORY_NAME, DATA_ANALYSIS_DESCRIPTION)

e2e.py

@@ -4,6 +4,5 @@ from category_page_builder import build_category_page
 # Define the category for this page
 CATEGORY_NAME = "Discovery"
 
-with gr.Blocks() as demo:
-    gr.Markdown(f"## Astabench{CATEGORY_NAME} Leaderboard")
+def build_page():
     build_category_page(CATEGORY_NAME, DISCOVERY_DESCRIPTION)

literature_understanding.py

@@ -1,10 +1,8 @@
-import gradio as gr
 from content import LIT_DESCRIPTION
 from category_page_builder import build_category_page
 
 # Define the category for this page
 CATEGORY_NAME = "Literature Understanding"
 
-with gr.Blocks() as demo:
-    gr.Markdown(f"## Astabench{CATEGORY_NAME} Leaderboard")
+def build_page():
     build_category_page(CATEGORY_NAME, LIT_DESCRIPTION)

main_page.py

@@ -15,7 +15,7 @@ from content import (
 CACHED_VIEWERS = {}
 CACHED_TAG_MAPS = {}
 
-with gr.Blocks(fill_width=True) as demo:
+def build_page():
     gr.Markdown(INTRO_PARAGRAPH, elem_id="intro-paragraph")
     # --- Leaderboard Display Section ---
     gr.Markdown("---")

submission.py

@@ -283,7 +283,7 @@ def add_new_eval(
 
 
 # --- Submission Accordion ---
-with gr.Blocks() as demo:
+def build_page():
     gr.Markdown(f"## 🚀 Submit a new agent for evaluation", elem_id="markdown-text")
     with gr.Row():
         with gr.Column():

ui_components.py

@@ -566,6 +566,7 @@ def create_sub_navigation_bar(tag_map: dict, category_name: str):
     # This container will be our flexbox row.
     full_html = f"""
         <div class="sub-nav-bar-container">
+            <span class="sub-nav-label">Benchmarks:</span>
             {''.join(html_buttons)}
         </div>
     """