Update app.py

app.py

@@ -6,7 +6,7 @@ import soundfile as sf
 import numpy as np
 from huggingface_hub import hf_hub_download
 
-# ================= MODEL (UNCHANGED) =================
+# ================= MODEL (unchanged) =================
 try:
     from bs_roformer import BSRoformer
     from attend import Attend
@@ -76,7 +76,7 @@ def separate_audio(path):
         files.append(f)
     return files
 
-# ================= UI =================
+# ================= UI CSS + layout (polished) =================
 css = """
 @import url('https://fonts.googleapis.com/css2?family=Anton&family=Poppins:wght@400;500;600&display=swap');
 
@@ -86,141 +86,206 @@ css = """
   --ink:#f3ece6;
   --muted:#b6aeb0;
   --accent:#ff6f9f;
-  --panel:rgba(255,255,255,0.035);
+  --panel: rgba(255,255,255,0.03);
+  --panel-2: rgba(255,255,255,0.02);
+  --radius: 12px;
 }
 
-html,body,.gradio-container{
-  height:100%;
-  margin:0;
-  background:linear-gradient(180deg,var(--bg1),var(--bg2))!important;
-  font-family:Poppins,sans-serif;
-  color:var(--ink);
-  overflow:hidden!important;
+/* page reset */
+html, body, .gradio-container {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  background: linear-gradient(180deg, var(--bg1), var(--bg2)) !important;
+  color: var(--ink);
+  font-family: Poppins, sans-serif;
+  overflow: auto;
 }
 
-.app{
-  max-width:1100px;
-  margin:0 auto;
-  padding:48px 40px;
-  height:100%;
-  display:grid;
-  grid-template-rows:auto 1fr;
-  gap:44px;
+/* wrapper */
+.app {
+  max-width: 1160px;
+  margin: 0 auto;
+  padding: 48px 40px;
+  box-sizing: border-box;
+  display: grid;
+  grid-template-rows: auto 1fr;
+  gap: 36px;
 }
 
-.header{
+/* logo + tagline (left-anchored brand lockup) */
+.brand {
   display:flex;
   flex-direction:column;
   gap:6px;
 }
-
-.logo{
-  font-family:Anton,sans-serif;
-  font-size:44px;
+.logo {
+  font-family: Anton, sans-serif;
+  font-size:46px;
   letter-spacing:1px;
 }
-
-.tagline{
+.tagline {
   font-size:14px;
   color:var(--accent);
-  opacity:.85;
+  opacity:0.9;
+  text-transform: none; /* keep exact caps as user wanted */
 }
 
-.main{
+/* main grid: left upload (dominant) and right stems column */
+.main {
   display:grid;
-  grid-template-columns:1.1fr .9fr;
-  gap:48px;
-  align-items:start;
+  grid-template-columns: 1fr 420px; /* fixed right column to keep alignment predictable */
+  gap: 48px;
+  align-items: start; /* ensure top baseline alignment */
 }
 
-.left h3{
-  font-weight:500;
-  margin:0;
+/* left column content */
+.left h3 { margin: 0; font-size:18px; font-weight:600; }
+.left p { margin:6px 0 18px; color:var(--muted); font-size:13px; }
+
+/* style the Gradio audio drop area so it's visually lighter and slightly shorter */
+.left .gradio-audio {
+  background: var(--panel) !important;
+  border-radius: var(--radius) !important;
+  border: 1px solid rgba(255,255,255,0.04) !important;
+  padding: 12px !important;
+  box-sizing: border-box;
+  min-height: 260px; /* reduced height so stems line up better */
+  display:flex;
+  align-items:center;
+  justify-content:center;
 }
 
-.left p{
-  color:var(--muted);
-  font-size:13px;
-  margin:6px 0 18px;
+/* tone-down the upload inner texts to make them less dominant */
+.left .gradio-audio .dropzone, .left .gradio-audio .component, .left .gradio-audio .file {
+  color: var(--muted) !important;
 }
 
-.gradio-audio label{
-  display:none!important;
+/* Make the CTA authoritative but balanced */
+.button-primary {
+  margin-top: 18px;
+  height:46px;
+  width:100%;
+  font-size:15px !important;
+  font-weight:600 !important;
+  background: linear-gradient(90deg,#ff6f9f,#ffbf7a) !important;
+  color: #14080d !important;
+  border-radius: 10px !important;
+  border: none !important;
+  box-shadow: 0 8px 30px rgba(0,0,0,0.25);
 }
 
-.gradio-audio{
-  background:var(--panel)!important;
-  border-radius:14px!important;
+/* RIGHT COLUMN (stems) - keep fixed width, grid with 2 columns */
+.stems {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 22px;
+  align-items: start;
 }
 
-audio{
-  opacity:.85;
-  background:none!important;
+/* each stem slot now reads like a subdued surface */
+.stem-surface {
+  background: var(--panel-2);
+  border-radius: 14px;
+  padding: 12px;
+  border: 1px solid rgba(255,255,255,0.03);
+  box-sizing: border-box;
+  min-height: 140px; /* consistent stem surface height */
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  justify-content: center;
 }
 
-.button-primary{
-  margin-top:16px;
-  height:46px;
-  font-weight:600!important;
-  font-size:14px!important;
-  background:linear-gradient(90deg,#ff6f9f,#ffbf7a)!important;
-  color:#14080d!important;
-  border-radius:12px!important;
+/* stem label: same system rhythm as body (no competing font) */
+.stem-label {
+  font-size:13px;
+  font-weight:500;
+  color: var(--accent);
+  margin-left: 4px;
 }
 
-.stems{
-  display:grid;
-  grid-template-columns:1fr 1fr;
-  gap:26px;
-  margin-top:2px;
+/* neutralize Gradio's internal "Audio" label visually so it doesn't fight the stem label */
+.stem-surface .gradio-audio label {
+  display:none !important;
 }
 
-.stem{
+/* smaller inner audio player to avoid odd spacing */
+.stem-surface .gradio-audio {
+  background: transparent !important;
+  border: 0 !important;
+  padding: 0 !important;
+  min-height: 88px !important;
   display:flex;
-  flex-direction:column;
-  gap:6px;
+  align-items:center;
+  justify-content:center;
 }
 
-.stem span{
-  font-size:13px;
-  font-weight:500;
-  color:var(--accent);
-  opacity:.9;
+/* ensure the internal audio element doesn't expand */
+.stem-surface audio {
+  width: 92%;
+  max-height: 36px;
+  opacity: 0.95;
+}
+
+/* remove any extra left margin coming from gradio wrapper */
+.gradio-container .wrap { margin: 0; padding: 0; }
+
+/* footer info (small) */
+.footer {
+  margin-top: 28px;
+  text-align: center;
+  color: var(--muted);
+  font-size: 12px;
+  opacity: 0.95;
+}
+
+/* small responsive fallback */
+@media (max-width: 980px) {
+  .main { grid-template-columns: 1fr; }
+  .stems { grid-template-columns: 1fr 1fr; gap:16px; }
+  .app { padding: 28px 20px; }
 }
 """
 
 with gr.Blocks() as demo:
     with gr.Column(elem_classes="app"):
 
-        with gr.Column(elem_classes="header"):
+        # Brand lockup (left-anchored)
+        with gr.Row(elem_classes="brand"):
             gr.HTML('<div class="logo">SWARA STUDIO</div>')
+            # exact user-caps as requested
             gr.HTML('<div class="tagline">Separating Music Into Its elements</div>')
 
+        # Main content (left upload, right stems). Top baselines match now.
         with gr.Row(elem_classes="main"):
+            # LEFT: upload + CTA
             with gr.Column(elem_classes="left"):
                 gr.HTML("""
                     <h3>Select a track</h3>
                     <p>We’ll break it down into individual parts</p>
                 """)
-                inp = gr.Audio(type="filepath")
-                btn = gr.Button("Separate", elem_classes="button-primary")
+                input_audio = gr.Audio(type="filepath")
+                run_btn = gr.Button("Separate", elem_classes="button-primary")
 
+            # RIGHT: stems grid (fixed width column)
             with gr.Column():
                 with gr.Row(elem_classes="stems"):
-                    with gr.Column(elem_classes="stem"):
-                        gr.HTML("<span>Vocals</span>")
-                        o1 = gr.Audio(interactive=False)
-                    with gr.Column(elem_classes="stem"):
-                        gr.HTML("<span>Drums</span>")
-                        o2 = gr.Audio(interactive=False)
-                    with gr.Column(elem_classes="stem"):
-                        gr.HTML("<span>Bass</span>")
-                        o3 = gr.Audio(interactive=False)
-                    with gr.Column(elem_classes="stem"):
-                        gr.HTML("<span>Other</span>")
-                        o4 = gr.Audio(interactive=False)
-
-    btn.click(separate_audio, inp, [o1,o2,o3,o4])
-
-if __name__=="__main__":
+                    with gr.Column(elem_classes="stem-surface"):
+                        gr.HTML('<div class="stem-label">Vocals</div>')
+                        out_vocals = gr.Audio(interactive=False)
+                    with gr.Column(elem_classes="stem-surface"):
+                        gr.HTML('<div class="stem-label">Drums</div>')
+                        out_drums = gr.Audio(interactive=False)
+                    with gr.Column(elem_classes="stem-surface"):
+                        gr.HTML('<div class="stem-label">Bass</div>')
+                        out_bass = gr.Audio(interactive=False)
+                    with gr.Column(elem_classes="stem-surface"):
+                        gr.HTML('<div class="stem-label">Other</div>')
+                        out_other = gr.Audio(interactive=False)
+
+    # wiring — unchanged logic
+    run_btn.click(separate_audio, input_audio, [out_vocals, out_drums, out_bass, out_other])
+
+if __name__ == "__main__":
     demo.launch(css=css, theme=gr.themes.Base())