Upload folder using huggingface_hub

.gitattributes

@@ -33,3 +33,9 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+2048_performance.png filter=lfs diff=lfs merge=lfs -text
+assets/2048/2048.gif filter=lfs diff=lfs merge=lfs -text
+assets/candy/candy.gif filter=lfs diff=lfs merge=lfs -text
+assets/sokoban/sokoban.gif filter=lfs diff=lfs merge=lfs -text
+assets/super_mario_bros/super_mario.gif filter=lfs diff=lfs merge=lfs -text
+assets/tetris/tetris.gif filter=lfs diff=lfs merge=lfs -text

.github/workflows/update_space.yml

@@ -0,0 +1,28 @@
+name: Run Python script
+
+on:
+  push:
+    branches:
+      - gradio_app_v2_dev
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v2
+
+    - name: Set up Python
+      uses: actions/setup-python@v2
+      with:
+        python-version: '3.9'
+
+    - name: Install Gradio
+      run: python -m pip install gradio
+
+    - name: Log in to Hugging Face
+      run: python -c 'import huggingface_hub; huggingface_hub.login(token="${{ secrets.hf_token }}")'
+
+    - name: Deploy to Spaces
+      run: gradio deploy

.gradio/certificate.pem

@@ -0,0 +1,31 @@
+-----BEGIN CERTIFICATE-----
+MIIFazCCA1OgAwIBAgIRAIIQz7DSQONZRGPgu2OCiwAwDQYJKoZIhvcNAQELBQAw
+TzELMAkGA1UEBhMCVVMxKTAnBgNVBAoTIEludGVybmV0IFNlY3VyaXR5IFJlc2Vh
+cmNoIEdyb3VwMRUwEwYDVQQDEwxJU1JHIFJvb3QgWDEwHhcNMTUwNjA0MTEwNDM4
+WhcNMzUwNjA0MTEwNDM4WjBPMQswCQYDVQQGEwJVUzEpMCcGA1UEChMgSW50ZXJu
+ZXQgU2VjdXJpdHkgUmVzZWFyY2ggR3JvdXAxFTATBgNVBAMTDElTUkcgUm9vdCBY
+MTCCAiIwDQYJKoZIhvcNAQEBBQADggIPADCCAgoCggIBAK3oJHP0FDfzm54rVygc
+h77ct984kIxuPOZXoHj3dcKi/vVqbvYATyjb3miGbESTtrFj/RQSa78f0uoxmyF+
+0TM8ukj13Xnfs7j/EvEhmkvBioZxaUpmZmyPfjxwv60pIgbz5MDmgK7iS4+3mX6U
+A5/TR5d8mUgjU+g4rk8Kb4Mu0UlXjIB0ttov0DiNewNwIRt18jA8+o+u3dpjq+sW
+T8KOEUt+zwvo/7V3LvSye0rgTBIlDHCNAymg4VMk7BPZ7hm/ELNKjD+Jo2FR3qyH
+B5T0Y3HsLuJvW5iB4YlcNHlsdu87kGJ55tukmi8mxdAQ4Q7e2RCOFvu396j3x+UC
+B5iPNgiV5+I3lg02dZ77DnKxHZu8A/lJBdiB3QW0KtZB6awBdpUKD9jf1b0SHzUv
+KBds0pjBqAlkd25HN7rOrFleaJ1/ctaJxQZBKT5ZPt0m9STJEadao0xAH0ahmbWn
+OlFuhjuefXKnEgV4We0+UXgVCwOPjdAvBbI+e0ocS3MFEvzG6uBQE3xDk3SzynTn
+jh8BCNAw1FtxNrQHusEwMFxIt4I7mKZ9YIqioymCzLq9gwQbooMDQaHWBfEbwrbw
+qHyGO0aoSCqI3Haadr8faqU9GY/rOPNk3sgrDQoo//fb4hVC1CLQJ13hef4Y53CI
+rU7m2Ys6xt0nUW7/vGT1M0NPAgMBAAGjQjBAMA4GA1UdDwEB/wQEAwIBBjAPBgNV
+HRMBAf8EBTADAQH/MB0GA1UdDgQWBBR5tFnme7bl5AFzgAiIyBpY9umbbjANBgkq
+hkiG9w0BAQsFAAOCAgEAVR9YqbyyqFDQDLHYGmkgJykIrGF1XIpu+ILlaS/V9lZL
+ubhzEFnTIZd+50xx+7LSYK05qAvqFyFWhfFQDlnrzuBZ6brJFe+GnY+EgPbk6ZGQ
+3BebYhtF8GaV0nxvwuo77x/Py9auJ/GpsMiu/X1+mvoiBOv/2X/qkSsisRcOj/KK
+NFtY2PwByVS5uCbMiogziUwthDyC3+6WVwW6LLv3xLfHTjuCvjHIInNzktHCgKQ5
+ORAzI4JMPJ+GslWYHb4phowim57iaztXOoJwTdwJx4nLCgdNbOhdjsnvzqvHu7Ur
+TkXWStAmzOVyyghqpZXjFaH3pO3JLF+l+/+sKAIuvtd7u+Nxe5AW0wdeRlN8NwdC
+jNPElpzVmbUq4JUagEiuTDkHzsxHpFKVK7q4+63SM1N95R1NbdWhscdCb+ZAJzVc
+oyi3B43njTOQ5yOf+1CceWxG1bQVs5ZufpsMljq4Ui0/1lvh+wjChP4kqKOJ2qxq
+4RgqsahDYVvTH9w7jXbyLeiNdd8XM2w9U/t7y0Ff/9yi0GE44Za4rF2LN9d11TPA
+mRGunUHBcnWEvgJBQl9nJEiU0Zsnvgc/ubhPgXRR4Xq37Z0j4r7g1SgEEzwxA57d
+emyPxgcYxn/eR44/KJ4EBs+lVDR3veyJm+kXQ99b21/+jh5Xos1AnX5iItreGCc=
+-----END CERTIFICATE-----

README.md

@@ -1,12 +1,6 @@
 ---
-title: Lmgame
-emoji: 🦀
-colorFrom: yellow
-colorTo: gray
+title: lmgame
+app_file: gradio_app_v2.py
 sdk: gradio
-sdk_version: 5.23.3
-app_file: app.py
-pinned: false
+sdk_version: 5.23.1
 ---
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

data_analysis.ipynb

@@ -0,0 +1 @@
+ 

data_visualization.py

