[Add] heatmap plot with seaborn instead of plotly

app.py

@@ -1,106 +1,98 @@
 import gradio as gr
-import matplotlib.pyplot as plt
 import numpy as np
+import matplotlib.pyplot as plt
+import seaborn as sns
 from io import BytesIO
 from PIL import Image
-
 from src.dataloading import get_leaderboard_models_cached, get_leaderboard_datasets
-from src.similarity import compute_similarity
 
-# Set the backend to 'Agg' for non-GUI environments (optional)
-import matplotlib
-matplotlib.use('Agg')
+# Set matplotlib backend for non-GUI environments
+plt.switch_backend('Agg')
 
-
-def generate_plot():
-    # Generate data
-    x = np.linspace(0, 10, 100)
-    y = np.sin(x)
+def create_heatmap(selected_models, selected_dataset):
+    if not selected_models or not selected_dataset:
+        return None
     
-    # Create figure
-    fig, ax = plt.subplots()
-    ax.plot(x, y)
-    ax.set_title("Sine Wave")
+    size = len(selected_models)
+    similarities = np.random.rand(size, size)
+    similarities = (similarities + similarities.T) / 2
+    similarities = np.round(similarities, 2)
+
+    # Create figure and heatmap using seaborn
+    plt.figure(figsize=(10, 8))
+    ax = sns.heatmap(
+        similarities,
+        annot=True,
+        fmt=".2f",
+        cmap="viridis",
+        vmin=0,
+        vmax=1,
+        xticklabels=selected_models,
+        yticklabels=selected_models
+    )
     
-    # Save figure to a BytesIO buffer
+    # Customize plot
+    plt.title(f"Similarity Matrix for {selected_dataset}", fontsize=14)
+    plt.xlabel("Models")
+    plt.ylabel("Models")
+    plt.xticks(rotation=45, ha='right')
+    plt.yticks(rotation=0)
+    plt.tight_layout()
+
+    # Save to buffer
     buf = BytesIO()
-    fig.savefig(buf, format="png", bbox_inches="tight", facecolor="white", dpi=100)
-    plt.close(fig)  # Close the figure to free memory
+    plt.savefig(buf, format="png", dpi=100, bbox_inches="tight")
+    plt.close()
     
-    # Convert buffer to PIL Image
+    # Convert to PIL Image
     buf.seek(0)
     img = Image.open(buf).convert("RGB")
     return img
 
-
-def validate_inputs(selected_model_a, selected_model_b, selected_dataset):
-    if not selected_model_a:
-        raise gr.Error("Please select Model A!")
-    if not selected_model_b:
-        raise gr.Error("Please select Model B!")
+def validate_inputs(selected_models, selected_dataset):
+    if not selected_models:
+        raise gr.Error("Please select at least one model!")
     if not selected_dataset:
         raise gr.Error("Please select a dataset!")
 
-def display_similarity(model_a, model_b, dataset):
-    # Assuming compute_similarity returns a float or a string
-    similarity_score = compute_similarity(model_a, model_b, dataset)
-    return f"The similarity between {model_a} and {model_b} on {dataset} is: {similarity_score}"
-
 with gr.Blocks(title="LLM Similarity Analyzer") as demo:
     gr.Markdown("## Model Similarity Comparison Tool")
     
-    dataset_dropdown = gr.Dropdown(
-        choices=get_leaderboard_datasets(),
-        label="Select Dataset",
-        filterable=True,
-        interactive=True,
-        info="Leaderboard benchmark datasets"
-    )
-    
-    model_a_dropdown = gr.Dropdown(
-        choices=get_leaderboard_models_cached(),
-        label="Select Model A",
-        filterable=True,
-        allow_custom_value=False,
-        info="Search and select models"
-    )
-
-    model_b_dropdown = gr.Dropdown(
-        choices=get_leaderboard_models_cached(),
-        label="Select Model B",
-        filterable=True,
-        allow_custom_value=False,
-        info="Search and select models"
-    )
-
-    generate_btn = gr.Button("Compute Similarity", variant="primary")
+    with gr.Row():
+        dataset_dropdown = gr.Dropdown(
+            choices=get_leaderboard_datasets(),
+            label="Select Dataset",
+            filterable=True,
+            interactive=True,
+            info="Leaderboard benchmark datasets"
+        )
+        model_dropdown = gr.Dropdown(
+            choices=get_leaderboard_models_cached(),
+            label="Select Models",
+            multiselect=True,
+            filterable=True,
+            allow_custom_value=False,
+            info="Search and select multiple models"
+        )
     
