[Fix] rendering issues

app.py

@@ -3,19 +3,18 @@ import plotly.graph_objects as go
 import numpy as np
 from src.dataloading import get_leaderboard_models_cached, get_leaderboard_datasets
 
-# Force Plotly to use the iframe renderer
+# 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 None
-
+        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,
@@ -35,6 +34,7 @@ def create_heatmap(selected_models, selected_dataset):
         margin=dict(l=100, r=100, t=100, b=100)
     )
     
+    # Force categorical ordering with explicit tick settings.
     fig.update_xaxes(
         type="category",
         categoryorder="array",
@@ -49,8 +49,8 @@ def create_heatmap(selected_models, selected_dataset):
         automargin=True
     )
     
-    # Return the Plotly figure object directly
-    return fig
+    # 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:
@@ -60,6 +60,7 @@ def validate_inputs(selected_models, selected_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(),
@@ -78,7 +79,8 @@ with gr.Blocks(title="LLM Similarity Analyzer") as demo:
         )
     
     generate_btn = gr.Button("Generate Heatmap", variant="primary")
-    heatmap = gr.Plot(label="Similarity Heatmap", visible=True)
+    # Use an HTML component instead of gr.Plot.
+    heatmap = gr.HTML(label="Similarity Heatmap", visible=True)
     
     generate_btn.click(
         fn=validate_inputs,
@@ -92,10 +94,10 @@ with gr.Blocks(title="LLM Similarity Analyzer") as demo:
     
     clear_btn = gr.Button("Clear Selection")
     clear_btn.click(
-        lambda: [None, None, None],
+        lambda: [None, None, ""],
         outputs=[model_dropdown, dataset_dropdown, heatmap]
     )
 
 if __name__ == "__main__":
-    # Disable SSR to force client-side rendering on Spaces
+    # On Spaces, disable server-side rendering.
     demo.launch(ssr_mode=False)

requirements.txt

@@ -1,8 +1,8 @@
-gradio==3.39.0
-numpy==1.21.6
-datasets==2.9.0
-matplotlib==3.5.2
-seaborn==0.11.2
-plotly==5.10.0
-pandas==1.3.5
-scienceplots==1.0.6
+gradio
+numpy
+datasets
+matplotlib
+seaborn
+plotly
+pandas
+scienceplots