app

README.md

@@ -1,12 +1,14 @@
 ---
-title: OCRArena
-emoji: ⚡
-colorFrom: yellow
-colorTo: pink
+title: OCR Arena
+emoji: ⚔️ 
+colorFrom: red
+colorTo: indigo
 sdk: gradio
-sdk_version: 5.44.1
+sdk_version: 5.38.2
 app_file: app.py
 pinned: false
+hf_oauth: true
+short_description: A leaderboard for OCR algorithms
 ---
 
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app.py

@@ -0,0 +1,543 @@
+"""
+OCR Arena - Main Application
+A Gradio web application for comparing OCR results from different AI models.
+"""
+
+import gradio as gr
+import logging
+import os
+import datetime
+from dotenv import load_dotenv
+from storage import upload_file_to_bucket
+from db import add_vote, get_all_votes, calculate_elo_ratings_from_votes
+from ocr_models import process_model_ocr, initialize_gemini, initialize_mistral, initialize_openai
+from ui_helpers import (
+    get_model_display_name, select_random_models, format_votes_table, 
+    format_elo_leaderboard
+)
+
+# Load environment variables
+load_dotenv()
+
+# Configure logging
+logging.basicConfig(level=logging.INFO, format='%(levelname)s: %(message)s')
+logger = logging.getLogger(__name__)
+
+# Initialize API keys and models
+initialize_gemini()
+initialize_mistral()
+initialize_openai()
+
+# Get Supabase credentials
+SUPABASE_URL = os.getenv("SUPABASE_URL")
+SUPABASE_KEY = os.getenv("SUPABASE_KEY")
+
+# Global variables to store current OCR results and image URL
+current_gemini_output = ""
+current_mistral_output = ""
+current_openai_output = ""
+current_gpt5_output = ""
+current_gpt5_output = ""
+current_image_url = ""
+current_voted_users = set()  # Track users who have already voted
+current_model_a = ""  # Store which model was selected as model A
+current_model_b = ""  # Store which model was selected as model B
+
+
+def get_default_username(profile: gr.OAuthProfile | None) -> str:
+    """Returns the username if the user is logged in, or an empty string if not logged in."""
+    if profile is None:
+        return ""
+    return profile.username
+
+def get_current_username(profile_or_username) -> str:
+    """Returns the username from login or "Anonymous" if not logged in."""
+    # Check if profile_or_username is a profile object with username attribute
+    if hasattr(profile_or_username, 'username') and profile_or_username.username:
+        return profile_or_username.username
+    # Check if profile_or_username is a direct username string
+    elif isinstance(profile_or_username, str) and profile_or_username.strip():
+        # Extract username from "Logout (username)" format
+        if profile_or_username.startswith("Logout (") and profile_or_username.endswith(")"):
+            return profile_or_username[8:-1]  # Remove "Logout (" and ")"
+        # If it's just a username string, return it
+        elif profile_or_username != "Sign in with Hugging Face":
+            return profile_or_username.strip()
+    
+    # Return "Anonymous" if no valid username found
+    return "Anonymous"
+
+def process_image(image):
+    """Process uploaded image and select random models for comparison."""
+    global current_gemini_output, current_mistral_output, current_openai_output, current_image_url, current_voted_users, current_model_a, current_model_b
+    
+    if image is None:
+        return (
+            "Please upload an image.", 
+            "Please upload an image.",
+            gr.update(visible=False),  # Hide vote buttons
+            gr.update(visible=False)   # Hide vote buttons
+        )
+    
+    # Reset voted users for new image
+    current_voted_users.clear()
+    
+    # Select two random models
+    model_a, model_b = select_random_models()
+    current_model_a = model_a
+    current_model_b = model_b
+    
+    logger.info(f"🎲 Randomly selected two models for comparison")
+    
+    try:
+        # Save the PIL image to a temporary file
+        temp_filename = f"temp_image_{datetime.datetime.now().strftime('%Y%m%d_%H%M%S')}.png"
+        image.save(temp_filename)
+        
+        # Upload the temporary file to Supabase storage
+        logger.info(f"📤 Uploading image to Supabase storage: {temp_filename}")
+        upload_result = upload_file_to_bucket(
+            file_path=temp_filename,
+            bucket_name="images",
+            storage_path=f"ocr_images/{temp_filename}",
+            file_options={"cache-control": "3600", "upsert": "false"}
+        )
+        
+        if upload_result["success"]:
+            logger.info(f"✅ Image uploaded successfully: {upload_result['storage_path']}")
+            logger.info(f"🔗 Public URL: {upload_result['public_url']}")
+            # Store the image URL for voting
+            current_image_url = upload_result.get('public_url') or f"{SUPABASE_URL}/storage/v1/object/public/images/ocr_images/{temp_filename}"
+        else:
+            logger.error(f"❌ Image upload failed: {upload_result['error']}")
+            current_image_url = ""
+        
+        # Clean up temporary file
+        try:
+            os.remove(temp_filename)
+            logger.info(f"🗑️ Cleaned up temporary file: {temp_filename}")
+        except Exception as e:
+            logger.warning(f"⚠️ Could not remove temporary file {temp_filename}: {e}")
+        
+        # Return initial state - OCR processing will happen via separate button clicks
+        return (
+            "Please click 'Run OCR' to start processing.", 
+            "Please click 'Run OCR' to start processing.", 
+            gr.update(visible=False),  # Hide vote buttons initially
+            gr.update(visible=False)   # Hide vote buttons initially
+        )
+        
+    except Exception as e:
+        logger.error(f"Error processing image: {e}")
+        return (
+            f"Error processing image: {e}", 
+            f"Error processing image: {e}",
+            gr.update(visible=False),  # Hide vote buttons
+            gr.update(visible=False)   # Hide vote buttons
+        )
+
+def check_ocr_completion(model_a_output, model_b_output):
+    """Check if both OCR results are ready and update UI accordingly."""
+    global current_gemini_output, current_mistral_output, current_openai_output, current_gpt5_output, current_model_a, current_model_b
+
+    # Check if both results are complete (not processing messages)
+    model_a_ready = (model_a_output and
+                    model_a_output != "Please upload an image." and
+                    model_a_output != "Processing OCR..." and
+                    model_a_output != "Please click 'Run OCR' to start processing." and
+                    not model_a_output.startswith("OCR error:"))
+
+    model_b_ready = (model_b_output and
+                     model_b_output != "Please upload an image." and
+                     model_b_output != "Processing OCR..." and
+                     model_b_output != "Please click 'Run OCR' to start processing." and
+                     not model_b_output.startswith("OCR error:"))
+
+    # Update global variables with actual results based on which models were selected
+    if model_a_ready:
+        if current_model_a == "gemini":
+            current_gemini_output = model_a_output
+        elif current_model_a == "mistral":
+            current_mistral_output = model_a_output
+        elif current_model_a == "openai":
+            current_openai_output = model_a_output
+        elif current_model_a == "gpt5":
+            current_gpt5_output = model_a_output
+    
+    if model_b_ready:
+        if current_model_b == "gemini":
+            current_gemini_output = model_b_output
+        elif current_model_b == "mistral":
+            current_mistral_output = model_b_output
+        elif current_model_b == "openai":
+            current_openai_output = model_b_output
+        elif current_model_b == "gpt5":
+            current_gpt5_output = model_b_output
+
+    # Show vote buttons only when both are ready
+    if model_a_ready and model_b_ready:
+        return (
+            gr.update(visible=True),  # Show Model A vote button
+            gr.update(visible=True)   # Show Model B vote button
+        )
+    else:
+        return (
+            gr.update(visible=False),  # Hide vote buttons
+            gr.update(visible=False)   # Hide vote buttons
+        )
+
+def load_vote_data():
+    """Load and format vote data for display."""
+    try:
+        # Get all votes
+        votes = get_all_votes()
+        votes_table_html = format_votes_table(votes)
+
+        return votes_table_html
+
+    except Exception as e:
+        logger.error(f"Error loading vote data: {e}")
+        error_html = f"<p style='color: red;'>Error loading data: {e}</p>"
+        return error_html
+
+def load_elo_leaderboard():
+    """Load and format ELO leaderboard data."""
+    try:
+        # Get all votes
+        votes = get_all_votes()
+        
+        # Calculate ELO ratings
+        elo_ratings = calculate_elo_ratings_from_votes(votes)
+        
+        # Calculate vote counts for each model
+        vote_counts = {
+            "gemini": 0,
+            "mistral": 0,
+            "openai": 0,
+            "gpt5": 0
+        }
+        
+        for vote in votes:
+            model_a = vote.get('model_a')
+            model_b = vote.get('model_b')
+            vote_choice = vote.get('vote')
+            
+            if vote_choice == 'model_a' and model_a in vote_counts:
+                vote_counts[model_a] += 1
+            elif vote_choice == 'model_b' and model_b in vote_counts:
+                vote_counts[model_b] += 1
+        
+        # Format leaderboard with vote counts
+        leaderboard_html = format_elo_leaderboard(elo_ratings, vote_counts)
+        
+        return leaderboard_html
+
+    except Exception as e:
+        logger.error(f"Error loading ELO leaderboard: {e}")
+        error_html = f"<p style='color: red;'>Error loading ELO leaderboard: {e}</p>"
+        return error_html
+
+# Create the Gradio interface
+with gr.Blocks(title="OCR Comparison", css="""
+    .output-box {
+        border: 2px solid #e0e0e0;
+        border-radius: 8px;
+        padding: 15px;
+        margin: 10px 0;
+        background-color: #f9f9f9;
+        min-height: 200px;
+    }
+    .output-box:hover {
+        border-color: #007bff;
+        box-shadow: 0 2px 8px rgba(0,123,255,0.1);
+    }
+    .vote-table {
+        border-collapse: collapse;
+        width: 100%;
+        margin: 10px 0;
+        min-width: 800px;
+    }
+    .vote-table th, .vote-table td {
+        border: 1px solid #ddd;
+        padding: 6px;
+        text-align: left;
+        vertical-align: top;
+    }
+    .vote-table th {
+        background-color: #f2f2f2;
+        font-weight: bold;
+        position: sticky;
+        top: 0;
+        z-index: 10;
+    }
+    .vote-table tr:nth-child(even) {
+        background-color: #f9f9f9;
+    }
+    .vote-table tr:hover {
+        background-color: #f5f5f5;
+    }
+    .vote-table img {
+        transition: transform 0.2s ease;
+        max-width: 100%;
+        height: auto;
+    }
+    .vote-table img:hover {
+        transform: scale(1.1);
+        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+    }
+""") as demo:
+
+    with gr.Tabs():
+        # Arena Tab (default)
+        with gr.Tab("⚔️ Arena", id=0):
+            gr.Markdown("# ⚔️ OCR Arena: Random Model Selection")
+            gr.Markdown("Upload an image to compare two randomly selected OCR models.")
+
+            # Authentication section (optional)
+            with gr.Row():
+                with gr.Column(scale=3):
+                    username_display = gr.Textbox(
+                        label="Current User",
+                        placeholder="Login with Hugging Face to vote (optional) - Anonymous users welcome!",
+                        interactive=False,
+                        show_label=False
+                    )
+                with gr.Column(scale=1):
+                    login_button = gr.LoginButton()
+
+            with gr.Row():
+                with gr.Column():
+                    gemini_vote_btn = gr.Button("A is better", variant="primary", size="sm", visible=False)
+                    gemini_output = gr.Markdown(label="Model A Output", elem_classes=["output-box"])
+
+                image_input = gr.Image(type="pil", label="Upload or Paste Image")
+
+                with gr.Column():
+                    mistral_vote_btn = gr.Button("B is better", variant="primary", size="sm", visible=False)
+                    mistral_output = gr.Markdown(label="Model B Output", elem_classes=["output-box"])
+
+
+
+            with gr.Row():
+                process_btn = gr.Button("🔍 Run OCR", variant="primary")
+
+        # Data Tab
+        with gr.Tab("📊 Data", id=1):
+            gr.Markdown("# 📊 Vote Data")
+            gr.Markdown("View all votes from the OCR Arena")
+
+            with gr.Row():
+                refresh_btn = gr.Button("🔄 Refresh Data", variant="secondary")
+
+            with gr.Row():
+                votes_table = gr.HTML(
+                    value="<p>Loading vote data...</p>",
+                    label="📋 All Votes (Latest First)"
+                )
+
+        # Leaderboard Tab
+        with gr.Tab("🏆 Leaderboard", id=2):
+            gr.Markdown("# 🏆 ELO Leaderboard")
+            gr.Markdown("See how the models rank based on their ELO ratings from head-to-head comparisons.")
+
+            with gr.Row():
+                refresh_leaderboard_btn = gr.Button("🔄 Refresh Leaderboard", variant="secondary")
+
+            with gr.Row():
+                leaderboard_display = gr.HTML(
+                    value="<p>Loading ELO leaderboard...</p>",
+                    label="🏆 Model Rankings"
+                )
+
+    # Vote functions
+    def vote_model_a(profile_or_username):
+        global current_gemini_output, current_mistral_output, current_openai_output, current_gpt5_output, current_image_url, current_voted_users, current_model_a, current_model_b
+        
+        # Get current username
+        username = get_current_username(profile_or_username)
+        
+        if not username:
+            username = "Anonymous"
+        
+        # Check if user has already voted
+        if username in current_voted_users:
+            gr.Info(f"You have already voted for this image, {username}!")
+            return
+        
+        try:
+            # Use the stored image URL from the upload
+            image_url = current_image_url if current_image_url else "no_image"
+            
+            # Add vote to database
+            logger.info(f"📊 Adding Model A vote for user: {username}")
+            def output_for(model: str) -> str:
+                return {
+                    "gemini": current_gemini_output,
+                    "mistral": current_mistral_output,
+                    "openai": current_openai_output,
+                    "gpt5": current_gpt5_output,
+                }.get(model, "")
+
+            add_vote(
+                username=username,
+                model_a=current_model_a,
+                model_b=current_model_b,
+                model_a_output=output_for(current_model_a),
+                model_b_output=output_for(current_model_b),
+                vote="model_a",
+                image_url=image_url
+            )
+            
+            # Mark user as voted
+            current_voted_users.add(username)
+            
+            model_a_name = get_model_display_name(current_model_a)
+            model_b_name = get_model_display_name(current_model_b)
+            info_message = (
+                f"<p>You voted for <strong style='color:green;'>{model_a_name}</strong>.</p>"
+                f"<p><span style='color:green;'>{model_a_name}</span> - "
+                f"<span style='color:blue;'>{model_b_name}</span></p>"
+            )
+            gr.Info(info_message)
+            
+        except Exception as e:
+            logger.error(f"❌ Error adding Model A vote: {e}")
+            gr.Info(f"Error recording vote: {e}")
+
+    def vote_model_b(profile_or_username):
+        global current_gemini_output, current_mistral_output, current_openai_output, current_gpt5_output, current_image_url, current_voted_users, current_model_a, current_model_b
+        
+        # Get current username
+        username = get_current_username(profile_or_username)
+        
+        if not username:
+            username = "Anonymous"
+        
+        # Check if user has already voted
+        if username in current_voted_users:
+            gr.Info(f"You have already voted for this image, {username}!")
+            return
+        
+        try:
+            # Use the stored image URL from the upload
+            image_url = current_image_url if current_image_url else "no_image"
+            
+            # Add vote to database
+            logger.info(f"📊 Adding Model B vote for user: {username}")
+            def output_for(model: str) -> str:
+                return {
+                    "gemini": current_gemini_output,
+                    "mistral": current_mistral_output,
+                    "openai": current_openai_output,
+                    "gpt5": current_gpt5_output,
+                }.get(model, "")
+
+            add_vote(
+                username=username,
+                model_a=current_model_a,
+                model_b=current_model_b,
+                model_a_output=output_for(current_model_a),
+                model_b_output=output_for(current_model_b),
+                vote="model_b",
+                image_url=image_url
+            )
+            
+            # Mark user as voted
+            current_voted_users.add(username)
+            
+            model_a_name = get_model_display_name(current_model_a)
+            model_b_name = get_model_display_name(current_model_b)
+            info_message = (
+                f"<p>You voted for <strong style='color:blue;'>{model_b_name}</strong>.</p>"
+                f"<p><span style='color:green;'>{model_a_name}</span> - "
+                f"<span style='color:blue;'>{model_b_name}</span></p>"
+            )
+            gr.Info(info_message)
+            
+        except Exception as e:
+            logger.error(f"❌ Error adding Model B vote: {e}")
+            gr.Info(f"Error recording vote: {e}")
+
+    # Event handlers
+    process_btn.click(
+        process_image,
+        inputs=[image_input],
+        outputs=[gemini_output, mistral_output, gemini_vote_btn, mistral_vote_btn],
+    )
+    
+    # Process both randomly selected OCRs when the process button is clicked
+    def process_model_a_ocr(image):
+        global current_model_a
+        return process_model_ocr(image, current_model_a)
+    
+    def process_model_b_ocr(image):
+        global current_model_b
+        return process_model_ocr(image, current_model_b)
+    
+    process_btn.click(
+        process_model_a_ocr,
+        inputs=[image_input],
+        outputs=[gemini_output],
+    )
+    
+    process_btn.click(
+        process_model_b_ocr,
+        inputs=[image_input],
+        outputs=[mistral_output],
+    )
+    
+    # Check completion status when either OCR output changes
+    gemini_output.change(
+        check_ocr_completion,
+        inputs=[gemini_output, mistral_output],
+        outputs=[gemini_vote_btn, mistral_vote_btn],
+    )
+    
+    mistral_output.change(
+        check_ocr_completion,
+        inputs=[gemini_output, mistral_output],
+        outputs=[gemini_vote_btn, mistral_vote_btn],
+    )
+
+    gemini_vote_btn.click(
+        vote_model_a,
+        inputs=[login_button]
+    )
+    
+    mistral_vote_btn.click(
+        vote_model_b,
+        inputs=[login_button]
+    )
+    
+    # Refresh data button
+    refresh_btn.click(
+        load_vote_data,
+        inputs=None,
+        outputs=[votes_table]
+    )
+
+    # Refresh leaderboard button
+    refresh_leaderboard_btn.click(
+        load_elo_leaderboard,
+        inputs=None,
+        outputs=[leaderboard_display]
+    )
+
+    # Update username display when user logs in
+    demo.load(fn=get_default_username, inputs=None, outputs=username_display)
+
+    # Load vote data when app starts
+    demo.load(fn=load_vote_data, inputs=None, outputs=[votes_table])
+
+    # Load leaderboard when app starts
+    demo.load(fn=load_elo_leaderboard, inputs=None, outputs=[leaderboard_display])
+
+if __name__ == "__main__":
+    logger.info("Starting OCR Comparison App...")
+    try:
+        # Try to launch on localhost first
+        demo.launch(share=True)
+    except ValueError as e:
+        logger.warning(f"Localhost not accessible: {e}")
+        logger.info("Launching with public URL...")
+        demo.launch(share=True) 

