Update app.py

app.py

@@ -49,19 +49,19 @@ except ImportError:
 # ──────────────────────────────────────────────────────────────────────────────
 # Constants
 # ──────────────────────────────────────────────────────────────────────────────
-# Tidepool Sorbet palette — fresh, sunny, welcoming
-# Coral #ff7a7a · Apricot #ffa36c · Butter #fff1b6 · Mint #7ae7c7 · Deep Teal #1f6f78
-BG_COLOR     = "#FFF1B6"   # Pale Butter Yellow — page & figure background
-SURFACE      = "#FFFDF6"   # warm near-white — card / plot-axis surface (pops against butter)
-GRID_COLOR   = "#F2CE8A"   # deeper butter — dividers, plot grid & borders
-TEXT_COLOR   = "#1F6F78"   # Deep Teal — headings & primary text
-TEXT_MUTED   = "#4F8B91"   # softened teal — secondary text
-ACCENT       = "#FF7A7A"   # Coral — primary CTA / plot highlights
-ACCENT_HOVER = "#E85F5F"   # darker coral — hover/pressed state
-SECONDARY    = "#FFA36C"   # Apricot — secondary highlight (pairs with coral)
-SUCCESS      = "#1F9D86"   # deep mint/teal — positive / biotic indicator
-WARNING      = "#7AE7C7"   # Mint — fresh accent (diversity indicator)
-ERROR        = "#E2483F"   # deep coral-red — errors / negative indicator
+# Coral Reef Lagoon palette — deep ocean water with living-coral & seafoam pops
+# Deep Ocean #0b3d4a · Lagoon #1a5c6b · Coral #ff6f59 · Seafoam #4cd9c0 · Sandy Gold #ffc857
+BG_COLOR     = "#0B3D4A"   # Deep Ocean Teal — page & figure background
+SURFACE      = "#123F4D"   # Lagoon Teal — card / plot-axis surface (pops against deep ocean)
+GRID_COLOR   = "#2A7A85"   # Reef Teal — dividers, plot grid & borders
+TEXT_COLOR   = "#E7FBFF"   # Sea Foam White — headings & primary text
+TEXT_MUTED   = "#8FD9E0"   # soft aqua — secondary text
+ACCENT       = "#FF6F59"   # Living Coral — primary CTA / plot highlights
+ACCENT_HOVER = "#E5563F"   # deeper coral — hover/pressed state
+SECONDARY    = "#4CD9C0"   # Seafoam Turquoise — secondary highlight (pairs with coral)
+SUCCESS      = "#3ADC91"   # sea-green — positive / biotic indicator
+WARNING      = "#FFC857"   # Sandy Gold — fresh accent (diversity indicator)
+ERROR        = "#FF5C5C"   # vivid coral-red — errors / negative indicator
 N_FFT      = 2048
 HOP        = 512
 MAX_DUR_S  = 300          # clip to 5 min for HuggingFace timeout safety
@@ -230,7 +230,7 @@ def analyze(file_path):
     mel_db = librosa.power_to_db(mel_spec, ref=np.max)
 
     fig2, axes2 = _make_fig(3, 1, figsize=(13, 11))
-    CMAP = "magma"
+    CMAP = "GnBu_r"
     VRANGE = dict(vmin=-80, vmax=0)
 
     # Linear
