Update app.py

app.py

@@ -1,53 +1,101 @@
-
-
-# gradio_app.py
-
 import gradio as gr
 from transformers import AutoTokenizer, AutoModelForSequenceClassification, pipeline
-# ---------------- Load Model ----------------
+import os
+
+
 def load_model():
+    """Load model from root directory"""
     model_path = "."
-    tokenizer = AutoTokenizer.from_pretrained(model_path)
-    model = AutoModelForSequenceClassification.from_pretrained(model_path)
-    return pipeline(
-        "text-classification",
-        model=model,
-        tokenizer=tokenizer,
-        return_all_scores=True
-    )
+    
+    try:
+        print(f"Loading model from root directory...")
+        tokenizer = AutoTokenizer.from_pretrained(model_path)
+        model = AutoModelForSequenceClassification.from_pretrained(model_path)
+        classifier = pipeline(
+            "text-classification",
+            model=model,
+            tokenizer=tokenizer,
+            return_all_scores=True
+        )
+        print(f"✅ Successfully loaded model")
+        return classifier
+    except Exception as e:
+        print(f"❌ Error loading model: {str(e)}")
+        classifier = pipeline(
+            "text-classification",
+            model="bert-base-uncased",
+            return_all_scores=True
+        )
+        return classifier
+
 classifier = load_model()
-# ---------------- Prediction Logic ----------------
+
+# ============================================================
+# PREDICTION LOGIC WITH CORRECT LABELS
+# ============================================================
+
 def predict(text):
+    """Predict cyberbullying category"""
     if not text.strip():
         return "<div class='warn'>⚠️ Please enter some text.</div>"
-    results = classifier(text)[0]
-    best = max(results, key=lambda x: x["score"])
-    label = best["label"]
-    score = best["score"]
-    if label.lower() == "not_cyberbullying":
-        return f"""
-        <div class='safe'>
-            <div class='checkmark'>✅</div>
-            <div class='safe-text'>Safe Message</div>
-            <div class='confidence-bar'>
-                <div class='confidence-fill safe-fill' style='width: {score*100}%'></div>
+    
+    try:
+        results = classifier(text)[0]
+        best = max(results, key=lambda x: x["score"])
+        label = best["label"]
+        score = best["score"]
+        
+        print(f"Label: {label}, Score: {score}")
+        
+        # Your model labels
+        cyberbullying_types = {
+            "age": {"emoji": "👶", "color": "#ff6b6b", "text": "Age-Based Cyberbullying"},
+            "gender": {"emoji": "⚥️", "color": "#ff8c42", "text": "Gender-Based Cyberbullying"},
+            "ethnicity": {"emoji": "🌍", "color": "#ffa502", "text": "Ethnicity-Based Cyberbullying"},
+            "religion": {"emoji": "🙏", "color": "#ff6b9d", "text": "Religion-Based Cyberbullying"},
+            "other_cyberbullying": {"emoji": "⚠️", "color": "#ff4757", "text": "Other Cyberbullying Detected"},
+            "not_cyberbullying": {"emoji": "✅", "color": "#00ff64", "text": "Safe Message"}
+        }
+        
+        # Get the category info
+        category = cyberbullying_types.get(label.lower(), cyberbullying_types["not_cyberbullying"])
+        
+        # Safe message
+        if label.lower() == "not_cyberbullying":
+            return f"""
+            <div class='safe'>
+                <div class='checkmark'>{category['emoji']}</div>
+                <div class='safe-text'>{category['text']}</div>
+                <div class='confidence-bar'>
+                    <div class='confidence-fill safe-fill' style='width: {score*100}%'></div>
+                </div>
+                <span class='confidence-score'>Confidence: {score:.2%}</span>
             </div>
-            <span class='confidence-score'>Confidence: {score:.2%}</span>
-        </div>
-        """
-    else:
-        return f"""
-        <div class='bully'>
-            <div class='warning-icon'>⚠️</div>
-            <div class='bully-text'>Cyberbullying Detected</div>
-            <div class='label-badge'>{label}</div>
-            <div class='confidence-bar'>
-                <div class='confidence-fill bully-fill' style='width: {score*100}%'></div>
+            """
+        else:
+            # Cyberbullying message
+            return f"""
+            <div class='bully'>
+                <div class='warning-icon'>{category['emoji']}</div>
+                <div class='bully-text'>{category['text']}</div>
+                <div class='label-badge' style='background: {category["color"]}33; border-color: {category["color"]};'>{label}</div>
+                <div class='confidence-bar'>
+                    <div class='confidence-fill bully-fill' style='width: {score*100}%; background: {category["color"]};'></div>
+                </div>
+                <span class='confidence-score'>Confidence: {score:.2%}</span>
             </div>