@@ -0,0 +1,384 @@
+import matplotlib
+matplotlib.use('Agg')  # Use Agg backend for thread safety
+import matplotlib.pyplot as plt
+import numpy as np
+import pandas as pd
+from leaderboard_utils import (
+    get_organization,
+    get_mario_leaderboard,
+    get_sokoban_leaderboard,
+    get_2048_leaderboard,
+    get_candy_leaderboard,
+    get_tetris_leaderboard,
+    get_tetris_planning_leaderboard,
+    get_combined_leaderboard,
+    GAME_ORDER
+)
+
+# Define game score columns mapping
+GAME_SCORE_COLUMNS = {
+    "Super Mario Bros": "Score",
+    "Sokoban": "Levels Cracked",
+    "2048": "Score",
+    "Candy Crash": "Average Score",
+    "Tetris (complete)": "Score",
+    "Tetris (planning only)": "Score"
+}
+
+def simplify_model_name(model_name):
+    """
+    Simplify model name by either taking first 11 chars or string before third '-'
+    """
+    hyphen_parts = model_name.split('-')
+    return '-'.join(hyphen_parts[:3]) if len(hyphen_parts) >= 3 else model_name[:11]
+
+def create_horizontal_bar_chart(df, game_name):
+    """
+    Create horizontal bar chart for detailed game view
+    
+    Args:
+        df (pd.DataFrame): DataFrame containing game data
+        game_name (str): Name of the game to display
+        
+    Returns:
+        matplotlib.figure.Figure: The generated bar chart figure
+    """
+    # Close any existing figures to prevent memory leaks
+    plt.close('all')
+    
+    # Set style
+    plt.style.use('default')
+    # Increase figure width to accommodate long model names
+    fig, ax = plt.subplots(figsize=(10, 6))
+    
+    # Sort by score
+    if game_name == "Super Mario Bros":
+        score_col = "Score"
+        df_sorted = df.sort_values(by=score_col, ascending=True)
+    elif game_name == "Sokoban":
+        # Process Sokoban scores by splitting and getting max level
+        def get_max_level(levels_str):
+            try:
+                # Split by semicolon, strip whitespace, filter empty strings, convert to integers
+                levels = [int(x.strip()) for x in levels_str.split(";") if x.strip()]
+                return max(levels) if levels else 0
+            except:
+                return 0
+        
+        # Create a temporary column with max levels
+        df['Max Level'] = df['Levels Cracked'].apply(get_max_level)
+        df_sorted = df.sort_values(by='Max Level', ascending=True)
+        score_col = 'Max Level'
+    elif game_name == "2048":
+        score_col = "Score"
+        df_sorted = df.sort_values(by=score_col, ascending=True)
+    elif game_name == "Candy Crash":
+        score_col = "Average Score"
+        df_sorted = df.sort_values(by=score_col, ascending=True)
+    elif game_name in ["Tetris (complete)", "Tetris (planning only)"]:
+        score_col = "Score"
+        df_sorted = df.sort_values(by=score_col, ascending=True)
+    else:
+        return None
+    
+    # Create color gradient
+    colors = plt.cm.viridis(np.linspace(0.2, 0.8, len(df_sorted)))
+    
+    # Create horizontal bars
+    bars = ax.barh(range(len(df_sorted)), df_sorted[score_col], color=colors)
+    
+    # Add more space for labels on the left
+    plt.subplots_adjust(left=0.3)
+    
+    # Customize the chart
+    ax.set_yticks(range(len(df_sorted)))
+    
+    # Format player names: keep organization info and truncate the rest if too long
+    def format_player_name(player, org):
+        max_length = 40  # Maximum length for player name
+        if len(player) > max_length:
+            # Keep the first part and last part of the name
+            parts = player.split('-')
+            if len(parts) > 3:
+                formatted = f"{parts[0]}-{parts[1]}-...{parts[-1]}"
+            else:
+                formatted = player[:max_length-3] + "..."
+        else:
+            formatted = player
+        return f"{formatted} [{org}]"
+    
+    player_labels = [format_player_name(row['Player'], row['Organization']) 
+                    for _, row in df_sorted.iterrows()]
+    ax.set_yticklabels(player_labels, fontsize=9)
+    
+    # Add value labels on the bars
+    for i, bar in enumerate(bars):
+        width = bar.get_width()
+        if game_name == "Candy Crash":
+            score_text = f'{width:.1f}'
+        else:
+            score_text = f'{width:.0f}'
+            
+        ax.text(width, bar.get_y() + bar.get_height()/2, 
+                score_text,
+                ha='left', va='center',
+                fontsize=10,
+                fontweight='bold',
+                color='white',
+                bbox=dict(facecolor=(0, 0, 0, 0.3),
+                         edgecolor='none', 
+                         alpha=0.5,
+                         pad=2))
+    
+    # Set title and labels
+    ax.set_title(f"{game_name} Performance", 
+                 pad=20, 
+                 fontsize=14, 
+                 fontweight='bold',
+                 color='#2c3e50')
+    
+    if game_name == "Sokoban":
+        ax.set_xlabel("Maximum Level Reached", 
+                     fontsize=12, 
+                     fontweight='bold',
+                     color='#2c3e50',
+                     labelpad=10)
+    else:
+        ax.set_xlabel(score_col, 
+                     fontsize=12, 
+                     fontweight='bold',
+                     color='#2c3e50',
+                     labelpad=10)
+    
+    # Add grid lines
+    ax.grid(True, axis='x', linestyle='--', alpha=0.3)
+    
+    # Remove top and right spines
+    ax.spines['top'].set_visible(False)
+    ax.spines['right'].set_visible(False)
+    
+    # Adjust layout
+    plt.tight_layout()
+    
+    return fig
+
+def create_radar_charts(df):
+    """
+    Create two radar charts with improved normalization using z-scores
+    """
+    # Close any existing figures to prevent memory leaks
+    plt.close('all')
+    
+    # Define reasoning models
+    reasoning_models = [
+        'claude-3-7-sonnet-20250219(thinking)',
+        'o1-2024-12-17',
+        'gemini-2.0-flash-thinking-exp-1219',
+        'o3-mini-2025-01-31(medium)',
+        'gemini-2.5-pro-exp-03-25',
+        'o1-mini-2024-09-12',
+        'deepseek-r1'
+    ]
+    
+    # Split dataframe into reasoning and non-reasoning models
+    df_reasoning = df[df['Player'].isin(reasoning_models)]
+    df_others = df[~df['Player'].isin(reasoning_models)]
+    
+    # Get game columns
+    game_columns = [col for col in df.columns if col.endswith(' Score')]
+    categories = [col.replace(' Score', '') for col in game_columns]
+    
+    # Create figure with two subplots - adjusted size for new layout
+    fig, (ax1, ax2) = plt.subplots(1, 2, figsize=(10, 6), subplot_kw=dict(projection='polar'))
+    fig.patch.set_facecolor('white')  # Set figure background to white
+    
+    def normalize_values(values, mean, std):
+        """
+        Normalize values using z-score and scale to 0-100 range
+        """
+        if std == 0:
+            return [50 if v > 0 else 0 for v in values]  # Handle zero std case
+        z_scores = [(v - mean) / std for v in values]
+        # Scale z-scores to 0-100 range, with mean at 50
+        scaled_values = [max(0, min(100, (z * 30) + 30)) for z in z_scores]
+        return scaled_values
+
+    def get_game_stats(df, game_col):
+        """
+        Get mean and std for a game column, handling missing values
+        """
+        values = []
+        for val in df[game_col]:
+            if isinstance(val, str) and val == '_':
+                values.append(0)
+            else:
+                try:
+                    values.append(float(val))
+                except:
+                    values.append(0)
+        return np.mean(values), np.std(values)
+
+    def setup_radar_plot(ax, data, title):
+        ax.set_facecolor('white')  # Set subplot background to white
+        
+        num_vars = len(categories)
+        angles = np.linspace(0, 2*np.pi, num_vars, endpoint=False)
+        angles = np.concatenate((angles, [angles[0]]))
+        
+        # Plot grid lines with darker color
+        grid_values = [10, 30, 50, 70, 90]
+        ax.set_rgrids(grid_values, 
+                    labels=grid_values,
+                    angle=45, 
+                    fontsize=6, 
+                    alpha=0.7,  # Increased alpha for better visibility
+                    color='#404040')  # Darker color for grid labels
+    
+        # Make grid lines darker but still subtle
+        ax.grid(True, color='#404040', alpha=0.3)  # Darker grid lines
+        
+        # Define darker, more vibrant colors for the radar plots
+        colors = ['#1f77b4', '#d62728', '#2ca02c', '#ff7f0e', '#9467bd', '#8c564b']
+        
+        # Calculate game statistics once
+        game_stats = {col: get_game_stats(df, col) for col in game_columns}
+        
+        # Plot data with darker lines and higher opacity for fills
+        for idx, (_, row) in enumerate(data.iterrows()):
+            values = []
+            for col in game_columns:
+                val = row[col]
+                if isinstance(val, str) and val == '_':
+                    values.append(0)
+                else:
+                    try:
+                        values.append(float(val))
+                    except:
+                        values.append(0)
+            
+            # Normalize values using game statistics
+            normalized_values = []
+            for i, v in enumerate(values):
+                mean, std = game_stats[game_columns[i]]
+                normalized_value = normalize_values([v], mean, std)[0]
+                normalized_values.append(normalized_value)
+            
+            # Complete the circular plot
+            normalized_values = np.concatenate((normalized_values, [normalized_values[0]]))
+            
+            model_name = simplify_model_name(row['Player'])
+            ax.plot(angles, normalized_values, 'o-', linewidth=2.0,  # Increased line width
+                   label=model_name,
+                   color=colors[idx % len(colors)], 
+                   markersize=4)  # Increased marker size
+            ax.fill(angles, normalized_values, 
+                   alpha=0.3,  # Increased fill opacity
+                   color=colors[idx % len(colors)])
+        
+        # Format categories
+        formatted_categories = []
+        for game in categories:
+            if game == "Tetris (planning only)":
+                game = "Tetris\n(planning)"
+            elif game == "Tetris (complete)":
+                game = "Tetris\n(complete)"
+            elif game == "Super Mario Bros":
+                game = "Super\nMario"
+            elif game == "Candy Crash":
+                game = "Candy\nCrash"
+            formatted_categories.append(game)
+        
+        ax.set_xticks(angles[:-1])
+        ax.set_xticklabels(formatted_categories, 
+                          fontsize=8,  # Slightly larger font
+                          color='#202020',  # Darker text
+                          fontweight='bold')  # Bold text
+        ax.tick_params(pad=10, colors='#202020')  # Darker tick colors
+        
+        ax.set_title(title, 
+                    pad=20, 
+                    fontsize=11,  # Slightly larger title
+                    color='#202020',  # Darker title
+                    fontweight='bold')  # Bold title
+        
+        legend = ax.legend(loc='upper right',
+                          bbox_to_anchor=(1.3, 1.1),
+                          fontsize=7,  # Slightly larger legend
+                          framealpha=0.9,  # More opaque legend
+                          edgecolor='#404040',  # Darker edge
+                          ncol=1)
+        
+        ax.set_ylim(0, 105)
+        ax.spines['polar'].set_color('#404040')  # Darker spine
+        ax.spines['polar'].set_alpha(0.5)  # More visible spine
+    
+    # Setup both plots
+    setup_radar_plot(ax1, df_reasoning, "Reasoning Models")
+    setup_radar_plot(ax2, df_others, "Non-Reasoning Models")
+    
+    plt.subplots_adjust(right=0.85, wspace=0.3)
+    
+    return fig
+
+def get_combined_leaderboard_with_radar(rank_data, selected_games):
+    """
+    Get combined leaderboard and create radar charts
+    """
+    df = get_combined_leaderboard(rank_data, selected_games)
+    radar_fig = create_radar_charts(df)
+    return df, radar_fig
+
+def create_organization_radar_chart(rank_data):
+    """
+    Create radar chart comparing organizations
+    """
+    # Get combined leaderboard with all games
+    df = get_combined_leaderboard(rank_data, {game: True for game in GAME_ORDER})
+    
+    # Group by organization and calculate average scores
+    org_performance = {}
+    for org in df["Organization"].unique():
+        org_df = df[df["Organization"] == org]
+        scores = {}
+        for game in GAME_ORDER:
+            game_scores = org_df[f"{game} Score"].apply(lambda x: float(x) if x != "_" else 0)
+            scores[game] = game_scores.mean()
+        org_performance[org] = scores
+    
+    # Create radar chart
+    return create_radar_charts(pd.DataFrame([org_performance]))
+
+def create_top_players_radar_chart(rank_data, n=5):
+    """
+    Create radar chart for top N players
+    """
+    # Get combined leaderboard with all games
+    df = get_combined_leaderboard(rank_data, {game: True for game in GAME_ORDER})
+    
+    # Get top N players
+    top_players = df["Player"].head(n).tolist()
+    
+    # Create radar chart for top players
+    return create_radar_charts(df[df["Player"].isin(top_players)])
+
+def create_player_radar_chart(rank_data, player_name):
+    """
+    Create radar chart for a specific player
+    """
+    # Get combined leaderboard with all games
+    df = get_combined_leaderboard(rank_data, {game: True for game in GAME_ORDER})
+    
+    # Get player's data
+    player_df = df[df["Player"] == player_name]
+    
+    if player_df.empty:
+        return None
+    
+    # Create radar chart for the player
+    return create_radar_charts(player_df)
+
+def save_visualization(fig, filename):
+    """
+    Save visualization to file
+    """
+    fig.savefig(filename, bbox_inches='tight', dpi=300)

