enhanced UI with improved styling and user instructions

app.py

@@ -240,29 +240,168 @@ def create_demo_image():
     
     return img
 
+# Minimal CSS for basic styling without breaking functionality
+custom_css = """
+/* Basic styling without interfering with dropdowns */
+.gradio-container {
+    background: linear-gradient(135deg, #0f1419 0%, #1a1f2e 50%, #0f1419 100%);
+    font-family: 'Inter', sans-serif;
+}
+
+/* Header styling */
+.main-header {
+    background: rgba(99, 102, 241, 0.05);
+    border-radius: 20px;
+    padding: 2.5rem;
+    margin-bottom: 2rem;
+}
+
+/* Button styling */
+button.primary {
+    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+    border: none;
+    color: white;
+    font-weight: 600;
+    padding: 14px 32px;
+    border-radius: 12px;
+}
+
+button.primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 24px rgba(99, 102, 241, 0.6);
+}
+
+/* Block styling */
+.block {
+    background: rgba(30, 41, 59, 0.4);
+    border-radius: 16px;
+    padding: 1.5rem;
+    border: 1px solid rgba(99, 102, 241, 0.15);
+}
+
+/* Tab styling */
+.tab-nav button {
+    background: rgba(30, 41, 59, 0.5);
+    border: 1px solid rgba(99, 102, 241, 0.2);
+    border-radius: 12px;
+    padding: 14px 28px;
+    margin: 0 6px;
+    color: #94a3b8;
+    font-weight: 600;
+}
+
+.tab-nav button.selected {
+    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+    color: white;
+}
+"""
+
 # Create the Gradio interface