-            <span class='confidence-score'>Confidence: {score:.2%}</span>
-        </div>
-        """
-# ---------------- UI ----------------
+            """
+            
+    except Exception as e:
+        import traceback
+        print(f"ERROR: {str(e)}")
+        print(traceback.format_exc())
+        return f"<div class='warn'>❌ Error: {str(e)}</div>"
+
+# ============================================================
+# GRADIO INTERFACE WITH PURPLE-TO-BLUE GRADIENT
+# ============================================================
+
 with gr.Blocks(theme=gr.themes.Soft(), css="""
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
 
@@ -58,14 +106,11 @@ with gr.Blocks(theme=gr.themes.Soft(), css="""
 }
 
 html, body {
-    background: linear-gradient(-45deg, #ff4b4b, #ff8c00, #4b7fff, #7d00ff);
-    background-size: 400% 400%;
+    background: linear-gradient(-45deg, #7d00ff, #5500ff, #4b7fff, #0099ff, #00bfff);
+    background-size: 500% 500%;
     animation: gradientBG 15s ease infinite;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     min-height: 100vh;
-    position: fixed;
-    width: 100%;
-    height: 100%;
 }
 
 @keyframes gradientBG {
@@ -89,13 +134,12 @@ html, body {
     font-size: 52px;
     font-weight: 900;
     text-align: center;
-    background: linear-gradient(135deg, #ff4b4b, #ff8c00, #4b7fff, #7d00ff);
+    background: linear-gradient(135deg, #7d00ff, #5500ff, #4b7fff, #0099ff);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     animation: slideInDown 1s ease-out, glow 3s ease-in-out infinite;
     margin-bottom: 10px;
-    text-shadow: 0 0 30px rgba(255, 75, 75, 0.5);
 }
 
 @keyframes slideInDown {
@@ -111,10 +155,10 @@ html, body {
 
 @keyframes glow {
     0%, 100% {
-        text-shadow: 0 0 20px rgba(255, 75, 75, 0.5), 0 0 40px rgba(255, 140, 0, 0.3);
+        text-shadow: 0 0 20px rgba(125, 0, 255, 0.5), 0 0 40px rgba(75, 127, 255, 0.3);
     }
     50% {
-        text-shadow: 0 0 30px rgba(75, 127, 255, 0.6), 0 0 60px rgba(125, 0, 255, 0.4);
+        text-shadow: 0 0 30px rgba(75, 127, 255, 0.6), 0 0 60px rgba(0, 153, 255, 0.4);
     }
 }
 
@@ -139,22 +183,6 @@ html, body {
     }
 }
 
-/* Input Container */
-.textbox-container {
-    animation: scaleIn 0.7s ease-out 0.3s both;
-}
-
-@keyframes scaleIn {
-    from {
-        opacity: 0;
-        transform: scale(0.9) rotateX(10deg);
-    }
-    to {
-        opacity: 1;
-        transform: scale(1) rotateX(0deg);
-    }
-}
-
 textarea {
     background: rgba(255, 255, 255, 0.08) !important;
     border: 2px solid rgba(75, 127, 255, 0.3) !important;
@@ -172,24 +200,13 @@ textarea::placeholder {
 }
 
 textarea:focus {
-    border-color: #4b7fff !important;
-    box-shadow: 0 15px 50px rgba(75, 127, 255, 0.4), inset 0 0 30px rgba(75, 127, 255, 0.1) !important;
+    border-color: #0099ff !important;
+    box-shadow: 0 15px 50px rgba(0, 153, 255, 0.4), inset 0 0 30px rgba(0, 153, 255, 0.1) !important;
     transform: translateY(-5px) scale(1.02);
-    animation: inputGlow 2s ease-in-out infinite;
 }
 
-@keyframes inputGlow {
-    0%, 100% {
-        box-shadow: 0 15px 50px rgba(75, 127, 255, 0.4), inset 0 0 30px rgba(75, 127, 255, 0.1);
-    }
-    50% {
-        box-shadow: 0 20px 60px rgba(125, 0, 255, 0.5), inset 0 0 40px rgba(125, 0, 255, 0.2);
-    }
-}
-
-/* Button Styling with Ripple Effect */
 .btn-primary {
-    background: linear-gradient(135deg, #4b7fff, #7d00ff, #ff4b4b) !important;
+    background: linear-gradient(135deg, #7d00ff, #5500ff, #4b7fff, #0099ff) !important;
     background-size: 300% 300% !important;
     border: 2px solid rgba(75, 127, 255, 0.5) !important;
     color: white !important;
@@ -199,7 +216,7 @@ textarea:focus {
     border-radius: 50px !important;
     cursor: pointer !important;
     transition: all 0.4s ease !important;
-    box-shadow: 0 10px 40px rgba(75, 127, 255, 0.4), inset 0 0 20px rgba(255, 255, 255, 0.1) !important;
+    box-shadow: 0 10px 40px rgba(75, 127, 255, 0.4) !important;
     animation: bounceIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.4s both;
     position: relative;
     overflow: hidden;
@@ -221,41 +238,14 @@ textarea:focus {
 
 .btn-primary:hover {
     transform: translateY(-5px) scale(1.05);
-    box-shadow: 0 20px 60px rgba(125, 0, 255, 0.6), inset 0 0 30px rgba(255, 255, 255, 0.15) !important;
+    box-shadow: 0 20px 60px rgba(0, 153, 255, 0.6) !important;
     background-position: 100% 0 !important;
-    animation: gradientShift 3s ease infinite;
-}
-
-@keyframes gradientShift {
-    0% {background-position: 0% 50%;}
-    50% {background-position: 100% 50%;}
-    100% {background-position: 0% 50%;}
 }
 
 .btn-primary:active {
     transform: translateY(-2px) scale(0.98);
 }
 
-/* Ripple Effect */
-.btn-primary::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 0;
-    height: 0;
-    border-radius: 50%;
-    background: rgba(255, 255, 255, 0.6);
-    transform: translate(-50%, -50%);
-    transition: width 0.6s, height 0.6s;
-}
-
-.btn-primary:active::before {
-    width: 400px;
-    height: 400px;
-}
-
-/* Result Cards */
 .safe {
     background: linear-gradient(135deg, rgba(0, 255, 100, 0.15), rgba(100, 255, 150, 0.08));
     border: 2px solid rgba(0, 255, 100, 0.4);
@@ -264,7 +254,7 @@ textarea:focus {
     color: #00ff64;
     text-align: center;
     animation: slideInRight 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), cardGlowGreen 3s ease-in-out infinite;
-    box-shadow: 0 20px 60px rgba(0, 255, 100, 0.25), inset 0 0 30px rgba(0, 255, 100, 0.1);
+    box-shadow: 0 20px 60px rgba(0, 255, 100, 0.25);
     backdrop-filter: blur(15px);
 }
 
@@ -276,7 +266,7 @@ textarea:focus {
     color: #ff6b6b;
     text-align: center;
     animation: slideInRight 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), cardGlowRed 2s ease-in-out infinite;
-    box-shadow: 0 20px 60px rgba(255, 107, 107, 0.25), inset 0 0 30px rgba(255, 107, 107, 0.1);
+    box-shadow: 0 20px 60px rgba(255, 107, 107, 0.25);
     backdrop-filter: blur(15px);
 }
 
@@ -293,19 +283,19 @@ textarea:focus {
 
 @keyframes cardGlowGreen {
     0%, 100% {
-        box-shadow: 0 20px 60px rgba(0, 255, 100, 0.25), inset 0 0 30px rgba(0, 255, 100, 0.1);
+        box-shadow: 0 20px 60px rgba(0, 255, 100, 0.25);
     }
     50% {
-        box-shadow: 0 30px 80px rgba(0, 255, 100, 0.4), inset 0 0 40px rgba(0, 255, 100, 0.2);
+        box-shadow: 0 30px 80px rgba(0, 255, 100, 0.4);
     }
 }
 
 @keyframes cardGlowRed {
     0%, 100% {
-        box-shadow: 0 20px 60px rgba(255, 107, 107, 0.25), inset 0 0 30px rgba(255, 107, 107, 0.1);
+        box-shadow: 0 20px 60px rgba(255, 107, 107, 0.25);
     }
     50% {
-        box-shadow: 0 30px 80px rgba(255, 107, 107, 0.4), inset 0 0 40px rgba(255, 107, 107, 0.2);
+        box-shadow: 0 30px 80px rgba(255, 107, 107, 0.4);
     }
 }
 
@@ -314,7 +304,7 @@ textarea:focus {
     text-align: center;
     font-weight: 700;
     font-size: 18px;
-    animation: shake 0.5s ease-in-out, pulse 1.5s ease-in-out infinite 0.5s;
+    animation: shake 0.5s ease-in-out;
     padding: 20px;
 }
 
@@ -324,12 +314,6 @@ textarea:focus {
     20%, 40%, 60%, 80% {transform: translateX(8px);}
 }
 
-@keyframes pulse {
-    0%, 100% {opacity: 1;}
-    50% {opacity: 0.6;}
-}
-
-/* Icons */
 .checkmark, .warning-icon {
     font-size: 56px;
     margin-bottom: 15px;
@@ -351,39 +335,11 @@ textarea:focus {
     }
 }
 
-.warning-icon {
-    animation: bounce 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55), pulse-warning 1.5s ease-in-out 0.8s infinite;
-}
-
-@keyframes pulse-warning {
-    0%, 100% {
-        transform: scale(1);
-        filter: drop-shadow(0 0 5px rgba(255, 107, 107, 0.5));
-    }
-    50% {
-        transform: scale(1.2);
-        filter: drop-shadow(0 0 20px rgba(255, 107, 107, 1));
-    }
-}
-
-/* Text */
 .safe-text, .bully-text {
     font-size: 28px;
     font-weight: 800;
     margin-bottom: 15px;
     animation: fadeInDown 0.8s ease-out 0.2s both;
-    letter-spacing: 0.5px;
-}
-
-@keyframes fadeInDown {
-    from {
-        opacity: 0;
-        transform: translateY(-20px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
 }
 
 .label-badge {
@@ -396,7 +352,6 @@ textarea:focus {
     font-size: 14px;
     font-weight: 700;
     animation: zoomIn 0.7s ease-out 0.3s both;
-    box-shadow: 0 5px 20px rgba(255, 107, 107, 0.2);
 }
 
 @keyframes zoomIn {
@@ -410,7 +365,17 @@ textarea:focus {
     }
 }
 
-/* Confidence Bar */
+@keyframes fadeInDown {
+    from {
+        opacity: 0;
+        transform: translateY(-20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
 .confidence-bar {
     width: 100%;
     height: 10px;
@@ -420,7 +385,6 @@ textarea:focus {
     overflow: hidden;
     animation: fadeIn 0.8s ease-out 0.1s both;
     border: 1px solid rgba(255, 255, 255, 0.2);
-    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
 }
 
 .confidence-fill {
@@ -437,22 +401,13 @@ textarea:focus {
 }
 
 .safe-fill {
-    background: linear-gradient(90deg, #00ff64, #00d452, #00ff64);
-    background-size: 200% 200%;
-    box-shadow: 0 0 25px rgba(0, 255, 100, 0.8), inset 0 0 10px rgba(255, 255, 255, 0.3);
-    animation: fillWidth 1.2s ease-out, shimmer 2s ease-in-out infinite;
+    background: linear-gradient(90deg, #00ff64, #00d452);
+    box-shadow: 0 0 25px rgba(0, 255, 100, 0.8);
 }
 
 .bully-fill {
-    background: linear-gradient(90deg, #ff6b6b, #ff4444, #ff6b6b);
-    background-size: 200% 200%;
-    box-shadow: 0 0 25px rgba(255, 107, 107, 0.8), inset 0 0 10px rgba(255, 255, 255, 0.3);
-    animation: fillWidth 1.2s ease-out, shimmer 2s ease-in-out infinite;
-}
-
-@keyframes shimmer {
-    0%, 100% {background-position: 0% 50%;}
-    50% {background-position: 100% 50%;}
+    background: linear-gradient(90deg, #ff6b6b, #ff4444);
+    box-shadow: 0 0 25px rgba(255, 107, 107, 0.8);
 }
 
 .confidence-score {
@@ -460,7 +415,6 @@ textarea:focus {
     opacity: 0.9;
     animation: fadeIn 0.8s ease-out 0.4s both;
     font-weight: 600;
-    letter-spacing: 0.5px;
 }
 
 @keyframes fadeIn {
@@ -472,7 +426,6 @@ textarea:focus {
     }
 }
 
-/* Responsive */
 @media (max-width: 768px) {
     .title {
         font-size: 36px;
@@ -481,12 +434,9 @@ textarea:focus {
     .safe, .bully {
         padding: 25px;
     }
-    
-    html, body {
-        background-size: 600% 600%;
-    }
 }
 """) as demo:
+    
     gr.Markdown("<div class='title'>🛡️ Cyberbullying Detection System</div>")
     gr.Markdown("<div class='subtitle'>End-to-end NLP system for detecting cyberbullying, including religion-based abuse</div>")
     
@@ -494,8 +444,7 @@ textarea:focus {
         text_input = gr.Textbox(
             lines=4,
             placeholder="Enter a message to analyze...",
-            label="Input Text",
-            elem_classes="textbox-container"
+            label="Input Text"
         )
         detect_btn = gr.Button("🔍 Detect", variant="primary")
     
@@ -507,4 +456,6 @@ textarea:focus {
         outputs=output
     )
 
-demo.launch()
+# Launch the app
+if __name__ == "__main__":
+    demo.launch()