Update app.py

app.py

@@ -1,5 +1,6 @@
 import gradio as gr
 from transformers import pipeline
+import numpy as np
 
 # Initialize pipelines
 ocr = pipeline("image-to-text", model="microsoft/trocr-base-printed")
@@ -10,12 +11,10 @@ SUSPICIOUS_PHRASES = [
     "urgent", "immediately", "password", "account locked", "wire transfer",
     "bank verification", "click here", "verification code", "credit card",
     "suspended", "login now", "reset your password", "act now", "unusual activity",
-    "security alert", "confirm your identity", "gift card", "lottery winner",
-    "inheritance", "tax refund", "payment pending"
+    "security alert", "confirm your identity", "gift card", "lottery winner"
 ]
 
 def extract_text_from_image(image):
-    """Extract text from uploaded image using OCR."""
     if image is None:
         return ""
     try:
@@ -25,9 +24,8 @@ def extract_text_from_image(image):
         return f"Error processing image: {str(e)}"
 
 def analyze_text(text):
-    """Analyze text for phishing indicators."""
     if not text.strip():
-        return "No text to analyze.", "", gr.update(visible=False)
+        return "", "", gr.update(visible=False)
     
     # Zero-shot Classification
     candidate_labels = ["Phishing Email", "Legitimate Email"]
@@ -36,155 +34,176 @@ def analyze_text(text):
     label = result["labels"][0]
     confidence = result["scores"][0]
     
-    # Determine alert level and color
+    # Determine risk level and styling
     if label == "Phishing Email":
         if confidence > 0.8:
             alert_html = """
-                <div style="padding: 15px; background-color: #ffebee; border-left: 6px solid #f44336; margin-bottom: 15px;">
-                    <h3 style="color: #d32f2f; margin: 0;">⚠️ High Risk - Likely Phishing Attempt</h3>
+                <div style="padding: 20px; background: linear-gradient(to right, #ffebee, #ffcdd2); 
+                     border-radius: 12px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 20px;">
+                    <div style="display: flex; align-items: center; gap: 12px;">
+                        <span style="font-size: 24px;">⚠️</span>
+                        <h3 style="color: #c62828; margin: 0; font-size: 18px;">High Risk Detected - Likely Phishing Attempt</h3>
+                    </div>
                 </div>
             """
         else:
             alert_html = """
-                <div style="padding: 15px; background-color: #fff3e0; border-left: 6px solid #ff9800; margin-bottom: 15px;">
-                    <h3 style="color: #f57c00; margin: 0;">⚠️ Medium Risk - Suspicious Content Detected</h3>
+                <div style="padding: 20px; background: linear-gradient(to right, #fff3e0, #ffe0b2); 
+                     border-radius: 12px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 20px;">
+                    <div style="display: flex; align-items: center; gap: 12px;">
+                        <span style="font-size: 24px;">⚡</span>
+                        <h3 style="color: #ef6c00; margin: 0; font-size: 18px;">Medium Risk - Suspicious Content Detected</h3>
+                    </div>
                 </div>
             """
     else:
         alert_html = """
-            <div style="padding: 15px; background-color: #e8f5e9; border-left: 6px solid #4caf50; margin-bottom: 15px;">
-                <h3 style="color: #2e7d32; margin: 0;">✅ Low Risk - Likely Legitimate</h3>
+            <div style="padding: 20px; background: linear-gradient(to right, #e8f5e9, #c8e6c9); 
+                 border-radius: 12px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 20px;">
+                <div style="display: flex; align-items: center; gap: 12px;">
+                    <span style="font-size: 24px;">✅</span>
+                    <h3 style="color: #2e7d32; margin: 0; font-size: 18px;">Low Risk - Likely Legitimate</h3>
+                </div>
             </div>
         """
     
-    # Keyword Analysis
+    # Find suspicious phrases
     found_phrases = []
     text_lower = text.lower()
     for phrase in SUSPICIOUS_PHRASES:
         if phrase in text_lower:
             found_phrases.append(phrase)
     
-    # Generate Detailed Report
+    # Generate detailed analysis report with modern styling
     report = [
-        f"### Analysis Results",
-        f"**Confidence Score:** {confidence:.1%}",
-        f"**Classification:** {label}",
-        "\n### Detected Indicators"
+        "<div style='background: white; padding: 24px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);'>",
+        "<h3 style='color: #1a237e; margin-top: 0;'>Analysis Details</h3>",
+        f"<div style='display: flex; gap: 20px; margin-bottom: 20px;'>",
+        f"<div style='flex: 1; padding: 16px; background: #f5f5f5; border-radius: 8px;'>",
+        f"<strong>Confidence Score:</strong> {confidence:.1%}",
+        "</div>",
+        f"<div style='flex: 1; padding: 16px; background: #f5f5f5; border-radius: 8px;'>",
+        f"<strong>Classification:</strong> {label}",
+        "</div>",
+        "</div>"
     ]
     
     if found_phrases:
