Spaces:
Running
Running
| import streamlit as st | |
| import base64 | |
| from pathlib import Path | |
| def get_image_base64(image_path: Path) -> str: | |
| """Convert image to base64 string""" | |
| if not image_path.exists(): | |
| st.error(f"Logo not found at {image_path}") | |
| return "" | |
| with open(image_path, "rb") as img_file: | |
| return base64.b64encode(img_file.read()).decode("utf-8") | |
| def render_contribution_guide(): | |
| """Render the contribution guide section""" | |
| # Session state for visibility | |
| if "show_guide" not in st.session_state: | |
| st.session_state.show_guide = 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() | |
| st.markdown( | |
| """ | |
| How does your device stack up? Benchmark your phone and join the leaderboard! | |
| """ | |
| ) | |
| col1, col2 = st.columns([0.5, 0.5]) | |
| 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, | |
| ) | |
| # Quick steps | |
| 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("Guide", help="Show contribution guide"): | |
| st.session_state.show_guide = True | |
| st.rerun() | |
| def render_header(): | |
| """Render the application header with logos""" | |
| # Logo paths | |
| pocketpal_logo_path = Path("src/static/images/pocketpal-ai-logo.png") | |
| # Create header columns with the same ratio as main content | |
| if "show_guide" not in st.session_state: | |
| st.session_state.show_guide = True | |
| header_main, header_side = st.columns( | |
| [ | |
| 0.9 if not st.session_state.show_guide else 0.8, | |
| 0.1 if not st.session_state.show_guide else 0.2, | |
| ] | |
| ) | |
| with header_main: | |
| header_html = f""" | |
| <div class="header-container"> | |
| <div class="logos-container"> | |
| <img src="data:image/png;base64,{get_image_base64(pocketpal_logo_path)}" class="logo pocketpal" alt="PocketPal AI Logo"> | |
| </div> | |
| <h1 class="header-title">AI Phone Leaderboard</h1> | |
| <p class="header-subtitle">Comparing Large Language Models performance across AI Phones. Powered by PocketPal AI.</p> | |
| </div> | |
| """ | |
| st.markdown(header_html, unsafe_allow_html=True) | |