db.py

@@ -0,0 +1,262 @@
+"""HTTP-based Supabase connector for OCR Arena votes.
+
+This module provides a connection to Supabase using HTTP requests,
+avoiding the dependency issues with the supabase client library.
+"""
+import logging
+import requests
+import json
+import math
+from typing import Dict, Any, List
+from dotenv import load_dotenv  
+import os
+
+load_dotenv()
+
+SUPABASE_URL = os.getenv("SUPABASE_URL")
+SUPABASE_KEY = os.getenv("SUPABASE_KEY")
+
+logger = logging.getLogger(__name__)
+
+
+# Supabase API configuration
+API_BASE_URL = f"{SUPABASE_URL}/rest/v1"
+HEADERS = {
+    "apikey": SUPABASE_KEY,
+    "Authorization": f"Bearer {SUPABASE_KEY}",
+    "Content-Type": "application/json"
+}
+
+def test_connection() -> bool:
+    """Test the Supabase connection."""
+    try:
+        # Test connection by trying to access the ocr_votes table
+        table_url = f"{API_BASE_URL}/ocr_votes"
+        response = requests.get(table_url, headers=HEADERS)
+        if response.status_code in [200, 404]:  # 200 = table exists, 404 = table doesn't exist but connection works
+            logger.info("✅ Supabase connection test successful")
+            return True
+        else:
+            logger.error(f"❌ Supabase connection failed: {response.status_code}")
+            return False
+    except Exception as e:
+        logger.error(f"❌ Supabase connection test failed: {e}")
+        return False
+
+def test_table_exists(table_name: str = "ocr_votes") -> bool:
+    """Test if a specific table exists in the database."""
+    try:
+        table_url = f"{API_BASE_URL}/{table_name}"
+        response = requests.get(table_url, headers=HEADERS)
+        if response.status_code == 200:
+            logger.info(f"✅ Table '{table_name}' exists and is accessible")
+            return True
+        else:
+            logger.warning(f"⚠️ Table '{table_name}' may not exist: {response.status_code}")
+            return False
+    except Exception as e:
+        logger.error(f"❌ Error testing table access: {e}")
+        return False
+
+def add_vote(
+    username: str,
+    model_a: str,
+    model_b: str,
+    model_a_output: str,
+    model_b_output: str,
+    vote: str,
+    image_url: str
+) -> Dict[str, Any]:
+    """Add a vote to the ocr_votes table."""
+    try:
+        # Format timestamp in the desired format: YYYY-MM-DD HH:MM:SS
+        from datetime import datetime
+        timestamp = datetime.now().strftime('%Y-%m-%d %H:%M:%S')
+        
+        data = {
+            "username": username,
+            "model_a": model_a,
+            "model_b": model_b,
+            "model_a_output": model_a_output,
+            "model_b_output": model_b_output,
+            "vote": vote,
+            "image_url": image_url,
+            "timestamp": timestamp
+        }
+        
+        table_url = f"{API_BASE_URL}/ocr_votes"
+        response = requests.post(table_url, headers=HEADERS, json=data)
+        
+        if response.status_code == 201:
+            logger.info("✅ Vote added successfully")
+            try:
+                return response.json()[0] if response.json() else data
+            except json.JSONDecodeError:
+                return data
+        else:
+            raise Exception(f"Insert failed with status {response.status_code}: {response.text}")
+            
+    except Exception as e:
+        logger.error(f"❌ Error adding vote: {e}")
+        raise
+
+def get_all_votes() -> List[Dict[str, Any]]:
+    """Get all votes from the ocr_votes table."""
+    try:
+        table_url = f"{API_BASE_URL}/ocr_votes"
+        response = requests.get(table_url, headers=HEADERS)
+        
+        if response.status_code == 200:
+            try:
+                return response.json()
+            except json.JSONDecodeError:
+                logger.warning("Could not parse JSON response")
+                return []
+        else:
+            logger.error(f"Failed to get votes: {response.status_code}")
+            return []
+    except Exception as e:
+        logger.error(f"❌ Error getting votes: {e}")
+        return []
+
+def test_add_sample_vote() -> bool:
+    """Test adding a sample vote to the database."""
+    try:
+        sample_vote = add_vote(
+            username="test_user",
+            model_a="gemini",
+            model_b="mistral",
+            model_a_output="# Test Gemini Output\n\nThis is a **test** markdown from Gemini.",
+            model_b_output="## Test Mistral Output\n\nThis is a *test* markdown from Mistral.",
+            vote="model_a",
+            image_url="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAABAAEDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAv/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAX/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwCdABmX/9k="
+        )
+        logger.info(f"✅ Sample vote added: {sample_vote}")
+        return True
+    except Exception as e:
+        logger.error(f"❌ Error adding sample vote: {e}")
+        return False
+
+def get_vote_statistics() -> Dict[str, Any]:
+    """Get voting statistics."""
+    try:
+        votes = get_all_votes()
+        
+        # Count votes for each model
+        gemini_votes = 0
+        mistral_votes = 0
+        openai_votes = 0
+        gpt5_votes = 0
+        total_votes = len(votes)
+        
+        for vote in votes:
+            vote_choice = vote.get('vote')
+            model_a = vote.get('model_a')
+            model_b = vote.get('model_b')
+            
+            if vote_choice == 'model_a':
+                if model_a == 'gemini':
+                    gemini_votes += 1
+                elif model_a == 'mistral':
+                    mistral_votes += 1
+                elif model_a == 'openai':
+                    openai_votes += 1
+                elif model_a == 'gpt5':
+                    gpt5_votes += 1
+            elif vote_choice == 'model_b':
+                if model_b == 'gemini':
+                    gemini_votes += 1
+                elif model_b == 'mistral':
+                    mistral_votes += 1
+                elif model_b == 'openai':
+                    openai_votes += 1
+                elif model_b == 'gpt5':
+                    gpt5_votes += 1
+        
+        return {
+            "total_votes": total_votes,
+            "gemini_votes": gemini_votes,
+            "mistral_votes": mistral_votes,
+            "openai_votes": openai_votes,
+            "gpt5_votes": gpt5_votes,
+            "gemini_percentage": (gemini_votes / total_votes * 100) if total_votes > 0 else 0,
+            "mistral_percentage": (mistral_votes / total_votes * 100) if total_votes > 0 else 0,
+            "openai_percentage": (openai_votes / total_votes * 100) if total_votes > 0 else 0,
+            "gpt5_percentage": (gpt5_votes / total_votes * 100) if total_votes > 0 else 0
+        }
+    except Exception as e:
+        logger.error(f"❌ Error getting vote statistics: {e}")
+        return {}
+
+def calculate_elo_rating(rating_a: float, rating_b: float, result_a: float, k_factor: int = 32) -> tuple[float, float]:
+    """
+    Calculate new ELO ratings for two players after a match.
+    
+    Args:
+        rating_a: Current ELO rating of player A
+        rating_b: Current ELO rating of player B
+        result_a: Result for player A (1 for win, 0.5 for draw, 0 for loss)
+        k_factor: K-factor determines how much a single result affects the rating
+    
+    Returns:
+        tuple: (new_rating_a, new_rating_b)
+    """
+    # Calculate expected scores
+    expected_a = 1 / (1 + 10 ** ((rating_b - rating_a) / 400))
+    expected_b = 1 / (1 + 10 ** ((rating_a - rating_b) / 400))
+    
+    # Calculate new ratings
+    new_rating_a = rating_a + k_factor * (result_a - expected_a)
+    new_rating_b = rating_b + k_factor * ((1 - result_a) - expected_b)
+    
+    return new_rating_a, new_rating_b
+
+def calculate_elo_ratings_from_votes(votes: List[Dict[str, Any]]) -> Dict[str, float]:
+    """
+    Calculate ELO ratings for all models based on vote history.
+    
+    Args:
+        votes: List of vote dictionaries from database
+    
+    Returns:
+        dict: Current ELO ratings for each model
+    """
+    # Initialize ELO ratings (starting at 1500)
+    elo_ratings = {
+        "gemini": 1500,
+        "mistral": 1500,
+        "openai": 1500,
+        "gpt5": 1500
+    }
+    
+    # Process each vote to update ELO ratings
+    for vote in votes:
+        model_a = vote.get('model_a')
+        model_b = vote.get('model_b')
+        vote_choice = vote.get('vote')
+        
+        if model_a and model_b and vote_choice:
+            # Determine result for model A
+            if vote_choice == 'model_a':
+                result_a = 1  # Model A wins
+            elif vote_choice == 'model_b':
+                result_a = 0  # Model A loses
+            else:
+                continue  # Skip invalid votes
+            
+            # Calculate new ELO ratings
+            new_rating_a, new_rating_b = calculate_elo_rating(
+                elo_ratings[model_a],
+                elo_ratings[model_b],
+                result_a
+            )
+            
+            # Update ratings
+            elo_ratings[model_a] = new_rating_a
+            elo_ratings[model_b] = new_rating_b
+    
+    return elo_ratings
+
+if __name__ == "__main__":
+    print(test_connection())
+    print(test_add_sample_vote())

