src/components/header.py

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"""
    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
    #pocketpal_logo_path = Path("src/static/images/pocketpal-ai-logo-new-year.png")
    pocketpal_logo_path = Path("src/static/images/pocketpal-ai-logo.png")

    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)