-        report.append("🚩 **Suspicious elements found:**")
+        report.extend([
+            "<div style='margin-top: 20px;'>",
+            "<h4 style='color: #d32f2f;'>🚩 Suspicious Elements Detected:</h4>",
+            "<ul style='list-style-type: none; padding-left: 0;'>"
+        ])
         for phrase in found_phrases:
-            report.append(f"- Found '{phrase}'")
+            report.append(f"<li style='margin-bottom: 8px; padding: 8px 12px; background: #ffebee; border-radius: 6px;'>Found: '{phrase}'</li>")
+        report.append("</ul></div>")
     else:
-        report.append("✅ No common suspicious phrases detected.")
+        report.append("<p style='color: #2e7d32;'>✅ No common suspicious phrases detected.</p>")
     
-    report.append("\n### Recommendation")
+    report.append("<div style='margin-top: 20px; padding: 16px; background: #e3f2fd; border-radius: 8px;'>")
     if confidence > 0.9:
-        report.append("🔴 **High confidence in classification - exercise extreme caution!**")
+        report.append("<p style='margin: 0;'><strong>🔴 High confidence in classification - exercise extreme caution!</strong></p>")
     elif confidence > 0.7:
-        report.append("🟡 **Moderate confidence - review carefully and verify sender.**")
+        report.append("<p style='margin: 0;'><strong>🟡 Moderate confidence - review carefully and verify sender.</strong></p>")
     else:
-        report.append("🟢 **Low confidence - but always remain vigilant.**")
-        
+        report.append("<p style='margin: 0;'><strong>🟢 Low confidence - but always remain vigilant.</strong></p>")
+    report.append("</div></div>")
+    
     return alert_html, "\n".join(report), gr.update(visible=True)
 
 def process_input(text_input, image_input):
-    """Process either text input or image input."""
-    # If text is provided, use it directly
     if text_input.strip():
         return analyze_text(text_input)
     
