add fe

.gitignore

@@ -0,0 +1,41 @@
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+
+# Virtual Environment
+venv/
+ENV/
+
+# Environment Variables
+.env
+.env.local
+
+# IDE
+.idea/
+.vscode/
+*.swp
+*.swo
+
+# Streamlit
+.streamlit/
+
+# Logs
+*.log 

Makefile

@@ -0,0 +1,58 @@
+.PHONY: install venv run test clean lint format help
+
+# Variables
+PYTHON_VERSION := 3.12
+PYTHON := python$(PYTHON_VERSION)
+PIP := pip3
+VENV_NAME := venv
+VENV_BIN := $(VENV_NAME)/bin
+VENV_PYTHON := $(VENV_BIN)/python
+VENV_PIP := $(VENV_BIN)/pip
+PORT := 8501
+
+# Default target
+.DEFAULT_GOAL := help
+
+help: ## Show this help message
+	@echo 'Usage:'
+	@echo '  make <target>'
+	@echo ''
+	@echo 'Targets:'
+	@awk -F ':|##' '/^[^\t].+?:.*?##/ { printf "  %-20s %s\n", $$1, $$NF }' $(MAKEFILE_LIST)
+
+check-python: ## Verify Python version
+	@which $(PYTHON) > /dev/null || (echo "Python $(PYTHON_VERSION) not found. Please install it first." && exit 1)
+
+$(VENV_NAME): check-python ## Create virtual environment if it doesn't exist
+	$(PYTHON) -m venv $(VENV_NAME)
+	$(VENV_PIP) install --upgrade pip
+
+install-dev: $(VENV_NAME) ## Install development dependencies
+	$(VENV_PIP) install -r requirements/dev.txt
+
+install-prod: $(VENV_NAME) ## Install production dependencies
+	$(VENV_PIP) install -r requirements/prod.txt
+
+run: ## Run Streamlit application
+	PYTHONPATH=. $(VENV_BIN)/streamlit run main.py --server.port $(PORT)
+
+clean: ## Clean cache files and remove virtual environment
+	find . -type d -name "__pycache__" -exec rm -rf {} +
+	find . -type d -name ".pytest_cache" -exec rm -rf {} +
+	find . -type f -name "*.pyc" -delete
+	rm -rf $(VENV_NAME)
+
+lint: ## Run linter
+	$(VENV_PIP) install pylint
+	$(VENV_BIN)/pylint src
+
+format: ## Format code using black
+	$(VENV_PIP) install black
+	$(VENV_BIN)/black src
+
+test: ## Run tests
+	$(VENV_BIN)/pytest tests
+
+setup-dev: clean $(VENV_NAME) install-dev ## Clean existing setup and create fresh development installation
+
+setup-prod: clean $(VENV_NAME) install-prod ## Clean existing setup and create fresh production installation 

README.md

@@ -1,14 +1,91 @@
 ---
-title: Ai Phone Leaderboard
-emoji: 🌍
-colorFrom: purple
-colorTo: blue
+title: AI Phone Leaderboard
+emoji: 📱
+colorFrom: blue
+colorTo: purple
 sdk: streamlit
 sdk_version: 1.41.0
-app_file: app.py
+app_file: main.py
 pinned: false
 license: mit
 short_description: AI Phone Leaderboard
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# AI Phone Benchmark Leaderboard
+
+Streamlit frontend for displaying AI model performance benchmarks across different mobile devices.
+
+## Features
+
+- Interactive data filtering
+- Performance comparison charts
+- Detailed benchmark leaderboard
+- Real-time data updates
+- Responsive design
+
+## Local Development
+
+1. Create a virtual environment:
+```bash
+make venv
+```
+
+2. Install dependencies:
+```bash
+make setup-dev
+```
+
+3. Set up environment variables:
+Create a `.env` file:
+```env
+HF_TOKEN=your_hugging_face_token_here  # Required for accessing the API
+```
+
+4. Run the application:
+```bash
+make run
+```
+
+## Deployment
+
+This application is configured for deployment on Hugging Face Spaces:
+
+1. Create a new Space:
+   - Go to huggingface.co/spaces
+   - Click "Create new Space"
+   - Select "Streamlit" as the SDK
+   - Choose a name for your space
+
+2. Add required secret:
+   - Go to Space Settings
+   - Under "Repository Secrets"
+   - Add `HF_TOKEN` with your Hugging Face token
+
+3. The application will automatically deploy when you push to the repository.
+
+## Configuration
+
+The application can be configured through environment variables:
+- `HF_TOKEN`: Hugging Face access token (required)
+- `API_URL`: Backend API URL (defaults to production)
+
+## API Integration
+
+The application integrates with the AI Phone Benchmark API for data retrieval:
+- Leaderboard data
+- Performance metrics
+- Device information
+
+## Development
+
+Available make commands:
+```bash
+make help           # Show available commands
+make setup-dev      # Setup development environment
+make setup-prod     # Setup production environment
+make run           # Run Streamlit application
+make lint          # Run code linter
+make format        # Format code using black
+make test          # Run tests
+make clean         # Clean cache files
+```

