LLM-PII-Detection-Leaderboard

Running

App Files Files Community

Luis Kalckstein commited on Jul 23, 2025

Commit

eeb055e

unverified ·

1 Parent(s): 32e8dbc

Improving layout

Browse files

Files changed (2) hide show

app.py +1 -1
pii_leaderboard.py +36 -261

app.py CHANGED Viewed

@@ -8,7 +8,7 @@ from pii_leaderboard import create_app
 if __name__ == "__main__":
     demo = create_app()
     demo.launch(
-        server_name="0.0.0.0",
         server_port=7860,
         share=False
     )

 if __name__ == "__main__":
     demo = create_app()
     demo.launch(
+        server_name="127.0.0.1",
         server_port=7860,
         share=False
     )

pii_leaderboard.py CHANGED Viewed

@@ -398,176 +398,6 @@ def create_pii_leaderboard():
         return card_html
-    def download_performance_card(model_name):
-        """Generate and return downloadable HTML file for the model performance card"""
-        if not model_name:
-            return None
-        card_html = generate_performance_card(model_name)
-        # Create a complete HTML document
-        full_html = f"""
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{model_name} - Performance Card</title>
-    <style>
-        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
-        :root {{
-            --bg-primary: #1A1414;
-            --bg-secondary: rgba(239, 235, 231, 0.03);
-            --bg-card: rgba(239, 235, 231, 0.02);
-            --border-subtle: rgba(239, 235, 231, 0.08);
-            --text-primary: #EFEBE7;
-            --text-secondary: #C2B8AE;
-            --text-muted: #67594B;
-            --accent-primary: #DE9DCC;
-            --accent-secondary: #F25E45;
-            --accent-tertiary: #6EB579;
-            --accent-quaternary: #F0C968;
-            --glow-primary: rgba(222, 157, 204, 0.4);
-        }}
-        body {{
-            margin: 0;
-            padding: 40px;
-            background: var(--bg-primary);
-            font-family: 'Inter', sans-serif;
-            color: var(--text-primary);
-        }}
-        .performance-card {{
-            background: linear-gradient(145deg, rgba(26, 20, 20, 0.98) 0%, rgba(222, 157, 204, 0.05) 100%);
-            border: 2px solid var(--accent-primary);
-            border-radius: 24px;
-            padding: 32px;
-            max-width: 700px;
-            margin: 0 auto;
-            box-shadow:
-                0 20px 40px rgba(0, 0, 0, 0.5),
-                0 0 80px rgba(222, 157, 204, 0.2);
-        }}
-        .card-header {{
-            text-align: center;
-            margin-bottom: 24px;
-        }}
-        .card-model-name {{
-            font-size: 2rem;
-            font-weight: 800;
-            background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            margin-bottom: 8px;
-            line-height: 1.2;
-        }}
-        .card-stars {{
-            font-size: 1.2rem;
-            margin: 8px 0;
-        }}
-        .metrics-grid {{
-            display: grid;
-            grid-template-columns: repeat(2, 1fr);
-            gap: 16px;
-            margin: 24px 0;
-        }}
-        .metric-item {{
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            padding: 16px;
-            background: rgba(239, 235, 231, 0.05);
-            border-radius: 12px;
-            border: 1px solid var(--border-subtle);
-        }}
-        .metric-icon {{
-            font-size: 1.5rem;
-            margin-bottom: 8px;
-        }}
-        .metric-label {{
-            font-size: 0.85rem;
-            color: var(--text-secondary);
-            margin-bottom: 4px;
-            text-align: center;
-        }}
-        .metric-value {{
-            font-size: 1.1rem;
-            font-weight: 700;
-            color: var(--text-primary);
-            text-align: center;
-        }}
-        .domains-section {{
-            margin-top: 24px;
-        }}
-        .domains-title {{
-            color: var(--text-primary);
-            font-size: 1.2rem;
-            margin-bottom: 16px;
-            text-align: center;
-        }}
-        .domains-grid {{
-            display: grid;
-            grid-template-columns: repeat(5, 1fr);
-            gap: 12px;
-        }}
-        .domain-item {{
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            padding: 12px;
-            background: rgba(239, 235, 231, 0.03);
-            border-radius: 8px;
-            border: 1px solid var(--border-subtle);
-        }}
-        .domain-name {{
-            font-size: 1.2rem;
-            margin-bottom: 4px;
-        }}
-        .domain-score {{
-            font-size: 0.9rem;
-            font-weight: 600;
-        }}
-        .card-footer {{
-            text-align: center;
-            margin-top: 24px;
-            padding-top: 16px;
-            border-top: 1px solid var(--border-subtle);
-        }}
-        .card-url {{
-            color: var(--text-secondary);
-            font-size: 0.9rem;
-        }}
-    </style>
-</head>
-<body>
-    {card_html}
-</body>
-</html>
-"""
-        # Create a temporary file
-        with tempfile.NamedTemporaryFile(mode='w', delete=False, suffix=f'_{model_name.replace(" ", "_")}_performance_card.html', encoding='utf-8') as f:
-            f.write(full_html)
-            return f.name
     # Load initial data
     initial_df = load_leaderboard_data()
     initial_table = filter_and_sort_data("All", "All", "Overall Accuracy", "Descending")
