app.py2

app.py

@@ -1,5 +1,3 @@
-
-
 import gradio as gr
 import torch
 import torch.nn as nn
@@ -33,11 +31,13 @@ TEXT_MAX_LEN = 64
 LABELS = ["angry", "happy", "neutral", "sad"]
 
 gpu_status = (
-    "GPU Enabled"
+    "GPU ONLINE"
     if torch.cuda.is_available()
-    else "Running on CPU"
+    else "CPU MODE"
 )
 
+gpu_color = "#00ff88" if torch.cuda.is_available() else "#ff6b35"
+
 # =========================================================
 # LOAD PROCESSORS
 # =========================================================
@@ -436,7 +436,7 @@ def predict_emotion(video_file):
     if video_file is None:
 
         return (
-            "Please upload a video.",
+            "⚠ NO INPUT DETECTED — UPLOAD A VIDEO FILE TO BEGIN ANALYSIS.",
             None,
             ""
         )
@@ -489,12 +489,21 @@ def predict_emotion(video_file):
 
         confidence = float(probs.max())
 
+        emotion_icons = {
+            "angry": "⚡",
+            "happy": "◈",
+            "neutral": "◎",
+            "sad": "◇"
+        }
+
+        icon = emotion_icons.get(predicted_emotion, "◆")
+
         result_text = f"""
-        ## Predicted Emotion
-        
-        ### {predicted_emotion.upper()}
-        
-        Confidence Score: {confidence:.2%}
+## {icon} EMOTION DETECTED
+
+### `{predicted_emotion.upper()}`
+
+**Neural Confidence:** `{confidence:.2%}`
         """
 
         if os.path.exists(audio_path):
@@ -509,339 +518,643 @@ def predict_emotion(video_file):
     except Exception as e:
 
         return (
-            f"Error: {str(e)}",
+            f"⚠ SYSTEM ERROR: {str(e)}",
             None,
             ""
         )
 
 # =========================================================