-with gr.Blocks(theme=gr.themes.Soft(), title="ViT Auditing Toolkit") as demo:
-    gr.Markdown(
+with gr.Blocks(theme=gr.themes.Soft(), css=custom_css, title="ViT Auditing Toolkit") as demo:
+    # Main Header
+    gr.HTML(
         """
-        # 🎯 ViT Auditing Toolkit
-        ### An Interactive Dashboard for Model Explainability and Validation
-        
-        Upload an image or use the demo image to analyze Vision Transformer model predictions 
-        and explore various explanation methods.
+        <div class="main-header">
+            <h1 style="
+                font-size: 3rem; 
+                font-weight: 800; 
+                background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
+                -webkit-background-clip: text;
+                -webkit-text-fill-color: transparent;
+                margin-bottom: 0.5rem;
+                text-align: center;
+            ">
+                🎯 ViT Auditing Toolkit
+            </h1>
+            <p style="
+                font-size: 1.25rem; 
+                color: #94a3b8; 
+                text-align: center;
+                font-weight: 500;
+                margin-bottom: 0;
+            ">
+                Comprehensive Model Explainability and Validation Dashboard
+            </p>
+        </div>
+        """
+    )
+    
+    # About Section
+    gr.HTML(
+        """
+        <div style="
+            background: rgba(30, 41, 59, 0.4);
+            border-radius: 16px;
+            padding: 2rem;
+            margin-bottom: 2rem;
+            border: 1px solid rgba(99, 102, 241, 0.15);
+        ">
+            <h2 style="font-size: 1.75rem; font-weight: 700; color: #e0e7ff; margin-bottom: 1rem;">
+                🛠️ About This Toolkit
+            </h2>
+            
+            <p style="color: #94a3b8; line-height: 1.8; font-size: 1.05rem; margin-bottom: 1.5rem;">
+                This interactive dashboard provides comprehensive auditing capabilities for Vision Transformer models, 
+                enabling researchers and practitioners to understand, validate, and improve their AI models through 
+                multiple explainability techniques.
+            </p>
+            
+            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem;">
+                <div style="background: rgba(99, 102, 241, 0.08); padding: 1.5rem; border-radius: 12px; border: 1px solid rgba(99, 102, 241, 0.2);">
+                    <div style="font-size: 2rem; margin-bottom: 0.5rem;">🔍</div>
+                    <strong style="color: #a5b4fc; font-size: 1.1rem;">Basic Explainability</strong>
+                    <p style="margin-top: 0.5rem; font-size: 0.9rem; color: #94a3b8;">
+                        Understand model predictions with attention maps, GradCAM, and SHAP visualizations
+                    </p>
+                </div>
+                
+                <div style="background: rgba(99, 102, 241, 0.08); padding: 1.5rem; border-radius: 12px; border: 1px solid rgba(99, 102, 241, 0.2);">
+                    <div style="font-size: 2rem; margin-bottom: 0.5rem;">🔄</div>
+                    <strong style="color: #c4b5fd; font-size: 1.1rem;">Counterfactual Analysis</strong>
+                    <p style="margin-top: 0.5rem; font-size: 0.9rem; color: #94a3b8;">
+                        Test prediction robustness by systematically perturbing image regions
+                    </p>
+                </div>
+                
+                <div style="background: rgba(99, 102, 241, 0.08); padding: 1.5rem; border-radius: 12px; border: 1px solid rgba(99, 102, 241, 0.2);">
+                    <div style="font-size: 2rem; margin-bottom: 0.5rem;">📊</div>
+                    <strong style="color: #f9a8d4; font-size: 1.1rem;">Confidence Calibration</strong>
+                    <p style="margin-top: 0.5rem; font-size: 0.9rem; color: #94a3b8;">
+                        Evaluate whether model confidence scores accurately reflect prediction reliability
+                    </p>
+                </div>
+                
+                <div style="background: rgba(99, 102, 241, 0.08); padding: 1.5rem; border-radius: 12px; border: 1px solid rgba(99, 102, 241, 0.2);">
+                    <div style="font-size: 2rem; margin-bottom: 0.5rem;">⚖️</div>
+                    <strong style="color: #93c5fd; font-size: 1.1rem;">Bias Detection</strong>
+                    <p style="margin-top: 0.5rem; font-size: 0.9rem; color: #94a3b8;">
+                        Identify performance variations across different demographic or data subgroups
+                    </p>
+                </div>
+            </div>
+        </div>
         """
     )
     
     # Model selection (shared across all tabs)
     with gr.Row():
-        model_choice = gr.Dropdown(
-            choices=list(SUPPORTED_MODELS.keys()),
-            value="ViT-Base",
-            label="🎯 Select Model",
-            info="Choose which Vision Transformer model to use"
-        )
+        with gr.Column(scale=3):
+            model_choice = gr.Dropdown(
+                choices=list(SUPPORTED_MODELS.keys()),
+                value="ViT-Base",
+                label="🎯 Select Model",
+                info="Choose which Vision Transformer model to use"
+            )
         
-        load_btn = gr.Button("🔄 Load Model", variant="primary")
-        model_status = gr.Textbox(label="Model Status", interactive=False)
+        with gr.Column(scale=1):
+            load_btn = gr.Button("🔄 Load Model", variant="primary", size="lg")
+    
+    with gr.Row():
+        model_status = gr.Textbox(
+            label="📡 Model Status", 
+            interactive=False,
+            placeholder="Select a model and click 'Load Model' to begin..."
+        )
     
     load_btn.click(
         fn=lambda model: load_selected_model(SUPPORTED_MODELS[model]),
@@ -274,12 +413,20 @@ with gr.Blocks(theme=gr.themes.Soft(), title="ViT Auditing Toolkit") as demo:
     with gr.Tabs():
         # Tab 1: Basic Explainability
         with gr.TabItem("🔍 Basic Explainability"):
+            gr.Markdown(
+                """
+                ### Understanding Model Predictions
+                Visualize what the model "sees" and understand which features influence its decisions.
+                """
+            )
+            
             with gr.Row():
                 with gr.Column(scale=1):
                     image_input = gr.Image(
                         label="📁 Upload Image",
                         type="pil",
-                        value=create_demo_image()
+                        sources=["upload", "clipboard"],
+                        height=350
                     )
                     
                     with gr.Accordion("⚙️ Explanation Settings", open=False):
@@ -290,30 +437,39 @@ with gr.Blocks(theme=gr.themes.Soft(), title="ViT Auditing Toolkit") as demo:
                                 "GradientSHAP"
                             ],
                             value="Attention Visualization",
-                            label="Explanation Method"
+                            label="🔬 Explanation Method",
+                            info="Select the explainability technique to apply"
                         )
                         
+                        gr.Markdown("**Attention-specific Parameters:**")
                         with gr.Row():
                             layer_index = gr.Slider(
                                 minimum=0, maximum=11, value=6, step=1,
-                                label="Attention Layer Index"
+                                label="Layer Index",
+                                info="Which transformer layer to visualize"
                             )
                             head_index = gr.Slider(
                                 minimum=0, maximum=11, value=0, step=1,
-                                label="Attention Head Index"
+                                label="Head Index",
+                                info="Which attention head to visualize"
                             )
                     
