font color change

app.py

@@ -109,38 +109,53 @@ def predict_and_explain(text, model_choice, explainer_choice):
     return result, visualization_html, plot_html, explanation
 
 # Create Gradio interface
+# app.py (updated with better styling)
+# ... [previous imports and code] ...
+
+# Create Gradio interface with better styling
 with gr.Blocks(
     title="Explainability Sandbox for Transformers", 
     css="""
     footer {visibility: hidden}
     .gradio-container {max-width: 1200px !important}
+    .gradio-button {background: linear-gradient(45deg, #4ecdc4, #556270) !important; color: white !important;}
+    .gradio-button:hover {background: linear-gradient(45deg, #45b7af, #44505d) !important;}
+    .gradio-radio-item {padding: 8px 12px !important; border-radius: 5px !important;}
+    .gradio-radio-item.selected {background: #4ecdc4 !important; color: white !important;}
     """
 ) as demo:
     gr.Markdown("""
-    # 🔍 Explainability Sandbox for Transformers
-    *Explore how transformer models make decisions with various explanation methods.*
+    <div style="text-align: center; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 10px; color: white;">
+    <h1 style="margin: 0; font-size: 2.5em;">🔍 Explainability Sandbox for Transformers</h1>
+    <p style="margin: 10px 0 0 0; font-size: 1.2em; opacity: 0.9;">Explore how transformer models make decisions with various explanation methods</p>
+    </div>
     """)
     
     with gr.Row():
         with gr.Column(scale=1):
-            gr.Markdown("### Input Settings")
+            gr.Markdown("""
+            ### ⚙️ Input Settings
+            """)
             text_input = gr.Textbox(
                 label="Input Text", 
                 lines=5, 
                 placeholder="Enter text to analyze...",
-                value="The movie was fantastic with great acting and an engaging plot."
+                value="The movie was fantastic with great acting and an engaging plot.",
+                elem_classes=["input-box"]
             )
             model_choice = gr.Dropdown(
                 choices=list(MODELS.keys()), 
                 label="Model", 
-                value="BERT Base (English)"
+                value="BERT Base (English)",
+                elem_classes=["dropdown"]
             )
             explainer_choice = gr.Radio(
                 choices=["LIME", "SHAP", "Captum"], 
                 label="Explanation Method", 
-                value="LIME"
+                value="LIME",
+                elem_classes=["radio-group"]
             )
-            analyze_btn = gr.Button("Analyze", variant="primary")
+            analyze_btn = gr.Button("Analyze Text", variant="primary", elem_classes=["primary-button"])
             
             gr.Markdown("""
             ---
@@ -157,20 +172,34 @@ with gr.Blocks(
             """)
         
         with gr.Column(scale=2):
-            gr.Markdown("### Results")
-            output_text = gr.Textbox(label="Prediction Result")
+            gr.Markdown("""
+            ### 📊 Results
+            """)
+            output_text = gr.Textbox(
+                label="Prediction Result", 
+                elem_classes=["result-box"]
+            )
             
-            gr.Markdown("#### Token Attributions")
+            gr.Markdown("""
+            #### 🎨 Token Attributions
+            *Darker colors indicate stronger influence*
+            """)
             output_vis = gr.HTML(label="Visualization")
             
-            gr.Markdown("#### Attribution Plot")
+            gr.Markdown("""
+            #### 📈 Attribution Plot
+            """)
             output_plot = gr.HTML()
             
-            gr.Markdown("#### Explanation Data")
+            gr.Markdown("""
+            #### 🔍 Explanation Data
+            """)
             explanation_output = gr.JSON(label="Detailed Data")
     
     # Examples
