app.py

import gradio as gr
import os
import base64
from pathlib import Path

def encode_image_to_base64(image_path):
    """Convert image to base64 for embedding in HTML"""
    if os.path.exists(image_path):
        with open(image_path, "rb") as img_file:
            encoded = base64.b64encode(img_file.read()).decode()
            # Get file extension
            ext = Path(image_path).suffix.lower()
            mime_type = {
                '.png': 'image/png',
                '.jpg': 'image/jpeg', 
                '.jpeg': 'image/jpeg',
                '.gif': 'image/gif',
                '.webp': 'image/webp'
            }.get(ext, 'image/png')
            return f"data:{mime_type};base64,{encoded}"
    return ""

def create_gradio_app():
    """
    Gradio app to serve the static HTML leaderboard with embedded images
    This is required for Hugging Face Spaces deployment
    """
    
    # Read the HTML content
    with open('index.html', 'r', encoding='utf-8') as f:
        html_content = f.read()
    
    # Read the CSS content
    with open('style.css', 'r', encoding='utf-8') as f:
        css_content = f.read()
    
    # Read the JavaScript content
    with open('script.js', 'r', encoding='utf-8') as f:
        js_content = f.read()
    
    # Convert images to base64 for embedding
    diagram_b64 = encode_image_to_base64('mcp-bench.png')
    ranking_b64 = encode_image_to_base64('ranking.png')
    
    # Replace image references with base64 embedded versions
    html_content = html_content.replace(
        'src="mcp-bench.png"',
        f'src="{diagram_b64}"'
    ).replace(
        'src="ranking.png"', 
        f'src="{ranking_b64}"'
    )
    
    # Combine everything into a single HTML page
    combined_html = html_content.replace(
        '<link rel="stylesheet" href="style.css">',
        f'<style>{css_content}</style>'
    ).replace(
        '<script src="script.js"></script>',
        f'<script>{js_content}</script>'
    )
    
    # Create the Gradio interface
    with gr.Blocks(
        title="MCP-Bench Leaderboard",
        theme=gr.themes.Soft(),
        css="body { margin: 0; padding: 0; }"
    ) as demo:
        gr.HTML(
            combined_html,
            elem_id="leaderboard-container"
        )
    
    return demo

if __name__ == "__main__":
    demo = create_gradio_app()
    demo.launch()