-                    analyze_btn = gr.Button("🚀 Analyze Image", variant="primary")
-                    status_output = gr.Textbox(label="Status", interactive=False)
+                    analyze_btn = gr.Button("🚀 Analyze Image", variant="primary", size="lg")
+                    status_output = gr.Textbox(
+                        label="📊 Analysis Status", 
+                        interactive=False,
+                        placeholder="Upload an image and click 'Analyze Image' to start..."
+                    )
                 
                 with gr.Column(scale=2):
                     with gr.Row():
                         original_display = gr.Image(
                             label="📸 Processed Image",
-                            interactive=False
+                            interactive=False,
+                            height=300
                         )
                         prediction_display = gr.Plot(
-                            label="📊 Model Predictions"
+                            label="📊 Top Predictions"
                         )
                     
                     explanation_display = gr.Plot(
@@ -329,32 +485,61 @@ with gr.Blocks(theme=gr.themes.Soft(), title="ViT Auditing Toolkit") as demo:
         
         # Tab 2: Counterfactual Analysis
         with gr.TabItem("🔄 Counterfactual Analysis"):
+            gr.Markdown(
+                """
+                ### Testing Model Robustness
+                Systematically perturb image regions to understand which areas are most critical for predictions.
+                """
+            )
+            
             with gr.Row():
                 with gr.Column(scale=1):
                     cf_image_input = gr.Image(
                         label="📁 Upload Image",
                         type="pil",
-                        value=create_demo_image()
+                        sources=["upload", "clipboard"],
+                        height=350
                     )
                     
                     with gr.Accordion("⚙️ Counterfactual Settings", open=True):
                         patch_size = gr.Slider(
                             minimum=16, maximum=64, value=32, step=16,
-                            label="Patch Size"
+                            label="🔲 Patch Size",
+                            info="Size of perturbation patches (larger = fewer patches)"
                         )
                         perturbation_type = gr.Dropdown(
                             choices=["blur", "blackout", "gray", "noise"],
                             value="blur",
-                            label="Perturbation Type"
+                            label="🎨 Perturbation Type",
+                            info="How to modify image patches"
                         )
+                        
+                        gr.Markdown("""
+                        **Perturbation Types:**
+                        - **Blur**: Gaussian blur effect
+                        - **Blackout**: Replace with black pixels
+                        - **Gray**: Convert to grayscale
+                        - **Noise**: Add random noise
+                        """)
                     
-                    cf_analyze_btn = gr.Button("🔄 Run Counterfactual Analysis", variant="primary")
-                    cf_status_output = gr.Textbox(label="Status", interactive=False)
+                    cf_analyze_btn = gr.Button("🔄 Run Counterfactual Analysis", variant="primary", size="lg")
+                    cf_status_output = gr.Textbox(
+                        label="📊 Analysis Status", 
+                        interactive=False,
+                        placeholder="Upload an image and click to start counterfactual analysis..."
+                    )
                 
                 with gr.Column(scale=2):
                     cf_explanation_display = gr.Plot(
                         label="🔄 Counterfactual Analysis Results"
                     )
+                    
+                    gr.Markdown("""
+                    **Understanding Results:**
+                    - **Confidence Change**: How much the model's certainty shifts
+                    - **Prediction Flip Rate**: Percentage of patches causing misclassification
+                    - **Sensitive Regions**: Areas most critical to the model's decision
+                    """)
             
             cf_analyze_btn.click(
                 fn=analyze_counterfactual,
@@ -364,27 +549,59 @@ with gr.Blocks(theme=gr.themes.Soft(), title="ViT Auditing Toolkit") as demo:
         
         # Tab 3: Confidence Calibration
         with gr.TabItem("📊 Confidence Calibration"):
+            gr.Markdown(
+                """
+                ### Evaluating Prediction Reliability
+                Assess whether the model's confidence scores accurately reflect the likelihood of correct predictions.
+                """
+            )
+            
             with gr.Row():
                 with gr.Column(scale=1):
                     cal_image_input = gr.Image(
-                        label="📁 Upload Sample Image (Used to generate demo test set)",
+                        label="📁 Upload Sample Image",
                         type="pil",
-                        value=create_demo_image()
+                        sources=["upload", "clipboard"],
+                        height=350
                     )
                     
+                    gr.Markdown("""
+                    ℹ️ *Note: This demo uses the uploaded image to create a test set. 
+                    In production, use a proper validation dataset.*
+                    """)
+                    
                     with gr.Accordion("⚙️ Calibration Settings", open=True):
                         n_bins = gr.Slider(
                             minimum=5, maximum=20, value=10, step=1,
-                            label="Number of Bins"
+                            label="📊 Number of Bins",
+                            info="Granularity of calibration analysis"
                         )
+                        
+                        gr.Markdown("""
+                        **Calibration Metrics:**
+                        - **Perfect calibration**: Confidence matches accuracy
+                        - **Overconfident**: High confidence, low accuracy
+                        - **Underconfident**: Low confidence, high accuracy
+                        """)
                     
-                    cal_analyze_btn = gr.Button("📊 Analyze Calibration", variant="primary")
-                    cal_status_output = gr.Textbox(label="Status", interactive=False)
+                    cal_analyze_btn = gr.Button("📊 Analyze Calibration", variant="primary", size="lg")
+                    cal_status_output = gr.Textbox(
+                        label="📊 Analysis Status", 
+                        interactive=False,
+                        placeholder="Upload an image and click to analyze calibration..."
+                    )
                 
                 with gr.Column(scale=2):
                     cal_explanation_display = gr.Plot(
                         label="📊 Calibration Analysis Results"
                     )
+                    
+                    gr.Markdown("""
+                    **Interpreting Calibration:**
+                    - A well-calibrated model's confidence should match its accuracy
+                    - If the model predicts 80% confidence, it should be correct 80% of the time
+                    - Large deviations indicate calibration issues requiring attention
+                    """)
             
             cal_analyze_btn.click(
                 fn=analyze_calibration,
@@ -394,21 +611,54 @@ with gr.Blocks(theme=gr.themes.Soft(), title="ViT Auditing Toolkit") as demo:
         
         # Tab 4: Bias Detection
         with gr.TabItem("⚖️ Bias Detection"):
+            gr.Markdown(
+                """
+                ### Identifying Performance Disparities
+                Detect potential biases by comparing model performance across different data subgroups.
+                """
+            )
+            
             with gr.Row():
                 with gr.Column(scale=1):
                     bias_image_input = gr.Image(
-                        label="📁 Upload Sample Image (Used to generate demo subgroups)",
+                        label="📁 Upload Sample Image",
                         type="pil",
-                        value=create_demo_image()
+                        sources=["upload", "clipboard"],
+                        height=350
                     )
                     
-                    bias_analyze_btn = gr.Button("⚖️ Detect Bias", variant="primary")
-                    bias_status_output = gr.Textbox(label="Status", interactive=False)
+                    gr.Markdown("""
+                    ℹ️ *Note: This demo creates synthetic subgroups from your image. 
+                    In production, use predefined demographic or data subgroups.*
+                    """)
+                    
+                    gr.Markdown("""
+                    **Generated Subgroups:**
+                    - Original image (baseline)
+                    - Increased brightness
+                    - Decreased brightness
+                    - Enhanced contrast
+                    """)
+                    
+                    bias_analyze_btn = gr.Button("⚖️ Detect Bias", variant="primary", size="lg")
+                    bias_status_output = gr.Textbox(
+                        label="📊 Analysis Status", 
+                        interactive=False,
+                        placeholder="Upload an image and click to detect potential biases..."
+                    )
                 
                 with gr.Column(scale=2):
                     bias_explanation_display = gr.Plot(
                         label="⚖️ Bias Detection Results"
                     )
+                    
+                    gr.Markdown("""
+                    **Understanding Bias Metrics:**
+                    - Compare confidence scores across subgroups
+                    - Large disparities may indicate systematic biases
+                    - Consider demographic, environmental, and quality variations
+                    - Use findings to improve data collection and model training
+                    """)
             
             bias_analyze_btn.click(
                 fn=analyze_bias_detection,
@@ -417,26 +667,40 @@ with gr.Blocks(theme=gr.themes.Soft(), title="ViT Auditing Toolkit") as demo:
             )
     
     # Footer
-    gr.Markdown(
+    gr.HTML(
         """
-        ---
-        ### 🛠️ About This Toolkit
-        
-        This interactive dashboard provides comprehensive auditing capabilities for Vision Transformer models:
-        
-        - **🔍 Basic Explainability**: Understand model predictions with attention maps, GradCAM, and SHAP
-        - **🔄 Counterfactual Analysis**: Test how predictions change with image perturbations  
-        - **📊 Confidence Calibration**: Evaluate if the model is properly calibrated
-        - **⚖️ Bias Detection**: Identify performance variations across different subgroups
-        
-        Built with ❤️ using Gradio, Transformers, and Captum.
+        <div style="
+            margin-top: 3rem; 
+            padding: 2rem;
+            background: rgba(30, 41, 59, 0.3);
+            border-top: 1px solid rgba(99, 102, 241, 0.2);
+            border-radius: 16px;
+            text-align: center;
+        ">
+            <p style="
+                color: #64748b;
+                font-size: 0.95rem;
+                margin: 0;
+            ">
+                Built with ❤️ using <strong style="color: #a5b4fc;">Gradio</strong>, 
+                <strong style="color: #c4b5fd;">Transformers</strong>, and 
+                <strong style="color: #f9a8d4;">Captum</strong>
+            </p>
+            <p style="
+                color: #475569;
+                font-size: 0.85rem;
+                margin-top: 0.5rem;
+            ">
+                © 2024 ViT Auditing Toolkit • For research and educational purposes
+            </p>
+        </div>
         """
     )
 
 # Launch the application
 if __name__ == "__main__":
     demo.launch(
-        server_name="localhost",  # Changed from "0.0.0.0"
+        server_name="localhost",
         server_port=7860,
         share=False,
         show_error=True