main.py

@@ -0,0 +1,79 @@
+import streamlit as st
+import asyncio
+from src.core.styles import CUSTOM_CSS
+from src.components.header import render_header
+from src.components.filters import render_table_filters, render_plot_filters
+from src.components.visualizations import (
+    render_performance_plots,
+    render_leaderboard_table,
+)
+from src.services.api import fetch_leaderboard_data
+
+# Configure the page
+st.set_page_config(
+    page_title="AI-Phone Leaderboard",
+    page_icon="src/static/images/favicon.png",
+    layout="wide",
+    initial_sidebar_state="expanded",
+)
+
+# Apply custom CSS
+st.markdown(CUSTOM_CSS, unsafe_allow_html=True)
+
+async def main():
+    # Render header
+    render_header()
+    
+    # Fetch initial data
+    full_df = await fetch_leaderboard_data()
+    if full_df.empty:
+        st.info("No benchmark data available yet!")
+        return
+
+    # Get unique values for filters
+    models = sorted(full_df["Model"].unique())
+    benchmarks = sorted(full_df["Benchmark"].unique())
+    platforms = sorted(full_df["Platform"].unique())
+    devices = sorted(full_df["Normalized Device ID"].unique())
+
+    # Render table filters and get selections
+    (
+        selected_model_table,
+        selected_benchmark_table,
+        selected_platform_table,
+        selected_device_table,
+    ) = render_table_filters(models, benchmarks, platforms, devices)
+
+    # Filter data for table
+    table_df = full_df.copy()
+    if selected_model_table != "All":
+        table_df = table_df[table_df["Model"] == selected_model_table]
+    if selected_benchmark_table != "All":
+        table_df = table_df[table_df["Benchmark"] == selected_benchmark_table]
+    if selected_platform_table != "All":
+        table_df = table_df[table_df["Platform"] == selected_platform_table]
+    if selected_device_table != "All":
+        table_df = table_df[table_df["Normalized Device ID"] == selected_device_table]
+
+    # Render leaderboard table
+    render_leaderboard_table(table_df)
+
+    # Performance plots section
+    st.subheader("Performance Comparison")
+
+    # Render plot filters and get selections
+    selected_model_plot, selected_benchmark_plot = render_plot_filters(
+        models, benchmarks
+    )
+
+    # Filter data for plots
+    plot_df = full_df[
+        (full_df["Model"] == selected_model_plot)
+        & (full_df["Benchmark"] == selected_benchmark_plot)
+    ]
+
+    # Render performance plots
+    render_performance_plots(plot_df, selected_model_plot)
+
+if __name__ == "__main__":
+    asyncio.run(main()) 

requirements/base.txt

@@ -0,0 +1,7 @@
+streamlit>=1.28.0
+requests>=2.31.0
+python-dotenv>=1.0.0
+pandas>=2.1.3
+plotly>=5.18.0
+httpx>=0.25.1
+pydantic-settings>=2.0.3 

requirements/dev.txt

@@ -0,0 +1,5 @@
+-r base.txt
+pytest>=7.4.3
+black>=23.10.1
+pylint>=3.0.2
+pytest-cov>=4.1.0 

requirements/prod.txt

@@ -0,0 +1 @@
+-r base.txt 

src/app.py

@@ -0,0 +1,15 @@
+import asyncio
+from typing import Optional
+import pandas as pd
+
+async def fetch_and_filter_data(
+    model_name: Optional[str] = None,
+    benchmark_label: Optional[str] = None
+) -> pd.DataFrame:
+    """Fetch and filter data based on parameters"""
+    from .services.api import fetch_leaderboard_data
+    
+    return await fetch_leaderboard_data(
+        model_name=model_name,
+        benchmark_label=benchmark_label
+    ) 

