File size: 4,546 Bytes
37d5f61
 
 
 
43c0b68
37d5f61
 
 
 
 
 
 
 
 
43c0b68
124754e
 
ed3a35a
 
 
124754e
ed3a35a
 
 
 
 
 
 
 
 
 
124754e
 
ed3a35a
 
 
 
 
8de1ee6
 
 
 
 
 
 
 
 
 
 
 
ed3a35a
8de1ee6
 
 
 
ed3a35a
8de1ee6
 
 
 
 
 
 
 
ed3a35a
 
124754e
ed3a35a
 
 
 
 
 
 
124754e
 
ed3a35a
 
 
 
 
 
 
 
 
 
124754e
ed3a35a
 
8de1ee6
ed3a35a
 
124754e
 
37d5f61
 
 
 
43c0b68
c37308e
8de1ee6
 
 
 
 
 
 
 
 
c37308e
 
 
 
 
 
 
 
 
37d5f61
c37308e
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
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)