-    # Textbox to display the similarity result
-    similarity_output = gr.Textbox(
-        label="Similarity Result",
-        interactive=False
-    )
+    generate_btn = gr.Button("Generate Heatmap", variant="primary")
+    heatmap = gr.Image(label="Similarity Heatmap", visible=True)
     
     generate_btn.click(
         fn=validate_inputs,
-        inputs=[model_a_dropdown, model_b_dropdown, dataset_dropdown],
+        inputs=[model_dropdown, dataset_dropdown],
         queue=False
     ).then(
-        fn=display_similarity,
-        inputs=[model_a_dropdown, model_b_dropdown, dataset_dropdown],
-        outputs=similarity_output
+        fn=create_heatmap,
+        inputs=[model_dropdown, dataset_dropdown],
+        outputs=heatmap
     )
     
     clear_btn = gr.Button("Clear Selection")
     clear_btn.click(
-        lambda: [None, None, None, ""],
-        outputs=[model_a_dropdown, model_b_dropdown, dataset_dropdown, similarity_output]
+        lambda: [None, None, None],
+        outputs=[model_dropdown, dataset_dropdown, heatmap]
     )
 
-    gr.Markdown("## Matplotlib Plot in Gradio")
-    plot_button = gr.Button("Generate Plot")
-    plot_output = gr.Image(label="Sine Wave Plot")
-    plot_button.click(fn=generate_plot, outputs=plot_output)
-
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch(ssr_mode=False)

app_heatmap.py

@@ -1,103 +0,0 @@
-import gradio as gr
-import plotly.graph_objects as go
-import numpy as np
-from src.dataloading import get_leaderboard_models_cached, get_leaderboard_datasets
-
-# Optionally, force a renderer (may or may not help)
-import plotly.io as pio
-pio.renderers.default = "iframe"
-
-def create_heatmap(selected_models, selected_dataset):
-    if not selected_models or not selected_dataset:
-        return ""  # Return empty HTML if no input
-    size = len(selected_models)
-    similarities = np.random.rand(size, size)
-    similarities = (similarities + similarities.T) / 2
-    similarities = np.round(similarities, 2)
-    
-    fig = go.Figure(data=go.Heatmap(
-        z=similarities,
-        x=selected_models,
-        y=selected_models,
-        colorscale="Viridis",
-        zmin=0, zmax=1,
-        text=similarities,
-        hoverinfo="text"
-    ))
-    
-    fig.update_layout(
-        title=f"Similarity Matrix for {selected_dataset}",
-        xaxis_title="Models",
-        yaxis_title="Models",
-        width=800,
-        height=800,
-        margin=dict(l=100, r=100, t=100, b=100)
-    )
-    
-    # Force categorical ordering with explicit tick settings.
-    fig.update_xaxes(
-        type="category",
-        categoryorder="array",
-        categoryarray=selected_models,
-        tickangle=45,
-        automargin=True
-    )
-    fig.update_yaxes(
-        type="category",
-        categoryorder="array",
-        categoryarray=selected_models,
-        automargin=True
-    )
-    
-    # Convert the figure to an HTML string that includes Plotly.js via CDN.
-    return fig.to_html(full_html=False, include_plotlyjs="cdn")
-
-def validate_inputs(selected_models, selected_dataset):
-    if not selected_models:
-        raise gr.Error("Please select at least one model!")
-    if not selected_dataset:
-        raise gr.Error("Please select a dataset!")
-
-with gr.Blocks(title="LLM Similarity Analyzer") as demo:
-    gr.Markdown("## Model Similarity Comparison Tool")
-    
-    with gr.Row():
-        dataset_dropdown = gr.Dropdown(
-            choices=get_leaderboard_datasets(),
-            label="Select Dataset",
-            filterable=True,
-            interactive=True,
-            info="Leaderboard benchmark datasets"
-        )
-        model_dropdown = gr.Dropdown(
-            choices=get_leaderboard_models_cached(),
-            label="Select Models",
-            multiselect=True,
-            filterable=True,
-            allow_custom_value=False,
-            info="Search and select multiple models"
-        )
-    
-    generate_btn = gr.Button("Generate Heatmap", variant="primary")
-    # Use an HTML component instead of gr.Plot.
-    heatmap = gr.HTML(label="Similarity Heatmap", visible=True)
-    
-    generate_btn.click(
-        fn=validate_inputs,
-        inputs=[model_dropdown, dataset_dropdown],
-        queue=False
-    ).then(
-        fn=create_heatmap,
-        inputs=[model_dropdown, dataset_dropdown],
-        outputs=heatmap
-    )
-    
-    clear_btn = gr.Button("Clear Selection")
-    clear_btn.click(
-        lambda: [None, None, ""],
-        outputs=[model_dropdown, dataset_dropdown, heatmap]
-    )
-
-if __name__ == "__main__":
-    # On Spaces, disable server-side rendering.
-    demo.launch(ssr_mode=False)