-    # If image is provided, extract text first
     if image_input is not None:
         extracted_text = extract_text_from_image(image_input)
         if extracted_text.strip():
             return analyze_text(extracted_text)
         return (
-            """<div style="padding: 15px; background-color: #fff3e0; border-left: 6px solid #ff9800; margin-bottom: 15px;">
-                <h3 style="color: #f57c00; margin: 0;">⚠️ OCR Processing Error</h3>
+            """<div style="padding: 20px; background: #fff3e0; border-radius: 12px; margin-bottom: 20px;">
+                <h3 style="color: #ef6c00; margin: 0;">⚠️ OCR Processing Error</h3>
             </div>""",
             "Could not extract text from image. Please ensure the image contains clear, readable text.",
             gr.update(visible=False)
         )
     
-    return (
-        "",
-        "Please provide either text or an image to analyze.",
-        gr.update(visible=False)
-    )
+    return "", "Please provide either text or an image to analyze.", gr.update(visible=False)
 
 # Custom theme
 custom_theme = gr.themes.Soft().set(
-    body_background_fill='*background-1',
-    block_background_fill='*background-2',
-    block_label_background_fill='*background-3',
-    input_background_fill='*background-2',
-    button_primary_background_fill='*primary-500',
-    button_primary_text_color='white',
+    body_background_fill="#f8f9fa",
+    block_background_fill="white",
+    block_label_background_fill="*background-3",
+    input_background_fill="white",
+    button_primary_background_fill="#1a237e",
+    button_primary_text_color="white",
 )
 
-# Create Gradio interface with tabs
-with gr.Blocks(theme=custom_theme) as demo:
-    gr.Markdown("""
-        # 📧 AI Phishing Detector
-        ### Analyze emails and messages for potential phishing attempts
-        Upload a screenshot or paste text to check for suspicious content
+# Create Gradio interface with modern design
+with gr.Blocks(theme=custom_theme, css="""
+    .container { max-width: 1000px; margin: auto; }
+    .header { text-align: center; margin-bottom: 2rem; }
+    .tool-description { max-width: 800px; margin: 0 auto 2rem auto; }
+    .input-section { margin-bottom: 2rem; }
+    .analysis-section { margin-top: 2rem; }
+""") as demo:
+    gr.HTML("""
+        <div class="header">
+            <h1 style="color: #1a237e; font-size: 2.5rem; margin-bottom: 1rem;">🛡️ AI Phishing Guard</h1>
+            <p style="color: #555; font-size: 1.2rem;">Protect yourself from phishing attempts with AI-powered analysis</p>
+        </div>
     """)
     
-    with gr.Row():
-        with gr.Column(scale=1):
-            gr.Markdown("""
-                ### How to Use
-                1. Either paste message text or upload a screenshot
-                2. Click 'Analyze' to check for phishing indicators
-                3. Review the detailed analysis results
-                
-                ℹ️ This tool uses AI to detect:
-                - Suspicious language patterns
-                - Common phishing phrases
-                - Urgency indicators
-                - Security threat language
+    with gr.Row(equal_height=True):
+        with gr.Column():
+            gr.HTML("""
+                <div class="tool-description">
+                    <h3 style="color: #1a237e;">How to Use</h3>
+                    <ol style="color: #555; line-height: 1.6;">
+                        <li>Either paste message text or upload a screenshot</li>
+                        <li>Click 'Analyze' to check for phishing indicators</li>
+                        <li>Review the detailed analysis results</li>
+                    </ol>
+                    <div style="background: #e3f2fd; padding: 16px; border-radius: 8px; margin-top: 1rem;">
+                        <h4 style="color: #1a237e; margin-top: 0;">This tool detects:</h4>
+                        <ul style="color: #555; margin-bottom: 0;">
+                            <li>Suspicious language patterns</li>
+                            <li>Common phishing phrases</li>
+                            <li>Urgency indicators</li>
+                            <li>Security threat language</li>
+                        </ul>
+                    </div>
+                </div>
             """)
+    
+    with gr.Tabs():
+        with gr.TabItem("✏️ Text Input"):
+            text_input = gr.Textbox(
+                lines=8,
+                label="Message Text",
+                placeholder="Paste email or message content here...",
+                elem_id="text_input"
+            )
         
-        with gr.Column(scale=2):
-            with gr.Tab("✏️ Text Input"):
-                text_input = gr.Textbox(
-                    lines=8,
-                    label="Message Text",
-                    placeholder="Paste email or message content here...",
-                    elem_id="text_input"
-                )
-            
-            with gr.Tab("📷 Screenshot Upload"):
-                image_input = gr.Image(
-                    label="Upload Screenshot",
-                    type="pil",
-                    elem_id="image_input"
-                )
-            
-            analyze_button = gr.Button("🔍 Analyze", variant="primary", size="lg")
-    
-    with gr.Row():
-        with gr.Column():
-            alert_html = gr.HTML(label="Alert")
-            analysis = gr.Markdown(label="Detailed Analysis")
-            
-            with gr.Accordion("ℹ️ About this tool", open=False):
-                gr.Markdown("""
-                    This tool uses advanced AI models to analyze messages for potential phishing attempts:
-                    - OCR technology to extract text from screenshots
-                    - Zero-shot classification for pattern detection
-                    - Keyword analysis for suspicious content
-                    
-                    **Disclaimer:** This is an educational demo. Always verify suspicious messages with your IT department.
-                """)
+        with gr.TabItem("📷 Screenshot Upload"):
+            image_input = gr.Image(
+                label="Upload Screenshot",
+                type="pil",
+                elem_id="image_input"
+            )
+    
+    analyze_button = gr.Button("🔍 Analyze", variant="primary", size="lg")
+    
+    with gr.Column(visible=True) as output_col:
+        alert_html = gr.HTML()
+        analysis = gr.HTML()
     
     # Examples
     examples = [
         ["Subject: URGENT - Account Security Alert\n\nDear User,\n\nWe detected unusual activity in your account. Click here immediately to verify your identity and reset your password. If you don't respond within 24 hours, your account will be suspended.\n\nBank Security Team", None],
         ["Subject: Team Meeting Tomorrow\n\nHi everyone,\n\nJust a reminder that we have our weekly team meeting tomorrow at 10 AM in the main conference room. Please bring your project updates.\n\nBest regards,\nSarah", None],
     ]
+    
     gr.Examples(
         examples=examples,
         inputs=[text_input, image_input],
@@ -193,11 +212,10 @@ with gr.Blocks(theme=custom_theme) as demo:
         cache_examples=True
     )
     
-    # Set up event handler
     analyze_button.click(
         fn=process_input,
         inputs=[text_input, image_input],
-        outputs=[alert_html, analysis]
+        outputs=[alert_html, analysis, output_col]
     )
 
 # Launch the app