add guide to submit

src/app.py

@@ -8,7 +8,7 @@ from .components.visualizations import (
     render_leaderboard_table,
     render_performance_plots,
 )
-from .components.header import render_header
+from .components.header import render_header, render_contribution_guide
 from .services.firebase import fetch_leaderboard_data
 from .core.styles import CUSTOM_CSS
 
@@ -87,56 +87,63 @@ async def main():
         max_n_gpu_layers,
     ) = get_filter_values(df)
 
-    # Render filters
-    table_filters = render_table_filters(
-        models,
-        platforms,
-        devices,
-        cache_type_v,
-        cache_type_k,
-        pp_range,
-        tg_range,
-        n_threads,
-        versions,
-        max_n_gpu_layers,
-    )
-
-    # Render the main leaderboard table
-    render_leaderboard_table(df, table_filters)
-
-    # Render plot section
-    st.markdown("---")
-    st.title("📊 Performance Comparison")
-
-    # Plot specific selectors in a row
-    plot_col1, plot_col2, plot_col3 = st.columns(3)
-
-    with plot_col1:
-        plot_model = st.selectbox(
-            "Select Model for Comparison", options=models, key="plot_model_selector"
+    # Create main layout with sidebar for contribution guide
+    main_col, guide_col = st.columns([0.8, 0.2])
+
+    with main_col:
+        # Render filters
+        table_filters = render_table_filters(
+            models,
+            platforms,
+            devices,
+            cache_type_v,
+            cache_type_k,
+            pp_range,
+            tg_range,
+            n_threads,
+            versions,
+            max_n_gpu_layers,
         )
 
-    with plot_col2:
-        plot_pp = st.selectbox(
-            "Select PP Config for Comparison",
-            options=sorted([int(x) for x in df["PP Config"].unique()]),
-            key="plot_pp_selector",
-        )
-
-    with plot_col3:
-        plot_tg = st.selectbox(
-            "Select TG Config for Comparison",
-            options=sorted([int(x) for x in df["TG Config"].unique()]),
-            key="plot_tg_selector",
-        )
-
-    # Create plot filters based on table filters but override the model and configs
-    plot_filters = table_filters.copy()
-    plot_filters["model"] = plot_model
-    plot_filters["pp_range"] = (plot_pp, plot_pp)  # Set exact PP value
-    plot_filters["tg_range"] = (plot_tg, plot_tg)  # Set exact TG value
-
-    render_performance_plots(df, plot_filters)
+        # Render the main leaderboard table
+        render_leaderboard_table(df, table_filters)
+
+        # Render plot section
+        st.markdown("---")
+        st.title("📊 Performance Comparison")
+
+        # Plot specific selectors in a row
+        plot_col1, plot_col2, plot_col3 = st.columns(3)
+
+        with plot_col1:
+            plot_model = st.selectbox(
+                "Select Model for Comparison", options=models, key="plot_model_selector"
+            )
+
+        with plot_col2:
+            plot_pp = st.selectbox(
+                "Select PP Config for Comparison",
+                options=sorted([int(x) for x in df["PP Config"].unique()]),
+                key="plot_pp_selector",
+            )
+
+        with plot_col3:
+            plot_tg = st.selectbox(
+                "Select TG Config for Comparison",
+                options=sorted([int(x) for x in df["TG Config"].unique()]),
+                key="plot_tg_selector",
+            )
+
+        # Create plot filters based on table filters but override the model and configs
+        plot_filters = table_filters.copy()
+        plot_filters["model"] = plot_model
+        plot_filters["pp_range"] = (plot_pp, plot_pp)  # Set exact PP value
+        plot_filters["tg_range"] = (plot_tg, plot_tg)  # Set exact TG value
+
+        render_performance_plots(df, plot_filters)
+
+    with guide_col:
+        render_contribution_guide()
 
 
 if __name__ == "__main__":

src/components/header.py

@@ -13,6 +13,68 @@ def get_image_base64(image_path: Path) -> str:
         return base64.b64encode(img_file.read()).decode("utf-8")
 
 
+def render_contribution_guide():
+    """Render the contribution guide section"""
+    st.markdown("### 🚀 Contribute")
+    st.markdown(
+        """
+        How does your device stack up? Benchmark your phone and join the leaderboard!
+        """
+    )
+
+    # Store badges in a row container
+    st.markdown('<div class="store-badges-row">', unsafe_allow_html=True)
+
+    col1, col2 = st.columns(2)
+    with col1:
+        # Google Play badge
+        playstore_badge = Path("src/static/images/GetItOnGooglePlay_Badge.png")
+        if playstore_badge.exists():
+            st.markdown(
+                f'<a href="https://play.google.com/store/apps/details?id=com.pocketpalai" target="_blank">'
+                f'<img src="data:image/png;base64,{get_image_base64(playstore_badge)}" '
+                'class="store-badge" alt="Get it on Google Play">'
+                "</a>",
+                unsafe_allow_html=True,
+            )
+
+    with col2:
+        # App Store badge
+        appstore_badge = Path("src/static/images/Download_on_the_App_Store_Badge.svg")
+        if appstore_badge.exists():
+            st.markdown(
+                f'<a href="https://apps.apple.com/de/app/pocketpal-ai/id6502579498" target="_blank">'
+                f'<img src="data:image/svg+xml;base64,{get_image_base64(appstore_badge)}" '
+                'class="store-badge" alt="Download on the App Store">'
+                "</a>",
+                unsafe_allow_html=True,
+            )
+
+    st.markdown("</div>", unsafe_allow_html=True)
+
+    # Steps to contribute
+    st.markdown(
+        """
+    #### Quick Guide:
+    1. **Download** PocketPal AI
+    2. **Get** your preferred model
+    3. **Run** benchmark
+    4. **Submit** to leaderboard
+    """
+    )
+
+    # Demo video/gif
+    demo_gif = Path("src/static/images/Bench.gif")
+    if demo_gif.exists():
+        st.markdown(
+            f'<div class="demo-container">'
+            f'<img src="data:image/gif;base64,{get_image_base64(demo_gif)}" '
+            'class="demo-gif" alt="Benchmark Demo">'
+            "</div>",
+            unsafe_allow_html=True,
+        )
+
+
 def render_header():
     """Render the application header with logos"""
     # Logo paths

src/core/styles.py

@@ -58,5 +58,59 @@ CUSTOM_CSS = """
         padding-bottom: 1rem;
         max-width: 800px;
     }
+    /* Contribution Guide Styles */
+    .store-badges-row {
+        display: flex;
+        justify-content: center;
+        gap: 10px;
+        margin: 10px 0;
+        flex-wrap: wrap;
+    }
+    .store-badge {
+        height: 35px;
+        transition: transform 0.2s;
+        display: inline-block;
+    }
+    .store-badge:hover {
+        transform: scale(1.05);
+    }
+    .demo-container {
+        background: #f8f9fa;
+        padding: 10px;
+        border-radius: 8px;
+        margin: 15px 0;
+        text-align: center;
+    }
+    .demo-gif {
+        width: 100%;
+        max-width: 250px;
+        border-radius: 8px;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    }
+    /* Guide Typography */
+    div[data-testid="column"]:last-child h3 {
+        font-size: 1.3rem;
+        margin: 0.5rem 0;
+        color: #1a1a1a;
+    }
+    div[data-testid="column"]:last-child h4 {
+        font-size: 1.1rem;
+        margin: 1rem 0 0.5rem 0;
+        color: #333;
+    }
+    div[data-testid="column"]:last-child ol {
+        padding-left: 1.2rem;
+        margin: 0.5rem 0;
+    }
+    div[data-testid="column"]:last-child li {
+        margin: 0.3rem 0;
+        color: #444;
+        font-size: 0.9rem;
+    }
+    div[data-testid="column"]:last-child p {
+        font-size: 0.95rem;
+        color: #666;
+        margin: 0.5rem 0;
+    }
     </style>
-""" 
+"""