Update app.py

app.py

@@ -25,10 +25,6 @@ def load_scorecard_templates(directory):
                 ))
     return templates
 
-# Load scorecard templates
-scorecard_template = load_scorecard_templates('scorecard_templates')
-
-# Function to read JSON files and populate models dictionary
 def load_models_from_json(directory):
     models = {}
     for filename in os.listdir(directory):
@@ -38,12 +34,197 @@ def load_models_from_json(directory):
                 model_name = model_data['metadata']['Name']
                 models[model_name] = model_data
     
-    # Sort the models alphabetically by name
     return OrderedDict(sorted(models.items(), key=lambda x: x[0].lower()))
 
-# Load models from JSON files
+# Load templates and models
+scorecard_template = load_scorecard_templates('scorecard_templates')
 models = load_models_from_json('model_data')
 
+def create_source_html(sources):
+    if not sources:
+        return ""
+    
+    html = "<div class='sources-list'>"
+    for source in sources:
+        icon = source.get("type", "")
+        detail = source.get("detail", "")
+        name = source.get("name", detail)
+        
+        html += f"<div class='source-item'>{icon} "
+        if detail.startswith("http"):
+            html += f"<a href='{detail}' target='_blank'>{name}</a>"
+        else:
+            html += name
+        html += "</div>"
+    html += "</div>"
+    return html
+
+def create_leaderboard():
+    scores = []
+    for model, data in models.items():
+        total_score = 0
+        total_questions = 0
+        
+        for category in data['scores'].values():
+            for section in category.values():
+                if section['status'] != 'N/A':
+                    questions = section.get('questions', {})
+                    total_score += sum(1 for q in questions.values() if q)
+                    total_questions += len(questions)
+        
+        score_percentage = (total_score / total_questions * 100) if total_questions > 0 else 0
+        scores.append((model, score_percentage))
+    
+    df = pd.DataFrame(scores, columns=['Model', 'Score Percentage'])
+    df = df.sort_values('Score Percentage', ascending=False).reset_index(drop=True)
+    
+    html = "<div class='card leaderboard-card'>"
+    html += "<div class='card-title'>AI Model Social Impact Leaderboard</div>"
+    html += "<table class='leaderboard-table'>"
+    html += "<tr><th>Rank</th><th>Model</th><th>Score Percentage</th></tr>"
+    for i, (_, row) in enumerate(df.iterrows(), 1):
+        html += f"<tr><td>{i}</td><td>{row['Model']}</td><td>{row['Score Percentage']:.2f}%</td></tr>"
+    html += "</table></div>"
+    
+    return html
+
+def create_category_chart(selected_models, selected_categories):
+    if not selected_models:
+        return px.bar(title='Please select at least one model for comparison')
+    
+    data = []
+    for model in selected_models:
+        for category in selected_categories:
+            if category in models[model]['scores']:
+                total_score = 0
+                total_questions = 0
+                
+                for section in models[model]['scores'][category].values():
+                    if section['status'] != 'N/A':
+                        questions = section.get('questions', {})
+                        total_score += sum(1 for q in questions.values() if q)
+                        total_questions += len(questions)
+                
+                score_percentage = (total_score / total_questions * 100) if total_questions > 0 else 0
+                data.append({
+                    'Model': model,
+                    'Category': category,
+                    'Score Percentage': score_percentage
+                })
+    
+    df = pd.DataFrame(data)
+    if df.empty:
+        return px.bar(title='No data available for the selected models and categories')
+    
+    fig = px.bar(df, x='Model', y='Score Percentage', color='Category',
+                 title='AI Model Scores by Category',
+                 labels={'Score Percentage': 'Score Percentage'},
+                 category_orders={"Category": selected_categories})
+    return fig
+
+def update_detailed_scorecard(model, selected_categories):
+    if not model:
+        return [
+            gr.update(value="Please select a model to view details.", visible=True),
+            gr.update(visible=False),
+            gr.update(visible=False)
+        ]
+
+    metadata_md = f"## Model Metadata for {model}\n\n"
+    for key, value in models[model]['metadata'].items():
+        metadata_md += f"**{key}:** {value}\n\n"
+
+    total_yes = 0
+    total_no = 0
+    total_na = 0
+
+    all_cards_content = "<div class='container'>"
+    for category_name in selected_categories:
+        if category_name in models[model]['scores']:
+            category_data = models[model]['scores'][category_name]
+            card_content = f"<div class='card'><div class='card-title'>{category_name}</div>"
+            
+            category_yes = 0
+            category_no = 0
+            category_na = 0
+            
+            for section, details in category_data.items():
+                status = details['status']
+                sources = details.get('sources', [])
+                questions = details.get('questions', {})
+                
+                # Determine section class based on status
+                section_class = "section-na" if status == "N/A" else "section-active"
+                card_content += f"<div class='section {section_class}'>"
+                card_content += f"<h3>{section}</h3>"
+                
+                # Add sources if they exist
+                if sources:
+                    card_content += "<div class='sources-list'>"
+                    for source in sources:
+                        icon = source.get("type", "")
+                        detail = source.get("detail", "")
+                        name = source.get("name", detail)
+                        
+                        card_content += f"<div class='source-item'>{icon} "
+                        if detail.startswith("http"):
+                            card_content += f"<a href='{detail}' target='_blank'>{name}</a>"
+                        else:
+                            card_content += name
+                        card_content += "</div>"
+                    card_content += "</div>"
+                
+                # Process questions
+                if questions:
+                    card_content += "<div class='questions'>"
+                    for question, is_checked in questions.items():
+                        if status == "N/A":
+                            style_class = "na"
+                            icon = "○"  # Circle for N/A items
+                            category_na += 1
+                            total_na += 1
+                        else:
+                            if is_checked:
+                                style_class = "checked"
+                                icon = "✓"
+                                category_yes += 1
+                                total_yes += 1
+                            else:
+                                style_class = "unchecked"
+                                icon = "✗"
+                                category_no += 1
+                                total_no += 1
+                        
+                        card_content += f"<div class='question-item {style_class}'>{icon} {question}</div>"
+                    card_content += "</div>"
+                
+                card_content += "</div>"  # Close section div
+            
+            # Calculate category score (excluding N/A items)
+            if category_yes + category_no > 0:
+                category_score = category_yes / (category_yes + category_no) * 100
+                card_content += f"<div class='category-score'>Category Score: {category_score:.2f}% (Yes: {category_yes}, No: {category_no}, N/A: {category_na})</div>"
+            elif category_na > 0:
+                card_content += f"<div class='category-score'>Category Score: N/A (All {category_na} items not applicable)</div>"
+            
+            card_content += "</div>"  # Close card div
+            all_cards_content += card_content
+
+    all_cards_content += "</div>"
+    
+    # Calculate total score (excluding N/A items)
+    if total_yes + total_no > 0:
+        total_score = total_yes / (total_yes + total_no) * 100
+        total_score_md = f"<div class='total-score'>Total Score: {total_score:.2f}% (Yes: {total_yes}, No: {total_no}, N/A: {total_na})</div>"
+    else:
+        total_score_md = "<div class='total-score'>No applicable scores (all items N/A)</div>"
+    
+    return [
+        gr.update(value=metadata_md, visible=True),
+        gr.update(value=all_cards_content, visible=True),
+        gr.update(value=total_score_md, visible=True)
+    ]
+
 css = """
 .container {
     display: flex;
@@ -75,38 +256,26 @@ css = """
     border-bottom: 2px solid #e0e0e0;
     padding-bottom: 10px;
 }
