Upload 5 files

app.py

@@ -99,6 +99,153 @@ def create_category_summary(category_data):
     html += "</div>"
     return html
 
+def create_overall_summary(model_data, selected_categories):
+    """Create a comprehensive summary of all categories"""
+    scores = model_data['scores']
+    
+    # Initialize counters
+    total_sections = 0
+    completed_sections = 0
+    na_sections = 0
+    total_questions = 0
+    completed_questions = 0
+    
+    # Track evaluation types across all categories
+    evaluation_types = {
+        'human': 0,
+        'quantitative': 0,
+        'documentation': 0,
+        'monitoring': 0,
+        'transparency': 0
+    }
+    
+    # Calculate completion rates for categories
+    category_completion = {}
+    
+    # Process all categories
+    for category, category_data in scores.items():
+        if category not in selected_categories:
+            continue  # Skip unselected categories
+            
+        category_questions = 0
+        category_completed = 0
+        category_na = 0
+        total_sections_in_category = len(category_data)
+        na_sections_in_category = sum(1 for section in category_data.values() if section['status'] == 'N/A')
+        
+        for section in category_data.values():
+            total_sections += 1
+            if section['status'] == 'Yes':
+                completed_sections += 1
+            elif section['status'] == 'N/A':
+                na_sections += 1
+                category_na += 1
+                
+            if section['status'] != 'N/A':
+                questions = section.get('questions', {})
+                section_total = len(questions)
+                section_completed = sum(1 for q in questions.values() if q)
+                
+                total_questions += section_total
+                completed_questions += section_completed
+                category_questions += section_total
+                category_completed += section_completed
+                
+                # Check for evaluation types
+                for question in questions.keys():
+                    if 'human' in question.lower():
+                        evaluation_types['human'] += 1
+                    if any(term in question.lower() for term in ['quantitative', 'metric', 'benchmark']):
+                        evaluation_types['quantitative'] += 1
+                    if 'documentation' in question.lower():
+                        evaluation_types['documentation'] += 1
+                    if 'monitoring' in question.lower():
+                        evaluation_types['monitoring'] += 1
+                    if 'transparency' in question.lower():
+                        evaluation_types['transparency'] += 1
+        
+        # Store category information
+        is_na = na_sections_in_category == total_sections_in_category
+        completion_rate = (category_completed / category_questions * 100) if category_questions > 0 and not is_na else 0
+        
+        category_completion[category] = {
+            'completion_rate': completion_rate,
+            'is_na': is_na
+        }
+    
+    # Create summary HTML
+    html = "<div class='card overall-summary-card'>"
+    html += "<div class='card-title'>📊 Overall Model Evaluation Summary</div>"
+    
+    # Key metrics section
+    html += "<div class='summary-grid'>"
+    
+    # Overall completion metrics
+    html += "<div class='summary-section'>"
+    html += "<div class='summary-subtitle'>📈 Overall Completion</div>"
+    completion_rate = (completed_questions / total_questions * 100) if total_questions > 0 else 0
+    html += f"<div class='metric-row'><span class='metric-label'>Overall Completion Rate:</span> <span class='metric-value'>{completion_rate:.1f}%</span></div>"
+    html += f"<div class='metric-row'><span class='metric-label'>Sections Completed:</span> <span class='metric-value'>{completed_sections}/{total_sections}</span></div>"
+    html += f"<div class='metric-row'><span class='metric-label'>Questions Completed:</span> <span class='metric-value'>{completed_questions}/{total_questions}</span></div>"
+    html += "</div>"
+    
+    # Evaluation coverage
+    html += "<div class='summary-section'>"
+    html += "<div class='summary-subtitle'>🎯 Evaluation Types Coverage</div>"
+    html += "<div class='coverage-grid'>"
+    for eval_type, count in evaluation_types.items():
+        icon = {
+            'human': '👥',
+            'quantitative': '📊',
+            'documentation': '📝',
+            'monitoring': '📡',
+            'transparency': '🔍'
+        }.get(eval_type, '❓')
+        has_coverage = count > 0
+        html += f"<div class='coverage-item {get_coverage_class(has_coverage)}'>{icon} {eval_type.title()}</div>"
+    html += "</div>"
+    html += "</div>"
+    
+    html += "</div>"  # End summary-grid
+    
+    # Category breakdown
+    html += "<div class='summary-section'>"
+    html += "<div class='summary-subtitle'>📋 Category Completion Breakdown</div>"
+    html += "<div class='category-completion-grid'>"
+    
+    # Sort and filter categories
+    sorted_categories = [cat for cat in sort_categories(scores.keys()) if cat in selected_categories]
+    
+    for category in sorted_categories:
+        info = category_completion[category]
+        category_name = category.split('. ', 1)[1] if '. ' in category else category
+        # remove last word from category_name
+        category_name = ' '.join(category_name.split(' ')[:-1])
+        
+        # Determine display text and style
+        if info['is_na']:
+            completion_text = "N/A"
+            bar_width = "0"
+            style_class = "na"
+        else:
+            completion_text = f"{info['completion_rate']:.1f}%"
+            bar_width = f"{info['completion_rate']}"
+            style_class = "active"
+        
+        html += f"""
+        <div class='category-completion-item'>
+            <div class='category-name'>{category_name}</div>
+            <div class='completion-bar-container {style_class}'>
+                <div class='completion-bar' style='width: {bar_width}%;'></div>
+                <span class='completion-text'>{completion_text}</span>
+            </div>
+        </div>
+        """
+    
+    html += "</div></div>"
+    html += "</div>"  # End overall-summary-card
+    return html
+
 def get_coverage_class(has_feature):
     """Return CSS class based on feature presence"""
     return 'covered' if has_feature else 'not-covered'