gradio_app.py

@@ -0,0 +1,505 @@
+import gradio as gr
+import os
+import pandas as pd
+from PIL import Image, ImageSequence
+import io
+
+#######################################################
+# Red Baron Game HTML
+#######################################################
+test_html = """
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Simple Test Page</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 20px;
+            background-color: #f0f8ff;
+            color: #333;
+        }
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            background-color: white;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        h1 {
+            color: #4169e1;
+            text-align: center;
+        }
+        button {
+            background-color: #4169e1;
+            color: white;
+            border: none;
+            padding: 10px 15px;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 16px;
+            margin: 10px 0;
+        }
+        button:hover {
+            background-color: #3158d3;
+        }
+        #canvas {
+            border: 1px solid #ddd;
+            display: block;
+            margin: 20px auto;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Gradio HTML Test</h1>
+        <p>This is a simple HTML test page to verify that HTML rendering works in your Gradio application.</p>
+        
+        <h2>Interactive Elements</h2>
+        <button id="testButton">Click Me!</button>
+        <p id="result">Button not clicked yet.</p>
+        
+        <h2>Canvas Test</h2>
+        <canvas id="canvas" width="300" height="200"></canvas>
+        
+        <h2>HTML Elements</h2>
+        <ul>
+            <li>List item 1</li>
+            <li>List item 2</li>
+            <li>List item 3</li>
+        </ul>
+    </div>
+
+    <script>
+        // Button click event
+        document.getElementById('testButton').addEventListener('click', function() {
+            document.getElementById('result').textContent = 'Button clicked at: ' + new Date().toLocaleTimeString();
+        });
+        
+        // Canvas drawing
+        const canvas = document.getElementById('canvas');
+        const ctx = canvas.getContext('2d');
+        
+        // Draw a simple scene
+        ctx.fillStyle = '#e0f0ff';
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        
+        // Draw a circle
+        ctx.beginPath();
+        ctx.arc(150, 100, 50, 0, Math.PI * 2);
+        ctx.fillStyle = '#4169e1';
+        ctx.fill();
+        
+        // Draw a rectangle
+        ctx.fillStyle = '#ff6347';
+        ctx.fillRect(50, 50, 40, 40);
+    </script>
+</body>
+</html>
+"""
+
+game_html = """
+<iframe id="gameFrame" style="width:660px; height:520px; border:none; display:block; margin:0 auto;" srcdoc='
+<!DOCTYPE html>
+<html>
+<head>
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+      overflow: hidden;
+      font-family: sans-serif;
+      background: #1e1e1e;
+    }
+    #gameCanvas {
+      background: #70c5ce; /* sky-like */
+      display: block;
+      margin: 0 auto;
+      border: 2px solid black;
+    }
+  </style>
+</head>
+<body>
+  <canvas id="gameCanvas" width="640" height="480"></canvas>
+  <script>
+    // --- Simple "Red Baron"-style Game in Plain JS ---
+
+    // Grab the canvas and its context
+    const canvas = document.getElementById("gameCanvas");
+    const ctx = canvas.getContext("2d");
+
+    // Plane properties
+    let planeX = 50;
+    let planeY = canvas.height / 2;
+    const planeWidth = 40;
+    const planeHeight = 20;
+    const planeSpeed = 4;
+
+    // Bullet properties
+    let bullets = [];
+    const bulletSpeed = 6;
+    const bulletWidth = 6;
+    const bulletHeight = 2;
+
+    // Enemy properties
+    let enemies = [];
+    const enemyWidth = 40;
+    const enemyHeight = 20;
+    const enemySpeed = 2;
+    const spawnInterval = 100; // frames between spawns
+    let spawnCounter = 0;
+
+    // Key states
+    let keys = {
+      ArrowUp: false,
+      ArrowDown: false,
+      ArrowLeft: false,
+      ArrowRight: false,
+      Space: false
+    };
+
+    // Listen for keydown / keyup
+    document.addEventListener("keydown", (e) => {
+      if (keys.hasOwnProperty(e.code)) {
+        keys[e.code] = true;
+      }
+    });
+    document.addEventListener("keyup", (e) => {
+      if (keys.hasOwnProperty(e.code)) {
+        keys[e.code] = false;
+      }
+    });
+
+    // Main update loop
+    function update() {
+      // Move plane
+      if (keys["ArrowUp"] && planeY > 0) {
+        planeY -= planeSpeed;
+      }
+      if (keys["ArrowDown"] && planeY + planeHeight < canvas.height) {
+        planeY += planeSpeed;
+      }
+      if (keys["ArrowLeft"] && planeX > 0) {
+        planeX -= planeSpeed;
+      }
+      if (keys["ArrowRight"] && planeX + planeWidth < canvas.width) {
+        planeX += planeSpeed;
+      }
+
+      // Fire bullet (on every frame while space is held)
+      if (keys["Space"]) {
+        bullets.push({
+          x: planeX + planeWidth,
+          y: planeY + planeHeight / 2 - bulletHeight / 2,
+          w: bulletWidth,
+          h: bulletHeight
+        });
+      }
+
+      // Update bullets
+      for (let i = 0; i < bullets.length; i++) {
+        bullets[i].x += bulletSpeed;
+      }
+      // Remove bullets offscreen
+      bullets = bullets.filter((b) => b.x < canvas.width + 20);
+
+      // Spawn enemies periodically
+      spawnCounter++;
+      if (spawnCounter > spawnInterval) {
+        spawnCounter = 0;
+        enemies.push({
+          x: canvas.width,
+          y: Math.random() * (canvas.height - enemyHeight),
+          w: enemyWidth,
+          h: enemyHeight
+        });
+      }
+
+      // Update enemies
+      for (let i = 0; i < enemies.length; i++) {
+        enemies[i].x -= enemySpeed;
+      }
+      // Remove enemies offscreen
+      enemies = enemies.filter((e) => e.x > -enemyWidth);
+
+      // Check collisions bullets vs enemies
+      for (let e = enemies.length - 1; e >= 0; e--) {
+        let enemy = enemies[e];
+        for (let b = bullets.length - 1; b >= 0; b--) {
+          let bullet = bullets[b];
+          if (
+            bullet.x < enemy.x + enemy.w &&
+            bullet.x + bullet.w > enemy.x &&
+            bullet.y < enemy.y + enemy.h &&
+            bullet.y + bullet.h > enemy.y
+          ) {
+            // collision
+            enemies.splice(e, 1);
+            bullets.splice(b, 1);
+            break;
+          }
+        }
+      }
+
+      // Draw everything
+      draw();
+      requestAnimationFrame(update);
+    }
+
+    // Render the scene
+    function draw() {
+      // Clear
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+      // Draw plane (red rectangle for demonstration)
+      ctx.fillStyle = "red";
+      ctx.fillRect(planeX, planeY, planeWidth, planeHeight);
+
+      // Draw bullets (small black rectangles)
+      ctx.fillStyle = "black";
+      bullets.forEach((b) => {
+        ctx.fillRect(b.x, b.y, b.w, b.h);
+      });
+
+      // Draw enemies (simple gray rectangles)
+      ctx.fillStyle = "gray";
+      enemies.forEach((en) => {
+        ctx.fillRect(en.x, en.y, en.w, en.h);
+      });
+    }
+
+    // Start game loop
+    window.onload = function() {
+      // Make sure canvas is fully loaded
+      update();
+    };
+  </script>
+</body>
+</html>
+'></iframe>
+<div style="text-align:center; margin-top:10px;">
+  <p>Controls: Arrow keys to move, Space to shoot</p>
+</div>
+"""
+
+#######################################################
+# Dictionary of game -> directory paths
+#######################################################
+GAMES = {
+    "Super Mario Bros": "assets/super_mario_bros",
+    "Sokoban": "assets/sokoban",
+    "Tetris": "assets/tetris",
+    "2048": "assets/2048",
+    "Candy Crash": "assets/candy"
+}
+# Ensure each directory exists
+for path in GAMES.values():
+    os.makedirs(path, exist_ok=True)
+
+#######################################################
+# Scoreboard data for each game
+#######################################################
+
+# TODO (lanxiang): read actual data here
+mario_scores = [
+    ["Alice", 9000, "3/5", "00:35"],
+    ["Bob", 2500, "2/5", "00:12"],
+    ["Carol", 500, "1/5", "00:05"]
+]
+sokoban_scores = [
+    ["Alice", 100, 3],
+    ["Bob", 350, 2],
+    ["Carol", 500, 1]
+]
+
+tetris_scores = [
+    ["Alice", 15000, 120],
+    ["Bob", 8000, 60],
+    ["Carol", 4000, 45]
+]
+
+candy_scores = [
+    ["Alice", 12000, 10],
+    ["Bob", 9500, 8],
+    ["Carol", 3000, 5]
+]
+
+# 2048 columns: [Player, Scores, #Steps]
+game_2048_scores = [
+    ["Alice", 8192, 300],
+    ["Bob", 4096, 200],
+    ["Carol", 2048, 150]
+]
+
+#######################################################
+# Functions to return the scoreboard as DataFrames
+#######################################################
+def get_mario_leaderboard():
+    return pd.DataFrame(
+        mario_scores, 
+        columns=["Player", "Progress (current/total)", "Score", "Time"]
+    )
+
+def get_sokoban_leaderboard():
+    return pd.DataFrame(
+        sokoban_scores, 
+        columns=["Player", "Levels Cracked", "Steps"]
+    )
+
+def get_tetris_leaderboard():
+    return pd.DataFrame(
+        tetris_scores, 
+        columns=["Player", "Scores", "Steps"]
+    )
+
+def get_candy_leaderboard():
+    return pd.DataFrame(
+        candy_scores,
+        columns=["Player", "Levels Cracked", "Scores"]
+    )
+
+def get_2048_leaderboard():
+    return pd.DataFrame(
+        game_2048_scores,
+        columns=["Player", "Scores", "Steps"]
+    )
+
+#######################################################
+# GIF Handling
+#######################################################
+def create_or_update_resized_gif(original_path, max_dim=600):
+    base, ext = os.path.splitext(original_path)
+    resized_path = f"{base}_resized{ext}"
+    if os.path.exists(resized_path):
+        return resized_path
+
+    with Image.open(original_path) as im:
+        w, h = im.size
+        needs_resize = (w > max_dim or h > max_dim)
+
+        frames = []
+        for frame in ImageSequence.Iterator(im):
+            frame_rgba = frame.convert("RGBA")
+            if needs_resize:
+                ratio = min(max_dim / w, max_dim / h)
+                new_w, new_h = int(w * ratio), int(h * ratio)
+                frame_rgba = frame_rgba.resize((new_w, new_h), Image.LANCZOS)
+            frames.append(frame_rgba.convert("P"))
+
+        output_bytes = io.BytesIO()
+        frames[0].save(
+            output_bytes,
+            format="GIF",
+            save_all=True,
+            append_images=frames[1:],
+            loop=0,
+            disposal=2,
+            optimize=False
+        )
+        output_bytes.seek(0)
+
+    with open(resized_path, "wb") as f_out:
+        f_out.write(output_bytes.read())
+    return resized_path
+
+def list_gifs(game_name):
+    gif_dir = GAMES[game_name]
+    all_gifs = [
+        os.path.join(gif_dir, f)
+        for f in os.listdir(gif_dir)
+        if f.lower().endswith(".gif") and not f.lower().endswith("_resized.gif")
+    ]
+    resized_paths = []
+    for gif_path in all_gifs:
+        resized_gif_path = create_or_update_resized_gif(gif_path, max_dim=600)
+        resized_paths.append(resized_gif_path)
+
+    previously_resized = [
+        os.path.join(gif_dir, f)
+        for f in os.listdir(gif_dir)
+        if f.lower().endswith("_resized.gif")
+    ]
+    all_resized = list(set(resized_paths + previously_resized))
+    return sorted(all_resized)
+
+#######################################################
+# Custom CSS
+#######################################################
+fancy_css = """
+body {
+    font-family: 'Trebuchet MS', sans-serif;
+    background: #f0f8ff;
+    color: #333333;
+}
+h1 {
+    color: #4b9cd3;
+    text-align: center;
+    margin-top: 20px;
+}
+.gradio-container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+}
+"""
+
+#######################################################
+# Build the App
+#######################################################
+def build_app():
+    with gr.Blocks(css=fancy_css) as demo:
+        gr.Markdown("# Game Arena: Gaming Agent")
+
+        with gr.Tabs():
+            # tab: "Gallery"
+            with gr.Tab("Gallery"):
+                with gr.Tabs():
+                    for game_name in GAMES:
+                        with gr.Tab(game_name):
+                            gr.Markdown(f"### {game_name} Gallery")
+                            gr.Gallery(
+                                label="GIFs",
+                                value=list_gifs(game_name)
+                            )
+
+            # tab: "Leaderboard"
+            with gr.Tab("Leaderboard"):
+                gr.Markdown("## Game Leaderboards")
+
+                # Sub-tabs for each game
+                with gr.Tabs():
+                    with gr.Tab("Mario"):
+                        gr.Markdown("### Mario Leaderboard")
+                        gr.DataFrame(value=get_mario_leaderboard(), interactive=False)
+
+                    with gr.Tab("Sokoban"):
+                        gr.Markdown("### Sokoban Leaderboard")
+                        gr.DataFrame(value=get_sokoban_leaderboard(), interactive=False)
+
+                    with gr.Tab("Tetris"):
+                        gr.Markdown("### Tetris Leaderboard")
+                        gr.DataFrame(value=get_tetris_leaderboard(), interactive=False)
+
+                    with gr.Tab("2048"):
+                        gr.Markdown("### 2048 Leaderboard")
+                        gr.DataFrame(value=get_2048_leaderboard(), interactive=False)
+                    
+                    with gr.Tab("Candy Crash"):
+                        gr.Markdown("### Candy Crash Leaderboard")
+                        gr.DataFrame(value=get_candy_leaderboard(), interactive=False)
+
+            # Top-level tab: "Red Baron" game demo
+            with gr.Tab("Red Baron"):
+                gr.Markdown("## Red Baron Game Demo")
+                gr.HTML(game_html)
+
+    return demo
+
+if __name__ == "__main__":
+    demo_app = build_app()
+    # demo_app.launch(server_name="0.0.0.0", server_port=7860)
+    demo_app.launch(server_name="127.0.0.1", server_port=7860, debug=True)

