add guide

src/components/header.py

@@ -15,64 +15,83 @@ def get_image_base64(image_path: Path) -> str:
 
 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!
-        """
-    )
+    # Session state for visibility
+    if "show_guide" not in st.session_state:
+        st.session_state.show_guide = True
 
-    # Store badges in a row container
-    st.markdown('<div class="store-badges-row">', unsafe_allow_html=True)
+    if st.session_state.show_guide:
+        # Container for the guide with dismiss button
+        with st.container():
+            col1, col2 = st.columns([0.8, 0.2])
+            with col1:
+                st.markdown("### 🚀 Contribute")
+            with col2:
+                if st.button("✕", help="Dismiss guide"):
+                    st.session_state.show_guide = False
+                    st.rerun()
 
-    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,
+                """
+                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)
+
+            # 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,
+                )
+
+            # 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,
+                )
 
-    with col2:
-        # App Store badge
-        appstore_badge = Path("src/static/images/Download_on_the_App_Store_Badge.svg")
-        if appstore_badge.exists():
+            st.markdown("</div>", unsafe_allow_html=True)
+
+            # Quick steps
             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,
+                """
+                #### Quick Guide:
+                1. **Download** PocketPal AI
+                2. **Get** your preferred model
+                3. **Run** benchmark
+                4. **Submit** to leaderboard
+                """
             )
 
-    st.markdown("</div>", unsafe_allow_html=True)
+            # 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,
+                )
 
-    # 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,
-        )
+    else:
+        # Show restore button when guide is dismissed
+        if st.button("Show Guide", help="Show contribution guide"):
+            st.session_state.show_guide = True
+            st.rerun()
 
 
 def render_header():

src/core/styles.py

@@ -59,7 +59,46 @@ CUSTOM_CSS = """
         padding-bottom: 1rem;
         max-width: 800px;
     }
-    /* Contribution Guide Styles */
+    /* 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;
+    }
+    /* Dismiss button styling */
+    div[data-testid="column"]:last-child button {
+        float: right;
+        background: transparent;
+        border: none;
+        color: #666;
+        padding: 0.2rem 0.4rem;
+        font-size: 1rem;
+        line-height: 1;
+        transition: all 0.2s;
+    }
+    div[data-testid="column"]:last-child button:hover {
+        color: #333;
+    }
+    /* Store badges styling */
     .store-badges-row {
         display: flex;
         justify-content: center;
@@ -75,6 +114,7 @@ CUSTOM_CSS = """
     .store-badge:hover {
         transform: scale(1.05);
     }
+    /* Demo container */
     .demo-container {
         background: #f8f9fa;
         padding: 10px;
@@ -88,30 +128,5 @@ CUSTOM_CSS = """
         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>
 """