app 8

app.py

@@ -489,21 +489,12 @@ def predict_emotion(video_file):
 
         confidence = float(probs.max())
 
-        emotion_icons = {
-            "angry": "⚡",
-            "happy": "◈",
-            "neutral": "◎",
-            "sad": "◇"
-        }
-
-        icon = emotion_icons.get(predicted_emotion, "◆")
-
         result_text = f"""
-## {icon} EMOTION DETECTED
-
-### `{predicted_emotion.upper()}`
-
-**Neural Confidence:** `{confidence:.2%}`
+        ## EMOTION DETECTED
+        
+        ### `{predicted_emotion.upper()}`
+        
+        **Neural Confidence:** `{confidence:.2%}`
         """
 
         if os.path.exists(audio_path):
@@ -827,12 +818,13 @@ body::after {
 
 .card-row {
     font-family: 'Share Tech Mono', monospace;
-    font-size: 13px;
-    color: #d8f0ff;
+    font-size: 14px;
+    color: #ffffff !important;
     line-height: 2.2;
     display: flex;
     align-items: center;
     gap: 10px;
+    opacity: 1 !important;
 }
 
 .card-dot {
@@ -880,9 +872,9 @@ body::after {
 
 .arch-desc {
     font-family: 'Rajdhani', sans-serif;
-    font-size: 14px;
-    color: #a0c8d8;
-    line-height: 1.6;
+    font-size: 15px;
+    color: #ffffff !important;
+    line-height: 1.8;
     margin: 0 0 8px;
 }
 
@@ -908,8 +900,9 @@ body::after {
 .arch-detail {
     font-family: 'Share Tech Mono', monospace;
     font-size: 13px;
-    color: #d0e8f0;
-    line-height: 1.6;
+    color: #ffffff !important;
+    line-height: 1.8;
+    opacity: 1 !important;
 }
 
 .emotion-chips {
@@ -997,7 +990,7 @@ h4 {
 }
 
 /* =====================================================
-   LABELS / TEXT — GLOBAL
+   LABELS / TEXT
 ===================================================== */
 label, .gr-label span, p, li {
     font-family: 'Rajdhani', sans-serif !important;
@@ -1007,108 +1000,24 @@ label, .gr-label span, p, li {
     letter-spacing: 1px !important;
 }
 
-/* =====================================================
-   GRADIO COMPONENT LABELS (Video Input, Transcribed Speech etc.)
-   Target every possible selector Gradio uses across versions
-===================================================== */
-
-/* The label text above each component */
-label > span,
-label span,
-.block label span,
-.block > label > span,
-fieldset > span,
-fieldset span,
-div[class*="label"] span,
-span[data-testid*="label"],
-.wrap > span,
-span.svelte-1ipelgc,
-.svelte-1ipelgc,
-/* catch-all: any span that is a direct child of a label */
-label > span:first-child {
-    color: #00f5ff !important;
-    font-family: 'Share Tech Mono', monospace !important;
-    font-size: 11px !important;
-    font-weight: 600 !important;
-    letter-spacing: 2.5px !important;
-    text-transform: uppercase !important;
-    opacity: 1 !important;
-    visibility: visible !important;
-    display: inline-block !important;
-}
-
-/* Gradio wraps Video label differently — target via data-testid */
-div[data-testid="video"] label span,
-div[data-testid="video"] > div > label > span,
-div[data-testid="textbox"] label span,
-div[data-testid="textbox"] > div > label > span,
-div[data-testid="label"] label span,
-div[data-testid="label"] > div > label > span {
-    color: #00f5ff !important;
+/* Gradio component labels */
+.svelte-1ipelgc, span.svelte-1ipelgc,
+div[class*="label"] > span,
+.block > label > span {
+    color: var(--neon-cyan) !important;
     font-family: 'Share Tech Mono', monospace !important;
-    font-size: 11px !important;
-    letter-spacing: 2.5px !important;
+    font-size: 12px !important;
+    letter-spacing: 2px !important;
     text-transform: uppercase !important;
     opacity: 1 !important;
-    visibility: visible !important;
 }
 
 /* =====================================================
-   TEXTAREA / TEXTBOX CONTENT TEXT
-===================================================== */
-textarea,
-div[data-testid="textbox"] textarea,
-div[data-testid="textbox"] input {
-    font-family: 'Share Tech Mono', monospace !important;
-    font-size: 13px !important;
-    background: #071828 !important;
-    border: 1px solid rgba(0, 245, 255, 0.3) !important;
-    border-radius: 4px !important;
-    color: #cff4ff !important;
-    caret-color: #00f5ff !important;
-    transition: all 0.3s !important;
-    letter-spacing: 0.5px !important;
-    line-height: 1.7 !important;
-    opacity: 1 !important;
-    visibility: visible !important;
-    -webkit-text-fill-color: #cff4ff !important;
-}
-
-textarea:focus,
-div[data-testid="textbox"] textarea:focus {
-    border-color: #00f5ff !important;
-    box-shadow: 0 0 15px rgba(0, 245, 255, 0.2), inset 0 0 10px rgba(0, 245, 255, 0.03) !important;
-    outline: none !important;
-}
-
-textarea::placeholder,
-div[data-testid="textbox"] textarea::placeholder {
-    color: rgba(0, 200, 220, 0.35) !important;
-    -webkit-text-fill-color: rgba(0, 200, 220, 0.35) !important;
-    font-style: italic !important;
-}
-
-/* The outer textbox wrapper */
-div[data-testid="textbox"] {
-    background: transparent !important;
-}
-
-div[data-testid="textbox"] > label {
-    background: transparent !important;
-}
-
-div[data-testid="textbox"] > label > textarea {
-    background: #071828 !important;
-    color: #cff4ff !important;
-    -webkit-text-fill-color: #cff4ff !important;
-}
-
-/* =====================================================
-   ANALYZE BUTTON (main action buttons only)
+   ANALYZE BUTTON
 ===================================================== */
 .gr-button,
 button[class*="primary"],
-button[class*="lg"] {
+button {
     font-family: 'Orbitron', monospace !important;
     font-size: 13px !important;
     font-weight: 700 !important;
@@ -1126,8 +1035,7 @@ button[class*="lg"] {
 }
 
 .gr-button::before,
-button[class*="primary"]::before,
-button[class*="lg"]::before {
+button::before {
     content: '' !important;
     position: absolute !important;
     top: 0; left: -100% !important;
@@ -1142,14 +1050,12 @@ button[class*="lg"]::before {
 }
 
 .gr-button:hover::before,
-button[class*="primary"]:hover::before,
-button[class*="lg"]:hover::before {
+button:hover::before {
     left: 100% !important;
 }
 
 .gr-button:hover,
-button[class*="primary"]:hover,
-button[class*="lg"]:hover {
+button:hover {
     background: rgba(0, 245, 255, 0.1) !important;
     box-shadow:
         0 0 20px rgba(0, 245, 255, 0.4),
@@ -1159,91 +1065,37 @@ button[class*="lg"]:hover {
 }
 
 .gr-button:active,
-button[class*="primary"]:active,
-button[class*="lg"]:active {
+button: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 (fallback for non-testid elements)
+   INPUT / TEXTAREA
 ===================================================== */
 textarea,
 input[type="text"],
-input[type="search"],
-input:not([type="range"]) {
+input {
     font-family: 'Share Tech Mono', monospace !important;
     font-size: 13px !important;
-    background: #071828 !important;
-    border: 1px solid rgba(0, 245, 255, 0.3) !important;
-    border-radius: 4px !important;
+    background: #071020 !important;
+    border: 1px solid rgba(0, 245, 255, 0.25) !important;
+    border-radius: 3px !important;
     color: #cff4ff !important;
-    -webkit-text-fill-color: #cff4ff !important;
     transition: all 0.3s !important;
     letter-spacing: 0.5px !important;
-    line-height: 1.7 !important;
 }
 
 textarea:focus,
 input:focus {
-    border-color: #00f5ff !important;
-    box-shadow: 0 0 15px rgba(0, 245, 255, 0.2) !important;
+    border-color: var(--neon-cyan) !important;
+    box-shadow: 0 0 15px rgba(0, 245, 255, 0.25) !important;
     outline: none !important;
 }
 
+/* placeholder */
 textarea::placeholder,
 input::placeholder {
-    color: rgba(0, 200, 220, 0.35) !important;
-    -webkit-text-fill-color: rgba(0, 200, 220, 0.35) !important;
-    font-style: italic !important;
+    color: rgba(127, 184, 204, 0.45) !important;
 }
 
 /* =====================================================
@@ -1257,33 +1109,6 @@ video {
         inset 0 0 30px rgba(0, 0, 0, 0.5) !important;
 }
 
-/* "Video Input" label text */
-div[data-testid="video"] > div > label > span,
-div[data-testid="video"] label span,
-div[data-testid="video"] span {
-    color: #00f5ff !important;
-    font-family: 'Share Tech Mono', monospace !important;
-    font-size: 11px !important;
-    letter-spacing: 2.5px !important;
-    text-transform: uppercase !important;
-    opacity: 1 !important;
-    -webkit-text-fill-color: #00f5ff !important;
-}
-
-/* "Click to Access Webcam" / "Drop Video Here" upload text */
-div[data-testid="video"] .wrap span,
-div[data-testid="video"] [class*="wrap"] span,
-div[data-testid="video"] p,
-div[data-testid="video"] [class*="upload"] span,
-div[data-testid="video"] [class*="upload"] p {
-    color: #7bc8d8 !important;
-    font-family: 'Share Tech Mono', monospace !important;
-    font-size: 12px !important;
-    letter-spacing: 1.5px !important;
-    -webkit-text-fill-color: #7bc8d8 !important;
-    opacity: 1 !important;
-}
-
 /* Upload zone */
 .upload-zone,
 div[class*="upload"] {
@@ -1496,6 +1321,37 @@ 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;
+}
+
 """
 
 # =========================================================
@@ -1574,7 +1430,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",
@@ -1582,7 +1438,7 @@ with gr.Blocks(
             )
 
             predict_btn = gr.Button(
-                "⬡  INITIALIZE ANALYSIS",
+                "ANALYZE EMOTION",
                 variant="primary",
                 size="lg"
             )
@@ -1590,7 +1446,7 @@ with gr.Blocks(
         # RIGHT: Results
         with gr.Column(scale=1):
 
-            gr.Markdown("## ◨ ANALYSIS OUTPUT")
+            gr.Markdown("## ANALYSIS OUTPUT")
 
             result_text = gr.Markdown(
                 value="""
@@ -1604,7 +1460,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..."
@@ -1613,7 +1469,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">