gradio_app_v2.py

@@ -0,0 +1,540 @@
+import gradio as gr
+import os
+import pandas as pd
+import json
+from PIL import Image, ImageSequence
+import io
+from functools import reduce
+import numpy as np
+from datetime import datetime, timedelta
+import matplotlib.pyplot as plt
+from leaderboard_utils import (
+    get_organization,
+    get_mario_leaderboard,
+    get_sokoban_leaderboard,
+    get_2048_leaderboard,
+    get_candy_leaderboard,
+    get_tetris_leaderboard,
+    get_tetris_planning_leaderboard,
+    get_combined_leaderboard,
+    GAME_ORDER
+)
+from data_visualization import (
+    get_combined_leaderboard_with_radar,
+    create_organization_radar_chart,
+    create_top_players_radar_chart,
+    create_player_radar_chart,
+    create_horizontal_bar_chart
+)
+
+# Define time points and their corresponding data files
+TIME_POINTS = {
+    "03/25/2025": "rank_data_03_25_2025.json",
+    # Add more time points here as they become available
+}
+
+# Load the initial JSON file with rank data
+with open(TIME_POINTS["03/25/2025"], "r") as f:
+    rank_data = json.load(f)
+
+# Add leaderboard state at the top level
+leaderboard_state = {
+    "current_game": None,
+    "previous_overall": {
+        "Super Mario Bros": True,
+        "Sokoban": True,
+        "2048": True,
+        "Candy Crash": True,
+        "Tetris (complete)": True,
+        "Tetris (planning only)": True
+    },
+    "previous_details": {
+        "Super Mario Bros": False,
+        "Sokoban": False,
+        "2048": False,
+        "Candy Crash": False,
+        "Tetris (complete)": False,
+        "Tetris (planning only)": False
+    }
+}
+
+# Define GIF paths for the carousel
+GIF_PATHS = [
+    "assets/super_mario_bros/super_mario.gif",
+    "assets/sokoban/sokoban.gif",
+    "assets/2048/2048.gif",
+    "assets/candy/candy.gif",
+    "assets/tetris/tetris.gif"
+]
+
+# Print and verify GIF paths
+print("\nChecking GIF paths:")
+for gif_path in GIF_PATHS:
+    if os.path.exists(gif_path):
+        print(f"✓ Found: {gif_path}")
+        # Print file size
+        size = os.path.getsize(gif_path)
+        print(f"  Size: {size / (1024*1024):.2f} MB")
+    else:
+        print(f"✗ Missing: {gif_path}")
+
+def load_gif(gif_path):
+    """Load a GIF file and return it as a PIL Image"""
+    try:
+        img = Image.open(gif_path)
+        print(f"Successfully loaded GIF: {gif_path}")
+        return img
+    except Exception as e:
+        print(f"Error loading GIF {gif_path}: {e}")
+        return None
+
+def create_gif_carousel():
+    """Create a custom HTML/JS component for GIF carousel"""
+    print("\nCreating GIF carousel with paths:", GIF_PATHS)
+    html = f"""
+    <div id="gif-carousel" style="width: 100%; height: 300px; position: relative; background-color: #f0f0f0;">
+        <img id="current-gif" style="width: 100%; height: 100%; object-fit: contain;" onerror="console.error('Failed to load GIF:', this.src);">
+    </div>
+    <script>
+        const gifs = {json.dumps(GIF_PATHS)};
+        let currentIndex = 0;
+        
+        function updateGif() {{
+            const img = document.getElementById('current-gif');
+            console.log('Loading GIF:', gifs[currentIndex]);
+            img.src = gifs[currentIndex];
+            currentIndex = (currentIndex + 1) % gifs.length;
+        }}
+        
+        // Update GIF every 5 seconds
+        setInterval(updateGif, 5000);
+        // Initial load
+        updateGif();
+    </script>
+    """
+    return gr.HTML(html)
+
+def load_rank_data(time_point):
+    """Load rank data for a specific time point"""
+    if time_point in TIME_POINTS:
+        try:
+            with open(TIME_POINTS[time_point], "r") as f:
+                return json.load(f)
+        except FileNotFoundError:
+            return None
+    return None
+
+def update_leaderboard(mario_overall, mario_details,
+                       sokoban_overall, sokoban_details,
+                       _2048_overall, _2048_details,
+                       candy_overall, candy_details,
+                       tetris_overall, tetris_details,
+                       tetris_plan_overall, tetris_plan_details):
+    global leaderboard_state
+    
+    # Convert current checkbox states to dictionary for easier comparison
+    current_overall = {
+        "Super Mario Bros": mario_overall,
+        "Sokoban": sokoban_overall,
+        "2048": _2048_overall,
+        "Candy Crash": candy_overall,
+        "Tetris (complete)": tetris_overall,
+        "Tetris (planning only)": tetris_plan_overall
+    }
+    
+    current_details = {
+        "Super Mario Bros": mario_details,
+        "Sokoban": sokoban_details,
+        "2048": _2048_details,
+        "Candy Crash": candy_details,
+        "Tetris (complete)": tetris_details,
+        "Tetris (planning only)": tetris_plan_details
+    }
+    
+    # Find which game's state changed
+    changed_game = None
+    for game in current_overall.keys():
+        if (current_overall[game] != leaderboard_state["previous_overall"][game] or 
+            current_details[game] != leaderboard_state["previous_details"][game]):
+            changed_game = game
+            break
+    
+    if changed_game:
+        # If a game's details checkbox was checked
+        if current_details[changed_game] and not leaderboard_state["previous_details"][changed_game]:
+            # Reset all other games' states
+            for game in current_overall.keys():
+                if game != changed_game:
+                    current_overall[game] = False
+                    current_details[game] = False
+                    leaderboard_state["previous_overall"][game] = False
+                    leaderboard_state["previous_details"][game] = False
+            
+            # Update state for the selected game
+            leaderboard_state["current_game"] = changed_game
+            leaderboard_state["previous_overall"][changed_game] = True  # Set overall to True when details is checked
+            leaderboard_state["previous_details"][changed_game] = True
+            current_overall[changed_game] = True  # Ensure the overall checkbox is checked
+        
+        # If a game's overall checkbox was checked
+        elif current_overall[changed_game] and not leaderboard_state["previous_overall"][changed_game]:
+            # If we were in details view for another game, switch to overall view
+            if leaderboard_state["current_game"] and leaderboard_state["previous_details"][leaderboard_state["current_game"]]:
+                # Reset previous game's details
+                leaderboard_state["previous_details"][leaderboard_state["current_game"]] = False
+                current_details[leaderboard_state["current_game"]] = False
+                leaderboard_state["current_game"] = None
+            
+            # Update state
+            leaderboard_state["previous_overall"][changed_game] = True
+            leaderboard_state["previous_details"][changed_game] = False
+        
+        # If a game's overall checkbox was unchecked
+        elif not current_overall[changed_game] and leaderboard_state["previous_overall"][changed_game]:
+            # If we're in details view, don't allow unchecking the overall checkbox
+            if leaderboard_state["current_game"] == changed_game:
+                current_overall[changed_game] = True
+            else:
+                leaderboard_state["previous_overall"][changed_game] = False
+                if leaderboard_state["current_game"] == changed_game:
+                    leaderboard_state["current_game"] = None
+        
+        # If a game's details checkbox was unchecked
+        elif not current_details[changed_game] and leaderboard_state["previous_details"][changed_game]:
+            leaderboard_state["previous_details"][changed_game] = False
+            if leaderboard_state["current_game"] == changed_game:
+                leaderboard_state["current_game"] = None
+    
+    # Build dictionary for selected games
+    selected_games = {
+        "Super Mario Bros": current_overall["Super Mario Bros"],
+        "Sokoban": current_overall["Sokoban"],
+        "2048": current_overall["2048"],
+        "Candy Crash": current_overall["Candy Crash"],
+        "Tetris (complete)": current_overall["Tetris (complete)"],
+        "Tetris (planning only)": current_overall["Tetris (planning only)"]
+    }
+    
+    # Filter GIF paths based on selected games
+    filtered_gifs = []
+    if current_overall["Super Mario Bros"]:
+        filtered_gifs.append(GIF_PATHS[0])
+    if current_overall["Sokoban"]:
+        filtered_gifs.append(GIF_PATHS[1])
+    if current_overall["2048"]:
+        filtered_gifs.append(GIF_PATHS[2])
+    if current_overall["Candy Crash"]:
+        filtered_gifs.append(GIF_PATHS[3])
+    if current_overall["Tetris (complete)"] or current_overall["Tetris (planning only)"]:
+        filtered_gifs.append(GIF_PATHS[4])
+    
+    # Get the appropriate DataFrame and chart based on current state
+    if leaderboard_state["current_game"]:
+        # For detailed view
+        if leaderboard_state["current_game"] == "Super Mario Bros":
+            df = get_mario_leaderboard(rank_data)
+        elif leaderboard_state["current_game"] == "Sokoban":
+            df = get_sokoban_leaderboard(rank_data)
+        elif leaderboard_state["current_game"] == "2048":
+            df = get_2048_leaderboard(rank_data)
+        elif leaderboard_state["current_game"] == "Candy Crash":
+            df = get_candy_leaderboard(rank_data)
+        elif leaderboard_state["current_game"] == "Tetris (complete)":
+            df = get_tetris_leaderboard(rank_data)
+        else:  # Tetris (planning only)
+            df = get_tetris_planning_leaderboard(rank_data)
+        
+        # Always create a new chart for detailed view
+        chart = create_horizontal_bar_chart(df, leaderboard_state["current_game"])
+    else:
+        # For overall view
+        df = get_combined_leaderboard(rank_data, selected_games)
+        _, chart = get_combined_leaderboard_with_radar(rank_data, selected_games)
+    
+    return (df, chart, filtered_gifs,
+            current_overall["Super Mario Bros"], current_details["Super Mario Bros"],
+            current_overall["Sokoban"], current_details["Sokoban"],
+            current_overall["2048"], current_details["2048"],
+            current_overall["Candy Crash"], current_details["Candy Crash"],
+            current_overall["Tetris (complete)"], current_details["Tetris (complete)"],
+            current_overall["Tetris (planning only)"], current_details["Tetris (planning only)"])
+
+def update_leaderboard_with_time(time_point, mario_overall, mario_details,
+                               sokoban_overall, sokoban_details,
+                               _2048_overall, _2048_details,
+                               candy_overall, candy_details,
+                               tetris_overall, tetris_details,
+                               tetris_plan_overall, tetris_plan_details):
+    # Load rank data for the selected time point
+    global rank_data
+    new_rank_data = load_rank_data(time_point)
+    if new_rank_data is not None:
+        rank_data = new_rank_data
+    
+    # Use the existing update_leaderboard function
+    return update_leaderboard(mario_overall, mario_details,
+                            sokoban_overall, sokoban_details,
+                            _2048_overall, _2048_details,
+                            candy_overall, candy_details,
+                            tetris_overall, tetris_details,
+                            tetris_plan_overall, tetris_plan_details)
+
+def clear_filters():
+    global leaderboard_state
+    
+    # Reset all checkboxes to default state and get fresh data
+    df = get_combined_leaderboard(rank_data, {
+        "Super Mario Bros": True,
+        "Sokoban": True,
+        "2048": True,
+        "Candy Crash": True,
+        "Tetris (complete)": True,
+        "Tetris (planning only)": True
+    })
+    
+    # Get the radar chart visualization
+    _, chart = get_combined_leaderboard_with_radar(rank_data, {
+        "Super Mario Bros": True,
+        "Sokoban": True,
+        "2048": True,
+        "Candy Crash": True,
+        "Tetris (complete)": True,
+        "Tetris (planning only)": True
+    })
+    
+    # Reset the leaderboard state to match the default checkbox states
+    leaderboard_state = {
+        "current_game": None,
+        "previous_overall": {
+            "Super Mario Bros": True,
+            "Sokoban": True,
+            "2048": True,
+            "Candy Crash": True,
+            "Tetris (complete)": True,
+            "Tetris (planning only)": True
+        },
+        "previous_details": {
+            "Super Mario Bros": False,
+            "Sokoban": False,
+            "2048": False,
+            "Candy Crash": False,
+            "Tetris (complete)": False,
+            "Tetris (planning only)": False
+        }
+    }
+    
+    # Return both the DataFrame and the visualization
+    return (df, chart, GIF_PATHS,
+            True, False,  # mario
+            True, False,  # sokoban
+            True, False,  # 2048
+            True, False,  # candy
+            True, False,  # tetris
+            True, False)  # tetris plan
+
+def build_app():
+    with gr.Blocks(css="""
+        .gallery-container {
+            height: 50vh !important;
+            max-height: 600px !important;
+            min-height: 300px !important;
+            background-color: #f8f9fa;
+            border-radius: 10px;
+            padding: 5px !important;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            overflow: hidden;
+            aspect-ratio: 1 !important;
+            display: flex !important;
+            align-items: center !important;
+            justify-content: center !important;
+        }
+        .gallery-container .gallery-item {
+            height: 100% !important;
+            width: 100% !important;
+            border-radius: 8px;
+            overflow: hidden;
+            margin: 0 !important;
+            padding: 0 !important;
+            aspect-ratio: 1 !important;
+            display: flex !important;
+            align-items: center !important;
+            justify-content: center !important;
+        }
+        .gallery-container .gallery-item img {
+            height: 100% !important;
+            width: 100% !important;
+            object-fit: contain !important;
+            aspect-ratio: 1 !important;
+        }
+        .visualization-container {
+            height: 50vh !important;
+            max-height: 600px !important;
+            min-height: 300px !important;
+            background-color: #f8f9fa;
+            border-radius: 10px;
+            padding: 15px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            overflow: hidden;
+            margin-left: 10px !important;  /* Add small gap between gallery and visualization */
+        }
+        .visualization-container .plot {
+            height: 100% !important;
+            width: 100% !important;
+        }
+        .section-title {
+            font-size: 1.5em;
+            font-weight: bold;
+            color: #2c3e50;
+            margin-bottom: 15px;
+            padding-bottom: 10px;
+            border-bottom: 2px solid #e9ecef;
+        }
+        /* Add container for the entire app */
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 0 20px;
+        }
+        /* Add flex layout for the row containing gallery and visualization */
+        .gallery-viz-row {
+            display: flex !important;
+            align-items: center !important;
+            gap: 20px !important;  /* Add consistent gap between components */
+        }
+    """) as demo:
+        gr.Markdown("# 🎮 Game Arena: Gaming Agent 🎲")
+        
+        with gr.Tabs():
+            with gr.Tab("🏆 Leaderboard"):
+                # Visualization section at the very top
+                with gr.Row():
+                    gr.Markdown("### 📊 Gallery")
+                with gr.Row(elem_classes="gallery-viz-row"):
+                    # Split into two columns
+                    with gr.Column(scale=3):
+                        gallery = gr.Gallery(
+                            value=GIF_PATHS,
+                            label="Game Demos",
+                            show_label=True,
+                            elem_id="gallery",
+                            elem_classes="gallery-container",
+                            columns=1,
+                            rows=1,
+                            min_width=100,
+                            container=True,
+                            allow_preview=True,
+                            object_fit='contain',
+                            show_download_button=False,
+                            show_share_button=False,
+                            show_fullscreen_button=True
+                        )
+                    with gr.Column(scale=4):
+                        visualization = gr.Plot(
+                            value=get_combined_leaderboard_with_radar(rank_data, {
+                                "Super Mario Bros": True,
+                                "Sokoban": True,
+                                "2048": True,
+                                "Candy Crash": True,
+                                "Tetris (complete)": True,
+                                "Tetris (planning only)": True
+                            })[1],
+                            label="Performance Visualization",
+                            elem_classes="visualization-container"
+                        )
+
+                # Game selection section
+                with gr.Row():
+                    gr.Markdown("### 🎮 Game Selection")
+                with gr.Row():
+                    # For each game, we have two checkboxes: one for overall and one for detailed view.
+                    with gr.Column():
+                        gr.Markdown("**🎮 Super Mario Bros**")
+                        mario_overall = gr.Checkbox(label="Super Mario Bros Score", value=True)
+                        mario_details = gr.Checkbox(label="Super Mario Bros Details", value=False)
+                    with gr.Column():
+                        gr.Markdown("**📦 Sokoban**")
+                        sokoban_overall = gr.Checkbox(label="Sokoban Score", value=True)
+                        sokoban_details = gr.Checkbox(label="Sokoban Details", value=False)
+                    with gr.Column():
+                        gr.Markdown("**🔢 2048**")
+                        _2048_overall = gr.Checkbox(label="2048 Score", value=True)
+                        _2048_details = gr.Checkbox(label="2048 Details", value=False)
+                    with gr.Column():
+                        gr.Markdown("**🍬 Candy Crash**")
+                        candy_overall = gr.Checkbox(label="Candy Crash Score", value=True)
+                        candy_details = gr.Checkbox(label="Candy Crash Details", value=False)
+                    with gr.Column():
+                        gr.Markdown("**🎯 Tetris (complete)**")
+                        tetris_overall = gr.Checkbox(label="Tetris (complete) Score", value=True)
+                        tetris_details = gr.Checkbox(label="Tetris (complete) Details", value=False)
+                    with gr.Column():
+                        gr.Markdown("**📋 Tetris (planning)**")
+                        tetris_plan_overall = gr.Checkbox(label="Tetris (planning) Score", value=True)
+                        tetris_plan_details = gr.Checkbox(label="Tetris (planning) Details", value=False)
+
+                # Time progression display and control buttons - Moved below game selection
+                with gr.Row():
+                    with gr.Column(scale=2):
+                        gr.Markdown("**⏰ Time Tracker**")
+                        time_slider = gr.Slider(
+                            minimum=0,
+                            maximum=1,
+                            value=1,
+                            step=1,
+                            label="Model Time Point",
+                            info="Current Time: 03/25/2025"
+                        )
+                    with gr.Column(scale=1):
+                        gr.Markdown("**🔄 Controls**")
+                        clear_btn = gr.Button("Reset Filters", variant="secondary")
+
+                # Leaderboard table section
+                with gr.Row():
+                    gr.Markdown("### 📋 Detailed Results")
+                with gr.Row():
+                    leaderboard_board = gr.DataFrame(
+                        value=get_combined_leaderboard(rank_data, {
+                            "Super Mario Bros": True,
+                            "Sokoban": True,
+                            "2048": True,
+                            "Candy Crash": True,
+                            "Tetris (complete)": True,
+                            "Tetris (planning only)": True
+                        }),
+                        interactive=True,
+                        wrap=True,
+                        label="Leaderboard"
+                    )
+
+                # List of all checkboxes (in order)
+                checkbox_list = [mario_overall, mario_details,
+                                sokoban_overall, sokoban_details,
+                                _2048_overall, _2048_details,
+                                candy_overall, candy_details,
+                                tetris_overall, tetris_details,
+                                tetris_plan_overall, tetris_plan_details]
+
+                # Initialize the leaderboard state when the app starts
+                clear_filters()
+
+                # Update both the leaderboard and visualization when checkboxes change
+                for checkbox in checkbox_list:
+                    checkbox.change(
+                        fn=update_leaderboard,
+                        inputs=checkbox_list,
+                        outputs=[leaderboard_board, visualization, gallery] + checkbox_list
+                    )
+
+                # Update both when clear button is clicked
+                clear_btn.click(
+                    fn=clear_filters,
+                    inputs=[],
+                    outputs=[leaderboard_board, visualization, gallery] + checkbox_list
+                )
+
+    return demo
+
+if __name__ == "__main__":
+    demo_app = build_app()
+    # Add file serving configuration
+    demo_app.launch(debug=True, show_error=True, share=True)

