Add model json file upload button

Models can be uploaded temporarily in JSON form to see their scores. The uploaded JSON is not stored anywhere.

app.py

@@ -342,6 +342,46 @@ def load_models_from_json(directory):
 # scorecard_template = load_scorecard_templates('scorecard_templates')
 models = load_models_from_json('model_data')
 
+def handle_file_upload(uploaded_file):
+    """Handle uploaded JSON file and update model data."""
+    global models
+    try:
+        if uploaded_file is None:
+            return gr.update(), gr.update(), ""
+        
+        # Read the uploaded file
+        with open(uploaded_file, 'r') as f:
+            new_model_data = json.load(f)
+        
+        # Extract model name from metadata
+        original_model_name = new_model_data.get('metadata', {}).get('Name', 'Unknown Model')
+        
+        # Create display name with "(Uploaded)" suffix
+        display_model_name = f"{original_model_name} (Uploaded)"
+        
+        # Add to models dictionary using the display name
+        models[display_model_name] = new_model_data
+        
+        # Update dropdown choices with new model
+        model_choices = [""] + list(models.keys())
+        
+        return (
+            gr.update(choices=model_choices, value=display_model_name),  # Update model_chooser
+            gr.update(choices=list(models.keys())),  # Update model_multi_chooser
+            f"Successfully loaded model: {display_model_name}"
+        )
+    except Exception as e:
+        return (
+            gr.update(),  # Don't change model_chooser
+            gr.update(),  # Don't change model_multi_chooser
+            f"Error loading file: {str(e)}"
+        )
+
+def download_template():
+    """Return the path to the template file for download."""
+    template_path = "model_data/gemma-scorecard-json.json"
+    return template_path
+
 def create_source_html(sources):
     if not sources:
         return ""
@@ -825,13 +865,31 @@ with gr.Blocks(css=css) as demo:
         tab_selection = gr.Radio(["Detailed Scorecard", "Category Analysis", "Leaderboard"], 
                                label="Select Tab", value="Detailed Scorecard")
     
-    with gr.Row():
-        # Make model_chooser visible by default since Detailed Scorecard is first tab
-        # Set "StarCoder2" as the default selected model
-        model_chooser = gr.Dropdown(choices=[""] + list(models.keys()),
-                                  label="Select AI System for Details", 
-                                  value="StarCoder2",
-                                  interactive=True, visible=True)
+    # Model Selection Card (for Detailed Scorecard tab)
+    with gr.Group(elem_classes="model-selection-card") as model_selection_card:
+        gr.HTML("<div class='card-title'>🤖 AI System Selection</div>")
+        with gr.Row(elem_classes="model-selection-row"):
+            # Make model_chooser visible by default since Detailed Scorecard is first tab
+            # Set "StarCoder2" as the default selected model
+            model_chooser = gr.Dropdown(choices=[""] + list(models.keys()),
+                                      label="Select AI System for Details", 
+                                      value="StarCoder2",
+                                      interactive=True, visible=True)
+            file_upload = gr.File(
+                label="📁 Upload Model JSON",
+                file_types=[".json"],
+                type="filepath",
+                elem_id="file_upload",
+                visible=True
+            )
+            download_button = gr.DownloadButton(
+                label="Download Template",
+                value="model_data/gemma-scorecard-json.json",
+                visible=False  # Hidden by default - only shown in Detailed Scorecard tab
+            )
+    
+    # Separate Multi-Model Selector (for Category Analysis tab only)
+    with gr.Group(elem_classes="multi-model-selection-card") as multi_model_selection_card:
         model_multi_chooser = gr.Dropdown(choices=list(models.keys()),
                                         label="Select AI Systems for Comparison",
                                         value=[],
@@ -936,7 +994,7 @@ with gr.Blocks(css=css) as demo:
                                     icon = "✗"
                                     category_no += 1
                                     total_no += 1
-                            
+                        
                             card_content += f"<div class='question-item {style_class}'>{icon} {question}</div>"
                         card_content += "</div></details>"
                     
@@ -981,8 +1039,12 @@ with gr.Blocks(css=css) as demo:
             "leaderboard": False,
             "category_chart": False,
             "detailed_scorecard": False,
+            "model_selection_card": False,
+            "multi_model_selection_card": False,
             "model_chooser": False,
-            "model_multi_chooser": False
+            "model_multi_chooser": False,
+            "file_upload": False,
+            "download_button": False
         }
         
         # Initialize outputs with None
@@ -997,17 +1059,31 @@ with gr.Blocks(css=css) as demo:
         # Update visibility based on selected tab
         if tab == "Leaderboard":
             component_states["leaderboard"] = True
+            component_states["model_selection_card"] = False
             outputs["leaderboard"] = create_leaderboard(selected_categories)
             
         elif tab == "Category Analysis":
             component_states["category_chart"] = True
