Update app.py

app.py

@@ -49,10 +49,18 @@ except ImportError:
 # ──────────────────────────────────────────────────────────────────────────────
 # Constants
 # ──────────────────────────────────────────────────────────────────────────────
-BG_COLOR   = "#0b1e35"
-GRID_COLOR = "#1e3a5f"
-TEXT_COLOR = "#cfe8ff"
-ACCENT     = "#00d4ff"
+# Coral Stay palette (https://designmd.ai/chef/coral-stay)
+BG_COLOR     = "#FFFFFF"   # Background — clean page/figure background
+SURFACE      = "#F7F7F7"   # Surface — card/plot-axes fill
+GRID_COLOR   = "#DDDDDD"   # Border — dividers, plot grids
+TEXT_COLOR   = "#222222"   # Text Primary — Hof Dark
+TEXT_MUTED   = "#717171"   # Text Secondary
+ACCENT       = "#FF5A5F"   # Primary — Rausch Coral
+ACCENT_HOVER = "#E04E52"   # Primary hover
+SECONDARY    = "#00A699"   # Secondary — Kazan Teal
+SUCCESS      = "#008A05"
+WARNING      = "#E07912"
+ERROR        = "#C13515"
 N_FFT      = 2048
 HOP        = 512
 MAX_DUR_S  = 300          # clip to 5 min for HuggingFace timeout safety
@@ -151,7 +159,7 @@ def _make_fig(nrows=1, ncols=1, figsize=(12, 4)):
 
 
 def _style(ax, title="", xlabel="", ylabel=""):
-    ax.set_facecolor(BG_COLOR)
+    ax.set_facecolor(SURFACE)
     ax.set_title(title, color=ACCENT, fontsize=12, fontweight="bold", pad=8)
     ax.set_xlabel(xlabel, color=TEXT_COLOR, fontsize=9)
     ax.set_ylabel(ylabel, color=TEXT_COLOR, fontsize=9)
@@ -262,11 +270,11 @@ def analyze(file_path):
     fig3, axes3 = _make_fig(3, 1, figsize=(13, 12))
 
     # PSD
-    axes3[0].plot(f_psd[1:], psd_db[1:], color="#ff7f0e", linewidth=1.3)
+    axes3[0].plot(f_psd[1:], psd_db[1:], color=SECONDARY, linewidth=1.3)
     marine_bands = [
-        (20,   1000,  "#2ca02c", "Fish & low-freq (20–1 kHz)"),
-        (1000, 5000,  "#ff7f0e", "Snapping shrimp (1–5 kHz)"),
-        (5000, min(sr / 2, 20000), "#d62728", "High-freq biotic (5–20 kHz)"),
+        (20,   1000,  SUCCESS, "Fish & low-freq (20–1 kHz)"),
+        (1000, 5000,  ACCENT, "Snapping shrimp (1–5 kHz)"),
+        (5000, min(sr / 2, 20000), WARNING, "High-freq biotic (5–20 kHz)"),
     ]
     for flo, fhi, color, label in marine_bands:
         if fhi <= sr / 2 and flo < sr / 2:
@@ -278,8 +286,8 @@ def analyze(file_path):
                     facecolor=BG_COLOR, edgecolor=GRID_COLOR, labelcolor=TEXT_COLOR)
 
     # Spectral centroid
-    axes3[1].plot(c_times, centroid, color="#9467bd", linewidth=1.1, alpha=0.9)
-    axes3[1].fill_between(c_times, centroid, alpha=0.12, color="#9467bd")
+    axes3[1].plot(c_times, centroid, color=ACCENT, linewidth=1.1, alpha=0.9)
+    axes3[1].fill_between(c_times, centroid, alpha=0.12, color=ACCENT)
     axes3[1].set_xlim(0, duration)
     _style(axes3[1], "Spectral Centroid Over Time", "Time (s)", "Frequency (Hz)")
 
@@ -289,7 +297,7 @@ def analyze(file_path):
         ax=axes3[2], cmap="coolwarm"
     )
     _style(axes3[2], "MFCCs (20 coefficients)", "Time (s)", "MFCC Coefficient")
-    axes3[2].set_facecolor(BG_COLOR)
+    axes3[2].set_facecolor(SURFACE)
     _colorbar(fig3, im_mfcc, axes3[2], label="Amplitude")
 
     fig3.tight_layout(pad=1.2)