src/components/filters.py

@@ -0,0 +1,50 @@
+import streamlit as st
+from typing import List, Tuple
+
+def render_table_filters(
+    models: List[str],
+    benchmarks: List[str],
+    platforms: List[str],
+    devices: List[str]
+) -> Tuple[str, str, str, str]:
+    """Render and handle table filters"""
+    table_filters = st.container()
+    with table_filters:
+        t1, t2, t3, t4 = st.columns(4)
+        with t1:
+            selected_model = st.selectbox(
+                "Model", ["All"] + list(models), key="table_model"
+            )
+        with t2:
+            selected_benchmark = st.selectbox(
+                "Benchmark", ["All"] + list(benchmarks), key="table_benchmark"
+            )
+        with t3:
+            selected_platform = st.selectbox(
+                "Platform", ["All"] + list(platforms), key="table_platform"
+            )
+        with t4:
+            selected_device = st.selectbox(
+                "Device", ["All"] + list(devices), key="table_device"
+            )
+    
+    return selected_model, selected_benchmark, selected_platform, selected_device
+
+def render_plot_filters(
+    models: List[str],
+    benchmarks: List[str]
+) -> Tuple[str, str]:
+    """Render and handle plot filters"""
+    plot_filters = st.container()
+    with plot_filters:
+        p1, p2 = st.columns(2)
+        with p1:
+            selected_model = st.selectbox(
+                "Model for Comparison", models, key="plot_model"
+            )
+        with p2:
+            selected_benchmark = st.selectbox(
+                "Benchmark for Comparison", benchmarks, key="plot_benchmark"
+            )
+    
+    return selected_model, selected_benchmark 

src/components/header.py

@@ -0,0 +1,30 @@
+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_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>
+            <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) 

src/components/visualizations.py

@@ -0,0 +1,119 @@
+import streamlit as st
+import plotly.express as px
+import pandas as pd
+from typing import Optional
+
+def create_performance_plot(df: pd.DataFrame, metric: str, title: str):
+    """Create a performance comparison plot"""
+    if df.empty:
+        return None
+
+    fig = px.bar(
+        df,
+        x="Device",
+        y=metric,
+        color="Platform",
+        title=title,
+        template="plotly_white",
+        barmode="group",
+        hover_data=["CPU Cores", "Memory Usage (GB)", "Model Size"],
+    )
+    fig.update_layout(
+        xaxis_title="Device",
+        yaxis_title="Time (ms)",
+        legend_title="Platform",
+        plot_bgcolor="white",
+        height=400,
+    )
+    return fig
+
+def render_performance_plots(plot_df: pd.DataFrame, model_name: str):
+    """Render performance comparison plots"""
+    if plot_df.empty:
+        st.warning(
+            "No data available for the selected model and benchmark combination."
+        )
+        return
+
+    col1, col2 = st.columns(2)
+    with col1:
+        fig1 = create_performance_plot(
+            plot_df,
+            "Prompt Processing",
+            f"Prompt Processing Time - {model_name}",
+        )
+        if fig1:
+            st.plotly_chart(fig1, use_container_width=True)
+
+    with col2:
+        fig2 = create_performance_plot(
+            plot_df,
+            "Token Generation",
+            f"Token Generation Time - {model_name}",
+        )
+        if fig2:
+            st.plotly_chart(fig2, use_container_width=True)
+
+def render_leaderboard_table(df: pd.DataFrame):
+    """Render the leaderboard table with grouped and formatted data"""
+    # Group and average the results
+    grouped_df = (
+        df.groupby(
+            ["Model ID", "Benchmark", "Normalized Device ID", "Platform", "Device", "Model Size", "CPU Cores"]
+        )
+        .agg(
+            {
+                "Prompt Processing": ["mean", "count", "std"],
+                "Token Generation": ["mean", "std"],
+            }
+        )
+        .reset_index()
+    )
+
+    # Flatten column names
+    grouped_df.columns = [
+        col[0] if col[1] == "" else f"{col[0]} ({col[1]})" for col in grouped_df.columns
+    ]
+
+    # Round numeric columns
+    numeric_cols = [
+        "Prompt Processing (mean)",
+        "Prompt Processing (std)",
+        "Token Generation (mean)",
+        "Token Generation (std)",
+    ]
+    grouped_df[numeric_cols] = grouped_df[numeric_cols].round(2)
+
+    # Rename columns for display
+    grouped_df = grouped_df.rename(
+        columns={
+            "Prompt Processing (mean)": "PP Avg (s)",
+            "Prompt Processing (std)": "PP Std",
+            "Prompt Processing (count)": "Runs",
+            "Token Generation (mean)": "TG Avg (s)",
+            "Token Generation (std)": "TG Std",
+        }
+    )
+
+    # Reorder columns for display
+    display_cols = [
+        "Platform",
+        "Device",
+        "Model ID",
+        "Model Size",
+        "Benchmark",
+        "TG Avg (s)",
+        "TG Std",
+        "PP Avg (s)",
+        "PP Std",
+    ]
+
+    # Display the filtered and grouped table
+    st.dataframe(
+        grouped_df[display_cols].sort_values(
+            ["Model Size", "Benchmark", "TG Avg (s)"],
+            ascending=[False, True, True],
+        ),
+        use_container_width=True,
+        height=400,
+    ) 

