Update app.py

app.py

@@ -1,652 +1,510 @@
-
-# streamlit_app.py
-
-
-# import streamlit as st
-# from streamlit_lottie import st_lottie
-# from transformers import AutoTokenizer, AutoModelForSequenceClassification, pipeline
-# import torch
-# import json
-
-# # ---------------- Load Model ----------------
-# @st.cache_resource
-# def load_model():
-#     model_name = "./models"  # path to your fine-tuned model
-#     tokenizer = AutoTokenizer.from_pretrained(model_name)
-#     model = AutoModelForSequenceClassification.from_pretrained(model_name)
-#     classifier = pipeline("text-classification", model=model, tokenizer=tokenizer, return_all_scores=True)
-#     return classifier
-
-# classifier = load_model()
-
-# # ---------------- CSS Styles ----------------
-# st.markdown(
-#     """
-#     <style>
-#     body {
-#         background: linear-gradient(-45deg, #ff4b4b, #ff8c00, #4b7fff, #7d00ff);
-#         animation: gradientBG 15s ease infinite;
-#         height: 100vh;
-#     }
-
-#     @keyframes gradientBG {
-#         0% {background-position: 0% 50%;}
-#         50% {background-position: 100% 50%;}
-#         100% {background-position: 0% 50%;}
-#     }
-
-#     .title {
-#         font-size: 55px;
-#         font-weight: bold;
-#         background: linear-gradient(270deg, 
-#             #ff0000, #ff7f00, #ffff00, #00ff00, 
-#             #0000ff, #4b0082, #8f00ff, #ff0000);
-#         background-size: 1500% 1500%;
-#         -webkit-background-clip: text;
-#         -webkit-text-fill-color: transparent;
-#         animation: rainbow 10s linear infinite;
-#         margin-bottom: 10px;
-#     }
-
-#     @keyframes rainbow {
-#         0% {background-position: 0% 50%;}
-#         50% {background-position: 100% 50%;}
-#         100% {background-position: 0% 50%;}
-#     }
-
-#     .intro-line {
-#         font-size: 18px;
-#         color: white;
-#         margin-bottom: 25px;
-#         font-style:italic;
-#     }
-
-#     .stButton button {
-#         display: block;
-#         margin: 30px auto;
-#         background: linear-gradient(90deg, #ff4b4b, #ff8c00);
-#         color: white;
-#         border-radius: 12px;
-#         height: 3em;
-#         width: 12em;
-#         font-size: 18px;
-#         font-weight: bold;
-#         border: none;
-#         box-shadow: 0px 4px 10px rgba(0,0,0,0.3);
-#         transition: 0.3s;
-#     }
-#     .stButton button:hover {
-#         transform: scale(1.1);
-#         background: linear-gradient(90deg, #7d00ff, #00d4ff);
-#     }
-
-#     .output-box {
-#         padding: 15px;
-#         border-radius: 12px;
-#         margin-top: 20px;
-#         font-size: 20px;
-#         font-weight: bold;
-#         text-align: center;
-#     }
-#     .safe {
-#         background-color: rgba(0,255,0,0.2);
-#         color: #00ff7f;
-#     }
-#     .bully {
-#         background-color: rgba(255,0,0,0.2);
-#         color: #ff4b4b;
-#     }
-#     </style>
-#     """,
-#     unsafe_allow_html=True
-# )
-
-# # ---------------- Load Lottie Animation ----------------
-# with open("Cybersecurity.json", "r") as f:
-#     lottie_anim = json.load(f)
-
-# # ---------------- Layout ----------------
-# col1, col2 = st.columns([2, 1])
-
-# with col1:
-#     st.markdown("<div class='title'>Cyberbullying Detection System</div>", unsafe_allow_html=True)
-#     st.markdown("<div class='intro-line'>This tool analyzes text messages and helps identify possible cyberbullying patterns.</div>", unsafe_allow_html=True)
-
-# with col2:
-#     st_lottie(lottie_anim, height=250, key="cyberbully")
-
-# # ---------------- Input Section ----------------
-# st.markdown("### Enter a message :")
-# user_input = st.text_area("", "")
-
-# # ---------------- Prediction Button ----------------
-# if st.button("🔍 Detect"):
-#     if not user_input.strip():
-#         st.warning("Please enter some text.")
-#     else:
-#         results = classifier(user_input)[0]
-#         best = max(results, key=lambda x: x['score'])
-#         label = best['label']
-#         score = best['score']
-
-#         # Cyberbullying logic
-#         if label.lower() == "not_cyberbullying":
-#             result = f"<div class='output-box safe'>✅ Safe message (Confidence: {score:.2f})</div>"
-#         else:
-#             result = f"<div class='output-box bully'>⚠️ Cyberbullying detected ({label})<br>Confidence: {score:.2f}</div>"
-
-#         st.markdown(result, unsafe_allow_html=True)
-
-#         # Probability dictionary
-#         probs = {r['label']: round(r['score'], 3) for r in results}
-#         st.json(probs)
-
-
-# gradio_app.py
-
-import gradio as gr
-from transformers import AutoTokenizer, AutoModelForSequenceClassification, pipeline
-# ---------------- Load Model ----------------
-def load_model():
-    model_path = "./models"
-    tokenizer = AutoTokenizer.from_pretrained(model_path)
-    model = AutoModelForSequenceClassification.from_pretrained(model_path)
-    return pipeline(
-        "text-classification",
-        model=model,
-        tokenizer=tokenizer,
-        return_all_scores=True
-    )
-classifier = load_model()
-# ---------------- Prediction Logic ----------------
-def predict(text):
-    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>
-            </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>
-            </div>
-            <span class='confidence-score'>Confidence: {score:.2%}</span>
-        </div>
-        """
-# ---------------- UI ----------------
-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"/>
-
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-html, body {
-    background: linear-gradient(-45deg, #ff4b4b, #ff8c00, #4b7fff, #7d00ff);
-    background-size: 400% 400%;
-    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 {
-    0% {background-position: 0% 50%;}
-    25% {background-position: 100% 50%;}
-    50% {background-position: 100% 100%;}
-    75% {background-position: 0% 100%;}
-    100% {background-position: 0% 50%;}
-}
-
-.gradio-container {
-    background: rgba(20, 20, 40, 0.85) !important;
-    border-radius: 25px !important;
-    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4), inset 0 0 30px rgba(255, 255, 255, 0.1) !important;
-    backdrop-filter: blur(15px) !important;
-    border: 1px solid rgba(255, 255, 255, 0.15) !important;
-    padding: 40px !important;
-}
-
-.title {
-    font-size: 52px;
-    font-weight: 900;
-    text-align: center;
-    background: linear-gradient(135deg, #ff4b4b, #ff8c00, #4b7fff, #7d00ff);
-    -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 {
-    from {
-        opacity: 0;
-        transform: translateY(-50px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-@keyframes glow {
-    0%, 100% {
-        text-shadow: 0 0 20px rgba(255, 75, 75, 0.5), 0 0 40px rgba(255, 140, 0, 0.3);
-    }
-    50% {
-        text-shadow: 0 0 30px rgba(75, 127, 255, 0.6), 0 0 60px rgba(125, 0, 255, 0.4);
-    }
-}
-
-.subtitle {
-    text-align: center;
-    color: #e0e0ff;
-    margin-bottom: 30px;
-    font-style: italic;
-    font-size: 16px;
-    animation: fadeInUp 1s ease-out 0.2s both;
-    letter-spacing: 1px;
-}
-
-@keyframes fadeInUp {
-    from {
-        opacity: 0;
-        transform: translateY(30px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-/* 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;
-    border-radius: 15px !important;
-    padding: 18px !important;
-    font-size: 16px !important;
-    color: #e0e0ff !important;
-    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
-    box-shadow: 0 8px 32px rgba(75, 127, 255, 0.1), inset 0 0 20px rgba(255, 255, 255, 0.05) !important;
-    backdrop-filter: blur(10px) !important;
-}
-
-textarea::placeholder {
-    color: rgba(224, 224, 255, 0.5) !important;
-}
-
-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;
-    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-size: 300% 300% !important;
-    border: 2px solid rgba(75, 127, 255, 0.5) !important;
-    color: white !important;
-    font-weight: 700 !important;
-    font-size: 16px !important;
-    padding: 14px 40px !important;
-    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;
-    animation: bounceIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.4s both;
-    position: relative;
-    overflow: hidden;
-}
-
-@keyframes bounceIn {
-    0% {
-        opacity: 0;
-        transform: scale(0.1) rotateZ(-45deg);
-    }
-    50% {
-        opacity: 1;
-        transform: scale(1.1) rotateZ(10deg);
-    }
-    100% {
-        transform: scale(1) rotateZ(0deg);
-    }
-}
-
-.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;
-    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);
-    padding: 35px;
-    border-radius: 20px;
-    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);
-    backdrop-filter: blur(15px);
-}
-
-.bully {
-    background: linear-gradient(135deg, rgba(255, 0, 0, 0.15), rgba(255, 100, 100, 0.08));
-    border: 2px solid rgba(255, 107, 107, 0.4);
-    padding: 35px;
-    border-radius: 20px;
-    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);
-    backdrop-filter: blur(15px);
-}
-
-@keyframes slideInRight {
-    from {
-        opacity: 0;
-        transform: translateX(100px) rotateY(20deg);
-    }
-    to {
-        opacity: 1;
-        transform: translateX(0) rotateY(0deg);
-    }
-}
-
-@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);
-    }
-    50% {
-        box-shadow: 0 30px 80px rgba(0, 255, 100, 0.4), inset 0 0 40px rgba(0, 255, 100, 0.2);
-    }
-}
-
-@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);
-    }
-    50% {
-        box-shadow: 0 30px 80px rgba(255, 107, 107, 0.4), inset 0 0 40px rgba(255, 107, 107, 0.2);
-    }
-}
-
-.warn {
-    color: #ffb700;
-    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;
-    padding: 20px;
-}
-
-@keyframes shake {
-    0%, 100% {transform: translateX(0);}
-    10%, 30%, 50%, 70%, 90% {transform: translateX(-8px);}
-    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;
-    animation: bounce 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-    display: inline-block;
-}
-
-@keyframes bounce {
-    0% {
-        opacity: 0;
-        transform: scale(0) rotateZ(-45deg);
-    }
-    50% {
-        transform: scale(1.2) rotateZ(15deg);
-    }
-    100% {
-        opacity: 1;
-        transform: scale(1) rotateZ(0deg);
-    }
-}
-
-.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 {
-    display: inline-block;
-    background: rgba(255, 107, 107, 0.2);
-    border: 2px solid rgba(255, 107, 107, 0.5);
-    padding: 10px 20px;
-    border-radius: 25px;
-    margin-bottom: 18px;
-    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 {
-    from {
-        opacity: 0;
-        transform: scale(0.3);
-    }
-    to {
-        opacity: 1;
-        transform: scale(1);
-    }
-}
-
-/* Confidence Bar */
-.confidence-bar {
-    width: 100%;
-    height: 10px;
-    background: rgba(255, 255, 255, 0.1);
-    border-radius: 12px;
-    margin-bottom: 15px;
-    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 {
-    height: 100%;
-    border-radius: 12px;
-    transition: width 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
-    animation: fillWidth 1.2s ease-out;
-}
-
-@keyframes fillWidth {
-    from {
-        width: 0 !important;
-    }
-}
-
-.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;
-}
-
-.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%;}
-}
-
-.confidence-score {
-    font-size: 15px;
-    opacity: 0.9;
-    animation: fadeIn 0.8s ease-out 0.4s both;
-    font-weight: 600;
-    letter-spacing: 0.5px;
-}
-
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
-}
-
-/* Responsive */
-@media (max-width: 768px) {
-    .title {
-        font-size: 36px;
-    }
-    
-    .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>")
-    
-    with gr.Group():
-        text_input = gr.Textbox(
-            lines=4,
-            placeholder="Enter a message to analyze...",
-            label="Input Text",
-            elem_classes="textbox-container"
-        )
-        detect_btn = gr.Button("🔍 Detect", variant="primary")
-    
-    output = gr.HTML()
-    
-    detect_btn.click(
-        fn=predict,
-        inputs=text_input,
-        outputs=output
-    )
-
+
+
+# gradio_app.py
+
+import gradio as gr
+from transformers import AutoTokenizer, AutoModelForSequenceClassification, pipeline
+# ---------------- Load Model ----------------
+def load_model():
+    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
+    )
+classifier = load_model()
+# ---------------- Prediction Logic ----------------
+def predict(text):
+    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>
+            </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>
+            </div>
+            <span class='confidence-score'>Confidence: {score:.2%}</span>
+        </div>
+        """
+# ---------------- UI ----------------
+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"/>
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html, body {
+    background: linear-gradient(-45deg, #ff4b4b, #ff8c00, #4b7fff, #7d00ff);
+    background-size: 400% 400%;
+    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 {
+    0% {background-position: 0% 50%;}
+    25% {background-position: 100% 50%;}
+    50% {background-position: 100% 100%;}
+    75% {background-position: 0% 100%;}
+    100% {background-position: 0% 50%;}
+}
+
+.gradio-container {
+    background: rgba(20, 20, 40, 0.85) !important;
+    border-radius: 25px !important;
+    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4), inset 0 0 30px rgba(255, 255, 255, 0.1) !important;
+    backdrop-filter: blur(15px) !important;
+    border: 1px solid rgba(255, 255, 255, 0.15) !important;
+    padding: 40px !important;
+}
+
+.title {
+    font-size: 52px;
+    font-weight: 900;
+    text-align: center;
+    background: linear-gradient(135deg, #ff4b4b, #ff8c00, #4b7fff, #7d00ff);
+    -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 {
+    from {
+        opacity: 0;
+        transform: translateY(-50px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes glow {
+    0%, 100% {
+        text-shadow: 0 0 20px rgba(255, 75, 75, 0.5), 0 0 40px rgba(255, 140, 0, 0.3);
+    }
+    50% {
+        text-shadow: 0 0 30px rgba(75, 127, 255, 0.6), 0 0 60px rgba(125, 0, 255, 0.4);
+    }
+}
+
+.subtitle {
+    text-align: center;
+    color: #e0e0ff;
+    margin-bottom: 30px;
+    font-style: italic;
+    font-size: 16px;
+    animation: fadeInUp 1s ease-out 0.2s both;
+    letter-spacing: 1px;
+}
+
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* 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;
+    border-radius: 15px !important;
+    padding: 18px !important;
+    font-size: 16px !important;
+    color: #e0e0ff !important;
+    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
+    box-shadow: 0 8px 32px rgba(75, 127, 255, 0.1), inset 0 0 20px rgba(255, 255, 255, 0.05) !important;
+    backdrop-filter: blur(10px) !important;
+}
+
+textarea::placeholder {
+    color: rgba(224, 224, 255, 0.5) !important;
+}
+
+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;
+    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-size: 300% 300% !important;
+    border: 2px solid rgba(75, 127, 255, 0.5) !important;
+    color: white !important;
+    font-weight: 700 !important;
+    font-size: 16px !important;
+    padding: 14px 40px !important;
+    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;
+    animation: bounceIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.4s both;
+    position: relative;
+    overflow: hidden;
+}
+
+@keyframes bounceIn {
+    0% {
+        opacity: 0;
+        transform: scale(0.1) rotateZ(-45deg);
+    }
+    50% {
+        opacity: 1;
+        transform: scale(1.1) rotateZ(10deg);
+    }
+    100% {
+        transform: scale(1) rotateZ(0deg);
+    }
+}
+
+.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;
+    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);
+    padding: 35px;
+    border-radius: 20px;
+    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);
+    backdrop-filter: blur(15px);
+}
+
+.bully {
+    background: linear-gradient(135deg, rgba(255, 0, 0, 0.15), rgba(255, 100, 100, 0.08));
+    border: 2px solid rgba(255, 107, 107, 0.4);
+    padding: 35px;
+    border-radius: 20px;
+    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);
+    backdrop-filter: blur(15px);
+}
+
+@keyframes slideInRight {
+    from {
+        opacity: 0;
+        transform: translateX(100px) rotateY(20deg);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0) rotateY(0deg);
+    }
+}
+
+@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);
+    }
+    50% {
+        box-shadow: 0 30px 80px rgba(0, 255, 100, 0.4), inset 0 0 40px rgba(0, 255, 100, 0.2);
+    }
+}
+
+@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);
+    }
+    50% {
+        box-shadow: 0 30px 80px rgba(255, 107, 107, 0.4), inset 0 0 40px rgba(255, 107, 107, 0.2);
+    }
+}
+
+.warn {
+    color: #ffb700;
+    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;
+    padding: 20px;
+}
+
+@keyframes shake {
+    0%, 100% {transform: translateX(0);}
+    10%, 30%, 50%, 70%, 90% {transform: translateX(-8px);}
+    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;
+    animation: bounce 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+    display: inline-block;
+}
+
+@keyframes bounce {
+    0% {
+        opacity: 0;
+        transform: scale(0) rotateZ(-45deg);
+    }
+    50% {
+        transform: scale(1.2) rotateZ(15deg);
+    }
+    100% {
+        opacity: 1;
+        transform: scale(1) rotateZ(0deg);
+    }
+}
+
+.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 {
+    display: inline-block;
+    background: rgba(255, 107, 107, 0.2);
+    border: 2px solid rgba(255, 107, 107, 0.5);
+    padding: 10px 20px;
+    border-radius: 25px;
+    margin-bottom: 18px;
+    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 {
+    from {
+        opacity: 0;
+        transform: scale(0.3);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+/* Confidence Bar */
+.confidence-bar {
+    width: 100%;
+    height: 10px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 12px;
+    margin-bottom: 15px;
+    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 {
+    height: 100%;
+    border-radius: 12px;
+    transition: width 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+    animation: fillWidth 1.2s ease-out;
+}
+
+@keyframes fillWidth {
+    from {
+        width: 0 !important;
+    }
+}
+
+.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;
+}
+
+.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%;}
+}
+
+.confidence-score {
+    font-size: 15px;
+    opacity: 0.9;
+    animation: fadeIn 0.8s ease-out 0.4s both;
+    font-weight: 600;
+    letter-spacing: 0.5px;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .title {
+        font-size: 36px;
+    }
+    
+    .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>")
+    
+    with gr.Group():
+        text_input = gr.Textbox(
+            lines=4,
+            placeholder="Enter a message to analyze...",
+            label="Input Text",
+            elem_classes="textbox-container"
+        )
+        detect_btn = gr.Button("🔍 Detect", variant="primary")
+    
+    output = gr.HTML()
+    
+    detect_btn.click(
+        fn=predict,
+        inputs=text_input,
+        outputs=output
+    )
+
 demo.launch()