Update app.py

app.py

@@ -166,7 +166,7 @@ class SpectrogramVisualizer:
         hop: Optional[int] = None,
         vmin: float = -100,
         vmax: float = 0,
-        cmap: str = "viridis",
+        cmap: str = "plasma",
     ):
         """Plot a spectrogram of shape [F, T]"""
         spec_np = spec.cpu().numpy() if isinstance(spec, torch.Tensor) else spec
@@ -188,14 +188,18 @@ class SpectrogramVisualizer:
         )
         
         if title:
-            ax.set_title(title, fontsize=14, fontweight='bold', pad=15, color='white')
+            ax.set_title(title, fontsize=14, fontweight='bold', pad=15, color='#e0e0e0')
         if xlabel:
-            ax.set_xlabel(xlabel, fontsize=11, color='white')
+            ax.set_xlabel(xlabel, fontsize=11, color='#b0b0b0')
         if ylabel:
-            ax.set_ylabel(ylabel, fontsize=11, color='white')
+            ax.set_ylabel(ylabel, fontsize=11, color='#b0b0b0')
         
-        ax.grid(True, alpha=0.15, linestyle='--', linewidth=0.5)
-        ax.tick_params(colors='white', labelsize=9)
+        ax.grid(True, alpha=0.15, linestyle='--', linewidth=0.5, color='#555')
+        ax.tick_params(colors='#888', labelsize=9)
+        ax.spines['top'].set_color('#333')
+        ax.spines['bottom'].set_color('#333')
+        ax.spines['left'].set_color('#333')
+        ax.spines['right'].set_color('#333')
         
         return im
     
@@ -235,8 +239,8 @@ class SpectrogramVisualizer:
             vmax=vmax,
         )
         
-        figure.patch.set_facecolor('#0f0f0f')
-        ax.set_facecolor('#0f0f0f')
+        figure.patch.set_facecolor('#0a0a0a')
+        ax.set_facecolor('#0a0a0a')
         figure.canvas.draw()
         
         return PILImage.frombytes(
@@ -400,13 +404,18 @@ def toggle_input_mode(choice: str):
 
 
 # ============================================================================
-# Custom CSS
+# Custom CSS - Dark Theme
 # ============================================================================
 
 custom_css = """
-/* Global Styles */
+/* Global Dark Theme */
 .gradio-container {
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
+    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 100%) !important;
+}
+
+body {
+    background: #0a0a0a !important;
 }
 
 /* Hero Section */
@@ -415,16 +424,17 @@ custom_css = """
     padding: 50px 30px;
     border-radius: 20px;
     margin-bottom: 40px;
-    box-shadow: 0 15px 40px rgba(102, 126, 234, 0.4);
+    box-shadow: 0 15px 40px rgba(102, 126, 234, 0.6);
     text-align: center;
+    border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 #hero-section h1 {
-    color: white;
+    color: #ffffff;
     font-size: 3.2em;
     font-weight: 800;
     margin: 0 0 15px 0;
-    text-shadow: 2px 2px 8px rgba(0,0,0,0.2);
+    text-shadow: 2px 2px 8px rgba(0,0,0,0.4);
     letter-spacing: -1px;
 }
 
@@ -437,49 +447,49 @@ custom_css = """
     font-weight: 300;
 }
 
-/* Feature Cards */
+/* Feature Cards - Dark */
 .feature-card {
-    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+    background: linear-gradient(135deg, #1e1e2e 0%, #2d2d44 100%);
     padding: 25px;
     border-radius: 15px;
-    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
+    box-shadow: 0 8px 25px rgba(0,0,0,0.4);
     margin-bottom: 20px;
-    border: 1px solid rgba(255,255,255,0.5);
+    border: 1px solid rgba(102, 126, 234, 0.3);
     transition: all 0.3s ease;
 }
 
 .feature-card:hover {
     transform: translateY(-3px);
-    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
+    box-shadow: 0 12px 35px rgba(102, 126, 234, 0.5);
+    border-color: rgba(102, 126, 234, 0.6);
 }
 
 /* Input Controls Section */
 .input-controls {
-    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
+    background: linear-gradient(135deg, #1a1a2e 0%, #252545 100%);
     padding: 30px;
     border-radius: 15px;
-    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
+    box-shadow: 0 5px 20px rgba(0,0,0,0.5);
+    border: 1px solid rgba(102, 126, 234, 0.2);
 }
 
 /* Output Section */
 .output-section {
-    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
+    background: linear-gradient(135deg, #2d1b3d 0%, #3d2952 100%);
     padding: 30px;
     border-radius: 15px;
-    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
+    box-shadow: 0 5px 20px rgba(0,0,0,0.5);
+    border: 1px solid rgba(118, 75, 162, 0.3);
 }
 
 /* Section Headers */
 .section-header {
-    color: #667eea;
+    color: #a78bfa;
     font-size: 1.8em;
     font-weight: 700;
     margin: 30px 0 20px 0;
     text-align: center;
-    background: linear-gradient(135deg, #667eea, #764ba2);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
+    text-shadow: 0 0 20px rgba(167, 139, 250, 0.5);
 }
 
 /* Process Button */
@@ -490,25 +500,26 @@ custom_css = """
     font-weight: 700 !important;
     padding: 20px 50px !important;
     border-radius: 50px !important;