-# CLEAN PROFESSIONAL CSS
+# FUTURISTIC CYBERPUNK CSS
 # =========================================================
 
 custom_css = """
-
-/* =======================================================
-BACKGROUND
-======================================================= */
-
-body {
-    background: linear-gradient(
-        -45deg,
-        #dbeafe,
-        #bfdbfe,
-        #e0f2fe,
-        #f0f9ff
-    );
-
-    background-size: 400% 400%;
-
-    animation: gradientMove 15s ease infinite;
-
-    font-family: 'Segoe UI', sans-serif;
+/* =====================================================
+   IMPORT FONTS
+===================================================== */
+@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;900&family=Share+Tech+Mono&family=Rajdhani:wght@300;400;600;700&display=swap');
+
+/* =====================================================
+   CSS VARIABLES
+===================================================== */
+:root {
+    --neon-cyan:    #00f5ff;
+    --neon-green:   #00ff88;
+    --neon-pink:    #ff006e;
+    --neon-purple:  #bf00ff;
+    --neon-orange:  #ff6b35;
+    --dark-bg:      #020b18;
+    --dark-panel:   #040f1e;
+    --dark-card:    #071525;
+    --border-glow:  rgba(0, 245, 255, 0.25);
+    --text-primary: #e0f7ff;
+    --text-dim:     #4a7a8a;
+    --grid-color:   rgba(0, 245, 255, 0.04);
 }
 
-/* Animated background */
+/* =====================================================
+   GLOBAL RESET & BASE
+===================================================== */
+* {
+    box-sizing: border-box;
+}
 
-@keyframes gradientMove {
+body, .gradio-container {
+    background-color: var(--dark-bg) !important;
+    font-family: 'Rajdhani', sans-serif !important;
+    color: var(--text-primary) !important;
+    min-height: 100vh;
+    position: relative;
+    overflow-x: hidden;
+}
 
-    0% {
-        background-position: 0% 50%;
-    }
+/* Animated grid background */
+body::before {
+    content: '';
+    position: fixed;
+    inset: 0;
+    background-image:
+        linear-gradient(var(--grid-color) 1px, transparent 1px),
+        linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
+    background-size: 40px 40px;
+    z-index: 0;
+    pointer-events: none;
+    animation: gridDrift 20s linear infinite;
+}
 
-    50% {
-        background-position: 100% 50%;
-    }
+/* Scanline overlay */
+body::after {
+    content: '';
+    position: fixed;
+    inset: 0;
+    background: repeating-linear-gradient(
+        0deg,
+        transparent,
+        transparent 2px,
+        rgba(0, 245, 255, 0.015) 2px,
+        rgba(0, 245, 255, 0.015) 4px
+    );
+    pointer-events: none;
+    z-index: 1;
+    animation: scanlines 8s linear infinite;
+}
 
-    100% {
-        background-position: 0% 50%;
-    }
+@keyframes gridDrift {
+    0%   { background-position: 0 0; }
+    100% { background-position: 40px 40px; }
 }
 
-/* =======================================================
-MAIN CONTAINER
-======================================================= */
+@keyframes scanlines {
+    0%   { background-position: 0 0; }
+    100% { background-position: 0 100px; }
+}
 
+/* =====================================================
+   CONTAINER
+===================================================== */
 .gradio-container {
-
-    max-width: 1300px !important;
-
-    margin: auto;
-
-    padding-top: 20px;
+    max-width: 1400px !important;
+    margin: auto !important;
+    padding: 30px 24px !important;
+    position: relative;
+    z-index: 2;
 }
 
-/* =======================================================
-TITLE
-======================================================= */
-
-.main-title {
-
+/* =====================================================
+   HEADER
+===================================================== */
+.cyber-header {
     text-align: center;
+    padding: 40px 20px 20px;
+    position: relative;
+}
 
-    font-size: 56px;
-
-    font-weight: 800;
-
-    color: #0f172a;
-
-    margin-bottom: 10px;
-
-    letter-spacing: 1px;
-
-    animation: fadeInDown 1s ease;
+.cyber-title {
+    font-family: 'Orbitron', monospace !important;
+    font-size: clamp(28px, 5vw, 58px) !important;
+    font-weight: 900 !important;
+    letter-spacing: 6px !important;
+    text-transform: uppercase !important;
+    color: transparent !important;
+    background: linear-gradient(
+        90deg,
+        var(--neon-cyan) 0%,
+        #ffffff 40%,
+        var(--neon-purple) 70%,
+        var(--neon-cyan) 100%
+    ) !important;
+    background-size: 200% auto !important;
+    -webkit-background-clip: text !important;
+    background-clip: text !important;
+    animation: titleShimmer 4s linear infinite, fadeSlideDown 0.8s ease both;
+    text-shadow: none !important;
+    position: relative;
 }
 
-.subtitle {
+.cyber-title::after {
+    content: attr(data-text);
+    position: absolute;
+    left: 0; right: 0;
+    top: 0;
+    color: var(--neon-cyan);
+    filter: blur(18px);
+    opacity: 0.35;
+    animation: titlePulse 3s ease-in-out infinite;
+    z-index: -1;
+}
 
-    text-align: center;
+@keyframes titleShimmer {
+    0%   { background-position: 0% center; }
+    100% { background-position: 200% center; }
+}
 
-    font-size: 22px;
+@keyframes titlePulse {
+    0%, 100% { opacity: 0.25; }
+    50%       { opacity: 0.5; }
+}
 
-    color: #334155;
+@keyframes fadeSlideDown {
+    from { opacity: 0; transform: translateY(-24px); }
+    to   { opacity: 1; transform: translateY(0); }
+}
 
-    margin-bottom: 35px;
+.cyber-subtitle {
+    font-family: 'Share Tech Mono', monospace !important;
+    font-size: 14px !important;
+    color: var(--text-dim) !important;
+    letter-spacing: 3px !important;
+    text-transform: uppercase !important;
+    margin-top: 10px !important;
+    animation: fadeSlideDown 1s ease 0.3s both;
+}
 
-    animation: fadeIn 2s ease;
+/* Decorative line under title */
+.cyber-divider {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin: 20px auto;
+    max-width: 600px;
+    animation: fadeSlideDown 1s ease 0.5s both;
 }
 
-/* =======================================================
-ANIMATIONS
-======================================================= */
+.cyber-divider::before,
+.cyber-divider::after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, var(--neon-cyan), transparent);
+}
 
-@keyframes fadeInDown {
+.cyber-divider-dot {
+    width: 6px; height: 6px;
+    background: var(--neon-cyan);
+    border-radius: 50%;
+    box-shadow: 0 0 10px var(--neon-cyan);
+    animation: dotPulse 2s ease-in-out infinite;
+}
 
-    from {
-        opacity: 0;
-        transform: translateY(-30px);
-    }
+@keyframes dotPulse {
+    0%, 100% { transform: scale(1); opacity: 1; }
+    50%       { transform: scale(1.6); opacity: 0.6; }
+}
 
-    to {
-        opacity: 1;
-        transform: translateY(0px);
-    }
+/* =====================================================
+   STATUS BADGE
+===================================================== */
+.status-bar {
+    display: flex;
+    justify-content: center;
+    margin: 10px 0 24px;
+    animation: fadeSlideDown 1s ease 0.6s both;
 }
 
-@keyframes fadeIn {
+.status-badge {
+    font-family: 'Share Tech Mono', monospace;
+    font-size: 12px;
+    letter-spacing: 2px;
+    padding: 6px 20px;
+    border: 1px solid var(--neon-green);
+    color: var(--neon-green);
+    background: rgba(0, 255, 136, 0.06);
+    border-radius: 2px;
+    position: relative;
+    overflow: hidden;
+    text-transform: uppercase;
+}
 
-    from {
-        opacity: 0;
-    }
+.status-badge::before {
+    content: '';
+    position: absolute;
+    top: 0; left: -100%;
+    width: 100%; height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(0,255,136,0.15), transparent);
+    animation: scanSweep 3s linear infinite;
+}
 
-    to {
-        opacity: 1;
-    }
+@keyframes scanSweep {
+    0%   { left: -100%; }
+    100% { left: 100%; }
 }
 
-@keyframes floating {
+/* =====================================================
+   INFO CARDS (Modalities / Models)
+===================================================== */
+.info-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 16px;
+    margin-bottom: 24px;
+    animation: fadeSlideDown 1s ease 0.7s both;
+}
 
-    0% {
-        transform: translateY(0px);
-    }
+.cyber-card {
+    background: var(--dark-card) !important;
+    border: 1px solid var(--border-glow) !important;
+    border-radius: 4px !important;
+    padding: 20px 24px !important;
+    position: relative;
+    overflow: hidden;
+    transition: border-color 0.3s, box-shadow 0.3s;
+}
 
-    50% {
-        transform: translateY(-6px);
-    }
+.cyber-card::before {
+    content: '';
+    position: absolute;
+    top: 0; left: 0;
+    width: 3px; height: 100%;
+    background: linear-gradient(180deg, var(--neon-cyan), var(--neon-purple));
+    box-shadow: 0 0 12px var(--neon-cyan);
+}
 
-    100% {
-        transform: translateY(0px);
-    }
+.cyber-card::after {
+    content: '';
+    position: absolute;
+    top: 0; right: 0;
+    width: 60px; height: 60px;
+    background: radial-gradient(circle, rgba(0,245,255,0.08) 0%, transparent 70%);
 }
 
-/* =======================================================
-CARDS / PANELS
-======================================================= */
+.cyber-card:hover {
+    border-color: rgba(0, 245, 255, 0.5) !important;
+    box-shadow: 0 0 30px rgba(0, 245, 255, 0.1) !important;
+}
 
+/* =====================================================
+   GR PANELS (override Gradio)
+===================================================== */
 .gr-group,
 .gr-box,
-.gr-panel {
-
-    background: rgba(255,255,255,0.55) !important;
-
-    backdrop-filter: blur(18px);
-
-    border-radius: 24px !important;
-
-    border: 1px solid rgba(255,255,255,0.35);
-
-    box-shadow:
-        0 8px 32px rgba(31, 38, 135, 0.15);
-
-    transition: all 0.35s ease;
-
-    animation: floating 5s ease-in-out infinite;
+.gr-panel,
+.gr-form,
+div[class*="panel"],
+div[class*="block"] {
+    background: var(--dark-card) !important;
+    border: 1px solid var(--border-glow) !important;
+    border-radius: 4px !important;
+    box-shadow: none !important;
+    backdrop-filter: none !important;
 }
 
-/* Hover effect */
-
-.gr-group:hover,
-.gr-box:hover,
-.gr-panel:hover {
-
-    transform: translateY(-6px);
-
-    box-shadow:
-        0 15px 35px rgba(14,165,233,0.25);
+/* =====================================================
+   MARKDOWN HEADINGS
+===================================================== */
+h1, h2, h3, h4 {
+    font-family: 'Orbitron', monospace !important;
+    font-weight: 700 !important;
+    letter-spacing: 2px !important;
+    text-transform: uppercase !important;
 }
 
-/* =======================================================
-BUTTONS
-======================================================= */
-
-.gr-button {
+h2 {
+    font-size: 16px !important;
+    color: var(--neon-cyan) !important;
+    border-bottom: 1px solid rgba(0,245,255,0.2) !important;
+    padding-bottom: 8px !important;
+    margin-bottom: 16px !important;
+}
 
-    background: linear-gradient(
-        135deg,
-        #38bdf8,
-        #0ea5e9
-    ) !important;
+h3 {
+    font-size: 14px !important;
+    color: var(--text-primary) !important;
+}
 
-    border: none !important;
+h4 {
+    font-size: 12px !important;
+    color: var(--text-dim) !important;
+}
 
-    color: white !important;
+/* =====================================================
+   LABELS / TEXT
+===================================================== */
+label, .gr-label span, p, li {
+    font-family: 'Rajdhani', sans-serif !important;
+    color: var(--text-primary) !important;
+    font-size: 14px !important;
+    font-weight: 600 !important;
+    letter-spacing: 1px !important;
+}
 
+/* =====================================================
+   ANALYZE BUTTON
+===================================================== */
+.gr-button,
+button[class*="primary"],
+button {
+    font-family: 'Orbitron', monospace !important;
+    font-size: 13px !important;
     font-weight: 700 !important;
-
-    border-radius: 14px !important;
-
+    letter-spacing: 3px !important;
+    text-transform: uppercase !important;
+    background: transparent !important;
+    border: 1px solid var(--neon-cyan) !important;
+    color: var(--neon-cyan) !important;
+    border-radius: 3px !important;
+    padding: 14px 32px !important;
+    position: relative !important;
+    overflow: hidden !important;
     transition: all 0.3s ease !important;
-
-    box-shadow:
-        0 4px 15px rgba(14,165,233,0.35);
+    cursor: pointer !important;
 }
 
-/* Button hover */
-
-.gr-button:hover {
-
-    transform: scale(1.05);
-
-    box-shadow:
-        0 8px 25px rgba(14,165,233,0.45);
-
+.gr-button::before,
+button::before {
+    content: '' !important;
+    position: absolute !important;
+    top: 0; left: -100% !important;
+    width: 100%; height: 100% !important;
     background: linear-gradient(
-        135deg,
-        #0ea5e9,
-        #0284c7
+        90deg,
+        transparent,
+        rgba(0, 245, 255, 0.2),
+        transparent
     ) !important;
+    transition: left 0.5s ease !important;
 }
 
-/* =======================================================
-TEXT
-======================================================= */
-
-h1, h2, h3, h4 {
-
-    color: #0f172a !important;
-
-    font-weight: 700 !important;
+.gr-button:hover::before,
+button:hover::before {
+    left: 100% !important;
 }
 
-label {
-
-    color: #1e293b !important;
-
-    font-weight: 600 !important;
+.gr-button:hover,
+button:hover {
+    background: rgba(0, 245, 255, 0.1) !important;
+    box-shadow:
+        0 0 20px rgba(0, 245, 255, 0.4),
+        0 0 60px rgba(0, 245, 255, 0.15),
+        inset 0 0 20px rgba(0, 245, 255, 0.05) !important;
+    transform: translateY(-2px) !important;
 }
 
-/* =======================================================
-TEXTBOXES
-======================================================= */
+.gr-button:active,
+button:active {
+    transform: translateY(0px) !important;
+}
 
+/* =====================================================
+   INPUT / TEXTAREA
+===================================================== */
 textarea,
+input[type="text"],
 input {
-
-    border-radius: 14px !important;
-
-    border: 1px solid #cbd5e1 !important;
-
-    transition: all 0.3s ease !important;
+    font-family: 'Share Tech Mono', monospace !important;
+    font-size: 13px !important;
+    background: var(--dark-panel) !important;
+    border: 1px solid rgba(0, 245, 255, 0.15) !important;
+    border-radius: 3px !important;
+    color: var(--neon-cyan) !important;
+    transition: all 0.3s !important;
+    letter-spacing: 0.5px !important;
 }
 
-/* Glow effect */
-
 textarea:focus,
 input:focus {
-
-    border: 1px solid #38bdf8 !important;
-
-    box-shadow:
-        0 0 15px rgba(56,189,248,0.35) !important;
+    border-color: var(--neon-cyan) !important;
+    box-shadow: 0 0 15px rgba(0, 245, 255, 0.2) !important;
+    outline: none !important;
 }
 
-/* =======================================================
-VIDEO COMPONENT
-======================================================= */
-
+/* =====================================================
+   VIDEO COMPONENT
+===================================================== */
 video {
-
-    border-radius: 20px !important;
-
-    overflow: hidden;
-
+    border-radius: 3px !important;
+    border: 1px solid rgba(0, 245, 255, 0.2) !important;
     box-shadow:
-        0 10px 25px rgba(0,0,0,0.15);
+        0 0 30px rgba(0, 245, 255, 0.1),
+        inset 0 0 30px rgba(0, 0, 0, 0.5) !important;
 }
 
-/* =======================================================
-RESULT LABEL
-======================================================= */
-
-.gr-label {
+/* Upload zone */
+.upload-zone,
+div[class*="upload"] {
+    border: 1px dashed rgba(0, 245, 255, 0.3) !important;
+    background: rgba(0, 245, 255, 0.03) !important;
+    border-radius: 4px !important;
+    transition: all 0.3s !important;
+}
 
-    background: rgba(255,255,255,0.65) !important;
+.upload-zone:hover,
+div[class*="upload"]:hover {
+    border-color: var(--neon-cyan) !important;
+    background: rgba(0, 245, 255, 0.07) !important;
+}
 
-    border-radius: 16px !important;
+/* =====================================================
+   LABEL (EMOTION PROBABILITIES)
+===================================================== */
+.gr-label,
+div[class*="label"] {
+    background: var(--dark-panel) !important;
+    border: 1px solid rgba(0, 245, 255, 0.12) !important;
+    border-radius: 4px !important;
+    padding: 12px !important;
+}
 
-    padding: 10px;
+/* Label bars */
+div[class*="confidence"] span,
+div[class*="bar"],
+.label-bar,
+[class*="Confidence"] {
+    background: linear-gradient(
+        90deg,
+        rgba(0, 245, 255, 0.15),
+        rgba(0, 245, 255, 0.05)
+    ) !important;
+    border-left: 2px solid var(--neon-cyan) !important;
+    border-radius: 0 !important;
 }
 
-/* =======================================================
-ACCORDION
-======================================================= */
+/* =====================================================
+   ACCORDION
+===================================================== */
+.gr-accordion,
+details,
+summary {
+    background: var(--dark-card) !important;
+    border: 1px solid rgba(0,245,255,0.12) !important;
+    border-radius: 4px !important;
+    font-family: 'Orbitron', monospace !important;
+    font-size: 12px !important;
+    letter-spacing: 2px !important;
+    color: var(--text-dim) !important;
+    text-transform: uppercase !important;
+}
 
-.gr-accordion {
+details summary {
+    padding: 14px 20px !important;
+    cursor: pointer !important;
+    transition: color 0.3s !important;
+}
 
-    border-radius: 18px !important;
+details summary:hover {
+    color: var(--neon-cyan) !important;
+}
 
-    overflow: hidden;
+details[open] summary {
+    color: var(--neon-cyan) !important;
+    border-bottom: 1px solid rgba(0,245,255,0.12) !important;
 }
 
-/* =======================================================
-FOOTER
-======================================================= */
+/* =====================================================
+   RESULT TEXT (Markdown output)
+===================================================== */
+.result-markdown code,
+code {
+    font-family: 'Share Tech Mono', monospace !important;
+    background: rgba(0, 245, 255, 0.08) !important;
+    border: 1px solid rgba(0, 245, 255, 0.2) !important;
+    border-radius: 2px !important;
+    color: var(--neon-cyan) !important;
+    padding: 2px 8px !important;
+    font-size: 15px !important;
+}
 
-.footer {
+/* =====================================================
+   SEPARATOR / HR
+===================================================== */
+hr {
+    border: none !important;
+    height: 1px !important;
+    background: linear-gradient(
+        90deg,
+        transparent,
+        rgba(0, 245, 255, 0.3),
+        rgba(191, 0, 255, 0.3),
+        transparent
+    ) !important;
+    margin: 24px 0 !important;
+}
 
+/* =====================================================
+   FOOTER
+===================================================== */
+.cyber-footer {
     text-align: center;
+    font-family: 'Share Tech Mono', monospace;
+    font-size: 11px;
+    letter-spacing: 3px;
+    color: var(--text-dim);
+    margin-top: 40px;
+    padding: 20px;
+    text-transform: uppercase;
+    border-top: 1px solid rgba(0,245,255,0.08);
+    position: relative;
+}
 
-    color: #334155;
-
-    margin-top: 35px;
-
-    font-size: 15px;
+.cyber-footer::before {
+    content: '◈ ◈ ◈';
+    display: block;
+    color: rgba(0,245,255,0.2);
+    margin-bottom: 10px;
+    letter-spacing: 6px;
+    font-size: 8px;
+    animation: dotPulse 3s ease-in-out infinite;
+}
 
-    opacity: 0.85;
+/* =====================================================
+   CORNER DECORATION (applied to main columns)
+===================================================== */
+.corner-decor {
+    position: relative;
 }
 
-/* =======================================================
-SCROLLBAR
-======================================================= */
+.corner-decor::before,
+.corner-decor::after {
+    content: '';
+    position: absolute;
+    width: 12px; height: 12px;
+    border-color: var(--neon-cyan);
+    border-style: solid;
+    opacity: 0.5;
+}
 
-::-webkit-scrollbar {
+.corner-decor::before {
+    top: -1px; left: -1px;
+    border-width: 2px 0 0 2px;
+}
 
-    width: 10px;
+.corner-decor::after {
+    bottom: -1px; right: -1px;
+    border-width: 0 2px 2px 0;
 }
 
-::-webkit-scrollbar-thumb {
+/* =====================================================
+   ANIMATED PARTICLES (pure CSS)
+===================================================== */
+.particle-field {
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: 0;
+    overflow: hidden;
+}
 
-    background: #7dd3fc;
+.particle {
+    position: absolute;
+    width: 2px; height: 2px;
+    background: var(--neon-cyan);
+    border-radius: 50%;
+    opacity: 0;
+    animation: floatParticle linear infinite;
+}
 
-    border-radius: 20px;
+.particle:nth-child(1)  { left: 10%; animation-duration: 12s; animation-delay: 0s;   width: 1px; height: 1px; }
+.particle:nth-child(2)  { left: 20%; animation-duration: 18s; animation-delay: 2s;   background: var(--neon-purple); }
+.particle:nth-child(3)  { left: 35%; animation-duration: 14s; animation-delay: 4s;   }
+.particle:nth-child(4)  { left: 50%; animation-duration: 20s; animation-delay: 1s;   background: var(--neon-green); width: 1px; height: 1px; }
+.particle:nth-child(5)  { left: 65%; animation-duration: 16s; animation-delay: 6s;   }
+.particle:nth-child(6)  { left: 78%; animation-duration: 13s; animation-delay: 3s;   background: var(--neon-pink); }
+.particle:nth-child(7)  { left: 88%; animation-duration: 19s; animation-delay: 5s;   width: 1px; height: 1px; }
+.particle:nth-child(8)  { left: 45%; animation-duration: 15s; animation-delay: 7s;   background: var(--neon-purple); }
+.particle:nth-child(9)  { left: 55%; animation-duration: 17s; animation-delay: 0.5s; }
+.particle:nth-child(10) { left: 72%; animation-duration: 11s; animation-delay: 8s;   background: var(--neon-green); width: 1px; height: 1px; }
+.particle:nth-child(11) { left: 5%;  animation-duration: 22s; animation-delay: 2.5s; background: var(--neon-cyan); }
+.particle:nth-child(12) { left: 92%; animation-duration: 14s; animation-delay: 9s;   background: var(--neon-pink); width: 1px; height: 1px; }
+
+@keyframes floatParticle {
+    0%   { bottom: -10px; opacity: 0; transform: translateX(0); }
+    10%  { opacity: 0.6; }
+    90%  { opacity: 0.3; }
+    100% { bottom: 105vh; opacity: 0; transform: translateX(30px); }
 }
 
-::-webkit-scrollbar-track {
+/* =====================================================
+   SCROLLBAR
+===================================================== */
+::-webkit-scrollbar { width: 6px; }
+::-webkit-scrollbar-track { background: var(--dark-bg); }
+::-webkit-scrollbar-thumb {
+    background: linear-gradient(180deg, var(--neon-cyan), var(--neon-purple));
+    border-radius: 3px;
+}
 
-    background: transparent;
+/* =====================================================
+   RESPONSIVE TWEAKS
+===================================================== */
+@media (max-width: 768px) {
+    .info-grid { grid-template-columns: 1fr; }
+    .cyber-title { font-size: 26px !important; letter-spacing: 3px !important; }
 }
 """
 
