add elo score

app.py

@@ -1,64 +1,55 @@
+"""
+OCR Arena - Main Application
+A Gradio web application for comparing OCR results from different AI models.
+"""
+
 import gradio as gr
-import google.generativeai as genai
-from mistralai import Mistral
-from PIL import Image
-import io
-import base64
 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, get_vote_statistics
-import datetime
+from db import add_vote, get_all_votes, get_vote_statistics, 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_statistics, format_elo_leaderboard
+)
 
-# Load environment variables from .env file
+# Load environment variables
 load_dotenv()
 
 # Configure logging
 logging.basicConfig(level=logging.INFO, format='%(levelname)s: %(message)s')
 logger = logging.getLogger(__name__)
 
-# Configure API keys from environment variables
-GEMINI_API_KEY = os.getenv("GEMINI_API_KEY")
-MISTRAL_API_KEY = os.getenv("MISTRAL_API_KEY")
-
-# Log API key status (without exposing the actual keys)
-if GEMINI_API_KEY:
-    logger.info("✅ GEMINI_API_KEY loaded successfully")
-else:
-    logger.error("❌ GEMINI_API_KEY not found in environment variables")
-
-if MISTRAL_API_KEY:
-    logger.info("✅ MISTRAL_API_KEY loaded successfully")
-else:
-    logger.error("❌ MISTRAL_API_KEY not found in environment variables")
-
-genai.configure(api_key=GEMINI_API_KEY)
-gemini_model = genai.GenerativeModel('gemini-2.0-flash-exp')
+# 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_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.
-    """
+    """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.
-    Handles both profile objects and direct username strings.
-    """
+    """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
@@ -74,206 +65,9 @@ def get_current_username(profile_or_username) -> str:
     # Return "Anonymous" if no valid username found
     return "Anonymous"
 
