app.py 6

app.py

@@ -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"""
-        ## EMOTION DETECTED
-        
-        ### `{predicted_emotion.upper()}`
-        
-        **Neural Confidence:** `{confidence:.2%}`
+## {icon} EMOTION DETECTED
+
+### `{predicted_emotion.upper()}`
+
+**Neural Confidence:** `{confidence:.2%}`
         """
 
         if os.path.exists(audio_path):
@@ -818,13 +827,12 @@ body::after {
 
 .card-row {
     font-family: 'Share Tech Mono', monospace;
-    font-size: 14px;
-    color: #ffffff !important;
+    font-size: 13px;
+    color: #d8f0ff;
     line-height: 2.2;
     display: flex;
     align-items: center;
     gap: 10px;
-    opacity: 1 !important;
 }
 
 .card-dot {
@@ -872,9 +880,9 @@ body::after {
 
 .arch-desc {
     font-family: 'Rajdhani', sans-serif;
-    font-size: 15px;
-    color: #ffffff !important;
-    line-height: 1.8;
+    font-size: 14px;
+    color: #a0c8d8;
+    line-height: 1.6;
     margin: 0 0 8px;
 }
 
@@ -900,9 +908,8 @@ body::after {
 .arch-detail {
     font-family: 'Share Tech Mono', monospace;
     font-size: 13px;
-    color: #ffffff !important;
-    line-height: 1.8;
-    opacity: 1 !important;
+    color: #d0e8f0;
+    line-height: 1.6;
 }
 
 .emotion-chips {
@@ -1013,11 +1020,11 @@ div[class*="label"] > span,
 }
 
 /* =====================================================
-   ANALYZE BUTTON
+   ANALYZE BUTTON (main action buttons only)
 ===================================================== */
 .gr-button,
 button[class*="primary"],
-button {
+button[class*="lg"] {
     font-family: 'Orbitron', monospace !important;
     font-size: 13px !important;
     font-weight: 700 !important;
@@ -1035,7 +1042,8 @@ button {
 }
 
 .gr-button::before,
-button::before {
+button[class*="primary"]::before,
+button[class*="lg"]::before {
     content: '' !important;
     position: absolute !important;
     top: 0; left: -100% !important;
@@ -1050,12 +1058,14 @@ button::before {
 }
 
 .gr-button:hover::before,
-button:hover::before {
+button[class*="primary"]:hover::before,
+button[class*="lg"]:hover::before {
     left: 100% !important;
 }
 
 .gr-button:hover,
-button:hover {
+button[class*="primary"]:hover,
+button[class*="lg"]:hover {
     background: rgba(0, 245, 255, 0.1) !important;
     box-shadow:
         0 0 20px rgba(0, 245, 255, 0.4),
@@ -1065,10 +1075,60 @@ button:hover {
 }
 
 .gr-button:active,
-button:active {
+button[class*="primary"]:active,
+button[class*="lg"]:active {
     transform: translateY(0px) !important;
 }
 
+/* =====================================================
+   VIDEO UPLOAD / RECORD TAB BUTTONS
+===================================================== */
+/* Target the small tab-style buttons under the video component */
+button[class*="tab"],
+div[class*="upload"] button,
+div[class*="source"] button,
+.source-selection button,
+div[data-testid*="source"] button,
+div[class*="wrap"] > div > button:not([class*="lg"]):not([class*="primary"]) {
+    font-family: 'Share Tech Mono', monospace !important;
+    font-size: 11px !important;
+    font-weight: 600 !important;
+    letter-spacing: 2px !important;
+    text-transform: uppercase !important;
+    background: rgba(0, 245, 255, 0.06) !important;
+    border: 1px solid rgba(0, 245, 255, 0.3) !important;
+    color: #a0dce8 !important;
+    border-radius: 3px !important;
+    padding: 6px 16px !important;
+    transition: all 0.25s ease !important;
+    cursor: pointer !important;
+    position: relative !important;
+    overflow: visible !important;
+}
+
+button[class*="tab"]:hover,
+div[class*="upload"] button:hover,
+div[class*="source"] button:hover,
+.source-selection button:hover,
+div[data-testid*="source"] button:hover,
+div[class*="wrap"] > div > button:not([class*="lg"]):not([class*="primary"]):hover {
+    background: rgba(0, 245, 255, 0.14) !important;
+    border-color: var(--neon-cyan) !important;
+    color: #ffffff !important;
+    transform: none !important;
+    box-shadow: 0 0 10px rgba(0, 245, 255, 0.2) !important;
+}
+
+/* Active / selected tab */
+button[class*="tab"][class*="selected"],
+button[class*="tab"].selected,
+button[aria-selected="true"] {
+    background: rgba(0, 245, 255, 0.15) !important;
+    border-color: var(--neon-cyan) !important;
+    color: #00f5ff !important;
+    box-shadow: 0 0 12px rgba(0, 245, 255, 0.25) !important;
+}
+
 /* =====================================================
    INPUT / TEXTAREA
 ===================================================== */
@@ -1321,37 +1381,6 @@ hr {
     .info-grid { grid-template-columns: 1fr; }
     .cyber-title { font-size: 26px !important; letter-spacing: 3px !important; }
 }
-
-/* REMOVE GRADIO FOOTER + SETTINGS */
-
-footer,
-.settings,
-button[title="Settings"],
-button[aria-label="Settings"],
-.gradio-footer,
-div[class*="settings"],
-div[class*="footer"] {
-    display: none !important;
-}
-
-/* FIX INVISIBLE VIDEO BUTTON ICONS */
-
-button svg,
-button span,
-button {
-    color: #00f5ff !important;
-    fill: #00f5ff !important;
-    opacity: 1 !important;
-}
-
-/* specifically for video action buttons */
-div[data-testid="video"] button {
-    color: #00f5ff !important;
-    fill: #00f5ff !important;
-    background: #071020 !important;
-    border: 1px solid #00f5ff !important;
-}
-
 """
 
 # =========================================================
@@ -1430,7 +1459,7 @@ with gr.Blocks(
         # LEFT: Upload
         with gr.Column(scale=1):
 
-            gr.Markdown("## INPUT STREAM")
+            gr.Markdown("## ◧ INPUT STREAM")
 
             video_input = gr.Video(
                 label="Video Input",
@@ -1438,7 +1467,7 @@ with gr.Blocks(
             )
 
             predict_btn = gr.Button(
-                "ANALYZE EMOTION",
+                "⬡  INITIALIZE ANALYSIS",
                 variant="primary",
                 size="lg"
             )
@@ -1446,7 +1475,7 @@ with gr.Blocks(
         # RIGHT: Results
         with gr.Column(scale=1):
 
-            gr.Markdown("## ANALYSIS OUTPUT")
+            gr.Markdown("## ◨ ANALYSIS OUTPUT")
 
             result_text = gr.Markdown(
                 value="""
@@ -1460,7 +1489,7 @@ with gr.Blocks(
             )
 
             transcription_output = gr.Textbox(
-                label="Transcribed Speech",
+                label="◈  Transcribed Speech",
                 lines=5,
                 interactive=False,
                 placeholder="Speech transcription will appear here after analysis..."
@@ -1469,7 +1498,7 @@ with gr.Blocks(
     gr.HTML('<hr/>')
 
     # ── About Accordion ─────────────────────────────────
-    with gr.Accordion("SYSTEM ARCHITECTURE", open=False):
+    with gr.Accordion("◆ SYSTEM ARCHITECTURE", open=False):
 
         gr.HTML("""
         <div class="arch-grid">