ocr_models.py

@@ -0,0 +1,191 @@
+"""
+OCR Models Module
+Contains all OCR-related functions for different AI models.
+"""
+
+import google.generativeai as genai
+from mistralai import Mistral
+from PIL import Image
+import io
+import base64
+import logging
+import openai
+import os
+
+# Configure logging
+logger = logging.getLogger(__name__)
+
+def gemini_ocr(image: Image.Image):
+    """Process OCR using Google's Gemini 2.0 Flash model."""
+    try:
+        # Initialize Gemini model
+        gemini_model = initialize_gemini()
+        if not gemini_model:
+            return "Gemini OCR error: Failed to initialize Gemini model"
+        
+        # Convert image to base64
+        buffered = io.BytesIO()
+        image.save(buffered, format="JPEG")
+        img_bytes = buffered.getvalue()
+        base64_image = base64.b64encode(img_bytes).decode('utf-8')
+        
+        # Create the image part for Gemini
+        image_part = {
+            "mime_type": "image/jpeg",
+            "data": base64_image
+        }
+        
+        # Generate content with Gemini
+        response = gemini_model.generate_content([
+            "Extract and transcribe all text from this image. Return only the transcribed text in markdown format, preserving any formatting like headers, lists, etc.",
+            image_part
+        ])
+        
+        markdown_text = response.text
+        logger.info("Gemini OCR completed successfully")
+        return markdown_text
+        
+    except Exception as e:
+        logger.error(f"Gemini OCR error: {e}")
+        return f"Gemini OCR error: {e}"
+
+def mistral_ocr(image: Image.Image):
+    """Process OCR using Mistral AI's OCR model."""
+    try:
+        # Convert image to base64
+        buffered = io.BytesIO()
+        image.save(buffered, format="JPEG")
+        img_bytes = buffered.getvalue()
+        base64_image = base64.b64encode(img_bytes).decode('utf-8')
+        
+        client = Mistral(api_key=os.getenv("MISTRAL_API_KEY"))
+        ocr_response = client.ocr.process(
+            model="mistral-ocr-latest",
+            document={
+                "type": "image_url",
+                "image_url": f"data:image/jpeg;base64,{base64_image}"
+            }
+        )
+        
+        # Extract markdown from the first page if available
+        markdown_text = ""
+        if hasattr(ocr_response, 'pages') and ocr_response.pages:
+            page = ocr_response.pages[0]
+            markdown_text = getattr(page, 'markdown', "")
+        
+        if not markdown_text:
+            markdown_text = str(ocr_response)
+            
+        logger.info("Mistral OCR completed successfully")
+        return markdown_text
+        
+    except Exception as e:
+        logger.error(f"Mistral OCR error: {e}")
+        return f"Mistral OCR error: {e}"
+
+def openai_ocr(image: Image.Image):
+    """Process OCR using OpenAI's GPT-4o model."""
+    try:
+        # Convert image to base64
+        buffered = io.BytesIO()
+        image.save(buffered, format="PNG")
+        img_bytes = buffered.getvalue()
+        base64_image = base64.b64encode(img_bytes).decode('utf-8')
+        image_data_url = f"data:image/png;base64,{base64_image}"
+        
+        # Send request to GPT-4o for OCR
+        response = openai.chat.completions.create(
+            model="gpt-4o",
+            messages=[
+                {
+                    "role": "user",
+                    "content": [
+                        {"type": "text", "text": "Extract and transcribe all text from this image. Return only the transcribed text in markdown format, preserving any formatting like headers, lists, etc."},
+                        {"type": "image_url", "image_url": {"url": image_data_url}}
+                    ]
+                }
+            ]
+        )
+        
+        markdown_text = response.choices[0].message.content
+        logger.info("OpenAI OCR completed successfully")
+        return markdown_text
+        
+    except Exception as e:
+        logger.error(f"OpenAI OCR error: {e}")
+        return f"OpenAI OCR error: {e}"
+
+def gpt5_ocr(image: Image.Image):
+    """Process OCR using OpenAI's GPT-5 model with the same prompt."""
+    try:
+        # Convert image to base64 (PNG) and use as data URL
+        buffered = io.BytesIO()
+        image.save(buffered, format="PNG")
+        img_bytes = buffered.getvalue()
+        base64_image = base64.b64encode(img_bytes).decode('utf-8')
+        image_data_url = f"data:image/png;base64,{base64_image}"
+
+        # Use Chat Completions style content for multimodal reliability
+        response = openai.chat.completions.create(
+            model="gpt-5",
+            messages=[
+                {
+                    "role": "user",
+                    "content": [
+                        {"type": "text", "text": "Extract and transcribe all text from this image. Return only the transcribed text in markdown format, preserving any formatting like headers, lists, etc."},
+                        {"type": "image_url", "image_url": {"url": image_data_url}}
+                    ]
+                }
+            ]
+        )
+
+        markdown_text = response.choices[0].message.content
+        logger.info("GPT-5 OCR completed successfully")
+        return markdown_text
+    except Exception as e:
+        logger.error(f"GPT-5 OCR error: {e}")
+        return f"GPT-5 OCR error: {e}"
+
+def process_model_ocr(image, model_name):
+    """Process OCR for a specific model."""
+    if model_name == "gemini":
+        return gemini_ocr(image)
+    elif model_name == "mistral":
+        return mistral_ocr(image)
+    elif model_name == "openai":
+        return openai_ocr(image)
+    elif model_name == "gpt5":
+        return gpt5_ocr(image)
+    else:
+        return f"Unknown model: {model_name}"
+
+# Initialize Gemini model
+def initialize_gemini():
+    """Initialize the Gemini model with API key."""
+    gemini_api_key = os.getenv("GEMINI_API_KEY")
+    if gemini_api_key:
+        genai.configure(api_key=gemini_api_key)
+        logger.info("✅ GEMINI_API_KEY loaded successfully")
+        return genai.GenerativeModel('gemini-2.0-flash-exp')
+    else:
+        logger.error("❌ GEMINI_API_KEY not found in environment variables")
+        return None
+
+# Initialize OpenAI
+def initialize_openai():
+    """Initialize OpenAI with API key."""
+    openai_api_key = os.getenv("OPENAI_API_KEY")
+    if openai_api_key:
+        openai.api_key = openai_api_key
+        logger.info("✅ OPENAI_API_KEY loaded successfully")
+    else:
+        logger.error("❌ OPENAI_API_KEY not found in environment variables")
+
+# Initialize Mistral
+def initialize_mistral():
+    """Initialize Mistral with API key."""
+    mistral_api_key = os.getenv("MISTRAL_API_KEY")
+    if mistral_api_key:
+        logger.info("✅ MISTRAL_API_KEY loaded successfully")
+    else:
+        logger.error("❌ MISTRAL_API_KEY not found in environment variables") 