@@ -325,22 +333,22 @@ def analyze(file_path):
         _style(ax, title, "Time (s)", ylabel)
         ax.set_xlim(0, duration)
 
-    bar_plot(axes4[0, 0], aci_v,  "#1f77b4", "Acoustic Complexity Index (ACI)", "ACI")
-    bar_plot(axes4[0, 1], bi_v,   "#2ca02c", "Bioacoustic Index (BI)", "BI")
+    bar_plot(axes4[0, 0], aci_v,  SECONDARY, "Acoustic Complexity Index (ACI)", "ACI")
+    bar_plot(axes4[0, 1], bi_v,   SUCCESS, "Bioacoustic Index (BI)", "BI")
 
     # NDSI — colour by sign
-    ndsi_colors = ["#2ca02c" if v >= 0 else "#d62728" for v in ndsi_v]
+    ndsi_colors = [SUCCESS if v >= 0 else ERROR for v in ndsi_v]
     axes4[1, 0].bar(centers, ndsi_v, width=bw, color=ndsi_colors, alpha=0.82)
     axes4[1, 0].axhline(0, color=TEXT_COLOR, linewidth=0.8, linestyle="--", alpha=0.6)
     _style(axes4[1, 0], "NDSI  (green > 0 = biotic dominated)", "Time (s)", "NDSI")
     axes4[1, 0].set_xlim(0, duration)
 
-    bar_plot(axes4[1, 1], adi_v,  "#ff7f0e", "Acoustic Diversity Index (ADI)", "ADI")
+    bar_plot(axes4[1, 1], adi_v,  WARNING, "Acoustic Diversity Index (ADI)", "ADI")
 
     # RMS energy
-    axes4[2, 0].plot(centers, rms_v, "o-", color="#e377c2", linewidth=1.6,
+    axes4[2, 0].plot(centers, rms_v, "o-", color=ACCENT, linewidth=1.6,
                      markersize=5, alpha=0.9)
-    axes4[2, 0].fill_between(centers, rms_v, alpha=0.15, color="#e377c2")
+    axes4[2, 0].fill_between(centers, rms_v, alpha=0.15, color=ACCENT)
     _style(axes4[2, 0], "RMS Energy Over Time", "Time (s)", "RMS Amplitude")
     axes4[2, 0].set_xlim(0, duration)
 
@@ -369,19 +377,19 @@ def analyze(file_path):
 
     fig5, axes5 = _make_fig(3, 2, figsize=(14, 11))
 
-    axes5[0, 0].plot(c_times, bandwidth, color="#17becf", linewidth=0.9, alpha=0.9)
+    axes5[0, 0].plot(c_times, bandwidth, color=SECONDARY, linewidth=0.9, alpha=0.9)
     _style(axes5[0, 0], "Spectral Bandwidth Over Time", "Time (s)", "Bandwidth (Hz)")
     axes5[0, 0].set_xlim(0, duration)
 
-    axes5[0, 1].plot(c_times, rolloff, color="#bcbd22", linewidth=0.9, alpha=0.9)
+    axes5[0, 1].plot(c_times, rolloff, color=WARNING, linewidth=0.9, alpha=0.9)
     _style(axes5[0, 1], "Spectral Rolloff (85%) Over Time", "Time (s)", "Frequency (Hz)")
     axes5[0, 1].set_xlim(0, duration)
 
-    axes5[1, 0].plot(c_times, flatness, color="#7f7f7f", linewidth=0.9, alpha=0.9)
+    axes5[1, 0].plot(c_times, flatness, color=TEXT_MUTED, linewidth=0.9, alpha=0.9)
     _style(axes5[1, 0], "Spectral Flatness Over Time", "Time (s)", "Flatness [0–1]")
     axes5[1, 0].set_xlim(0, duration)
 
-    axes5[1, 1].plot(c_times, zcr_frame, color="#8c564b", linewidth=0.7, alpha=0.9)
+    axes5[1, 1].plot(c_times, zcr_frame, color=ACCENT_HOVER, linewidth=0.7, alpha=0.9)
     _style(axes5[1, 1], "Zero Crossing Rate Over Time", "Time (s)", "ZCR")
     axes5[1, 1].set_xlim(0, duration)
 
@@ -389,19 +397,19 @@ def analyze(file_path):
     axes5[2, 0].plot(c_times, rms_db_frame[0], color=ACCENT, linewidth=0.7, alpha=0.7,
                      label="RMS (dBFS)")
     for ot in onset_times:
-        axes5[2, 0].axvline(ot, color="#ff4444", linewidth=0.6, alpha=0.6)
+        axes5[2, 0].axvline(ot, color=ERROR, linewidth=0.6, alpha=0.6)
     axes5[2, 0].set_xlim(0, duration)
     _style(axes5[2, 0], f"Onset Detection ({len(onset_times)} events)", "Time (s)", "RMS (dB)")
     axes5[2, 0].text(0.01, 0.96, f"{len(onset_times)} onsets detected",
                      transform=axes5[2, 0].transAxes,
-                     color="#ff4444", fontsize=9, va="top")
+                     color=ERROR, fontsize=9, va="top")
 
     # MFCC delta (showing change)
     im_delta = librosa.display.specshow(
         mfcc_delta, sr=sr, hop_length=HOP, x_axis="time",
         ax=axes5[2, 1], cmap="RdBu_r"
     )