@@ -533,22 +533,22 @@ CSS = """
 @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: #FFF1B6 !important;
+    background: linear-gradient(180deg, #04222C 0%, #0B3D4A 45%, #123F4D 100%) !important;
     font-family: 'DM Sans', sans-serif !important;
-    color: #1F6F78 !important;
+    color: #E7FBFF !important;
 }
 h1, h2, h3, h4 {
     font-family: 'Nunito Sans', sans-serif !important;
-    color: #1F6F78 !important;
+    color: #4CD9C0 !important;
 }
 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: #1F6F78 !important;
+    color: #E7FBFF !important;
 }
-p, .prose, .markdown-body { color: #4F8B91 !important; }
+p, .prose, .markdown-body { color: #8FD9E0 !important; }
 
 /* Reduce Gradio's default rounded-corner look across every component
    (blocks, inputs, buttons, tabs, dropdowns, audio player, etc.) by
@@ -566,34 +566,34 @@ p, .prose, .markdown-body { color: #4F8B91 !important; }
     --table-radius: 4px !important;
 }
 
-/* Cards / surfaces — warm near-white, popping against the butter page background */
+/* Cards / surfaces — lagoon teal, popping against the deep-ocean page background */
 .gr-panel, .gr-box, .gr-form, .tabitem, .block,
 div[class*="svelte"].block, .form, .wrap.svelte-1ipelgc {
-    background: #FFFDF6 !important;
-    border: 1px solid #F2CE8A !important;
+    background: #123F4D !important;
+    border: 1px solid #2A7A85 !important;
     border-radius: 4px !important;
 }
 
-/* Force every input / upload / textbox surface off pure white */
+/* Force every input / upload / textbox surface off pure white, into lagoon teal */
 input, textarea, select,
 .gr-input, .gr-box textarea, .gr-box input,
 .upload-box, .upload-container, [data-testid="audio"] {
-    background: #FFFDF6 !important;
-    color: #1F6F78 !important;
-    border-color: #F2CE8A !important;
+    background: #15505E !important;
+    color: #E7FBFF !important;
+    border-color: #2A7A85 !important;
     border-radius: 4px !important;
 }
 
 /* Markdown / table content inside panels */
-table, th, td { color: #1F6F78 !important; border-color: #F2CE8A !important; }
-th { background: #FFA36C !important; color: #1F6F78 !important; }
-tr:nth-child(even) td { background: #FFF7DE !important; }
-blockquote { background: #FFE9A8 !important; border-left: 4px solid #FF7A7A !important; color: #1F6F78 !important; }
-code { background: #FFE9A8 !important; color: #1F6F78 !important; }
+table, th, td { color: #E7FBFF !important; border-color: #2A7A85 !important; }
+th { background: #FF6F59 !important; color: #FFFFFF !important; }
+tr:nth-child(even) td { background: #1A5C6B !important; }
+blockquote { background: #15505E !important; border-left: 4px solid #FF6F59 !important; color: #E7FBFF !important; }
+code { background: #15505E !important; color: #4CD9C0 !important; }
 
-/* Buttons — Tidepool Sorbet coral primary */
+/* Buttons — Coral Reef Lagoon living-coral primary */
 .gr-button, button.primary {
-    background: #FF7A7A !important;
+    background: #FF6F59 !important;
     border: none !important;
     color: #FFFFFF !important;
     font-weight: 700;
@@ -603,13 +603,13 @@ code { background: #FFE9A8 !important; color: #1F6F78 !important; }
     transition: background 0.15s ease-in-out;
 }
 .gr-button:hover, button.primary:hover {
-    background: #E85F5F !important;
+    background: #E5563F !important;
 }
 
-/* Tabs — coral active state */
+/* Tabs — seafoam turquoise active state */
 .tab-nav button.selected {
-    color: #FF7A7A !important;
-    border-color: #FF7A7A !important;
+    color: #4CD9C0 !important;
+    border-color: #4CD9C0 !important;
 }
 
 footer { display: none !important; }
@@ -638,33 +638,33 @@ with gr.Blocks(title="🌊 Marine Soundscape Analyzer", css=CSS,
                ).set(
                    # Drive every component's box color through real theme tokens
                    # (more reliable than CSS class guessing) so nothing renders
-                   # on plain white — Tidepool Sorbet palette throughout.
-                   body_background_fill="#FFF1B6",
-                   body_background_fill_dark="#FFF1B6",
-                   background_fill_primary="#FFFDF6",
-                   background_fill_primary_dark="#FFFDF6",
-                   background_fill_secondary="#FFE9A8",
-                   background_fill_secondary_dark="#FFE9A8",
-                   border_color_primary="#F2CE8A",
-                   border_color_primary_dark="#F2CE8A",
-                   block_background_fill="#FFFDF6",
-                   block_background_fill_dark="#FFFDF6",
-                   block_border_color="#F2CE8A",
-                   block_border_color_dark="#F2CE8A",
-                   block_label_background_fill="#FFA36C",
-                   block_label_text_color="#1F6F78",
-                   block_title_text_color="#1F6F78",
-                   body_text_color="#1F6F78",
-                   body_text_color_dark="#1F6F78",
-                   body_text_color_subdued="#4F8B91",
-                   input_background_fill="#FFFDF6",
-                   input_background_fill_dark="#FFFDF6",
-                   input_border_color="#F2CE8A",
-                   button_primary_background_fill="#FF7A7A",
-                   button_primary_background_fill_hover="#E85F5F",
+                   # on plain white — Coral Reef Lagoon palette throughout.
+                   body_background_fill="#0B3D4A",
+                   body_background_fill_dark="#0B3D4A",
+                   background_fill_primary="#123F4D",
+                   background_fill_primary_dark="#123F4D",
+                   background_fill_secondary="#15505E",
+                   background_fill_secondary_dark="#15505E",
+                   border_color_primary="#2A7A85",
+                   border_color_primary_dark="#2A7A85",
+                   block_background_fill="#123F4D",
+                   block_background_fill_dark="#123F4D",
+                   block_border_color="#2A7A85",
+                   block_border_color_dark="#2A7A85",
+                   block_label_background_fill="#FF6F59",
+                   block_label_text_color="#FFFFFF",
+                   block_title_text_color="#4CD9C0",
+                   body_text_color="#E7FBFF",
+                   body_text_color_dark="#E7FBFF",
+                   body_text_color_subdued="#8FD9E0",
+                   input_background_fill="#15505E",
+                   input_background_fill_dark="#15505E",
+                   input_border_color="#2A7A85",
+                   button_primary_background_fill="#FF6F59",
+                   button_primary_background_fill_hover="#E5563F",
                    button_primary_text_color="#FFFFFF",
-                   button_secondary_background_fill="#7AE7C7",
-                   button_secondary_text_color="#1F6F78",
+                   button_secondary_background_fill="#4CD9C0",
+                   button_secondary_text_color="#0B3D4A",
                )) as demo:
 
     gr.Markdown("""