app_simple.py

@@ -0,0 +1,106 @@
+import gradio as gr
+import matplotlib.pyplot as plt
+import numpy as np
+from io import BytesIO
+from PIL import Image
+
+from src.dataloading import get_leaderboard_models_cached, get_leaderboard_datasets
+from src.similarity import compute_similarity
+
+# Set the backend to 'Agg' for non-GUI environments (optional)
+import matplotlib
+matplotlib.use('Agg')
+
+
+def generate_plot():
+    # Generate data
+    x = np.linspace(0, 10, 100)
+    y = np.sin(x)
+    
+    # Create figure
+    fig, ax = plt.subplots()
+    ax.plot(x, y)
+    ax.set_title("Sine Wave")
+    
+    # Save figure to a BytesIO buffer
+    buf = BytesIO()
+    fig.savefig(buf, format="png", bbox_inches="tight", facecolor="white", dpi=100)
+    plt.close(fig)  # Close the figure to free memory
+    
+    # Convert buffer to PIL Image
+    buf.seek(0)
+    img = Image.open(buf).convert("RGB")
+    return img
+
+
+def validate_inputs(selected_model_a, selected_model_b, selected_dataset):
+    if not selected_model_a:
+        raise gr.Error("Please select Model A!")
+    if not selected_model_b:
+        raise gr.Error("Please select Model B!")
+    if not selected_dataset:
+        raise gr.Error("Please select a dataset!")
+
+def display_similarity(model_a, model_b, dataset):
+    # Assuming compute_similarity returns a float or a string
+    similarity_score = compute_similarity(model_a, model_b, dataset)
+    return f"The similarity between {model_a} and {model_b} on {dataset} is: {similarity_score}"
+
+with gr.Blocks(title="LLM Similarity Analyzer") as demo:
+    gr.Markdown("## Model Similarity Comparison Tool")
+    
+    dataset_dropdown = gr.Dropdown(
+        choices=get_leaderboard_datasets(),
+        label="Select Dataset",
+        filterable=True,
+        interactive=True,
+        info="Leaderboard benchmark datasets"
+    )
+    
+    model_a_dropdown = gr.Dropdown(
+        choices=get_leaderboard_models_cached(),
+        label="Select Model A",
+        filterable=True,
+        allow_custom_value=False,
+        info="Search and select models"
+    )
+
+    model_b_dropdown = gr.Dropdown(
+        choices=get_leaderboard_models_cached(),
+        label="Select Model B",
+        filterable=True,
+        allow_custom_value=False,
+        info="Search and select models"
+    )
+
+    generate_btn = gr.Button("Compute Similarity", variant="primary")
+    
+    # Textbox to display the similarity result
+    similarity_output = gr.Textbox(
+        label="Similarity Result",
+        interactive=False
+    )
+    
+    generate_btn.click(
+        fn=validate_inputs,
+        inputs=[model_a_dropdown, model_b_dropdown, dataset_dropdown],
+        queue=False
+    ).then(
+        fn=display_similarity,
+        inputs=[model_a_dropdown, model_b_dropdown, dataset_dropdown],
+        outputs=similarity_output
+    )
+    
+    clear_btn = gr.Button("Clear Selection")
+    clear_btn.click(
+        lambda: [None, None, None, ""],
+        outputs=[model_a_dropdown, model_b_dropdown, dataset_dropdown, similarity_output]
+    )
+
+    gr.Markdown("## Matplotlib Plot in Gradio")
+    plot_button = gr.Button("Generate Plot")
+    plot_output = gr.Image(label="Sine Wave Plot")
+    plot_button.click(fn=generate_plot, outputs=plot_output)
+
+if __name__ == "__main__":
+    demo.launch()