ocr_votes.sql

@@ -0,0 +1,25 @@
+-- New database schema for three-model OCR comparison system
+-- This script creates a new table with model information
+
+-- Drop the existing table if it exists
+DROP TABLE IF EXISTS ocr_votes;
+
+-- Create the new table with model information
+CREATE TABLE ocr_votes (
+    id SERIAL PRIMARY KEY,
+    username VARCHAR(255) NOT NULL,
+    model_a VARCHAR(50) NOT NULL,  -- 'gemini', 'mistral', or 'openai'
+    model_b VARCHAR(50) NOT NULL,  -- 'gemini', 'mistral', or 'openai'
+    model_a_output TEXT NOT NULL,
+    model_b_output TEXT NOT NULL,
+    vote VARCHAR(50) NOT NULL,     -- 'model_a' or 'model_b'
+    image_url TEXT,
+    timestamp VARCHAR(50) NOT NULL, -- Format: YYYY-MM-DD HH:MM:SS
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
+);
+
+-- Create indexes for better performance
+CREATE INDEX idx_ocr_votes_username ON ocr_votes(username);
+CREATE INDEX idx_ocr_votes_timestamp ON ocr_votes(timestamp);
+CREATE INDEX idx_ocr_votes_vote ON ocr_votes(vote);
+CREATE INDEX idx_ocr_votes_models ON ocr_votes(model_a, model_b);

