Adding a simple gradio code for creating a leaderboard

#1
by michaelsh - opened
import gradio as gr
import plotly.graph_objects as go
import numpy as np
import pandas as pd


def create_sota_plot():
    # State-of-the-art models data
    sota_models = {
        'SIFT + FVs': (2012, 53),
        'AlexNet': (2012.5, 65),
        'SPPNet': (2014.5, 74),
        'Inception V3': (2015.5, 81),
        'NASNET-A(6)': (2017, 82.7),
        'CoAtNet-7': (2021.5, 90.88),
        '': (2022, 87.79),  # Last point
        '': (2022.2, 87.73)  # Final value shown
    }

    # Extract data for SOTA models
    sota_years = [year for year, _ in sota_models.values() if year != '']
    sota_accuracy = [acc for _, acc in sota_models.values() if acc != '']
    sota_labels = [name for name in sota_models.keys() if name != '']

    # Generate synthetic "other models" data (gray points)
    np.random.seed(42)
    n_other = 300
    other_years = np.random.uniform(2010, 2023, n_other)
    # Create a distribution that's mostly below SOTA but with some variance
    other_accuracy = []
    for year in other_years:
        # Find approximate SOTA accuracy for this year
        sota_at_year = np.interp(year, sota_years[:len(sota_accuracy)], sota_accuracy[:len(sota_accuracy)])
        # Add models mostly below SOTA with some variance
        if year < 2012:
            acc = np.random.normal(45, 8)
        else:
            acc = np.random.normal(sota_at_year - 10, 5)
            # Some models can be close to SOTA
            if np.random.random() < 0.1:
                acc = sota_at_year - np.random.uniform(0, 3)
        other_accuracy.append(max(30, min(92, acc)))  # Clip to reasonable range

    # Create the plot
    fig = go.Figure()

    # Add other models (gray scatter points)
    fig.add_trace(go.Scatter(
        x=other_years,
        y=other_accuracy,
        mode='markers',
        name='Other models',
        marker=dict(
            color='lightgray',
            size=6,
            opacity=0.5
        ),
        hovertemplate='Year: %{x:.1f}<br>Accuracy: %{y:.1f}%<extra></extra>'
    ))

    # Add SOTA models line
    fig.add_trace(go.Scatter(
        x=sota_years[:len(sota_accuracy)],
        y=sota_accuracy,
        mode='lines+markers',
        name='State-of-the-art models',
        line=dict(color='#00CED1', width=3),
        marker=dict(size=10, color='#00CED1'),
        hovertemplate='%{text}<br>Year: %{x:.1f}<br>Accuracy: %{y:.1f}%<extra></extra>',
        text=sota_labels[:len(sota_accuracy)]
    ))

    # Add labels for SOTA models
    for i, (name, (year, acc)) in enumerate(sota_models.items()):
        if name and i < len(sota_accuracy):  # Only label points with names
            fig.add_annotation(
                x=year,
                y=acc,
                text=name,
                showarrow=False,
                yshift=15,
                font=dict(size=12)
            )

    # Add the final accuracy values
    fig.add_annotation(
        x=2022,
        y=87.79,
        text="87.79",
        showarrow=False,
        xshift=30,
        font=dict(size=12, weight='bold')
    )

    fig.add_annotation(
        x=2022.2,
        y=87.73,
        text="87.73",
        showarrow=False,
        xshift=30,
        yshift=-10,
        font=dict(size=12)
    )

    # Update layout
    fig.update_layout(
        title='Evolution of Model Performance on ImageNet',
        xaxis_title='Year',
        yaxis_title='TOP-1 ACCURACY',
        xaxis=dict(
            range=[2010, 2023],
            tickmode='linear',
            tick0=2012,
            dtick=2,
            showgrid=True,
            gridcolor='lightgray'
        ),
        yaxis=dict(
            range=[35, 100],
            tickmode='linear',
            tick0=40,
            dtick=10,
            showgrid=True,
            gridcolor='lightgray'
        ),
        plot_bgcolor='white',
        paper_bgcolor='white',
        height=500,
        legend=dict(
            yanchor="bottom",
            y=0.01,
            xanchor="center",
            x=0.5,
            orientation="h"
        )
    )

    return fig


# Create Gradio interface
with gr.Blocks(theme=gr.themes.Soft()) as demo:
    gr.Markdown("# State-of-the-Art Models Timeline")
    gr.Markdown(
        "This visualization shows the evolution of state-of-the-art models' performance over time, similar to the ImageNet benchmark progression.")

    plot = gr.Plot(label="Model Performance Evolution")

    # Create plot on load
    demo.load(fn=create_sota_plot, outputs=plot)

    # Add interactive controls
    with gr.Row():
        refresh_btn = gr.Button("Refresh Plot")

    refresh_btn.click(fn=create_sota_plot, outputs=plot)

    gr.Markdown("""
    ### About this visualization:
    - **Cyan line**: State-of-the-art models showing the progression of best performance
    - **Gray dots**: Other models representing the broader research landscape
    - The plot shows how breakthrough models like AlexNet, Inception, and NASNET pushed the boundaries
    - Notice the rapid improvement from 2012-2018, followed by more incremental gains
    """)

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

@nielsr I paste a sample code that create a graph that similar to PwC in gradio.
What do you think?

paperswithcode Archive org

Sure perhaps you can create a Space for this to showcase how the app looks like.

again it's only a draft

Sign up or log in to comment