@@ -575,39 +405,38 @@ def create_pii_leaderboard():
     # Display header
     gr.HTML(HEADER_CONTENT)
-    # Document type filter section
     gr.HTML("""
     <div class="dark-container" style="margin-bottom: 32px;">
         <div class="section-header">
-            <span class="section-icon" style="color: var(--accent-primary);">📄</span>
             <h3 style="margin: 0; color: var(--text-primary); font-size: 1.5rem; font-family: 'Inter', sans-serif; font-weight: 700;">
-                Document Type Analysis
             </h3>
         </div>
         <p style="color: var(--text-secondary); margin-bottom: 20px; font-size: 1.1rem; font-family: 'Inter', sans-serif;">
-            Select a document type to see specialized PII detection performance
         </p>
     """)
-    with gr.Row():
-        document_type_filter = gr.Radio(
-            choices=["All", "Healthcare", "Financial", "Government", "Legal", "Personal"],
-            value="All",
-            label="",
-            interactive=True,
-            elem_classes=["document-type-radio"]
-        )
-    gr.HTML("</div>")
-    # Filter controls
     gr.HTML("""
-    <div class="dark-container" style="margin-bottom: 24px;">
-        <div class="section-header">
-            <span class="section-icon" style="color: var(--accent-secondary);">🔍</span>
-            <h3 style="margin: 0; color: var(--text-primary); font-size: 1.5rem; font-family: 'Inter', sans-serif; font-weight: 700;">
-                Filters & Sorting
-            </h3>
         </div>
     """)
@@ -636,43 +465,39 @@ def create_pii_leaderboard():
                 elem_classes=["compact-radio"]
             )
-    gr.HTML("</div>")
-    # Main leaderboard table
     gr.HTML("""
-    <div class="dark-container" style="margin-bottom: 24px;">
-        <div class="section-header">
-            <span class="section-icon" style="color: var(--accent-primary);">📈</span>
-            <h3 style="margin: 0; color: var(--text-primary); font-size: 1.5rem; font-family: 'Inter', sans-serif; font-weight: 700;">
-                PII Detection Performance Leaderboard
-            </h3>
-        </div>
-        <div class="dataframe-container">
     """)
     leaderboard_table = gr.HTML(initial_table)
     gr.HTML("""
         </div>
     </div>""")
     # Performance Card Section
     gr.HTML("""
     <div class="dark-container" style="margin-top: 32px;">
         <div class="section-header">
             <span class="section-icon" style="color: var(--accent-primary);">🎯</span>
             <h3 style="margin: 0; color: var(--text-primary); font-size: 1.5rem; font-family: 'Inter', sans-serif; font-weight: 700;">
-                Model Performance Card
             </h3>
         </div>
-        <p style="color: var(--text-secondary); margin-bottom: 20px; font-size: 1.1rem; font-family: 'Inter', sans-serif;">
-            Comprehensive performance card for any model - perfect for presentations and reports
         </p>
-        <div style="display: flex; gap: 24px; align-items: flex-start;">
-            <div style="flex: 0 0 280px;">
-                <div style="background: rgba(239, 235, 231, 0.03); border: 1px solid var(--border-subtle);
-                            border-radius: 16px; padding: 20px; position: sticky; top: 20px;">
     """)
     card_model_selector = gr.Dropdown(
@@ -687,7 +512,7 @@ def create_pii_leaderboard():
                 </div>
             </div>
-            <div style="flex: 1; min-width: 0;" id="card-display-container">
     """)
     # Card display area
@@ -695,20 +520,7 @@ def create_pii_leaderboard():
     initial_card_html = generate_performance_card(initial_model) if initial_model else ""
     card_display = gr.HTML(value=initial_card_html, elem_id="performance-card-html")
-    # Download button below the card
-    gr.HTML("""
-        <div style="margin-top: 24px; text-align: center;">
-    """)
-    download_button = gr.DownloadButton(
-        label="📥 Download Performance Card",
-        value=None,
-        variant="primary",
-        elem_classes=["download-card-btn"]
-    )
     gr.HTML("""
-        </div>
             </div>
         </div>
     </div>""")
@@ -897,23 +709,6 @@ def create_pii_leaderboard():
         min-width: auto !important;
         max-width: 120px !important;
     }}
-    .download-card-btn {{
-        background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)) !important;
-        color: white !important;
-        border: none !important;
-        padding: 12px 24px !important;
-        border-radius: 12px !important;
-        font-weight: 600 !important;
-        font-size: 0.95rem !important;
-        transition: all 0.3s ease !important;
-        box-shadow: 0 4px 16px rgba(222, 157, 204, 0.4) !important;
-    }}
-    .download-card-btn:hover {{
-        transform: translateY(-2px) !important;
-        box-shadow: 0 6px 20px rgba(222, 157, 204, 0.6) !important;
-    }}
     </style>
     """)