@@ -851,136 +1164,148 @@ SCROLLBAR
 
 with gr.Blocks(
     title="Multimodal Emotion Recognition",
-    theme=gr.themes.Glass(),
+    theme=gr.themes.Base(
+        primary_hue="cyan",
+        neutral_hue="slate",
+        font=[gr.themes.GoogleFont("Rajdhani"), "sans-serif"],
+    ),
     css=custom_css
 ) as demo:
 
-    # HEADER
-
+    # ── Floating particles ──────────────────────────────
     gr.HTML("""
-    <div class="main-title">
-    MULTIMODAL EMOTION RECOGNITION
+    <div class="particle-field">
+        <div class="particle"></div>
+        <div class="particle"></div>
+        <div class="particle"></div>
+        <div class="particle"></div>
+        <div class="particle"></div>
+        <div class="particle"></div>
+        <div class="particle"></div>
+        <div class="particle"></div>
+        <div class="particle"></div>
+        <div class="particle"></div>
+        <div class="particle"></div>
+        <div class="particle"></div>
     </div>
+    """)
 
-    <div class="subtitle">
-    Real-Time AI Emotion Detection using Audio, Text and Video Fusion
+    # ── Header ──────────────────────────────────────────
+    gr.HTML(f"""
+    <div class="cyber-header">
+        <div class="cyber-title" data-text="MULTIMODAL EMOTION RECOGNITION">
+            MULTIMODAL EMOTION RECOGNITION
+        </div>
+        <div class="cyber-subtitle">
+            Real-Time Neural Analysis &nbsp;·&nbsp; Audio &nbsp;/&nbsp; Text &nbsp;/&nbsp; Video Fusion
+        </div>
+        <div class="cyber-divider">
+            <div class="cyber-divider-dot"></div>
+            <div class="cyber-divider-dot" style="animation-delay:0.4s"></div>
+            <div class="cyber-divider-dot" style="animation-delay:0.8s"></div>
+        </div>
+        <div class="status-bar">
+            <div class="status-badge" style="border-color:{gpu_color}; color:{gpu_color}; background:rgba(0,255,136,0.06);">
+                ◉ &nbsp; SYSTEM STATUS: {gpu_status}
+            </div>
+        </div>
     </div>
     """)
 