-    gr.Markdown("### Examples")
+    gr.Markdown("""
+    ### 🚀 Quick Examples
+    """)
     gr.Examples(
         examples=[
             ["This movie was absolutely fantastic! The acting was superb and the plot kept me engaged throughout.", "BERT Base (English)", "LIME"],
@@ -180,13 +209,14 @@ with gr.Blocks(
         inputs=[text_input, model_choice, explainer_choice],
         outputs=[output_text, output_vis, output_plot, explanation_output],
         fn=predict_and_explain,
-        cache_examples=False
+        cache_examples=False,
+        label="Click any example to try it out:"
     )
     
     # Footer with model card info
     gr.Markdown("---")
     gr.Markdown("""
-    ### 📖 Model Card & Ethical Considerations
+    ### 📋 Model Card & Ethical Considerations
     For details about model capabilities, limitations, and ethical considerations, 
     please see our [Model Card](https://huggingface.co/docs/hub/model-cards).
     
@@ -196,12 +226,56 @@ with gr.Blocks(
     - Be cautious about over-interpreting individual token attributions
     - Models may reflect biases present in training data
     """)
-    
-    analyze_btn.click(
-        fn=predict_and_explain,
-        inputs=[text_input, model_choice, explainer_choice],
-        outputs=[output_text, output_vis, output_plot, explanation_output]
-    )
+
+# Add custom CSS for better styling
+custom_css = """
+.input-box textarea {
+    border-radius: 8px !important;
+    border: 2px solid #e1e5e9 !important;
+    padding: 12px !important;
+}
+
+.dropdown select {
+    border-radius: 8px !important;
+    border: 2px solid #e1e5e9 !important;
+    padding: 10px !important;
+}
+
+.radio-group .gr-radio-item {
+    border: 2px solid #e1e5e9 !important;
+    border-radius: 8px !important;
+    margin: 5px !important;
+    padding: 10px 15px !important;
+}
+
+.radio-group .gr-radio-item.selected {
+    background: #4ecdc4 !important;
+    color: white !important;
+    border-color: #3bb5ad !important;
+}
+
+.primary-button {
+    border-radius: 8px !important;
+    padding: 12px 24px !important;
+    font-weight: bold !important;
+    font-size: 16px !important;
+}
+
+.result-box input {
+    border-radius: 8px !important;
+    border: 2px solid #4ecdc4 !important;
+    background-color: #f8f9fa !important;
+    font-weight: bold !important;
+    padding: 12px !important;
+}
+
+.gr-box {
+    border-radius: 10px !important;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
+}
+"""
+
+demo.css = custom_css
 
 if __name__ == "__main__":
-    demo.launch(share=False)  # Set to False for Hugging Face Spaces
+    demo.launch(share=False)

utils/visualization.py

@@ -1,4 +1,4 @@
-# utils/visualization.py (updated)
+# utils/visualization.py (updated with better colors)
 import matplotlib.pyplot as plt
 import matplotlib.colors as mcolors
 import base64
@@ -6,7 +6,7 @@ from io import BytesIO
 import numpy as np
 
 def create_visualization(text, explanation, tokenizer, explainer_type):
-    """Create HTML visualization of token attributions"""
+    """Create HTML visualization of token attributions with better color contrast"""
     try:
         # Tokenize the text
         tokens = tokenizer.tokenize(text)
@@ -41,7 +41,7 @@ def create_visualization(text, explanation, tokenizer, explainer_type):
             <i>Explanation data not available. Showing tokenized text.</i><br>
             '''
             for token in tokens:
-                html_output += f'<span style="margin: 2px; padding: 4px 6px; display: inline-block;">{token.replace("##", "")}</span> '
+                html_output += f'<span style="margin: 2px; padding: 4px 6px; display: inline-block; background-color: #f0f0f0; border: 1px solid #ccc; border-radius: 4px;">{token.replace("##", "")}</span> '
             html_output += '</div>'
             return html_output
         
@@ -68,22 +68,40 @@ def create_visualization(text, explanation, tokenizer, explainer_type):
                 value = token_values[clean_token]
                 norm_value = normalized_values[clean_token]
                 
-                # Determine color based on value (red for negative, blue for positive)
+                # Determine color based on value with better contrast
                 if value < 0:
-                    intensity = min(0.9, abs(norm_value))
-                    color = f"rgba(255, 87, 87, {intensity})"
-                    border = "1px solid rgba(255, 0, 0, 0.3)"
+                    # Negative values: red scale with good contrast
+                    intensity = min(0.95, 0.3 + 0.7 * abs(norm_value))  # Ensure minimum darkness
+                    red = int(255 * intensity)
+                    green = int(200 * (1 - intensity))
+                    blue = int(200 * (1 - intensity))
+                    color = f"rgb({red}, {green}, {blue})"
+                    text_color = "white" if intensity > 0.6 else "black"
+                    border = f"2px solid rgb({min(255, red+30)}, {max(0, green-30)}, {max(0, blue-30)})"
                 else:
-                    intensity = min(0.9, norm_value)
-                    color = f"rgba(92, 167, 255, {intensity})"
-                    border = "1px solid rgba(0, 0, 255, 0.3)"
+                    # Positive values: blue scale with good contrast
+                    intensity = min(0.95, 0.3 + 0.7 * norm_value)  # Ensure minimum darkness
+                    red = int(200 * (1 - intensity))
+                    green = int(200 * (1 - intensity))
+                    blue = int(255 * intensity)
+                    color = f"rgb({red}, {green}, {blue})"
+                    text_color = "white" if intensity > 0.6 else "black"
+                    border = f"2px solid rgb({max(0, red-30)}, {max(0, green-30)}, {min(255, blue+30)})"
                 
-                html_output += f'<span style="background-color: {color}; border: {border}; margin: 2px; padding: 4px 6px; border-radius: 4px; display: inline-block;">{token.replace("##", "")}</span> '
+                html_output += f'<span style="background-color: {color}; color: {text_color}; border: {border}; margin: 2px; padding: 4px 6px; border-radius: 4px; display: inline-block; font-weight: bold;">{token.replace("##", "")}</span> '
             else:
-                html_output += f'<span style="margin: 2px; padding: 4px 6px; display: inline-block;">{token.replace("##", "")}</span> '
+                html_output += f'<span style="margin: 2px; padding: 4px 6px; display: inline-block; background-color: #f0f0f0; border: 1px solid #ccc; border-radius: 4px;">{token.replace("##", "")}</span> '
         
         html_output += '</div>'
         
+        # Add color legend
+        html_output += '''
+        <div style="margin-top: 10px; font-size: 12px; color: #666;">
+        <span style="background-color: rgb(240, 150, 150); padding: 2px 6px; border: 1px solid #d88; border-radius: 3px; margin-right: 10px;">Negative impact</span>
+        <span style="background-color: rgb(150, 150, 240); padding: 2px 6px; border: 1px solid #88d; border-radius: 3px;">Positive impact</span>
+        </div>
+        '''
+        
         return html_output
     
     except Exception as e:
@@ -91,7 +109,7 @@ def create_visualization(text, explanation, tokenizer, explainer_type):
         return f'<div style="color: red; padding: 10px;">Error creating visualization: {str(e)}</div>'
 
 def create_attribution_plot(explanation, method_name):
-    """Create matplotlib visualization of token attributions"""
+    """Create matplotlib visualization of token attributions with better colors"""
     try:
         if not explanation:
             return "<p>No explanation data available</p>"
@@ -112,40 +130,48 @@ def create_attribution_plot(explanation, method_name):
         if not features or not scores:
             return "<p>No valid explanation data available for plotting</p>"
         
-        # Create plot
+        # Create plot with better colors
         fig, ax = plt.subplots(figsize=(12, 6))
         
-        # Create colors based on values
-        colors = ['red' if score < 0 else 'blue' for score in scores]
+        # Create colors based on values - using darker, more saturated colors
+        colors = ['#ff6b6b' if score < 0 else '#4ecdc4' for score in scores]  # Coral red and teal
         
         # Create horizontal bar chart
         y_pos = np.arange(len(features))
-        bars = ax.barh(y_pos, scores, color=colors, alpha=0.7)
+        bars = ax.barh(y_pos, scores, color=colors, alpha=0.8, edgecolor='black', linewidth=0.5)
         
         # Customize plot
         ax.set_yticks(y_pos)
-        ax.set_yticklabels(features)
-        ax.set_xlabel('Attribution Score')
-        ax.set_title(title)
-        ax.axvline(x=0, color='black', linestyle='-', alpha=0.3)
+        ax.set_yticklabels(features, fontsize=10)
+        ax.set_xlabel('Attribution Score', fontsize=12, fontweight='bold')
+        ax.set_title(title, fontsize=14, fontweight='bold')
+        ax.axvline(x=0, color='black', linestyle='-', alpha=0.5, linewidth=1)
+        
+        # Add grid for better readability
+        ax.grid(True, alpha=0.3, axis='x')
         
         # Add value labels on bars
         for i, (bar, score) in enumerate(zip(bars, scores)):
             width = bar.get_width()
             label_x_pos = width + (0.01 * max(scores) if width >= 0 else 0.01 * min(scores))
             ax.text(label_x_pos, bar.get_y() + bar.get_height()/2, 
-                    f'{score:.4f}', ha='left' if width >= 0 else 'right', va='center')
+                    f'{score:.4f}', ha='left' if width >= 0 else 'right', va='center',
+                    fontsize=9, fontweight='bold')
+        
+        # Set background color
+        ax.set_facecolor('#f8f9fa')
+        fig.patch.set_facecolor('#f8f9fa')
         
         plt.tight_layout()
         
         # Convert to HTML
         buf = BytesIO()
-        plt.savefig(buf, format='png', dpi=100, bbox_inches='tight')
+        plt.savefig(buf, format='png', dpi=100, bbox_inches='tight', facecolor=fig.get_facecolor())
         buf.seek(0)
         img_str = base64.b64encode(buf.read()).decode('utf-8')
         plt.close(fig)
         
-        return f'<img src="data:image/png;base64,{img_str}" style="max-width: 100%;">'
+        return f'<img src="data:image/png;base64,{img_str}" style="max-width: 100%; border: 1px solid #ddd; border-radius: 5px;">'
     
     except Exception as e:
         print(f"Plot error: {e}")