-    axes5[2, 1].set_facecolor(BG_COLOR)
+    axes5[2, 1].set_facecolor(SURFACE)
     _style(axes5[2, 1], "MFCC Delta (Rate of Change)", "Time (s)", "MFCC Coefficient")
     _colorbar(fig5, im_delta, axes5[2, 1], label="Δ Amplitude")
 
@@ -521,18 +529,54 @@ def analyze(file_path):
 # ──────────────────────────────────────────────────────────────────────────────
 
 CSS = """
-@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Quicksand:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');
 
 body, .gradio-container {
-    background: linear-gradient(160deg, #071324 0%, #0b1e35 60%, #071324 100%) !important;
-    font-family: 'Quicksand', sans-serif !important;
+    background: #FFFFFF !important;
+    font-family: 'DM Sans', sans-serif !important;
+    color: #222222 !important;
 }
-h1, h2, h3, h4, .gr-button, label, .tab-nav button {
-    font-family: 'Baloo 2', cursive !important;
+h1, h2, h3, h4 {
+    font-family: 'Nunito Sans', sans-serif !important;
+    color: #222222 !important;
 }
-h1 { font-size: 2.2rem !important; font-weight: 700 !important; }
-h2, h3 { font-weight: 600 !important; }
-.gr-button { font-weight: 600; letter-spacing: 0.02em; }
+h1 { font-size: 2.2rem !important; font-weight: 800 !important; }
+h2, h3 { font-weight: 700 !important; }
+label, .tab-nav button {
+    font-family: 'DM Sans', sans-serif !important;
+    font-weight: 600 !important;
+    color: #222222 !important;
+}
+p, .prose, .markdown-body { color: #717171 !important; }
+
+/* Cards / surfaces — rounded, soft-bordered like Coral Stay cards */
+.gr-panel, .gr-box, .gr-form, .tabitem, .block {
+    background: #F7F7F7 !important;
+    border: 1px solid #DDDDDD !important;
+    border-radius: 12px !important;
+}
+
+/* Buttons — Coral Stay primary (Rausch Coral) */
+.gr-button, button.primary {
+    background: #FF5A5F !important;
+    border: none !important;
+    color: #FFFFFF !important;
+    font-weight: 700;
+    letter-spacing: 0.01em;
+    border-radius: 12px !important;
+    min-height: 48px;
+    transition: background 0.15s ease-in-out;
+}
+.gr-button:hover, button.primary:hover {
+    background: #E04E52 !important;
+}
+
+/* Tabs — coral active state */
+.tab-nav button.selected {
+    color: #FF5A5F !important;
+    border-color: #FF5A5F !important;
+}
+
 footer { display: none !important; }
 """
 
@@ -550,10 +594,11 @@ EXAMPLES = [e for e in EXAMPLES if os.path.isfile(e[0])]
 
 with gr.Blocks(title="🌊 Marine Soundscape Analyzer", css=CSS,
                theme=gr.themes.Base(
-                   primary_hue="cyan",
-                   secondary_hue="blue",
-                   neutral_hue="slate",
-                   font=gr.themes.GoogleFont("Quicksand"),
+                   primary_hue="red",
+                   secondary_hue="teal",
+                   neutral_hue="gray",
+                   font=gr.themes.GoogleFont("Nunito Sans"),
+                   font_mono=gr.themes.GoogleFont("JetBrains Mono"),
                )) as demo:
 
     gr.Markdown("""