-    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.5) !important;
+    box-shadow: 0 10px 40px rgba(102, 126, 234, 0.7) !important;
     transition: all 0.3s ease !important;
-    color: white !important;
+    color: #ffffff !important;
     text-transform: uppercase;
     letter-spacing: 1px;
 }
 
 .process-button:hover {
     transform: translateY(-3px) scale(1.02) !important;
-    box-shadow: 0 15px 40px rgba(102, 126, 234, 0.7) !important;
+    box-shadow: 0 15px 50px rgba(102, 126, 234, 0.9) !important;
 }
 
 /* Audio Components */
 .audio-wrapper {
-    background: white;
+    background: linear-gradient(135deg, #1e1e2e 0%, #2a2a40 100%);
     padding: 20px;
     border-radius: 12px;
-    box-shadow: 0 3px 12px rgba(0,0,0,0.08);
+    box-shadow: 0 3px 12px rgba(0,0,0,0.6);
     margin: 15px 0;
+    border: 1px solid rgba(102, 126, 234, 0.2);
 }
 
 /* Tabs */
@@ -517,30 +528,37 @@ custom_css = """
     font-size: 1.1em !important;
     padding: 12px 24px !important;
     border-radius: 10px 10px 0 0 !important;
+    background: #1a1a2e !important;
+    color: #a0a0b0 !important;
+    border: 1px solid rgba(102, 126, 234, 0.2) !important;
 }
 
 .tab-nav button[aria-selected="true"] {
     background: linear-gradient(135deg, #667eea, #764ba2) !important;
-    color: white !important;
+    color: #ffffff !important;
 }
 
 /* Info Box */
 .info-box {
-    background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%);
+    background: linear-gradient(135deg, #1e1e3f 0%, #2d2d52 100%);
     padding: 25px;
     border-radius: 15px;
     margin: 25px 0;
     border-left: 5px solid #667eea;
-    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
 }
 
 .info-box h3 {
-    color: #667eea;
+    color: #a78bfa;
     font-size: 1.4em;
     font-weight: 700;
     margin-top: 0;
 }
 
+.info-box p, .info-box ul, .info-box li {
+    color: #c0c0d0;
+}
+
 .info-box ul {
     margin: 10px 0;
     padding-left: 25px;
@@ -553,11 +571,12 @@ custom_css = """
 
 /* Examples Section */
 .examples-section {
-    background: linear-gradient(135deg, #ffeaa7 0%, #dfe6e9 100%);
+    background: linear-gradient(135deg, #2a2a3e 0%, #35354f 100%);
     padding: 25px;
     border-radius: 15px;
     margin-top: 30px;
-    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
+    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
+    border: 1px solid rgba(102, 126, 234, 0.2);
 }
 
 /* Footer */
@@ -567,7 +586,8 @@ custom_css = """
     margin-top: 50px;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     border-radius: 15px;
-    color: white;
+    color: #ffffff;
+    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.5);
 }
 
 #footer h3 {
@@ -578,7 +598,7 @@ custom_css = """
 
 #footer p {
     margin: 5px 0;
-    opacity: 0.9;
+    opacity: 0.95;
 }
 
 /* Radio Buttons */
@@ -587,6 +607,14 @@ custom_css = """
     border-radius: 10px !important;
     font-weight: 600 !important;
     transition: all 0.3s ease !important;
+    background: #1a1a2e !important;
+    color: #b0b0c0 !important;
+    border: 1px solid rgba(102, 126, 234, 0.3) !important;
+}
+
+.radio-group label:hover {
+    background: #252545 !important;
+    border-color: rgba(102, 126, 234, 0.6) !important;
 }
 
 /* Dropdowns */
@@ -594,13 +622,47 @@ custom_css = """
     border-radius: 10px !important;
     padding: 12px !important;
     font-size: 1.05em !important;
-    border: 2px solid #e0e0e0 !important;
+    background: #1a1a2e !important;
+    color: #c0c0d0 !important;
+    border: 2px solid rgba(102, 126, 234, 0.3) !important;
     transition: all 0.3s ease !important;
 }
 
 .dropdown select:focus {
     border-color: #667eea !important;
-    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3) !important;
+}
+
+/* Labels and Text */
+label, .label {
+    color: #b0b0c0 !important;
+}
+
+/* Markdown Text */
+.markdown-text, .prose {
+    color: #c0c0d0 !important;
+}
+
+/* Input Fields */
+input, textarea {
+    background: #1a1a2e !important;
+    color: #c0c0d0 !important;
+    border: 1px solid rgba(102, 126, 234, 0.3) !important;
+}
+
+/* Scrollbars */
+::-webkit-scrollbar {
+    width: 10px;
+    background: #1a1a2e;
+}
+
+::-webkit-scrollbar-thumb {
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(135deg, #764ba2, #667eea);
 }
 """
 
@@ -608,7 +670,7 @@ custom_css = """
 # Gradio Interface
 # ============================================================================
 
-with gr.Blocks(css=custom_css, theme=gr.themes.Soft(primary_hue="indigo")) as demo:
+with gr.Blocks(css=custom_css, theme=gr.themes.Base()) as demo:
     
     # Hero Section
     gr.HTML("""
@@ -685,6 +747,8 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Soft(primary_hue="indigo")) as de
                     elem_classes="dropdown"
                 )
             
+
+            
             process_btn = gr.Button(
                 "🚀 Denoise Audio",
                 elem_classes="process-button",