@@ -940,26 +735,6 @@ def create_pii_leaderboard():
         inputs=[card_model_selector],
         outputs=[card_display]
     )
-    # Download card functionality
-    def update_download_button(model_name):
-        if model_name:
-            file_path = download_performance_card(model_name)
-            return file_path
-        return None
-    card_model_selector.change(
-        fn=update_download_button,
-        inputs=[card_model_selector],
-        outputs=[download_button]
-    )
-    # Methodology section
-    gr.HTML(f"""
-    <div class="dark-container" style="margin-top: 32px;">
-        {METHODOLOGY}
-    </div>
-    """)
 def create_app():
     """Create the main Gradio application"""

         return card_html
     # Load initial data
     initial_df = load_leaderboard_data()
     initial_table = filter_and_sort_data("All", "All", "Overall Accuracy", "Descending")
     # Display header
     gr.HTML(HEADER_CONTENT)
+    # Main leaderboard section with all filters
     gr.HTML("""
     <div class="dark-container" style="margin-bottom: 32px;">
         <div class="section-header">
+            <span class="section-icon" style="color: var(--accent-primary);">📈</span>
             <h3 style="margin: 0; color: var(--text-primary); font-size: 1.5rem; font-family: 'Inter', sans-serif; font-weight: 700;">
+                PII Detection Performance Leaderboard
             </h3>
         </div>
         <p style="color: var(--text-secondary); margin-bottom: 20px; font-size: 1.1rem; font-family: 'Inter', sans-serif;">
+            Filter by document type, model access, and sort by any metric to explore performance
         </p>
+        <!-- Document Type Filter -->
+        <div style="margin-bottom: 24px;">
+            <h4 style="color: var(--text-primary); margin-bottom: 12px; font-size: 1rem;">📄 Document Type</h4>
     """)
+    document_type_filter = gr.Radio(
+        choices=["All", "Healthcare", "Financial", "Government", "Legal", "Personal"],
+        value="All",
+        label="",
+        interactive=True,
+        elem_classes=["document-type-radio"]
+    )
     gr.HTML("""
+        </div>
+        <!-- Other Filters -->
+        <div style="margin-bottom: 24px;">
+            <h4 style="color: var(--text-primary); margin-bottom: 12px; font-size: 1rem;">🔍 Filters & Sorting</h4>
         </div>
     """)
                 elem_classes=["compact-radio"]
             )
     gr.HTML("""
+        <!-- Leaderboard Table -->
+        <div style="margin-top: 24px;">
+            <div class="dataframe-container">
     """)
     leaderboard_table = gr.HTML(initial_table)
     gr.HTML("""
+            </div>
         </div>
     </div>""")
+    # Methodology section
+    gr.HTML(f"""
+    <div class="dark-container" style="margin-top: 32px;">
+        {METHODOLOGY}
+    </div>
+    """)
     # Performance Card Section
     gr.HTML("""
     <div class="dark-container" style="margin-top: 32px;">
         <div class="section-header">
             <span class="section-icon" style="color: var(--accent-primary);">🎯</span>
             <h3 style="margin: 0; color: var(--text-primary); font-size: 1.5rem; font-family: 'Inter', sans-serif; font-weight: 700;">
+                Model Performance Cards
             </h3>
         </div>
+        <p style="color: var(--text-secondary); margin-bottom: 20px; font-size: 1.1rem; font-family: 'Inter', sans-serif; text-align: center;">
+            Dive deep into individual model performance across all metrics and document types
         </p>
     """)
     card_model_selector = gr.Dropdown(
                 </div>
             </div>
+            <div style="width: 100%;">
     """)
     # Card display area
     initial_card_html = generate_performance_card(initial_model) if initial_model else ""
     card_display = gr.HTML(value=initial_card_html, elem_id="performance-card-html")
     gr.HTML("""
             </div>
         </div>
     </div>""")
         min-width: auto !important;
         max-width: 120px !important;
     }}
     </style>
     """)
         inputs=[card_model_selector],
         outputs=[card_display]
     )
 def create_app():
     """Create the main Gradio application"""