-    # STATUS
-
-    gr.Markdown(
-        f"### System Status: {gpu_status}"
-    )
-
-    # INFO PANELS
-
-    with gr.Row():
-
-        with gr.Column():
-
-            with gr.Group():
-
-                gr.Markdown("""
-                ### Modalities Used
-                
-                - Audio Analysis  
-                - Speech Transcription  
-                - Facial Expression Analysis  
-                """)
-
-        with gr.Column():
-
-            with gr.Group():
-
-                gr.Markdown("""
-                ### Models Used
-                
-                - Wav2Vec2  
-                - BERT  
-                - ResNet18  
-                - Whisper  
-                """)
-
-    gr.Markdown("---")
+    # ── Info Cards ──────────────────────────────────────
+    gr.HTML("""
+    <div class="info-grid">
+        <div class="cyber-card">
+            <h4 style="font-family:'Orbitron',monospace;font-size:10px;letter-spacing:3px;color:#4a7a8a;margin:0 0 12px;">MODALITIES</h4>
+            <div style="font-family:'Share Tech Mono',monospace;font-size:13px;line-height:2;color:#e0f7ff;">
+                <div>◈ &nbsp;Audio Waveform Analysis</div>
+                <div>◈ &nbsp;Speech Transcription (Whisper)</div>
+                <div>◈ &nbsp;Facial Expression Mapping</div>
+            </div>
+        </div>
+        <div class="cyber-card" style="--neon-cyan:#bf00ff;">
+            <h4 style="font-family:'Orbitron',monospace;font-size:10px;letter-spacing:3px;color:#4a7a8a;margin:0 0 12px;">NEURAL MODELS</h4>
+            <div style="font-family:'Share Tech Mono',monospace;font-size:13px;line-height:2;color:#e0f7ff;">
+                <div>◈ &nbsp;Wav2Vec2 &nbsp;·&nbsp; BERT &nbsp;·&nbsp; ResNet18</div>
+                <div>◈ &nbsp;Whisper ASR</div>
+                <div>◈ &nbsp;Hybrid Bimodal Fusion (HBF)</div>
+            </div>
+        </div>
+    </div>
+    """)
 