+            # Hide the main model selection card completely
+            component_states["model_selection_card"] = False
+            # Show only the multi-model selection card
+            component_states["multi_model_selection_card"] = True
             component_states["model_multi_chooser"] = True
+            # Explicitly hide other components for category analysis
+            component_states["model_chooser"] = False
+            component_states["file_upload"] = False
+            component_states["download_button"] = False
             if selected_models:  # Only update chart if models are selected
                 outputs["category_chart"] = create_category_chart(selected_models, selected_categories)
             
         elif tab == "Detailed Scorecard":
             component_states["detailed_scorecard"] = True
+            component_states["model_selection_card"] = True
+            component_states["multi_model_selection_card"] = False
+            # Show all components for detailed scorecard
             component_states["model_chooser"] = True
+            component_states["file_upload"] = True
+            component_states["download_button"] = True
             if selected_model:
                 scorecard_updates = update_detailed_scorecard(selected_model, selected_categories)
                 outputs["model_metadata"] = scorecard_updates[0]
@@ -1019,7 +1095,11 @@ with gr.Blocks(css=css) as demo:
             gr.update(visible=component_states["leaderboard"]),
             gr.update(visible=component_states["category_chart"]),
             gr.update(visible=component_states["detailed_scorecard"]),
+            gr.update(visible=component_states["model_selection_card"]),
+            gr.update(visible=component_states["multi_model_selection_card"]),
             gr.update(visible=component_states["model_chooser"]),
+            gr.update(visible=component_states["file_upload"]),
+            gr.update(visible=component_states["download_button"]),
             gr.update(visible=component_states["model_multi_chooser"]),
             outputs["leaderboard"] if outputs["leaderboard"] is not None else gr.update(),
             outputs["category_chart"] if outputs["category_chart"] is not None else gr.update(),
@@ -1028,17 +1108,66 @@ with gr.Blocks(css=css) as demo:
             outputs["total_score"] if outputs["total_score"] is not None else gr.update()
         ]
 
+    # Set up file upload handler
+    def handle_upload_and_update(uploaded_file):
+        """Handle file upload and trigger dashboard update if successful"""
+        upload_result = handle_file_upload(uploaded_file)
+        model_chooser_update, model_multi_chooser_update, _ = upload_result
+        
+        # If upload was successful and model was selected, trigger dashboard update
+        if model_chooser_update.get('value'):
+            selected_model = model_chooser_update.get('value')
+            dashboard_result = update_dashboard("Detailed Scorecard", [], selected_model, category_choices)
+            
+            # Combine upload results with dashboard updates
+            return (
+                model_chooser_update,
+                model_multi_chooser_update,
+                dashboard_result[0],  # leaderboard_tab visibility
+                dashboard_result[1],  # category_analysis_tab visibility  
+                dashboard_result[2],  # detailed_scorecard_tab visibility
+                dashboard_result[8],  # leaderboard_output
+                dashboard_result[9],  # category_chart
+                dashboard_result[10], # model_metadata
+                dashboard_result[11], # all_category_cards
+                dashboard_result[12]  # total_score
+            )
+        else:
+            # If upload failed, just return upload results without dashboard changes
+            return (
+                model_chooser_update,
+                model_multi_chooser_update,
+                gr.update(),  # leaderboard_tab
+                gr.update(),  # category_analysis_tab
+                gr.update(),  # detailed_scorecard_tab
+                gr.update(),  # leaderboard_output
+                gr.update(),  # category_chart
+                gr.update(),  # model_metadata
+                gr.update(),  # all_category_cards
+                gr.update()   # total_score
+            )
+    
+    file_upload.upload(
+        fn=handle_upload_and_update,
+        inputs=[file_upload],
+        outputs=[model_chooser, model_multi_chooser,
+                leaderboard_tab, category_analysis_tab, detailed_scorecard_tab,
+                leaderboard_output, category_chart, model_metadata,
+                all_category_cards, total_score]
+    )
+    
     # Set up event handlers
     for component in [tab_selection, model_chooser, model_multi_chooser, category_filter]:
         component.change(
             fn=update_dashboard,
             inputs=[tab_selection, model_multi_chooser, model_chooser, category_filter],
             outputs=[leaderboard_tab, category_analysis_tab, detailed_scorecard_tab,
-                    model_chooser, model_multi_chooser,
+                    model_selection_card, multi_model_selection_card, model_chooser, file_upload, download_button, model_multi_chooser,
                     leaderboard_output, category_chart, model_metadata,
                     all_category_cards, total_score]
         )
 
 # Launch the app
 if __name__ == "__main__":
-    demo.launch(ssr_mode=False)
+    demo.launch(ssr_mode=False)
+