-def format_votes_table(votes):
-    """
-    Format votes data into an HTML table.
-    """
-    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 = """
-    <table class="vote-table">
-        <thead>
-            <tr>
-                <th>Timestamp</th>
-                <th>Username</th>
-                <th>Vote</th>
-                <th>Gemini Output</th>
-                <th>Mistral Output</th>
-                <th>Image</th>
-            </tr>
-        </thead>
-        <tbody>
-    """
-    
-    for vote in sorted_votes:
-        timestamp = vote.get('timestamp', 'N/A')
-        username = vote.get('username', 'N/A')
-        vote_choice = vote.get('vote', 'N/A')
-        gemini_output = vote.get('model_a_output', 'N/A')
-        mistral_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'
-        
-        # Color code the vote
-        vote_color = "green" if vote_choice == "gemini" else "blue" if vote_choice == "mistral" else "gray"
-        
-        # Truncate OCR outputs for table display
-        gemini_preview = gemini_output[:100] + "..." if len(gemini_output) > 100 else gemini_output
-        mistral_preview = mistral_output[:100] + "..." if len(mistral_output) > 100 else mistral_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
-            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: 80px; height: 60px; 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>{formatted_time}</td>
-            <td><strong>{username}</strong></td>
-            <td style="color: {vote_color}; font-weight: bold;">{vote_choice.upper()}</td>
-            <td title="{gemini_output}">{gemini_preview}</td>
-            <td title="{mistral_output}">{mistral_preview}</td>
-            <td>{image_html}</td>
-        </tr>
-        """
-    
-    html += """
-        </tbody>
-    </table>
-    """
-    
-    return html
-
-def format_statistics(stats):
-    """
-    Format statistics data into HTML.
-    """
-    if not stats:
-        return "<p>No statistics available.</p>"
-    
-    total_votes = stats.get('total_votes', 0)
-    gemini_votes = stats.get('gemini_votes', 0)
-    mistral_votes = stats.get('mistral_votes', 0)
-    gemini_percentage = stats.get('gemini_percentage', 0)
-    mistral_percentage = stats.get('mistral_percentage', 0)
-    
-    html = f"""
-    <div style="padding: 15px; background-color: #f8f9fa; border-radius: 8px;">
-        <h3>📊 Overall Statistics</h3>
-        <p><strong>Total Votes:</strong> {total_votes}</p>
-        
-        <h4>🤖 Gemini Votes</h4>
-        <p><strong>Count:</strong> {gemini_votes} ({gemini_percentage:.1f}%)</p>
-        
-        <h4>🦅 Mistral Votes</h4>
-        <p><strong>Count:</strong> {mistral_votes} ({mistral_percentage:.1f}%)</p>
-        
-        <div style="margin-top: 20px; padding: 10px; background-color: #e9ecef; border-radius: 5px;">
-            <h4>🏆 Current Winner</h4>
-            {f'<p style="color: green; font-weight: bold;">🤖 Gemini is leading!</p>' if gemini_votes > mistral_votes else f'<p style="color: blue; font-weight: bold;">🦅 Mistral is leading!</p>' if mistral_votes > gemini_votes else '<p style="color: gray; font-weight: bold;">🤝 It is a tie!</p>'}
-        </div>
-    </div>
-    """
-    
-    return html
-
-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)
-        
-        # Get statistics
-        stats = get_vote_statistics()
-        stats_html = format_statistics(stats)
-        
-        return votes_table_html, stats_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, error_html
-
-def gemini_ocr(image: Image.Image):
-    try:
-        # Convert image to bytes
-        buffered = io.BytesIO()
-        image.save(buffered, format="JPEG")
-        image_bytes = buffered.getvalue()
-        
-        # Create image part
-        image_part = {
-            "mime_type": "image/jpeg",
-            "data": image_bytes
-        }
-        
-        # Generate content
-        response = gemini_model.generate_content([
-            "Please transcribe all text visible in this image in markdown format. Return only the transcribed text without any additional commentary. Do not include any icon names such as Pokeball icon or Clipboard icon. Only extract the actual text that a human can read directly from the image. Format the output clearly using appropriate Markdown, such as headings, bold text, and paragraphs. The output should contain only the transcribed text, with no additional explanation or description.",
-            image_part
-        ])
-        
-        logger.info("Gemini OCR completed successfully")
-        return str(response.text)
-        
-    except Exception as e:
-        logger.error(f"Gemini OCR error: {e}")
-        return f"Gemini OCR error: {e}"
-
-def mistral_ocr(image: Image.Image):
-    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=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 process_image(image):
-    global current_gemini_output, current_mistral_output, current_image_url, current_voted_users
+    """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 (
@@ -287,6 +81,13 @@ def process_image(image):
     # 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 models: {get_model_display_name(model_a)} vs {get_model_display_name(model_b)}")
+    
     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"
@@ -318,12 +119,15 @@ def process_image(image):
             logger.warning(f"⚠️ Could not remove temporary file {temp_filename}: {e}")
         
         # Return initial state - OCR processing will happen via separate button clicks
+        model_a_name = get_model_display_name(current_model_a)
+        model_b_name = get_model_display_name(current_model_b)
+        
         return (
-            "Please click 'Run OCR' to start processing.", 
-            "Please click 'Run OCR' to start processing.", 
+            f"Please click 'Run OCR' to start processing.\n\nSelected: {model_a_name}", 
+            f"Please click 'Run OCR' to start processing.\n\nSelected: {model_b_name}", 
             gr.update(visible=False),  # Hide vote buttons initially
             gr.update(visible=False),  # Hide vote buttons initially
-            "Image uploaded! Click 'Run OCR' to process."
+            f"Image uploaded! Randomly selected: {model_a_name} vs {model_b_name}. Click 'Run OCR' to process."
         )
         
     except Exception as e:
@@ -336,72 +140,49 @@ def process_image(image):
             f"Error: {e}"
         )
 
-def process_gemini_ocr(image):
-    """Process Gemini OCR and return result immediately."""
-    global current_gemini_output
-    
-    if image is None:
-        return "Please upload an image."
-    
-    try:
-        logger.info("🤖 Starting Gemini OCR processing...")
-        result = gemini_ocr(image)
-        current_gemini_output = result
-        logger.info("✅ Gemini OCR completed")
-        return result
-    except Exception as e:
-        logger.error(f"❌ Gemini OCR error: {e}")
-        return f"Gemini OCR error: {e}"
-
-def process_mistral_ocr(image):
-    """Process Mistral OCR and return result immediately."""
-    global current_mistral_output
-    
-    if image is None:
-        return "Please upload an image."
-    
-    try:
-        logger.info("🦅 Starting Mistral OCR processing...")
-        result = mistral_ocr(image)
-        current_mistral_output = result
-        logger.info("✅ Mistral OCR completed")
-        return result
-    except Exception as e:
-        logger.error(f"❌ Mistral OCR error: {e}")
-        return f"Mistral OCR error: {e}"
-
-def check_ocr_completion(gemini_output, mistral_output):
+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
-    
+    global current_gemini_output, current_mistral_output, current_openai_output, current_model_a, current_model_b
+
     # Check if both results are complete (not processing messages)
