Upload app.py

app.py

@@ -6,6 +6,7 @@ from typing import List, Dict, Tuple, Union
 import json
 import os
 from collections import OrderedDict
+import re
 
 @dataclass
 class ScorecardCategory:
@@ -13,17 +14,82 @@ class ScorecardCategory:
     questions: List[Dict[str, Union[str, List[str]]]]
     scores: Dict[str, int] = field(default_factory=dict)
 
-def load_scorecard_templates(directory):
-    templates = []
-    for filename in os.listdir(directory):
-        if filename.endswith('.json'):
-            with open(os.path.join(directory, filename), 'r') as file:
-                data = json.load(file)
-                templates.append(ScorecardCategory(
-                    name=data['name'],
-                    questions=data['questions']
-                ))
-    return templates
+
+def extract_category_number(category_name: str) -> int:
+    """Extract the category number from the category name."""
+    match = re.match(r'^(\d+)\.?\s*.*$', category_name)
+    return int(match.group(1)) if match else float('inf')
+
+def sort_categories(categories):
+    """Sort categories by their numeric prefix."""
+    return sorted(categories, key=extract_category_number)
+
+
+# def load_scorecard_templates(directory):
+#     templates = []
+#     for filename in os.listdir(directory):
+#         if filename.endswith('.json'):
+#             with open(os.path.join(directory, filename), 'r') as file:
+#                 data = json.load(file)
+#                 templates.append(ScorecardCategory(
+#                     name=data['name'],
+#                     questions=data['questions']
+#                 ))
+#     return templates
+
+def get_modality_icon(modality):
+    """Return an emoji icon for each modality type."""
+    icons = {
+        "Text-to-Text": "📝",  # Memo icon for text-to-text
+        "Text-to-Image": "🎨",  # Artist palette for text-to-image
+        "Image-to-Text": "🔍",  # Magnifying glass for image-to-text
+        "Image-to-Image": "🖼️",  # Frame for image-to-image
+        "Audio": "🎵",  # Musical note for audio
+        "Video": "🎬",  # Clapper board for video
+        "Multimodal": "🔄"  # Cycle arrows for multimodal
+    }
+    return icons.get(modality, "💫")  # Default icon if modality not found
+
+def create_metadata_card(metadata):
+    """Create a formatted HTML card for metadata."""
+    html = "<div class='card metadata-card'>"
+    html += "<div class='card-title'>Model Information</div>"
+    html += "<div class='metadata-content'>"
+    
+    # Handle special formatting for modalities
+    modalities = metadata.get("Modalities", [])
+    formatted_modalities = ""
+    if modalities:
+        formatted_modalities = " ".join(
+            f"<span class='modality-badge'>{get_modality_icon(m)} {m}</span>"
+            for m in modalities
+        )
+    
+    # Order of metadata display (customize as needed)
+    display_order = ["Name", "Provider", "Type", "URL"]
+    
+    # Display ordered metadata first
+    for key in display_order:
+        if key in metadata:
+            value = metadata[key]
+            if key == "URL":
+                html += f"<div class='metadata-row'><span class='metadata-label'>{key}:</span> "
+                html += f"<a href='{value}' target='_blank' class='metadata-link'>{value}</a></div>"
+            else:
+                html += f"<div class='metadata-row'><span class='metadata-label'>{key}:</span> <span class='metadata-value'>{value}</span></div>"
+    
+    # Add modalities if present
+    if formatted_modalities:
+        html += f"<div class='metadata-row'><span class='metadata-label'>Modalities:</span> <div class='modality-container'>{formatted_modalities}</div></div>"
+    
+    # Add any remaining metadata not in display_order
+    for key, value in metadata.items():
+        if key not in display_order and key != "Modalities":
+            html += f"<div class='metadata-row'><span class='metadata-label'>{key}:</span> <span class='metadata-value'>{value}</span></div>"
+    
+    html += "</div></div>"
+    return html
+
 
 def load_models_from_json(directory):
     models = {}
@@ -37,7 +103,7 @@ def load_models_from_json(directory):
     return OrderedDict(sorted(models.items(), key=lambda x: x[0].lower()))
 
 # Load templates and models
-scorecard_template = load_scorecard_templates('scorecard_templates')
+# scorecard_template = load_scorecard_templates('scorecard_templates')
 models = load_models_from_json('model_data')
 
 def create_source_html(sources):
@@ -92,6 +158,9 @@ def create_category_chart(selected_models, selected_categories):
     if not selected_models:
         return px.bar(title='Please select at least one model for comparison')
     
+    # Sort categories before processing
+    selected_categories = sort_categories(selected_categories)
+    
     data = []
     for model in selected_models:
         for category in selected_categories:
@@ -129,10 +198,18 @@ def update_detailed_scorecard(model, selected_categories):
             gr.update(visible=False),
             gr.update(visible=False)
         ]
+    
+    print("Selected categories:", selected_categories)
+    print("Available categories in model:", list(models[model]['scores'].keys()))
+
+    # Sort categories before processing
+    selected_categories = sort_categories(selected_categories)
+    metadata_html = create_metadata_card(models[model]['metadata'])
 
-    metadata_md = f"## Model Metadata for {model}\n\n"
-    for key, value in models[model]['metadata'].items():
-        metadata_md += f"**{key}:** {value}\n\n"
+
+    # 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
@@ -144,21 +221,27 @@ def update_detailed_scorecard(model, selected_categories):
             category_data = models[model]['scores'][category_name]
             card_content = f"<div class='card'><div class='card-title'>{category_name}</div>"
             