-.question {
-    margin-bottom: 20px;
-    padding: 15px;
-    border-radius: 5px;
+.sources-list {
+    margin: 10px 0;
 }
-.question h3 {
-    margin-top: 0;
-    color: #2c3e50;
+.source-item {
+    margin: 5px 0;
+    padding: 5px;
+    background-color: #f8f9fa;
+    border-radius: 4px;
 }
-.question-yes {
+.question-item {
+    margin: 5px 0;
+    padding: 8px;
+    border-radius: 4px;
+}
+.question-item.checked {
     background-color: #e6ffe6;
 }
-.question-no {
+.question-item.unchecked {
     background-color: #ffe6e6;
 }
-.question-na {
-    background-color: #fffde6;
-}
-.status {
-    font-weight: bold;
-}
-details {
-    margin-top: 10px;
-}
-summary {
-    cursor: pointer;
-    color: #3498db;
-    font-weight: bold;
-}
-summary:hover {
-    text-decoration: underline;
-}
 .category-score, .total-score {
     background-color: #f0f8ff;
     border: 1px solid #b0d4ff;
@@ -139,8 +308,11 @@ summary:hover {
     background-color: #f2f2f2;
     font-weight: bold;
 }
-.leaderboard-table tr:last-child td {
-    border-bottom: none;
+.section {
+    margin-bottom: 20px;
+    padding: 15px;
+    border-radius: 5px;
+    background-color: #f8f9fa;
 }
 @media (max-width: 768px) {
     .card {
@@ -148,288 +320,72 @@ summary:hover {
     }
 }
 .dark {
-    /* General styles */
     background-color: #1a1a1a;
     color: #e0e0e0;
 
-    /* Card styles */
     .card {
         background-color: #2a2a2a;
         border-color: #444;
-        box-shadow: 0 4px 6px rgba(0,0,0,0.3);
-    }
-    .card:hover {
-        box-shadow: 0 6px 8px rgba(0,0,0,0.4);
     }
     .card-title {
         color: #fff;
         border-bottom-color: #444;
     }
-
-    /* Question styles */
-    .question {
-        background-color: #333;
-    }
-    .question h3 {
-        color: #e0e0e0;
+    .source-item {
+        background-color: #2a2a2a;
     }
-    .question-yes {
+    .question-item.checked {
         background-color: #1a3a1a;
-        
-        /* Make accordion match parent background */
-        details {
-            background-color: #1a3a1a;
-        }
     }
-    .question-no {
+    .question-item.unchecked {
         background-color: #3a1a1a;
-        
-        /* Make accordion match parent background */
-        details {
-            background-color: #3a1a1a;
-        }
     }
-    .question-na {
-        background-color: #3a3a1a;
-        
-        /* Make accordion match parent background */
-        details {
-            background-color: #3a3a1a;
-        }
-    }
-
-    /* Summary and details styles */
-    summary {
-        color: #3498db;
-    }
-    summary:hover {
-        color: #5dade2;
+    .section {
+        background-color: #2a2a2a;
     }
-
-    /* Score styles */
     .category-score, .total-score {
         background-color: #2c3e50;
         border-color: #34495e;
     }
-    .total-score {
-        background-color: #34495e;
-        border-color: #2c3e50;
-    }
-
-    /* Leaderboard styles */
     .leaderboard-table th {
         background-color: #2c3e50;
-        color: #fff;
-    }
-    .leaderboard-table td {
-        border-bottom-color: #444;
-    }
-
-    /* Gradio component styles */
-    .gradio-container {
-        background-color: #1a1a1a;
-    }
-    .input-group, .output-group {
-        background-color: #2a2a2a;
-    }
-    input, select, textarea {
-        background-color: #333;
-        color: #e0e0e0;
-        border-color: #444;
-    }
-    button {
-        background-color: #3498db;
-        color: #fff;
-    }
-    button:hover {
-        background-color: #2980b9;
     }
 }
-"""
-
-def create_leaderboard():
-    scores = []
-    for model, data in models.items():
-        total_score = 0
-        total_questions = 0
-        for category in data['scores']:
-            for question, details in data['scores'][category].items():
-                if details['status'] == 'Yes':
-                    total_score += 1
-                total_questions += 1
-        score_percentage = (total_score / total_questions) * 100 if total_questions > 0 else 0
-        scores.append((model, score_percentage))
-    
-    df = pd.DataFrame(scores, columns=['Model', 'Score Percentage'])
-    df = df.sort_values('Score Percentage', ascending=False).reset_index(drop=True)
-    
-    html = "<div class='card leaderboard-card'>"
-    html += "<div class='card-title'>AI Model Social Impact Leaderboard</div>"
-    html += "<table class='leaderboard-table'>"
-    html += "<tr><th>Rank</th><th>Model</th><th>Score Percentage</th></tr>"
-    for i, (_, row) in enumerate(df.iterrows(), 1):
-        html += f"<tr><td>{i}</td><td>{row['Model']}</td><td>{row['Score Percentage']:.2f}%</td></tr>"
-    html += "</table></div>"
-    
-    return html
-
-def create_category_chart(selected_models, selected_categories):
-    if not selected_models:
-        return px.bar(title='Please select at least one model for comparison')
-    
-    data = []
-    for model in selected_models:
-        for category in selected_categories:
-            if category in models[model]['scores']:
-                total_questions = len(models[model]['scores'][category])
-                yes_count = sum(1 for q in models[model]['scores'][category].values() if q['status'] == 'Yes')
-                score_percentage = (yes_count / total_questions) * 100 if total_questions > 0 else 0
-                data.append({'Model': model, 'Category': category, 'Score Percentage': score_percentage})
-    
-    df = pd.DataFrame(data)
-    if df.empty:
-        return px.bar(title='No data available for the selected models and categories')
-    
-    fig = px.bar(df, x='Model', y='Score Percentage', color='Category', 
-                 title='AI Model Scores by Category',
-                 labels={'Score Percentage': 'Score Percentage'}, 
-                 category_orders={"Category": selected_categories})
-    return fig
 
-def update_detailed_scorecard(model, selected_categories):
-    if not model:  # Check if model is None or an empty string
-        return [
-            gr.update(value="Please select a model to view details.", visible=True),
-            gr.update(visible=False),
-            gr.update(visible=False)
-        ]
-
-    metadata_md = f"## Model Metadata for {model}\n\n"
-    for key, value in models[model]['metadata'].items():
-        metadata_md += f"**{key}:** {value}\n\n"
-
-    total_yes = 0
-    total_no = 0
-    total_na = 0
-
-    all_cards_content = "<div class='container'>"
-    for category in scorecard_template:
-        if category.name in selected_categories and category.name in models[model]['scores']:
-            category_data = models[model]['scores'][category.name]
-            card_content = f"<div class='card'><div class='card-title'>{category.name}</div>"
-            
-            category_yes = 0
-            category_no = 0
-            category_na = 0
-            
-            for question, details in category_data.items():
-                status = details['status']
-                source = details.get('source', 'N/A')
-                
-                if status == 'Yes':
-                    bg_class = 'question-yes'
-                    category_yes += 1
-                    total_yes += 1
-                elif status == 'No':
-                    bg_class = 'question-no'
-                    category_no += 1
-                    total_no += 1
-                else:
-                    bg_class = 'question-na'
-                    category_na += 1
-                    total_na += 1
-
-                card_content += f"<div class='question {bg_class}'>"
-                card_content += f"<h3>{question}</h3>\n\n"
-                card_content += f"<p><span class='status'>{status}</span></p>\n\n<p><strong>Source:</strong> {source}</p>\n\n"
-                
-                if details.get('applicable_evaluations'):
-                    card_content += "<details><summary>View Applicable Evaluations</summary>\n\n"
-                    card_content += "<ul>"
-                    for eval in details['applicable_evaluations']:
-                        card_content += f"<li>{eval}</li>"
-                    card_content += "</ul>\n"
-                    card_content += "</details>\n\n"
-                else:
-                    card_content += "<details><summary>View Applicable Evaluations</summary>\n\n"
-                    card_content += "<p>No applicable evaluations.</p>\n"
-                    card_content += "</details>\n\n"
-                
-                card_content += "</div>"
-            
-            category_score = category_yes / (category_yes + category_no) * 100 if (category_yes + category_no) > 0 else 0
-            card_content += f"<div class='category-score'>Category Score: {category_score:.2f}% (Yes: {category_yes}, No: {category_no}, N/A: {category_na})</div>"
-            card_content += "</div>"
-            all_cards_content += card_content
-
-    all_cards_content += "</div>"
-    
-    total_score = total_yes / (total_yes + total_no) * 100 if (total_yes + total_no) > 0 else 0
-    total_score_md = f"<div class='total-score'>Total Score: {total_score:.2f}% (Yes: {total_yes}, No: {total_no}, N/A: {total_na})</div>"
-    
-    return [
-        gr.update(value=metadata_md, visible=True),
-        gr.update(value=all_cards_content, visible=True),
-        gr.update(value=total_score_md, visible=True)
-    ]
+.section-na {
+    opacity: 0.6;
+}
 
-def update_dashboard(tab, selected_models, selected_model, selected_categories):
-    leaderboard_visibility = gr.update(visible=False)
-    category_chart_visibility = gr.update(visible=False)
-    detailed_scorecard_visibility = gr.update(visible=False)
-    model_chooser_visibility = gr.update(visible=False)
-    model_multi_chooser_visibility = gr.update(visible=False)
-    category_filter_visibility = gr.update(visible=False)
+.question-item.na {
+    background-color: #f0f0f0;
+    color: #666;
+}
 
-    if tab == "Leaderboard":
-        leaderboard_visibility = gr.update(visible=True)
-        leaderboard_html = create_leaderboard()
-        return [leaderboard_visibility, category_chart_visibility, detailed_scorecard_visibility, 
-                model_chooser_visibility, model_multi_chooser_visibility, category_filter_visibility, 
-                gr.update(value=leaderboard_html), gr.update(), gr.update(), gr.update(), gr.update()]
-    elif tab == "Category Analysis":
-        category_chart_visibility = gr.update(visible=True)
-        model_multi_chooser_visibility = gr.update(visible=True)
-        category_filter_visibility = gr.update(visible=True)
-        category_chart = create_category_chart(selected_models or [], selected_categories)
-        return [leaderboard_visibility, category_chart_visibility, detailed_scorecard_visibility, 
-                model_chooser_visibility, model_multi_chooser_visibility, category_filter_visibility, 
-                gr.update(), gr.update(value=category_chart), gr.update(), gr.update(), gr.update()]
-    elif tab == "Detailed Scorecard":
-        detailed_scorecard_visibility = gr.update(visible=True)
-        model_chooser_visibility = gr.update(visible=True)
-        category_filter_visibility = gr.update(visible=True)
-        if selected_model:
-            scorecard_updates = update_detailed_scorecard(selected_model, selected_categories)
-        else:
-            scorecard_updates = [
-                gr.update(value="Please select a model to view details.", visible=True),
-                gr.update(visible=False),
-                gr.update(visible=False)
-            ]
-        return [leaderboard_visibility, category_chart_visibility, detailed_scorecard_visibility, 
-                model_chooser_visibility, model_multi_chooser_visibility, category_filter_visibility, 
-                gr.update(), gr.update()] + scorecard_updates
+.dark .question-item.na {
+    background-color: #2d2d2d;
+    color: #999;
+}
+"""
 
 with gr.Blocks(css=css) as demo:
     gr.Markdown("# AI Model Social Impact Scorecard Dashboard")
     
     with gr.Row():
         tab_selection = gr.Radio(["Leaderboard", "Category Analysis", "Detailed Scorecard"], 
-                                 label="Select Tab", value="Leaderboard")
+                                label="Select Tab", value="Leaderboard")
     
     with gr.Row():
-        model_chooser = gr.Dropdown(choices=[""] + list(models.keys()),  # Add an empty option
-                                    label="Select Model for Details", 
-                                    value="",  # Set default value to empty string
-                                    interactive=True, visible=False)
-        model_multi_chooser = gr.Dropdown(choices=list(models.keys()), 
-                                          label="Select Models for Comparison", 
-                                          multiselect=True, interactive=True, visible=False)
-        category_filter = gr.CheckboxGroup(choices=[cat.name for cat in scorecard_template], 
-                                           label="Filter Categories", 
-                                           value=[cat.name for cat in scorecard_template],
-                                           visible=False)
+        model_chooser = gr.Dropdown(choices=[""] + list(models.keys()),
+                                  label="Select Model for Details", 
+                                  value="",
+                                  interactive=True, visible=False)
+        model_multi_chooser = gr.Dropdown(choices=list(models.keys()),
+                                        label="Select Models for Comparison", 
+                                        multiselect=True, interactive=True, visible=False)
+        category_filter = gr.CheckboxGroup(choices=[cat.name for cat in scorecard_template],
+                                         label="Filter Categories", 
+                                         value=[cat.name for cat in scorecard_template],
+                                         visible=False)
     
     with gr.Column(visible=True) as leaderboard_tab:
         leaderboard_output = gr.HTML()
@@ -445,29 +401,82 @@ with gr.Blocks(css=css) as demo:
     # Initialize the dashboard with the leaderboard
     leaderboard_output.value = create_leaderboard()
     
-    tab_selection.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, category_filter, 
-                                  leaderboard_output, category_chart, model_metadata, all_category_cards, total_score])
-    
-    model_chooser.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, category_filter, 
-                                  leaderboard_output, category_chart, model_metadata, all_category_cards, total_score])
-    
-    model_multi_chooser.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, category_filter, 
-                                        leaderboard_output, category_chart, model_metadata, all_category_cards, total_score])
-    
-    category_filter.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, category_filter, 
-                                    leaderboard_output, category_chart, model_metadata, all_category_cards, total_score])
+    def update_dashboard(tab, selected_models, selected_model, selected_categories):
+            leaderboard_visibility = gr.update(visible=False)
+            category_chart_visibility = gr.update(visible=False)
+            detailed_scorecard_visibility = gr.update(visible=False)
+            model_chooser_visibility = gr.update(visible=False)
+            model_multi_chooser_visibility = gr.update(visible=False)
+            category_filter_visibility = gr.update(visible=False)
+
+            if tab == "Leaderboard":
+                leaderboard_visibility = gr.update(visible=True)
+                leaderboard_html = create_leaderboard()
+                return [leaderboard_visibility, category_chart_visibility, detailed_scorecard_visibility,
+                        model_chooser_visibility, model_multi_chooser_visibility, category_filter_visibility,
+                        gr.update(value=leaderboard_html), gr.update(), gr.update(), gr.update(), gr.update()]
+            
+            elif tab == "Category Analysis":
+                category_chart_visibility = gr.update(visible=True)
+                model_multi_chooser_visibility = gr.update(visible=True)
+                category_filter_visibility = gr.update(visible=True)
+                category_plot = create_category_chart(selected_models or [], selected_categories)
+                return [leaderboard_visibility, category_chart_visibility, detailed_scorecard_visibility,
+                        model_chooser_visibility, model_multi_chooser_visibility, category_filter_visibility,
+                        gr.update(), gr.update(value=category_plot), gr.update(), gr.update(), gr.update()]
+            
+            elif tab == "Detailed Scorecard":
+                detailed_scorecard_visibility = gr.update(visible=True)
+                model_chooser_visibility = gr.update(visible=True)
+                category_filter_visibility = gr.update(visible=True)
+                if selected_model:
+                    scorecard_updates = update_detailed_scorecard(selected_model, selected_categories)
+                else:
+                    scorecard_updates = [
+                        gr.update(value="Please select a model to view details.", visible=True),
+                        gr.update(visible=False),
+                        gr.update(visible=False)
+                    ]
+                return [leaderboard_visibility, category_chart_visibility, detailed_scorecard_visibility,
+                        model_chooser_visibility, model_multi_chooser_visibility, category_filter_visibility,
+                        gr.update(), gr.update()] + scorecard_updates
+
+    # Set up event handlers
+    tab_selection.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, category_filter,
+                leaderboard_output, category_chart, model_metadata,
+                all_category_cards, total_score]
+    )
+
+    model_chooser.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, category_filter,
+                leaderboard_output, category_chart, model_metadata,
+                all_category_cards, total_score]
+    )
+
+    model_multi_chooser.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, category_filter,
+                leaderboard_output, category_chart, model_metadata,
+                all_category_cards, total_score]
+    )
+
+    category_filter.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, category_filter,
+                leaderboard_output, category_chart, model_metadata,
+                all_category_cards, total_score]
+    )
 
 # Launch the app
 if __name__ == "__main__":