-    gemini_ready = (gemini_output and 
-                   gemini_output != "Please upload an image." and 
-                   gemini_output != "Processing Gemini OCR..." and
-                   gemini_output != "Please click 'Run OCR' to start processing." and
-                   not gemini_output.startswith("Gemini OCR error:"))
-    
-    mistral_ready = (mistral_output and 
-                    mistral_output != "Please upload an image." and 
-                    mistral_output != "Processing Mistral OCR..." and
-                    mistral_output != "Please click 'Run OCR' to start processing." and
-                    not mistral_output.startswith("Mistral OCR error:"))
-    
-    # Update global variables with actual results
-    if gemini_ready:
-        current_gemini_output = gemini_output
-    if mistral_ready:
-        current_mistral_output = mistral_output
+    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
     
+    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
+
     # Show vote buttons only when both are ready
-    if gemini_ready and mistral_ready:
+    if model_a_ready and model_b_ready:
         return (
-            gr.update(visible=True),  # Show Gemini vote button
-            gr.update(visible=True),  # Show Mistral vote button
+            gr.update(visible=True),  # Show Model A vote button
+            gr.update(visible=True),  # Show Model B vote button
             "OCR completed! You can now vote for your preferred result (optional)."
         )
-    elif gemini_ready or mistral_ready:
-        ready_count = sum([gemini_ready, mistral_ready])
+    elif model_a_ready or model_b_ready:
+        ready_count = sum([model_a_ready, model_b_ready])
         return (
             gr.update(visible=False),  # Hide vote buttons
             gr.update(visible=False),  # Hide vote buttons
@@ -414,7 +195,59 @@ def check_ocr_completion(gemini_output, mistral_output):
             "Processing OCR results..."
         )
 
+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)
+
+        # Get statistics
+        stats = get_vote_statistics()
+        stats_html = format_statistics(stats)
+
+        return votes_table_html, stats_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, 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
+        }
+        
+        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="""
@@ -447,24 +280,24 @@ with gr.Blocks(title="OCR Comparison", css="""
     .vote-table tr:nth-child(even) {
         background-color: #f9f9f9;
     }
-            .vote-table tr:hover {
-            background-color: #f5f5f5;
-        }
-        .vote-table img {
-            transition: transform 0.2s ease;
-        }
-        .vote-table img:hover {
-            transform: scale(1.1);
-            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
-        }
+    .vote-table tr:hover {
+        background-color: #f5f5f5;
+    }
+    .vote-table img {
+        transition: transform 0.2s ease;
+    }
+    .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: Gemini 2.0 Flash vs Mistral OCR")
-            gr.Markdown("Upload an image to compare OCR results.")
-            
+            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):
@@ -476,18 +309,18 @@ with gr.Blocks(title="OCR Comparison", css="""
                     )
                 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="🤖 Gemini OCR Output", elem_classes=["output-box"])
-                
+                    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="🦅 Mistral OCR Output", elem_classes=["output-box"])
-            
+                    mistral_output = gr.Markdown(label="Model B Output", elem_classes=["output-box"])
+
             # Status indicator
             status_text = gr.Textbox(
                 label="Status",
@@ -495,18 +328,18 @@ with gr.Blocks(title="OCR Comparison", css="""
                 interactive=False,
                 show_label=False
             )
-            
+
             with gr.Row():
                 process_btn = gr.Button("🔍 Run OCR", variant="primary")
-        
+
         # Data Tab
         with gr.Tab("📊 Data", id=1):
             gr.Markdown("# 📊 Vote Data & Statistics")
             gr.Markdown("View all votes and statistics from the OCR Arena")
-            
+
             with gr.Row():
                 refresh_btn = gr.Button("🔄 Refresh Data", variant="secondary")