+            # Sort sections within each category
+            sorted_sections = sorted(category_data.items(), 
+                                  key=lambda x: float(re.match(r'^(\d+\.?\d*)', x[0]).group(1)))
+            
             category_yes = 0
             category_no = 0
             category_na = 0
             
-            for section, details in category_data.items():
+            for section, details in sorted_sections:
                 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"
+                status_class = status.lower()
+                status_icon = "●" if status == "Yes" else "○" if status == "N/A" else "×"
+                
                 card_content += f"<div class='section {section_class}'>"
-                card_content += f"<h3>{section}</h3>"
+                card_content += f"<div class='section-header'><h3>{section}</h3>"
+                card_content += f"<span class='status-badge {status_class}'>{status_icon} {status}</span></div>"
                 
-                # Add sources if they exist
                 if sources:
                     card_content += "<div class='sources-list'>"
                     for source in sources:
@@ -174,13 +257,21 @@ def update_detailed_scorecard(model, selected_categories):
                         card_content += "</div>"
                     card_content += "</div>"
                 
-                # Process questions
                 if questions:
+                    yes_count = sum(1 for v in questions.values() if v)
+                    total_count = len(questions)
+                    
+                    card_content += "<details class='question-accordion'>"
+                    if status == "N/A":
+                        card_content += f"<summary>View {total_count} N/A items</summary>"
+                    else:
+                        card_content += f"<summary>View details ({yes_count}/{total_count} completed)</summary>"
+                    
                     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
+                            icon = "○"
                             category_na += 1
                             total_na += 1
                         else:
@@ -196,23 +287,21 @@ def update_detailed_scorecard(model, selected_categories):
                                 total_no += 1
                         
                         card_content += f"<div class='question-item {style_class}'>{icon} {question}</div>"
-                    card_content += "</div>"
+                    card_content += "</div></details>"
                 
-                card_content += "</div>"  # Close section div
+                card_content += "</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
+            card_content += "</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>"
@@ -220,7 +309,7 @@ def update_detailed_scorecard(model, selected_categories):
         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=metadata_html, visible=True),
         gr.update(value=all_cards_content, visible=True),
         gr.update(value=total_score_md, visible=True)
     ]
@@ -365,8 +454,152 @@ css = """
     background-color: #2d2d2d;
     color: #999;
 }
+
+.section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+}
+
+.status-badge {
+    font-size: 0.9em;
+    padding: 4px 8px;
+    border-radius: 12px;
+    font-weight: 500;
+}
+
+.status-badge.yes {
+    background-color: #e6ffe6;
+    color: #006600;
+}
+
+.status-badge.no {
+    background-color: #ffe6e6;
+    color: #990000;
+}
+
+.status-badge.n\/a {
+    background-color: #f0f0f0;
+    color: #666666;
+}
+
+.question-accordion {
+    margin-top: 10px;
+}
+
+.question-accordion summary {
+    cursor: pointer;
+    padding: 8px;
+    background-color: #f8f9fa;
+    border-radius: 4px;
+    margin-bottom: 10px;
+    font-weight: 500;
+}
+
+.question-accordion summary:hover {
+    background-color: #e9ecef;
+}
+
+.dark .status-badge.yes {
+    background-color: #1a3a1a;
+    color: #90EE90;
+}
+
+.dark .status-badge.no {
+    background-color: #3a1a1a;
+    color: #FFB6B6;
+}
+
+.dark .status-badge.n\/a {
+    background-color: #2d2d2d;
+    color: #999999;
+}
+
+.dark .question-accordion summary {
+    background-color: #2a2a2a;
+}
+
+.dark .question-accordion summary:hover {
+    background-color: #333333;
+}
+.metadata-card {
+    margin-bottom: 30px;
+    width: 100% !important;
+}
+
+.metadata-content {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.metadata-row {
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+    line-height: 1.5;
+}
+
+.metadata-label {
+    font-weight: 600;
+    min-width: 100px;
+    color: #555;
+}
+
+.metadata-value {
+    color: #333;
+}
+
+.metadata-link {
+    color: #007bff;
+    text-decoration: none;
+}
+
+.metadata-link:hover {
+    text-decoration: underline;
+}
+
+.modality-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+.modality-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 4px 10px;
+    background-color: #f0f7ff;
+    border: 1px solid #cce3ff;
+    border-radius: 15px;
+    font-size: 0.9em;
+    color: #0066cc;
+}
+
+.dark .metadata-label {
+    color: #aaa;
+}
+
+.dark .metadata-value {
+    color: #ddd;
+}
+
+.dark .metadata-link {
+    color: #66b3ff;
+}
+
+.dark .modality-badge {
+    background-color: #1a2733;
+    border-color: #2c3e50;
+    color: #99ccff;
+}
 """
 
+first_model = next(iter(models.values()))
+category_choices = list(first_model['scores'].keys())
+
 with gr.Blocks(css=css) as demo:
     gr.Markdown("# AI Model Social Impact Scorecard Dashboard")
     
@@ -382,9 +615,9 @@ with gr.Blocks(css=css) as demo:
         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],
+        category_filter = gr.CheckboxGroup(choices=category_choices,
                                          label="Filter Categories", 
-                                         value=[cat.name for cat in scorecard_template],
+                                         value=category_choices,
                                          visible=False)
     
     with gr.Column(visible=True) as leaderboard_tab:
@@ -394,7 +627,7 @@ with gr.Blocks(css=css) as demo:
         category_chart = gr.Plot()
     
     with gr.Column(visible=False) as detailed_scorecard_tab:
-        model_metadata = gr.Markdown()
+        model_metadata = gr.HTML()
         all_category_cards = gr.HTML()
         total_score = gr.Markdown()