@@ -271,35 +418,32 @@ def create_category_chart(selected_models, selected_categories):
 
 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)
-        ]
-    
-    print("Selected categories:", selected_categories)
-    print("Available categories in model:", list(models[model]['scores'].keys()))
+            return [
+                gr.update(value="Please select a model to view details.", visible=True),
+                gr.update(visible=False),
+                gr.update(visible=False)
+            ]
 
-    # Sort categories before processing
     selected_categories = sort_categories(selected_categories)
     metadata_html = create_metadata_card(models[model]['metadata'])
+    overall_summary_html = create_overall_summary(models[model], selected_categories)
 
-
-    # metadata_md = f"## Model Metadata for {model}\n\n"
-    # for key, value in models[model]['metadata'].items():
-    #     metadata_md += f"**{key}:** {value}\n\n"
+    # Combine metadata and overall summary
+    combined_header = metadata_html + overall_summary_html
 
     total_yes = 0
     total_no = 0
     total_na = 0
+    has_non_na = False
 
+    # Create category cards
     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>"
-
-            # Add summary section at the top of each card
+            
+            # Add category-specific summary at the top of each card
             card_content += create_category_summary(category_data)
             
             # Sort sections within each category
@@ -312,6 +456,8 @@ def update_detailed_scorecard(model, selected_categories):
             
             for section, details in sorted_sections:
                 status = details['status']
+                if status != 'N/A':
+                    has_non_na = True
                 sources = details.get('sources', [])
                 questions = details.get('questions', {})
                 
@@ -374,23 +520,26 @@ def update_detailed_scorecard(model, selected_categories):
             
             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>"
+                card_content += f"<div class='category-score'>Completion Score Breakdown: {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 += f"<div class='category-score'>Completion Score Breakdown: N/A (All {category_na} items not applicable)</div>"
             
             card_content += "</div>"
             all_cards_content += card_content
 
     all_cards_content += "</div>"
     
-    if total_yes + total_no > 0:
+    # Create total score
+    if not has_non_na:
+        total_score_md = "<div class='total-score'>No applicable scores (all items N/A)</div>"
+    elif 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_html, visible=True),
+        gr.update(value=combined_header, visible=True),
         gr.update(value=all_cards_content, visible=True),
         gr.update(value=total_score_md, visible=True)
     ]
@@ -823,6 +972,130 @@ css = """
     color: #999;
     border-color: #444;
 }
+
+.overall-summary-card {
+    width: 100% !important;
+    margin-bottom: 30px;
+}
+
+.summary-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 20px;
+    margin-bottom: 20px;
+}
+
+.category-completion-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 16px;
+    margin-top: 12px;
+}
+
+.category-completion-item {
+    background-color: #f8f9fa;
+    border-radius: 8px;
+    padding: 12px;
+}
+
+.category-name {
+    font-size: 0.9em;
+    font-weight: 500;
+    margin-bottom: 8px;
+    color: #555;
+}
+
+.completion-bar-container {
+    height: 24px;
+    background-color: #eee;
+    border-radius: 12px;
+    position: relative;
+    overflow: hidden;
+}
+
+.completion-bar {
+    height: 100%;
+    background-color: #4CAF50;
+    transition: width 0.3s ease;
+}
+
+.completion-text {
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 0.8em;
+    font-weight: 600;
+    color: #333;
+}
+
+.dark .category-completion-item {
+    background-color: #2a2a2a;
+}
+
+.dark .category-name {
+    color: #ccc;
+}
+
+.dark .completion-bar-container {
+    background-color: #333;
+}
+
+.dark .completion-bar {
+    background-color: #2e7d32;
+}
+
+.dark .completion-text {
+    color: #fff;
+}
+.completion-bar-container.not-selected {
+    opacity: 0.5;
+    background-color: #f0f0f0;
+}
+
+.completion-bar-container.na {
+    background-color: #f0f0f0;
+}
+
+.completion-bar-container.na .completion-bar {
+    background-color: #999;
+    width: 0 !important;  /* Ensure no bar shows for N/A */
+}
+
+.dark .completion-bar-container.na {
+    background-color: #2d2d2d;
+}
+
+.dark .completion-bar-container.na .completion-bar {
+    background-color: #666;
+}
+
+.category-completion-item {
+    background-color: #f8f9fa;
+    border-radius: 8px;
+    padding: 12px;
+    height: 80px;
+    display: grid;
+    grid-template-rows: 1fr auto;
+    gap: 8px;
+}
+
+.category-name {
+    font-size: 0.9em;
+    font-weight: 500;
+    color: #555;
+    align-self: start;
+    line-height: 1.3;
+}
+
+.completion-bar-container {
+    height: 24px;
+    background-color: #eee;
+    border-radius: 12px;
+    position: relative;
+    overflow: hidden;
+    align-self: end;
+}
 """
 
 first_model = next(iter(models.values()))

model_data/model_a_data.json

@@ -144,7 +144,7 @@
         }
       }
     },
-  "3. Disparate Performance": {
+  "3. Disparate Performance Evaluation": {
     "3.1 Disparate Performance Overview": {
       "status": "N/A",
       "sources": [],

model_data/model_b_data.json

@@ -144,7 +144,7 @@
         }
       }
     },
-  "3. Disparate Performance": {
+  "3. Disparate Performance Evaluation": {
     "3.1 Disparate Performance Overview": {
       "status": "N/A",
       "sources": [],

model_data/model_c_data.json

@@ -144,7 +144,7 @@
         }
       }
     },
-  "3. Disparate Performance": {
+  "3. Disparate Performance Evaluation": {
     "3.1 Disparate Performance Overview": {
       "status": "N/A",
       "sources": [],