leaderboard_utils.py

@@ -0,0 +1,202 @@
+import pandas as pd
+import json
+import numpy as np
+
+# Define game order
+GAME_ORDER = [
+    "Super Mario Bros",
+    "Sokoban",
+    "2048",
+    "Candy Crash",
+    "Tetris (complete)",
+    "Tetris (planning only)"
+]
+
+def get_organization(model_name):
+    m = model_name.lower()
+    if "claude" in m:
+        return "anthropic"
+    elif "gemini" in m:
+        return "google"
+    elif "o1" in m or "gpt" in m or "o3" in m:
+        return "openai"
+    elif "deepseek" in m:
+        return "deepseek"
+    else:
+        return "unknown"
+
+def get_mario_leaderboard(rank_data):
+    data = rank_data.get("Super Mario Bros", {}).get("results", [])
+    df = pd.DataFrame(data)
+    df = df.rename(columns={
+        "model": "Player", 
+        "progress": "Progress (current/total)", 
+        "score": "Score", 
+        "time_s": "Time (s)"
+    })
+    df["Organization"] = df["Player"].apply(get_organization)
+    df = df[["Player", "Organization", "Progress (current/total)", "Score", "Time (s)"]]
+    return df
+
+def get_sokoban_leaderboard(rank_data):
+    data = rank_data.get("Sokoban", {}).get("results", [])
+    df = pd.DataFrame(data)
+    df = df.rename(columns={
+        "model": "Player", 
+        "levels_cracked": "Levels Cracked", 
+        "steps": "Steps"
+    })
+    df["Organization"] = df["Player"].apply(get_organization)
+    df = df[["Player", "Organization", "Levels Cracked", "Steps"]]
+    return df
+
+def get_2048_leaderboard(rank_data):
+    data = rank_data.get("2048", {}).get("results", [])
+    df = pd.DataFrame(data)
+    df = df.rename(columns={
+        "model": "Player", 
+        "score": "Score", 
+        "steps": "Steps", 
+        "time": "Time"
+    })
+    df["Organization"] = df["Player"].apply(get_organization)
+    df = df[["Player", "Organization", "Score", "Steps", "Time"]]
+    return df
+
+def get_candy_leaderboard(rank_data):
+    data = rank_data.get("Candy Crash", {}).get("results", [])
+    df = pd.DataFrame(data)
+    df = df.rename(columns={
+        "model": "Player", 
+        "score_runs": "Score Runs", 
+        "average_score": "Average Score", 
+        "steps": "Steps"
+    })
+    df["Organization"] = df["Player"].apply(get_organization)
+    df = df[["Player", "Organization", "Score Runs", "Average Score", "Steps"]]
+    return df
+
+def get_tetris_leaderboard(rank_data):
+    data = rank_data.get("Tetris (complete)", {}).get("results", [])
+    df = pd.DataFrame(data)
+    df = df.rename(columns={
+        "model": "Player", 
+        "score": "Score", 
+        "steps_blocks": "Steps"
+    })
+    df["Organization"] = df["Player"].apply(get_organization)
+    df = df[["Player", "Organization", "Score", "Steps"]]
+    return df
+
+def get_tetris_planning_leaderboard(rank_data):
+    data = rank_data.get("Tetris (planning only)", {}).get("results", [])
+    df = pd.DataFrame(data)
+    df = df.rename(columns={
+        "model": "Player", 
+        "score": "Score", 
+        "steps_blocks": "Steps"
+    })
+    df["Organization"] = df["Player"].apply(get_organization)
+    df = df[["Player", "Organization", "Score", "Steps"]]
+    return df
+
+def calculate_rank_and_completeness(rank_data, selected_games):
+    # Dictionary to store DataFrames for each game
+    game_dfs = {}
+    
+    # Get DataFrames for selected games
+    if selected_games.get("Super Mario Bros"):
+        game_dfs["Super Mario Bros"] = get_mario_leaderboard(rank_data)
+    if selected_games.get("Sokoban"):
+        game_dfs["Sokoban"] = get_sokoban_leaderboard(rank_data)
+    if selected_games.get("2048"):
+        game_dfs["2048"] = get_2048_leaderboard(rank_data)
+    if selected_games.get("Candy Crash"):
+        game_dfs["Candy Crash"] = get_candy_leaderboard(rank_data)
+    if selected_games.get("Tetris (complete)"):
+        game_dfs["Tetris (complete)"] = get_tetris_leaderboard(rank_data)
+    if selected_games.get("Tetris (planning only)"):
+        game_dfs["Tetris (planning only)"] = get_tetris_planning_leaderboard(rank_data)
+
+    # Get all unique players
+    all_players = set()
+    for df in game_dfs.values():
+        all_players.update(df["Player"].unique())
+    all_players = sorted(list(all_players))
+
+    # Create results DataFrame
+    results = []
+    for player in all_players:
+        player_data = {
+            "Player": player,
+            "Organization": get_organization(player)
+        }
+        ranks = []
+        games_played = 0
+
+        # Calculate rank and completeness for each game
+        for game in GAME_ORDER:
+            if game in game_dfs:
+                df = game_dfs[game]
+                if player in df["Player"].values:
+                    games_played += 1
+                    # Get player's score based on game type
+                    if game == "Super Mario Bros":
+                        player_score = df[df["Player"] == player]["Score"].iloc[0]
+                        rank = len(df[df["Score"] > player_score]) + 1
+                    elif game == "Sokoban":
+                        # Parse Sokoban score string and get maximum level
+                        levels_str = df[df["Player"] == player]["Levels Cracked"].iloc[0]
+                        try:
+                            # Split by semicolon, strip whitespace, filter empty strings, convert to integers
+                            levels = [int(x.strip()) for x in levels_str.split(";") if x.strip()]
+                            player_score = max(levels) if levels else 0
+                        except:
+                            player_score = 0
+                        # Calculate rank based on maximum level
+                        rank = len(df[df["Levels Cracked"].apply(
+                            lambda x: max([int(y.strip()) for y in x.split(";") if y.strip()]) > player_score
+                        )]) + 1
+                    elif game == "2048":
+                        player_score = df[df["Player"] == player]["Score"].iloc[0]
+                        rank = len(df[df["Score"] > player_score]) + 1
+                    elif game == "Candy Crash":
+                        player_score = df[df["Player"] == player]["Average Score"].iloc[0]
+                        rank = len(df[df["Average Score"] > player_score]) + 1
+                    elif game == "Tetris (complete)":
+                        player_score = df[df["Player"] == player]["Score"].iloc[0]
+                        rank = len(df[df["Score"] > player_score]) + 1
+                    elif game == "Tetris (planning only)":
+                        player_score = df[df["Player"] == player]["Score"].iloc[0]
+                        rank = len(df[df["Score"] > player_score]) + 1
+
+                    ranks.append(rank)
+                    player_data[f"{game} Score"] = player_score
+                else:
+                    player_data[f"{game} Score"] = "_"
+
+        # Calculate average rank and completeness for sorting only
+        if ranks:
+            player_data["Sort Rank"] = round(np.mean(ranks), 2)
+            player_data["Games Played"] = games_played
+        else:
+            player_data["Sort Rank"] = float('inf')
+            player_data["Games Played"] = 0
+
+        results.append(player_data)
+
+    # Create DataFrame and sort by average rank and completeness
+    df_results = pd.DataFrame(results)
+    if not df_results.empty:
+        # Sort by average rank (ascending) and completeness (descending)
+        df_results = df_results.sort_values(
+            by=["Sort Rank", "Games Played"],
+            ascending=[True, False]
+        )
+        # Drop the sorting columns
+        df_results = df_results.drop(["Sort Rank", "Games Played"], axis=1)
+
+    return df_results
+
+def get_combined_leaderboard(rank_data, selected_games):
+    return calculate_rank_and_completeness(rank_data, selected_games)

