apply header

src/app.py

@@ -8,7 +8,9 @@ from .components.visualizations import (
     render_leaderboard_table,
     render_performance_plots,
 )
+from .components.header import render_header
 from .services.firebase import fetch_leaderboard_data
+from .core.styles import CUSTOM_CSS
 
 
 def get_unique_values(df: pd.DataFrame) -> tuple[List[str], List[str], List[str]]:
@@ -27,6 +29,9 @@ async def main():
         layout="wide",
     )
 
+    # Apply custom styles
+    st.markdown(CUSTOM_CSS, unsafe_allow_html=True)
+
     # Fetch initial data
     df = await fetch_leaderboard_data()
 
@@ -34,6 +39,9 @@ async def main():
         st.error("No data available. Please check your connection and try again.")
         return
 
+    # Render header
+    render_header()
+
     # Get unique values for filters
     models, platforms, devices = get_unique_values(df)
 
@@ -41,7 +49,6 @@ async def main():
     table_filters = render_table_filters(models, platforms, devices)
 
     # Render the main leaderboard table
-    st.title("📱 AI Phone Benchmark Leaderboard")
     render_leaderboard_table(df, table_filters)
 
     # Render plot section

src/components/header.py

@@ -2,6 +2,7 @@ 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():
@@ -11,20 +12,21 @@ def get_image_base64(image_path: Path) -> str:
     with open(image_path, "rb") as img_file:
         return base64.b64encode(img_file.read()).decode("utf-8")
 
+
 def render_header():
     """Render the application header with logos"""
     # Logo paths
     hf_logo_path = Path("src/static/images/hf-logo.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(hf_logo_path)}" class="logo" alt="Hugging Face Logo">
                 <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 Benchmark Leaderboard</h1>
+            <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) 
+    st.markdown(header_html, unsafe_allow_html=True)