requirements.txt

@@ -0,0 +1,10 @@
+gradio
+pillow
+mistralai
+uvicorn
+numpy<2
+google-generativeai
+supabase
+python-dotenv
+websockets==11.0.3
+openai 

storage.py

@@ -0,0 +1,212 @@
+"""Supabase storage helper for uploading files.
+
+This module provides functions to upload files to Supabase storage
+using HTTP requests, avoiding the dependency issues with the supabase client library.
+"""
+import os
+import requests
+import logging
+from typing import Optional, Dict, Any
+from pathlib import Path
+
+# Import Supabase credentials from environment variables
+from dotenv import load_dotenv
+load_dotenv()
+
+SUPABASE_URL = os.getenv("SUPABASE_URL")
+SUPABASE_KEY = os.getenv("SUPABASE_KEY")
+
+if not SUPABASE_URL or not SUPABASE_KEY:
+    raise ImportError("Could not load Supabase credentials from environment variables")
+
+logger = logging.getLogger(__name__)
+
+# Supabase storage API configuration
+STORAGE_BASE_URL = f"{SUPABASE_URL}/storage/v1"
+HEADERS = {
+    "apikey": SUPABASE_KEY,
+    "Authorization": f"Bearer {SUPABASE_KEY}",
+    "Content-Type": "application/json"
+}
+
+def upload_file_to_bucket(
+    file_path: str,
+    bucket_name: str = "images",
+    storage_path: Optional[str] = None,
+    file_options: Optional[Dict[str, Any]] = None
+) -> Dict[str, Any]:
+    """
+    Upload a file to Supabase storage bucket.
+    
+    Args:
+        file_path: Local path to the file to upload
+        bucket_name: Name of the storage bucket (default: "images")
+        storage_path: Path in the bucket where to store the file (default: filename)
+        file_options: Optional file options like cache-control, upsert, etc.
+    
+    Returns:
+        Dictionary with upload result information
+    """
+    try:
+        # Check if file exists
+        if not os.path.exists(file_path):
+            raise FileNotFoundError(f"File not found: {file_path}")
+        
+        # Get file info
+        file_path_obj = Path(file_path)
+        file_name = file_path_obj.name
+        
+        # Use provided storage_path or default to filename
+        if storage_path is None:
+            storage_path = file_name
+        
+        # Prepare upload URL
+        upload_url = f"{STORAGE_BASE_URL}/object/{bucket_name}/{storage_path}"
+        
+        # Prepare headers for file upload
+        upload_headers = {
+            "apikey": SUPABASE_KEY,
+            "Authorization": f"Bearer {SUPABASE_KEY}"
+        }
+        
+        # Add file options if provided
+        if file_options:
+            for key, value in file_options.items():
+                upload_headers[f"x-upsert"] = str(value).lower() if key == "upsert" else str(value)
+        
+        # Read and upload file
+        with open(file_path, "rb") as f:
+            response = requests.post(
+                upload_url,
+                headers=upload_headers,
+                data=f
+            )
+        
+        if response.status_code == 200:
+            result = response.json()
+            logger.info(f"✅ File uploaded successfully: {file_name}")
+            logger.info(f"📁 Storage path: {storage_path}")
+            logger.info(f"🔗 Public URL: {result.get('publicUrl', 'N/A')}")
+            return {
+                "success": True,
+                "file_name": file_name,
+                "storage_path": storage_path,
+                "public_url": result.get('publicUrl'),
+                "response": result
+            }
+        else:
+            logger.error(f"❌ Upload failed with status {response.status_code}")
+            logger.error(f"Response: {response.text}")
+            return {
+                "success": False,
+                "error": f"Upload failed: {response.status_code}",
+                "response": response.text
+            }
+            
+    except Exception as e:
+        logger.error(f"❌ Error uploading file: {e}")
+        return {
+            "success": False,
+            "error": str(e)
+        }
+
+def get_file_url(bucket_name: str, file_path: str) -> str:
+    """
+    Get the public URL for a file in Supabase storage.
+    
+    Args:
+        bucket_name: Name of the storage bucket
+        file_path: Path to the file in the bucket
+    
+    Returns:
+        Public URL for the file
+    """
+    return f"{SUPABASE_URL}/storage/v1/object/public/{bucket_name}/{file_path}"
+
+def list_bucket_files(bucket_name: str = "images") -> Dict[str, Any]:
+    """
+    List all files in a storage bucket.
+    
+    Args:
+        bucket_name: Name of the storage bucket
+    
+    Returns:
+        Dictionary with list of files
+    """
+    try:
+        list_url = f"{STORAGE_BASE_URL}/object/list/{bucket_name}"
+        response = requests.get(list_url, headers=HEADERS)
+        
+        if response.status_code == 200:
+            result = response.json()
+            logger.info(f"✅ Listed {len(result)} files in bucket '{bucket_name}'")
+            return {
+                "success": True,
+                "files": result
+            }
+        else:
+            logger.error(f"❌ Failed to list files: {response.status_code}")
+            return {
+                "success": False,
+                "error": f"Failed to list files: {response.status_code}"
+            }
+    except Exception as e:
+        logger.error(f"❌ Error listing files: {e}")
+        return {
+            "success": False,
+            "error": str(e)
+        }
+
+def test_upload_image_png():
+    """Test function to upload Image.png to the images bucket."""
+    try:
+        logger.info("🚀 Testing file upload to Supabase storage...")
+        
+        # First, test if we can list files (this tests basic connectivity)
+        logger.info("📋 Testing bucket connectivity...")
+        list_result = list_bucket_files("images")
+        if list_result["success"]:
+            logger.info(f"✅ Bucket connectivity successful! Found {len(list_result['files'])} files")
+        else:
+            logger.warning(f"⚠️ Bucket connectivity issue: {list_result['error']}")
+        
+        # Test upload
+        logger.info("📤 Testing file upload...")
+        result = upload_file_to_bucket(
+            file_path="Image.png",
+            bucket_name="images",
+            storage_path="test/Image.png",
+            file_options={"cache-control": "3600", "upsert": "false"}
+        )
+        
+        if result["success"]:
+            logger.info("✅ Upload test successful!")
+            logger.info(f"📁 File uploaded to: {result['storage_path']}")
+            logger.info(f"🔗 Public URL: {result['public_url']}")
+            return True
+        else:
+            logger.error(f"❌ Upload test failed: {result['error']}")
+            
+            # Provide helpful error information
+            if "row-level security policy" in result.get('response', ''):
+                logger.error("🔧 This is a storage permissions issue.")
+                logger.error("📋 To fix this, you need to configure your Supabase storage bucket:")
+                logger.error("""
+                1. Go to your Supabase dashboard
+                2. Navigate to Storage > Policies
+                3. For the 'images' bucket, add a policy like:
+                
+                CREATE POLICY "Allow public uploads" ON storage.objects
+                FOR INSERT WITH CHECK (bucket_id = 'images');
+                
+                CREATE POLICY "Allow public reads" ON storage.objects
+                FOR SELECT USING (bucket_id = 'images');
+                
+                Or make the bucket public in Storage > Settings
+                """)
+            
+            return False
+            
+    except Exception as e:
+        logger.error(f"❌ Upload test error: {e}")
+        return False

