app.py 4

app.py

@@ -771,34 +771,184 @@ body::after {
 
 .cyber-card {
     background: #0d1e35 !important;
-    border: 1px solid rgba(0, 245, 255, 0.3) !important;
-    border-radius: 4px !important;
-    padding: 22px 26px !important;
+    border: 1px solid rgba(0, 245, 255, 0.35) !important;
+    border-radius: 6px !important;
+    padding: 0 !important;
     position: relative;
     overflow: hidden;
     transition: border-color 0.3s, box-shadow 0.3s;
 }
 
+.cyber-card-purple {
+    border-color: rgba(191, 0, 255, 0.35) !important;
+}
+
+/* Glowing left bar */
 .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 14px var(--neon-cyan);
+    background: linear-gradient(180deg, #00f5ff, #bf00ff);
+    box-shadow: 0 0 14px #00f5ff;
+    z-index: 0;
 }
 
+.cyber-card-purple::before {
+    background: linear-gradient(180deg, #bf00ff, #00f5ff);
+    box-shadow: 0 0 14px #bf00ff;
+}
+
+/* Corner glow — behind text */
 .cyber-card::after {
     content: '';
     position: absolute;
     top: 0; right: 0;
     width: 80px; height: 80px;
-    background: radial-gradient(circle, rgba(0,245,255,0.1) 0%, transparent 70%);
+    background: radial-gradient(circle, rgba(0,245,255,0.07) 0%, transparent 70%);
+    z-index: 0;
+}
+
+/* Content wrapper sits above pseudo-elements */
+.card-inner {
+    position: relative;
+    z-index: 2;
+    padding: 22px 22px 22px 28px;
+}
+
+.card-label {
+    font-family: 'Orbitron', monospace;
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: 3px;
+    text-transform: uppercase;
+    margin-bottom: 16px;
+}
+
+.card-row {
+    font-family: 'Share Tech Mono', monospace;
+    font-size: 13px;
+    color: #d8f0ff;
+    line-height: 2.2;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.card-dot {
+    font-size: 12px;
+    flex-shrink: 0;
 }
 
 .cyber-card:hover {
     border-color: rgba(0, 245, 255, 0.6) !important;
-    box-shadow: 0 0 35px rgba(0, 245, 255, 0.15) !important;
+    box-shadow: 0 0 35px rgba(0, 245, 255, 0.12) !important;
+}
+
+.cyber-card-purple:hover {
+    border-color: rgba(191, 0, 255, 0.6) !important;
+    box-shadow: 0 0 35px rgba(191, 0, 255, 0.12) !important;
+}
+
+/* =====================================================
+   SYSTEM ARCHITECTURE STYLES
+===================================================== */
+.arch-grid {
+    display: grid;
+    grid-template-columns: 3fr 2fr;
+    gap: 24px;
+    padding: 20px 4px 8px;
+}
+
+.arch-section {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+}
+
+.arch-title {
+    font-family: 'Orbitron', monospace;
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 3px;
+    color: #00f5ff;
+    text-transform: uppercase;
+    border-bottom: 1px solid rgba(0,245,255,0.2);
+    padding-bottom: 8px;
+    margin-bottom: 4px;
+}
+
+.arch-desc {
+    font-family: 'Rajdhani', sans-serif;
+    font-size: 14px;
+    color: #a0c8d8;
+    line-height: 1.6;
+    margin: 0 0 8px;
+}
+
+.arch-row {
+    display: flex;
+    align-items: flex-start;
+    gap: 14px;
+}
+
+.arch-tag {
+    font-family: 'Orbitron', monospace;
+    font-size: 9px;
+    font-weight: 700;
+    letter-spacing: 1.5px;
+    border: 1px solid;
+    border-radius: 2px;
+    padding: 4px 8px;
+    white-space: nowrap;
+    flex-shrink: 0;
+    margin-top: 2px;
+}
+
+.arch-detail {
+    font-family: 'Share Tech Mono', monospace;
+    font-size: 13px;
+    color: #d0e8f0;
+    line-height: 1.6;
+}
+
+.emotion-chips {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 10px;
+    margin-top: 4px;
+}
+
+.emotion-chip {
+    font-family: 'Orbitron', monospace;
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 2px;
+    border: 1px solid;
+    border-radius: 4px;
+    padding: 12px 10px;
+    text-align: center;
+    background: rgba(255,255,255,0.02);
+    transition: all 0.3s;
+}
+
+.emotion-chip:hover {
+    background: rgba(255,255,255,0.06);
+    transform: translateY(-2px);
+}
+
+/* =====================================================
+   HIDE GRADIO "USE API" / BUILT WITH FOOTER
+===================================================== */
+.built-with,
+a[href*="gradio"],
+footer.svelte-1ax1toq,
+.svelte-1ax1toq,
+div[class*="built"],
+.show-api,
+button[title*="API"],
+.api-btn {
+    display: none !important;
 }
 
 /* =====================================================
@@ -1213,24 +1363,16 @@ with gr.Blocks(
     """)
 
     # ── Header ──────────────────────────────────────────
-    gr.HTML(f"""
+    gr.HTML("""
     <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>
     """)
 
@@ -1238,19 +1380,19 @@ with gr.Blocks(
     gr.HTML("""
     <div class="info-grid">
         <div class="cyber-card">
-            <h4 style="font-family:'Orbitron',monospace;font-size:10px;letter-spacing:3px;color:#00f5ff;margin:0 0 14px;text-shadow:0 0 8px rgba(0,245,255,0.6);">MODALITIES</h4>
-            <div style="font-family:'Share Tech Mono',monospace;font-size:14px;line-height:2.2;color:#ffffff;">
-                <div><span style="color:#00f5ff;">◈</span> &nbsp;Audio Waveform Analysis</div>
-                <div><span style="color:#00f5ff;">◈</span> &nbsp;Speech Transcription (Whisper)</div>
-                <div><span style="color:#00f5ff;">◈</span> &nbsp;Facial Expression Mapping</div>
+            <div class="card-inner">
+                <div class="card-label" style="color:#00f5ff;">MODALITIES</div>
+                <div class="card-row"><span class="card-dot" style="color:#00f5ff;">◈</span>Audio Waveform Analysis</div>
+                <div class="card-row"><span class="card-dot" style="color:#00f5ff;">◈</span>Speech Transcription (Whisper)</div>
+                <div class="card-row"><span class="card-dot" style="color:#00f5ff;">◈</span>Facial Expression Mapping</div>
             </div>
         </div>
-        <div class="cyber-card" style="border-left-color:#bf00ff;">
-            <h4 style="font-family:'Orbitron',monospace;font-size:10px;letter-spacing:3px;color:#bf00ff;margin:0 0 14px;text-shadow:0 0 8px rgba(191,0,255,0.6);">NEURAL MODELS</h4>
-            <div style="font-family:'Share Tech Mono',monospace;font-size:14px;line-height:2.2;color:#ffffff;">
-                <div><span style="color:#bf00ff;">◈</span> &nbsp;Wav2Vec2 &nbsp;·&nbsp; BERT &nbsp;·&nbsp; ResNet18</div>
-                <div><span style="color:#bf00ff;">◈</span> &nbsp;Whisper ASR</div>
-                <div><span style="color:#bf00ff;">◈</span> &nbsp;Hybrid Bimodal Fusion (HBF)</div>
+        <div class="cyber-card cyber-card-purple">
+            <div class="card-inner">
+                <div class="card-label" style="color:#bf00ff;">NEURAL MODELS</div>
+                <div class="card-row"><span class="card-dot" style="color:#bf00ff;">◈</span>Wav2Vec2 · BERT · ResNet18</div>
+                <div class="card-row"><span class="card-dot" style="color:#bf00ff;">◈</span>Whisper ASR</div>
+                <div class="card-row"><span class="card-dot" style="color:#bf00ff;">◈</span>Hybrid Bimodal Fusion (HBF)</div>
             </div>
         </div>
     </div>
@@ -1305,19 +1447,38 @@ with gr.Blocks(
     # ── About Accordion ─────────────────────────────────
     with gr.Accordion("◆ SYSTEM ARCHITECTURE", open=False):
 
-        gr.Markdown("""
-        ### Neural Pipeline
-
-        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`
+        gr.HTML("""
+        <div class="arch-grid">
+            <div class="arch-section">
+                <div class="arch-title">NEURAL PIPELINE</div>
+                <p class="arch-desc">Three independent encoders fused through a Hybrid Bimodal Fusion (HBF) block across 6 iterative layers.</p>
+                <div class="arch-row">
+                    <div class="arch-tag" style="border-color:#00f5ff;color:#00f5ff;">WAV2VEC2</div>
+                    <div class="arch-detail">Extracts deep acoustic features from raw audio waveform</div>
+                </div>
+                <div class="arch-row">
+                    <div class="arch-tag" style="border-color:#bf00ff;color:#bf00ff;">BERT</div>
+                    <div class="arch-detail">Understands semantic and emotional tone from transcribed speech</div>
+                </div>
+                <div class="arch-row">
+                    <div class="arch-tag" style="border-color:#00ff88;color:#00ff88;">RESNET18</div>
+                    <div class="arch-detail">Captures facial micro-expressions across sampled video frames</div>
+                </div>
+                <div class="arch-row">
+                    <div class="arch-tag" style="border-color:#ff6b35;color:#ff6b35;">HBF</div>
+                    <div class="arch-detail">Iteratively aligns all three modalities over 6 fusion layers</div>
+                </div>
+            </div>
+            <div class="arch-section">
+                <div class="arch-title">DETECTABLE EMOTIONS</div>
+                <div class="emotion-chips">
+                    <div class="emotion-chip" style="border-color:#ff4444;color:#ff4444;box-shadow:0 0 12px rgba(255,68,68,0.2);">⚡ ANGRY</div>
+                    <div class="emotion-chip" style="border-color:#ffcc00;color:#ffcc00;box-shadow:0 0 12px rgba(255,204,0,0.2);">◈ HAPPY</div>
+                    <div class="emotion-chip" style="border-color:#00f5ff;color:#00f5ff;box-shadow:0 0 12px rgba(0,245,255,0.2);">◎ NEUTRAL</div>
+                    <div class="emotion-chip" style="border-color:#7b9fff;color:#7b9fff;box-shadow:0 0 12px rgba(123,159,255,0.2);">◇ SAD</div>
+                </div>
+            </div>
+        </div>
         """)
 
     # ── Footer ──────────────────────────────────────────