-            
+
             with gr.Row():
                 with gr.Column(scale=2):
                     votes_table = gr.HTML(
@@ -518,10 +351,24 @@ with gr.Blocks(title="OCR Comparison", css="""
                         value="<p>Loading statistics...</p>",
                         label="📈 Vote Statistics"
                     )
-    
+
+        # 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_gemini(profile_or_username):
-        global current_gemini_output, current_mistral_output, current_image_url, current_voted_users
+    def vote_model_a(profile_or_username):
+        global current_gemini_output, current_mistral_output, current_openai_output, current_image_url, current_voted_users, current_model_a, current_model_b
         
         # Get current username
         username = get_current_username(profile_or_username)
@@ -539,31 +386,35 @@ with gr.Blocks(title="OCR Comparison", css="""
             image_url = current_image_url if current_image_url else "no_image"
             
             # Add vote to database
-            logger.info(f"📊 Adding Gemini vote for user: {username}")
+            logger.info(f"📊 Adding Model A vote for user: {username}")
             add_vote(
                 username=username,
-                model_a_output=current_gemini_output,
-                model_b_output=current_mistral_output,
-                vote="gemini",
+                model_a=current_model_a,
+                model_b=current_model_b,
+                model_a_output=current_gemini_output if current_model_a == "gemini" else current_mistral_output if current_model_a == "mistral" else current_openai_output,
+                model_b_output=current_gemini_output if current_model_b == "gemini" else current_mistral_output if current_model_b == "mistral" else current_openai_output,
+                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;'>👈 Gemini OCR</strong>.</p>"
-                f"<p><span style='color:green;'>👈 Gemini OCR</span> - "
-                f"<span style='color:blue;'>👉 Mistral OCR</span></p>"
+                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 Gemini vote: {e}")
+            logger.error(f"❌ Error adding Model A vote: {e}")
             gr.Info(f"Error recording vote: {e}")
 
-    def vote_mistral(profile_or_username):
-        global current_gemini_output, current_mistral_output, current_image_url, current_voted_users
+    def vote_model_b(profile_or_username):
+        global current_gemini_output, current_mistral_output, current_openai_output, current_image_url, current_voted_users, current_model_a, current_model_b
         
         # Get current username
         username = get_current_username(profile_or_username)
@@ -581,27 +432,31 @@ with gr.Blocks(title="OCR Comparison", css="""
             image_url = current_image_url if current_image_url else "no_image"
             
             # Add vote to database
-            logger.info(f"📊 Adding Mistral vote for user: {username}")
+            logger.info(f"📊 Adding Model B vote for user: {username}")
             add_vote(
                 username=username,
-                model_a_output=current_gemini_output,
-                model_b_output=current_mistral_output,
-                vote="mistral",
+                model_a=current_model_a,
+                model_b=current_model_b,
+                model_a_output=current_gemini_output if current_model_a == "gemini" else current_mistral_output if current_model_a == "mistral" else current_openai_output,
+                model_b_output=current_gemini_output if current_model_b == "gemini" else current_mistral_output if current_model_b == "mistral" else current_openai_output,
+                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;'>👉 Mistral OCR</strong>.</p>"
-                f"<p><span style='color:green;'>👈 Gemini OCR</span> - "
-                f"<span style='color:blue;'>👉 Mistral OCR</span></p>"
+                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 Mistral vote: {e}")
+            logger.error(f"❌ Error adding Model B vote: {e}")
             gr.Info(f"Error recording vote: {e}")
 
     # Event handlers
@@ -611,15 +466,23 @@ with gr.Blocks(title="OCR Comparison", css="""
         outputs=[gemini_output, mistral_output, gemini_vote_btn, mistral_vote_btn, status_text],
     )
     
-    # Process both OCRs when the process button is clicked
+    # 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_gemini_ocr,
+        process_model_a_ocr,
         inputs=[image_input],
         outputs=[gemini_output],
     )
     
     process_btn.click(
-        process_mistral_ocr,
+        process_model_b_ocr,
         inputs=[image_input],
         outputs=[mistral_output],
     )
@@ -638,12 +501,12 @@ with gr.Blocks(title="OCR Comparison", css="""
     )
 
     gemini_vote_btn.click(
-        vote_gemini,
+        vote_model_a,
         inputs=[login_button]
     )
     
     mistral_vote_btn.click(
-        vote_mistral,
+        vote_model_b,
         inputs=[login_button]
     )
     
@@ -653,13 +516,23 @@ with gr.Blocks(title="OCR Comparison", css="""
         inputs=None,
         outputs=[votes_table, stats_display]
     )
-    
+
+    # 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, stats_display])
 
+    # 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:

db.py

@@ -6,6 +6,7 @@ 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
@@ -59,6 +60,8 @@ def test_table_exists(table_name: str = "ocr_votes") -> bool:
 
 def add_vote(
     username: str,
+    model_a: str,
+    model_b: str,
     model_a_output: str,
     model_b_output: str,
     vote: str,
@@ -72,6 +75,8 @@ def add_vote(
         
         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,
@@ -119,9 +124,11 @@ def test_add_sample_vote() -> bool:
     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="gemini",
+            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}")
@@ -135,24 +142,113 @@ def get_vote_statistics() -> Dict[str, Any]:
     try:
         votes = get_all_votes()
         
-        gemini_votes = sum(1 for vote in votes if vote.get('vote') == 'gemini')
-        mistral_votes = sum(1 for vote in votes if vote.get('vote') == 'mistral')
-        tie_votes = sum(1 for vote in votes if vote.get('vote') == 'tie')
+        # Count votes for each model
+        gemini_votes = 0
+        mistral_votes = 0
+        openai_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 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
+        
         return {
             "total_votes": total_votes,
             "gemini_votes": gemini_votes,
             "mistral_votes": mistral_votes,
-            "tie_votes": tie_votes,
+            "openai_votes": openai_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,
-            "tie_percentage": (tie_votes / total_votes * 100) if total_votes > 0 else 0
+            "openai_percentage": (openai_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
+    }
+    
+    # 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,158 @@
+"""
+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 only the transcribed text in markdown, nothing else."},
+                        {"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 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)
+    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") 

ui_helpers.py

@@ -0,0 +1,210 @@
+"""
+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"
+    }
+    return model_names.get(model_name, model_name)
+
+def select_random_models() -> tuple[str, str]:
+    """Randomly select two models from the three available: gemini, mistral, openai."""
+    models = ["gemini", "mistral", "openai"]
+    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 = """
+    <table class="vote-table">
+        <thead>
+            <tr>
+                <th>Timestamp</th>
+                <th>Username</th>
+                <th>Models</th>
+                <th>Vote</th>
+                <th>Model A Output</th>
+                <th>Model B Output</th>
+                <th>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
+        model_a_preview = model_a_output[:100] + "..." if len(model_a_output) > 100 else model_a_output
+        model_b_preview = model_b_output[:100] + "..." if len(model_b_output) > 100 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: 80px; height: 60px; 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>{formatted_time}</td>
+            <td><strong>{username}</strong></td>
+            <td><small>{models_display}</small></td>
+            <td style="color: {vote_color}; font-weight: bold;">{voted_model_name}</td>
+            <td title="{model_a_output}">{model_a_preview}</td>
+            <td title="{model_b_output}">{model_b_preview}</td>
+            <td>{image_html}</td>
+        </tr>
+        """
+
+    html += """
+        </tbody>
+    </table>
+    """
+
+    return html
+
+def format_statistics(stats: Dict[str, Any]) -> str:
+    """Format statistics data into HTML."""
+    if not stats:
+        return "<p>No statistics available.</p>"
+
+    total_votes = stats.get('total_votes', 0)
+    gemini_votes = stats.get('gemini_votes', 0)
+    mistral_votes = stats.get('mistral_votes', 0)
+    openai_votes = stats.get('openai_votes', 0)
+    gemini_percentage = stats.get('gemini_percentage', 0)
+    mistral_percentage = stats.get('mistral_percentage', 0)
+    openai_percentage = stats.get('openai_percentage', 0)
+
+    html = f"""
+    <div style="padding: 15px; background-color: #f8f9fa; border-radius: 8px;">
+        <h3>Overall Statistics</h3>
+        <p><strong>Total Votes:</strong> {total_votes}</p>
+        
+        <h4>Gemini Votes</h4>
+        <p><strong>Count:</strong> {gemini_votes} ({gemini_percentage:.1f}%)</p>
+        
+        <h4>Mistral Votes</h4>
+        <p><strong>Count:</strong> {mistral_votes} ({mistral_percentage:.1f}%)</p>
+        
+        <h4>OpenAI Votes</h4>
+        <p><strong>Count:</strong> {openai_votes} ({openai_percentage:.1f}%)</p>
+        
+        <div style="margin-top: 20px; padding: 10px; background-color: #e9ecef; border-radius: 5px;">
+            <h4>Current Winner</h4>
+            {f'<p style="color: green; font-weight: bold;">Gemini is leading!</p>' if gemini_votes > max(mistral_votes, openai_votes) else f'<p style="color: blue; font-weight: bold;">Mistral is leading!</p>' if mistral_votes > max(gemini_votes, openai_votes) else f'<p style="color: purple; font-weight: bold;">OpenAI is leading!</p>' if openai_votes > max(gemini_votes, mistral_votes) else '<p style="color: gray; font-weight: bold;">It is a tie!</p>'}
+        </div>
+    </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