app.py 3

app.py

@@ -542,13 +542,15 @@ custom_css = """
     --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);
+    --dark-bg:      #060e1a;
+    --dark-panel:   #0a1628;
+    --dark-card:    #0d1e35;
+    --border-glow:  rgba(0, 245, 255, 0.35);
+    --text-primary: #cff4ff;
+    --text-bright:  #ffffff;
+    --text-dim:     #7eb8cc;
+    --text-muted:   #5a9ab0;
+    --grid-color:   rgba(0, 245, 255, 0.05);
 }
 
 /* =====================================================
@@ -768,10 +770,10 @@ body::after {
 }
 
 .cyber-card {
-    background: var(--dark-card) !important;
-    border: 1px solid var(--border-glow) !important;
+    background: #0d1e35 !important;
+    border: 1px solid rgba(0, 245, 255, 0.3) !important;
     border-radius: 4px !important;
-    padding: 20px 24px !important;
+    padding: 22px 26px !important;
     position: relative;
     overflow: hidden;
     transition: border-color 0.3s, box-shadow 0.3s;
@@ -783,20 +785,20 @@ body::after {
     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);
+    box-shadow: 0 0 14px var(--neon-cyan);
 }
 
 .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%);
+    width: 80px; height: 80px;
+    background: radial-gradient(circle, rgba(0,245,255,0.1) 0%, transparent 70%);
 }
 
 .cyber-card:hover {
-    border-color: rgba(0, 245, 255, 0.5) !important;
-    box-shadow: 0 0 30px rgba(0, 245, 255, 0.1) !important;
+    border-color: rgba(0, 245, 255, 0.6) !important;
+    box-shadow: 0 0 35px rgba(0, 245, 255, 0.15) !important;
 }
 
 /* =====================================================
@@ -808,8 +810,8 @@ body::after {
 .gr-form,
 div[class*="panel"],
 div[class*="block"] {
-    background: var(--dark-card) !important;
-    border: 1px solid var(--border-glow) !important;
+    background: #0a1628 !important;
+    border: 1px solid rgba(0, 245, 255, 0.2) !important;
     border-radius: 4px !important;
     box-shadow: none !important;
     backdrop-filter: none !important;
@@ -827,20 +829,21 @@ h1, h2, h3, h4 {
 
 h2 {
     font-size: 16px !important;
-    color: var(--neon-cyan) !important;
-    border-bottom: 1px solid rgba(0,245,255,0.2) !important;
+    color: #00f5ff !important;
+    border-bottom: 1px solid rgba(0,245,255,0.3) !important;
     padding-bottom: 8px !important;
     margin-bottom: 16px !important;
+    text-shadow: 0 0 12px rgba(0,245,255,0.5) !important;
 }
 
 h3 {
-    font-size: 14px !important;
-    color: var(--text-primary) !important;
+    font-size: 15px !important;
+    color: #ffffff !important;
 }
 
 h4 {
-    font-size: 12px !important;
-    color: var(--text-dim) !important;
+    font-size: 13px !important;
+    color: #7eb8cc !important;
 }
 
 /* =====================================================
@@ -848,12 +851,24 @@ h4 {
 ===================================================== */
 label, .gr-label span, p, li {
     font-family: 'Rajdhani', sans-serif !important;
-    color: var(--text-primary) !important;
-    font-size: 14px !important;
+    color: #ffffff !important;
+    font-size: 15px !important;
     font-weight: 600 !important;
     letter-spacing: 1px !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: 12px !important;
+    letter-spacing: 2px !important;
+    text-transform: uppercase !important;
+    opacity: 1 !important;
+}
+
 /* =====================================================
    ANALYZE BUTTON
 ===================================================== */
@@ -919,10 +934,10 @@ input[type="text"],
 input {
     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;
+    background: #071020 !important;
+    border: 1px solid rgba(0, 245, 255, 0.25) !important;
     border-radius: 3px !important;
-    color: var(--neon-cyan) !important;
+    color: #cff4ff !important;
     transition: all 0.3s !important;
     letter-spacing: 0.5px !important;
 }
@@ -930,10 +945,16 @@ input {
 textarea:focus,
 input:focus {
     border-color: var(--neon-cyan) !important;
-    box-shadow: 0 0 15px rgba(0, 245, 255, 0.2) !important;
+    box-shadow: 0 0 15px rgba(0, 245, 255, 0.25) !important;
     outline: none !important;
 }
 
+/* placeholder */
+textarea::placeholder,
+input::placeholder {
+    color: rgba(127, 184, 204, 0.45) !important;
+}
+
 /* =====================================================
    VIDEO COMPONENT
 ===================================================== */
@@ -991,13 +1012,13 @@ div[class*="bar"],
 .gr-accordion,
 details,
 summary {
-    background: var(--dark-card) !important;
-    border: 1px solid rgba(0,245,255,0.12) !important;
+    background: #0d1e35 !important;
+    border: 1px solid rgba(0,245,255,0.2) !important;
     border-radius: 4px !important;
     font-family: 'Orbitron', monospace !important;
     font-size: 12px !important;
     letter-spacing: 2px !important;
-    color: var(--text-dim) !important;
+    color: #7eb8cc !important;
     text-transform: uppercase !important;
 }
 
@@ -1005,6 +1026,7 @@ details summary {
     padding: 14px 20px !important;
     cursor: pointer !important;
     transition: color 0.3s !important;
+    color: #a0d4e8 !important;
 }
 
 details summary:hover {
@@ -1013,7 +1035,7 @@ details summary:hover {
 
 details[open] summary {
     color: var(--neon-cyan) !important;
-    border-bottom: 1px solid rgba(0,245,255,0.12) !important;
+    border-bottom: 1px solid rgba(0,245,255,0.2) !important;
 }
 
 /* =====================================================
@@ -1216,19 +1238,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:#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>
+            <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>
         </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 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>
         </div>
     </div>