ui_helpers.py

@@ -0,0 +1,179 @@
+"""
+UI Helpers Module
+Contains UI formatting and helper functions for the Gradio interface.
+"""
+
+import logging
+import random
+import math
+from typing import Dict, Any, List
+
+# Configure logging
+logger = logging.getLogger(__name__)
+
+def get_model_display_name(model_name: str) -> str:
+    """Get the display name for a model."""
+    model_names = {
+        "gemini": "Gemini 2.0 Flash",
+        "mistral": "Mistral OCR",
+        "openai": "OpenAI GPT-4o",
+        "gpt5": "OpenAI GPT-5"
+    }
+    return model_names.get(model_name, model_name)
+
+def select_random_models() -> tuple[str, str]:
+    """Randomly select two models from the available list including gpt5."""
+    models = ["gemini", "mistral", "openai", "gpt5"]
+    selected_models = random.sample(models, 2)
+    return selected_models[0], selected_models[1]
+
+def format_votes_table(votes: List[Dict[str, Any]]) -> str:
+    """Format votes data into an HTML table with OCR outputs and image thumbnails."""
+    if not votes:
+        return "<p>No votes found in the database.</p>"
+
+    # Sort votes by timestamp (latest first)
+    sorted_votes = sorted(votes, key=lambda x: x.get('timestamp', ''), reverse=True)
+
+    html = """
+    <div style="overflow-x: auto; max-width: 100%;">
+        <table class="vote-table" style="width: 100%; table-layout: fixed; font-size: 12px;">
+            <thead>
+                <tr>
+                    <th style="width: 12%;">Timestamp</th>
+                    <th style="width: 8%;">Username</th>
+                    <th style="width: 10%;">Models</th>
+                    <th style="width: 8%;">Vote</th>
+                    <th style="width: 25%;">Model A Output</th>
+                    <th style="width: 25%;">Model B Output</th>
+                    <th style="width: 12%;">Image</th>
+                </tr>
+            </thead>
+            <tbody>
+    """
+
+    for vote in sorted_votes:
+        timestamp = vote.get('timestamp', 'N/A')
+        username = vote.get('username', 'N/A')
+        model_a = vote.get('model_a', 'N/A')
+        model_b = vote.get('model_b', 'N/A')
+        vote_choice = vote.get('vote', 'N/A')
+        model_a_output = vote.get('model_a_output', 'N/A')
+        model_b_output = vote.get('model_b_output', 'N/A')
+        image_url = vote.get('image_url', 'N/A')
+
+        # Format timestamp - handle both ISO format and our custom format
+        if timestamp != 'N/A':
+            try:
+                from datetime import datetime
+                # Check if it's already in our desired format
+                if len(timestamp) == 19 and timestamp[10] == ' ':
+                    # Already in YYYY-MM-DD HH:MM:SS format
+                    formatted_time = timestamp
+                else:
+                    # Convert from ISO format to our format
+                    dt = datetime.fromisoformat(timestamp.replace('Z', '+00:00'))
+                    formatted_time = dt.strftime('%Y-%m-%d %H:%M:%S')
+            except:
+                formatted_time = timestamp
+        else:
+            formatted_time = 'N/A'
+
+        # Get model display names
+        model_a_name = get_model_display_name(model_a)
+        model_b_name = get_model_display_name(model_b)
+        models_display = f"{model_a_name} vs {model_b_name}"
+
+        # Determine which model was voted for and get its display name
+        voted_model_name = ""
+        vote_color = "gray"
+        if vote_choice == "model_a":
+            voted_model_name = model_a_name
+            vote_color = "green"
+        elif vote_choice == "model_b":
+            voted_model_name = model_b_name
+            vote_color = "blue"
+
+        # Truncate OCR outputs for table display (shorter for better fit)
+        model_a_preview = model_a_output[:80] + "..." if len(model_a_output) > 80 else model_a_output
+        model_b_preview = model_b_output[:80] + "..." if len(model_b_output) > 80 else model_b_output
+
+        # Fix image URL - use the correct Supabase storage URL format
+        if image_url and image_url != 'N/A' and not image_url.startswith('http'):
+            # If it's just a path, construct the full URL
+            import os
+            image_url = f"{os.getenv('SUPABASE_URL')}/storage/v1/object/public/images/{image_url}"
+
+        # Create image thumbnail or placeholder
+        if image_url and image_url != 'N/A':
+            image_html = f'<img src="{image_url}" alt="OCR Image" style="width: 60px; height: 45px; object-fit: cover; border-radius: 4px; cursor: pointer;" onclick="window.open(\'{image_url}\', \'_blank\')" title="Click to view full image">'
+        else:
+            image_html = '<span style="color: #999; font-style: italic;">No image</span>'
+
+        html += f"""
+        <tr>
+            <td style="word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{formatted_time}</td>
+            <td style="word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><strong>{username}</strong></td>
+            <td style="word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><small>{models_display}</small></td>
+            <td style="color: {vote_color}; font-weight: bold; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{voted_model_name}</td>
+            <td style="word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="{model_a_output}">{model_a_preview}</td>
+            <td style="word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="{model_b_output}">{model_b_preview}</td>
+            <td style="text-align: center;">{image_html}</td>
+        </tr>
+        """
+
+    html += """
+        </tbody>
+    </table>
+    </div>
+    """
+
+    return html
+
+
+
+def format_elo_leaderboard(elo_ratings: Dict[str, float], vote_counts: Dict[str, int] = None) -> str:
+    """Format ELO ratings into a leaderboard HTML table."""
+    # Sort models by ELO rating (highest first)
+    sorted_models = sorted(elo_ratings.items(), key=lambda x: x[1], reverse=True)
+
+    html = """
+    <div style="padding: 15px; background-color: #f8f9fa; border-radius: 8px;">
+        <h3>ELO Leaderboard</h3>
+        <p><em>Models are ranked by their ELO rating. Higher ratings indicate better performance.</em></p>
+        
+        <table class="vote-table" style="margin-top: 15px;">
+            <thead>
+                <tr>
+                    <th>Rank</th>
+                    <th>Model</th>
+                    <th>ELO Rating</th>
+            <th>Total Votes</th>
+                </tr>
+            </thead>
+            <tbody>
+    """
+
+    for rank, (model, rating) in enumerate(sorted_models, 1):
+        # Get model display name
+        display_name = get_model_display_name(model)
+
+        # Get vote count for this model
+        vote_count = vote_counts.get(model, 0) if vote_counts else 0
+
+        html += f"""
+        <tr>
+            <td style="font-weight: bold; text-align: center;">{rank}</td>
+            <td><strong>{display_name}</strong></td>
+            <td style="font-weight: bold;">{rating:.0f}</td>
+            <td style="text-align: center;">{vote_count}</td>
+        </tr>
+        """
+
+    html += """
+            </tbody>
+        </table>
+    </div>
+    """
+
+    return html