src/core/config.py

@@ -0,0 +1,16 @@
+from pydantic_settings import BaseSettings
+from functools import lru_cache
+
+class Settings(BaseSettings):
+    API_URL: str = "https://a-ghorbani-ai-phone-benchmark-api.hf.space"
+    HF_TOKEN: str
+    
+    class Config:
+        case_sensitive = True
+        env_file = ".env"
+
+@lru_cache()
+def get_settings():
+    return Settings()
+
+settings = get_settings() 

src/core/styles.py

@@ -0,0 +1,62 @@
+CUSTOM_CSS = """
+    <style>
+    .stApp {
+        max-width: 1200px;
+        margin: 0 auto;
+    }
+    .plot-container {
+        background-color: white;
+        border-radius: 10px;
+        padding: 20px;
+        margin: 10px 0;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    }
+    div[data-testid="stHorizontalBlock"] > div[data-testid="column"] {
+        background-color: #f8f9fa;
+        padding: 10px;
+        border-radius: 5px;
+        margin: 0 5px;
+    }
+    .header-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 1rem 0 2rem 0;
+    }
+    .logos-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 2rem;
+        margin-bottom: 1rem;
+        height: 100px;
+    }
+    .logo {
+        width: 100px;
+        height: 100px;
+        object-fit: contain;
+        display: block;
+    }
+    .logo.pocketpal {
+        width: 80px;
+        height: 80px;
+        border-radius: 20px;
+    }
+    .header-title {
+        font-size: 2.5rem;
+        font-weight: 600;
+        text-align: center;
+        color: #1a1a1a;
+        margin: 0;
+        padding: 10px 0;
+    }
+    .header-subtitle {
+        font-size: 1.2rem;
+        text-align: center;
+        color: #666;
+        margin: 0;
+        padding-bottom: 1rem;
+        max-width: 800px;
+    }
+    </style>
+""" 

src/main.py

@@ -0,0 +1,4 @@
+"""
+Main module for the frontend application.
+This file serves as a module init file.
+"""

src/services/api.py

@@ -0,0 +1,38 @@
+import httpx
+import pandas as pd
+from typing import Optional, Dict
+import streamlit as st
+from src.core.config import settings
+
+async def fetch_leaderboard_data(
+    model_name: Optional[str] = None,
+    benchmark_label: Optional[str] = None
+) -> pd.DataFrame:
+    """Fetch and process leaderboard data"""
+    params = {}
+    if model_name and model_name != "All":
+        params["model_name"] = model_name
+    if benchmark_label and benchmark_label != "All":
+        params["benchmark_label"] = benchmark_label
+
+    headers = {
+        "Authorization": f"Bearer {settings.HF_TOKEN}",
+        "Accept": "application/json"
+    }
+
+    try:
+        async with httpx.AsyncClient() as client:
+            response = await client.get(
+                f"{settings.API_URL}/api/v1/leaderboard",
+                params=params,
+                headers=headers,
+                follow_redirects=True
+            )
+            response.raise_for_status()
+            data = response.json()
+            return pd.DataFrame(data)
+    except Exception as e:
+        st.error(f"Error fetching data: {str(e)}")
+        if hasattr(e, 'response'):
+            st.error(f"Response: {e.response.text}")
+        return pd.DataFrame()