rank_data_03_25_2025.json

@@ -0,0 +1,324 @@
+{
+    "Super Mario Bros": {
+        "runs": 5,
+        "results": [
+            {
+                "model": "claude-3-7-sonnet-20250219",
+                "score": 710,
+                "progress": "1-1",
+                "time_s": 64.2,
+                "rank": 1
+            },
+            {
+                "model": "gpt-4o-2024-11-20",
+                "score": 560,
+                "progress": "1-1",
+                "time_s": 58.6,
+                "rank": 2
+            },
+            {
+                "model": "gemini-2.0-flash",
+                "score": 320,
+                "progress": "1-1",
+                "time_s": 51.8,
+                "rank": 3
+            },
+            {
+                "model": "claude-3-5-haiku-20241022",
+                "score": 140,
+                "progress": "1-1",
+                "time_s": 76.4,
+                "rank": 4
+            },
+            {
+                "model": "gpt-4.5-preview-2025-02-27",
+                "score": 160,
+                "progress": "1-1",
+                "time_s": 62.8,
+                "rank": 5
+            }
+        ]
+    },
+    "2048": {
+        "runs": 1,
+        "results": [
+            {
+                "model": "claude-3-7-sonnet-20250219(thinking)",
+                "score": 256,
+                "steps": 114,
+                "time": ">200",
+                "rank": 1
+            },
+            {
+                "model": "o1-2024-12-17",
+                "score": 256,
+                "steps": 116,
+                "time": ">200",
+                "rank": 2
+            },
+            {
+                "model": "claude-3-7-sonnet-20250219",
+                "score": 256,
+                "steps": 130,
+                "time": "20:36",
+                "rank": 3
+            },
+            {
+                "model": "deepseek-v3",
+                "score": 256,
+                "steps": 216,
+                "time": "54.02",
+                "rank": 4
+            },
+            {
+                "model": "gemini-2.0-flash",
+                "score": 128,
+                "steps": 111,
+                "time": "18:43",
+                "rank": 5
+            },
+            {
+                "model": "gemini-2.0-flash-thinking-exp-1219",
+                "score": 128,
+                "steps": 132,
+                "time": ">100",
+                "rank": 6
+            },
+            {
+                "model": "gemini-2.5-pro-exp-03-25",
+                "score": 128,
+                "steps": 138,
+                "time": "169",
+                "rank": 7
+            },
+            {
+                "model": "claude-3-5-sonnet-20241022",
+                "score": 64,
+                "steps": 92,
+                "time": "9:2",
+                "rank": 9
+            },
+            {
+                "model": "gpt-4.5-preview-2025-02-27",
+                "score": 34,
+                "steps": 34,
+                "time": "8:25",
+                "rank": 10
+            },
+            {
+                "model": "gpt-4o-2024-11-20",
+                "score": 16,
+                "steps": 21,
+                "time": "1:17",
+                "rank": 11
+            },
+            {
+                "model": "Llama-4-Maverick-17B-128E-Instruct-FP8",
+                "score": 128,
+                "steps": 145,
+                "time": ">100",
+                "rank": 8
+            }
+        ]
+    },
+    "Tetris (complete)": {
+        "runs": 3,
+        "results": [
+            {
+                "model": "claude-3-7-sonnet-20250219",
+                "score": 95,
+                "steps_blocks": 27,
+                "rank": 1
+            },
+            {
+                "model": "claude-3-5-haiku-20241022",
+                "score": 90,
+                "steps_blocks": 25,
+                "rank": 2
+            },
+            {
+                "model": "gemini-2.0-flash",
+                "score": 82,
+                "steps_blocks": 23,
+                "rank": 3
+            },
+            {
+                "model": "gpt-4o-2024-11-20",
+                "score": 54,
+                "steps_blocks": 19,
+                "rank": 4
+            }
+        ]
+    },
+    "Tetris (planning only)": {
+        "runs": 3,
+        "results": [
+            {
+                "model": "claude-3-7-sonnet-20250219",
+                "score": 110,
+                "steps_blocks": 29,
+                "rank": 1
+            },
+            {
+                "model": "claude-3-5-haiku-20241022",
+                "score": 92,
+                "steps_blocks": 25,
+                "rank": 2
+            },
+            {
+                "model": "gemini-2.0-flash",
+                "score": 87,
+                "steps_blocks": 24,
+                "rank": 3
+            },
+            {
+                "model": "gpt-4o-2024-11-20",
+                "score": 56,
+                "steps_blocks": 20,
+                "rank": 4
+            }
+        ]
+    },
+    "Candy Crash": {
+        "runs": 3,
+        "results": [
+            {
+                "model": "o3-mini-2025-01-31(medium)",
+                "score_runs": "90;109;120",
+                "average_score": 106.33,
+                "steps": 25,
+                "rank": 1
+            },
+            {
+                "model": "o1-2024-12-17",
+                "score_runs": "96;114;83",
+                "average_score": 97.67,
+                "steps": 25,
+                "rank": 2
+            },
+            {
+                "model": "deepseek-r1",
+                "score_runs": "62;108;105",
+                "average_score": 91.67,
+                "steps": 25,
+                "rank": 3
+            },
+            {
+                "model": "gemini-2.5-pro-exp-03-25",
+                "score_runs": "50;36;68",
+                "average_score": 51.33,
+                "steps": 25,
+                "rank": 4
+            },
+            {
+                "model": "claude-3-7-sonnet-20250219(thinking)",
+                "score_runs": "36;46;24",
+                "average_score": 35.33,
+                "steps": 25,
+                "rank": 5
+            },
+            {
+                "model": "gemini-2.0-flash-thinking-exp-1219",
+                "score_runs": "0;15;39",
+                "average_score": 18,
+                "steps": 25,
+                "rank": 6
+            },
+            {
+                "model": "claude-3-5-sonnet-20241022",
+                "score_runs": "3;0;0",
+                "average_score": 1,
+                "steps": 25,
+                "rank": 7
+            },
+            {
+                "model": "deepseek-v3",
+                "score_runs": "0;0;0",
+                "average_score": 0,
+                "steps": 25,
+                "rank":9 
+            },
+            {
+                "model": "Llama-4-Maverick-17B-128E-Instruct-FP8",
+                "score_runs": "6;0;0",
+                "average_score": 2,
+                "steps": 25,
+                "rank": 8
+            }
+        ]
+    },
+    "Sokoban": {
+        "runs": 3,
+        "results": [
+            {
+                "model": "o3-mini-2025-01-31(medium)",
+                "levels_cracked": "2; 3; 2",
+                "steps": "[17,52,68];[24,58,78,91];[19,44,64]",
+                "rank": 1
+            },
+            {
+                "model": "gemini-2.5-pro-exp-03-25",
+                "levels_cracked": "2;2;3",
+                "steps": "[23, 46, 79]; [20,50,77]; [26,95,125,175]",
+                "rank": 2
+            },
+            {
+                "model": "claude-3-7-sonnet-20250219(thinking)",
+                "levels_cracked": "1; 2; 0",
+                "steps": "[17,35];[15,40,43];[4]",
+                "rank": 3
+            },
+            {
+                "model": "o1-2024-12-17",
+                "levels_cracked": "1; 1; 1",
+                "steps": null,
+                "rank": 4
+            },
+            {
+                "model": "deepseek-r1",
+                "levels_cracked": "1; 0; 1",
+                "steps": "[19,42];[13];[19,36]",
+                "note": "stuck",
+                "rank": 5
+            },
+            {
+                "model": "o1-mini-2024-09-12",
+                "levels_cracked": "0;1;0",
+                "steps": null,
+                "rank": 6
+            },
+            {
+                "model": "gemini-2.0-flash-thinking-exp-1219",
+                "levels_cracked": "0; 0; 0",
+                "steps": "[23]; [14]; [14]",
+                "rank": 7
+            },
+            {
+                "model": "gpt-4o-2024-11-20",
+                "levels_cracked": "0; 0; 0",
+                "steps": "[68];[105];[168]",
+                "note": "stuck in a loop",
+                "rank": 8
+            },
+            {
+                "model": "claude-3-5-sonnet-20241022",
+                "levels_cracked": "0; 0; 0",
+                "steps": "[21]; [30]; [51]",
+                "note": "stuck in a loop",
+                "rank": 9
+            },
+            {
+                "model": "deepseek-v3",
+                "levels_cracked": "0; 0; 0",
+                "steps": "[9]; [47]; [64]",
+                "rank": 10
+            },
+            {
+                "model": "Llama-4-Maverick-17B-128E-Instruct-FP8",
+                "levels_cracked": "0;0;0",
+                "steps": "[5]",
+                "rank": 11
+            }
+        ]
+    }
+}