Update app.py

app.py

@@ -37,6 +37,84 @@ def sort_categories(categories):
 #                 ))
 #     return templates
 
+def create_category_summary(category_data):
+    """Create a summary section for a category"""
+    # Calculate statistics
+    total_sections = len(category_data)
+    completed_sections = sum(1 for section in category_data.values() if section['status'] == 'Yes')
+    na_sections = sum(1 for section in category_data.values() if section['status'] == 'N/A')
+    
+    # Calculate completion rates
+    total_questions = 0
+    completed_questions = 0
+    evaluation_types = set()
+    has_human_eval = False
+    has_quantitative = False
+    has_documentation = False
+    
+    for section in category_data.values():
+        if section['status'] != 'N/A':
+            questions = section.get('questions', {})
+            total_questions += len(questions)
+            completed_questions += sum(1 for q in questions.values() if q)
+            
+            # Check for evaluation types
+            for question in questions.keys():
+                if 'human' in question.lower():
+                    has_human_eval = True
+                if any(term in question.lower() for term in ['quantitative', 'metric', 'benchmark']):
+                    has_quantitative = True
+                if 'documentation' in question.lower():
+                    has_documentation = True
+    
+    completion_rate = (completed_questions / total_questions * 100) if total_questions > 0 else 0
+    
+    # Create summary HTML
+    html = "<div class='summary-card'>"
+    html += "<div class='summary-title'>📊 Section Summary</div>"
+    
+    # Completion metrics
+    html += "<div class='summary-section'>"
+    html += "<div class='summary-subtitle'>📈 Completion Metrics</div>"
+    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 += "</div>"
+    
+    # Evaluation Coverage
+    html += "<div class='summary-section'>"
+    html += "<div class='summary-subtitle'>🎯 Evaluation Coverage</div>"
+    html += "<div class='coverage-grid'>"
+    html += f"<div class='coverage-item {get_coverage_class(has_human_eval)}'>👥 Human Evaluation</div>"
+    html += f"<div class='coverage-item {get_coverage_class(has_quantitative)}'>📊 Quantitative Analysis</div>"
+    html += f"<div class='coverage-item {get_coverage_class(has_documentation)}'>📝 Documentation</div>"
+    html += "</div>"
+    html += "</div>"
+    
+    # Status Breakdown
+    html += "<div class='summary-section'>"
+    html += "<div class='summary-subtitle'>📋 Status Breakdown</div>"
+    html += create_status_pills(category_data)
+    html += "</div>"
+    
+    html += "</div>"
+    return html
+
+def get_coverage_class(has_feature):
+    """Return CSS class based on feature presence"""
+    return 'covered' if has_feature else 'not-covered'
+
+def create_status_pills(category_data):
+    """Create status pill indicators"""
+    status_counts = {'Yes': 0, 'No': 0, 'N/A': 0}
+    for section in category_data.values():
+        status_counts[section['status']] += 1
+    
+    html = "<div class='status-pills'>"
+    for status, count in status_counts.items():
+        html += f"<div class='status-pill {status.lower()}'>{status}: {count}</div>"
+    html += "</div>"
+    return html
+
 def get_modality_icon(modality):
     """Return an emoji icon for each modality type."""
     icons = {
@@ -220,6 +298,9 @@ def update_detailed_scorecard(model, 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
+            card_content += create_category_summary(category_data)
             
             # Sort sections within each category
             sorted_sections = sorted(category_data.items(), 
@@ -595,6 +676,153 @@ css = """
     border-color: #2c3e50;
     color: #99ccff;
 }
+
+.summary-card {
+    background-color: #f8f9fa;
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+    padding: 16px;
+    margin-bottom: 20px;
+}
+
+.summary-title {
+    font-size: 1.2em;
+    font-weight: bold;
+    margin-bottom: 12px;
+    color: #333;
+}
+
+.summary-section {
+    margin-bottom: 16px;
+}
+
+.summary-subtitle {
+    font-size: 1em;
+    font-weight: 600;
+    color: #555;
+    margin-bottom: 8px;
+}
+
+.metric-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 4px;
+}
+
+.metric-label {
+    color: #666;
+}
+
+.metric-value {
+    font-weight: 600;
+    color: #333;
+}
+
+.coverage-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 8px;
+    margin-top: 8px;
+}
+
+.coverage-item {
+    padding: 8px;
+    border-radius: 6px;
+    text-align: center;
+    font-size: 0.9em;
+}
+
+.coverage-item.covered {
+    background-color: #e6ffe6;
+    color: #006600;
+    border: 1px solid #b3ffb3;
+}
+
+.coverage-item.not-covered {
+    background-color: #f5f5f5;
+    color: #666;
+    border: 1px solid #ddd;
+}
+
+.status-pills {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+}
+
+.status-pill {
+    padding: 4px 12px;
+    border-radius: 16px;
+    font-size: 0.9em;
+    font-weight: 500;
+}
+
+.status-pill.yes {
+    background-color: #e6ffe6;
+    color: #006600;
+    border: 1px solid #b3ffb3;
+}
+
+.status-pill.no {
+    background-color: #ffe6e6;
+    color: #990000;
+    border: 1px solid #ffb3b3;
+}
+
+.status-pill.n\\/a {
+    background-color: #f5f5f5;
+    color: #666;
+    border: 1px solid #ddd;
+}
+
+.dark .summary-card {
+    background-color: #2a2a2a;
+    border-color: #444;
+}
+
+.dark .summary-title,
+.dark .summary-subtitle {
+    color: #e0e0e0;
+}
+
+.dark .metric-label {
+    color: #999;
+}
+
+.dark .metric-value {
+    color: #fff;
+}
+
+.dark .coverage-item.covered {
+    background-color: #1a3a1a;
+    color: #90EE90;
+    border-color: #2d5a2d;
+}
+
+.dark .coverage-item.not-covered {
+    background-color: #333;
+    color: #999;
+    border-color: #444;
+}
+
+.dark .status-pill.yes {
+    background-color: #1a3a1a;
+    color: #90EE90;
+    border-color: #2d5a2d;
+}
+
+.dark .status-pill.no {
+    background-color: #3a1a1a;
+    color: #FFB6B6;
+    border-color: #5a2d2d;
+}
+
+.dark .status-pill.n\\/a {
+    background-color: #333;
+    color: #999;
+    border-color: #444;
+}
 """
 
 first_model = next(iter(models.values()))