-    # MAIN SECTION
+    gr.HTML('<hr/>')
 
+    # ── Main Analysis Section ───────────────────────────
     with gr.Row(equal_height=True):
 
-        # LEFT
-
+        # LEFT: Upload
         with gr.Column(scale=1):
 
-            gr.Markdown("## Upload Video")
+            gr.Markdown("## ◧ INPUT STREAM")
 
             video_input = gr.Video(
-                label="Input Video",
-                height=400
+                label="Video Input",
+                height=360
             )
 
             predict_btn = gr.Button(
-                "Analyze Emotion",
+                "⬡  INITIALIZE ANALYSIS",
                 variant="primary",
                 size="lg"
             )
 
-        # RIGHT
-
+        # RIGHT: Results
         with gr.Column(scale=1):
 
-            gr.Markdown("## Results")
+            gr.Markdown("## ◨ ANALYSIS OUTPUT")
 
             result_text = gr.Markdown(
-                value="Upload a video and click Analyze Emotion."
+                value="""
+> `AWAITING INPUT` — Upload a video file and trigger analysis to begin neural processing.
+                """
             )
 
             result_output = gr.Label(
-                label="Emotion Probabilities",
+                label="Emotion Probability Distribution",
                 num_top_classes=4
             )
 
             transcription_output = gr.Textbox(
-                label="Transcribed Text",
-                lines=6,
-                interactive=False
+                label="◈  Transcribed Speech",
+                lines=5,
+                interactive=False,
+                placeholder="Speech transcription will appear here after analysis..."
             )
 
-    gr.Markdown("---")
+    gr.HTML('<hr/>')
 
-    # ABOUT SECTION
-
-    with gr.Accordion(
-        "About the Model",
-        open=False
-    ):
+    # ── About Accordion ─────────────────────────────────
+    with gr.Accordion("◆ SYSTEM ARCHITECTURE", open=False):
 
         gr.Markdown("""
-        This multimodal system combines:
-        
-        - Audio features using Wav2Vec2  
-        - Text understanding using BERT  
-        - Video feature extraction using ResNet18  
-        - Hybrid Fusion Block for final prediction
-        
-        Supported emotions:
-        
-        - Angry  
-        - Happy  
-        - Neutral  
-        - Sad  
-        """)
+        ### Neural Pipeline
 
-    # FOOTER
+        This system fuses three independent encoders through a **Hybrid Bimodal Fusion (HBF)** block:
 
+        - **Wav2Vec2** — Extracts deep acoustic features from the raw audio waveform
+        - **BERT** — Understands semantic and emotional tone from transcribed speech
+        - **ResNet18** — Captures facial micro-expressions across sampled video frames
+        - **HBF Block** — Iteratively aligns all three modalities over 6 fusion layers
+
+        ### Detectable Emotions
+
+        `ANGRY` &nbsp; `HAPPY` &nbsp; `NEUTRAL` &nbsp; `SAD`
+        """)
+
+    # ── Footer ──────────────────────────────────────────
     gr.HTML("""
-    <div class="footer">
-        Built using PyTorch, Transformers, Whisper and Gradio
+    <div class="cyber-footer">
+        Built on PyTorch &nbsp;·&nbsp; HuggingFace Transformers &nbsp;·&nbsp; OpenAI Whisper &nbsp;·&nbsp; Gradio
     </div>
     """)
 
-    # BUTTON ACTION
-
+    # ── Button Action ────────────────────────────────────
     predict_btn.click(
         fn=predict_emotion,
         inputs=[video_input],