Update app.py

app.py

@@ -76,7 +76,7 @@ def separate_audio(path):
         files.append(f)
     return files
 
-# ================= UI CSS + layout (polished) =================
+# ================= UI CSS (minimal enhancement) =================
 css = """
 @import url('https://fonts.googleapis.com/css2?family=Anton&family=Poppins:wght@400;500;600&display=swap');
 
@@ -91,7 +91,6 @@ css = """
   --radius: 12px;
 }
 
-/* page reset */
 html, body, .gradio-container {
   height: 100%;
   margin: 0;
@@ -99,7 +98,6 @@ html, body, .gradio-container {
   background: linear-gradient(180deg, var(--bg1), var(--bg2)) !important;
   color: var(--ink);
   font-family: Poppins, sans-serif;
-  overflow: auto;
 }
 
 /* wrapper */
@@ -107,61 +105,39 @@ html, body, .gradio-container {
   max-width: 1160px;
   margin: 0 auto;
   padding: 48px 40px;
-  box-sizing: border-box;
   display: grid;
   grid-template-rows: auto 1fr;
   gap: 36px;
 }
 
-/* logo + tagline (left-anchored brand lockup) */
-.brand {
-  display:flex;
-  flex-direction:column;
-  gap:6px;
-}
-.logo {
-  font-family: Anton, sans-serif;
-  font-size:46px;
-  letter-spacing:1px;
-}
-.tagline {
-  font-size:14px;
-  color:var(--accent);
-  opacity:0.9;
-  text-transform: none; /* keep exact caps as user wanted */
-}
+/* brand */
+.brand { display:flex; flex-direction:column; gap:6px; }
+.logo { font-family: Anton, sans-serif; font-size:46px; letter-spacing:1px; }
+.tagline { font-size:14px; color:var(--accent); opacity:0.9; }
 
-/* main grid: left upload (dominant) and right stems column */
+/* layout */
 .main {
   display:grid;
-  grid-template-columns: 1fr 420px; /* fixed right column to keep alignment predictable */
+  grid-template-columns: 1fr 420px;
   gap: 48px;
-  align-items: start; /* ensure top baseline alignment */
+  align-items: start;
 }
 
-/* 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 */
+/* upload */
 .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 */
+  border-radius: var(--radius);
+  border: 1px solid rgba(255,255,255,0.04);
+  min-height: 260px;
   display:flex;
   align-items:center;
   justify-content:center;
 }
 
-/* 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;
-}
-
-/* Make the CTA authoritative but balanced */
+/* button */
 .button-primary {
   margin-top: 18px;
   height:46px;
@@ -171,95 +147,60 @@ html, body, .gradio-container {
   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);
 }
 
-/* RIGHT COLUMN (stems) - keep fixed width, grid with 2 columns */
+/* stems */
 .stems {
-  display: grid;
+  display:grid;
   grid-template-columns: 1fr 1fr;
   gap: 22px;
-  align-items: start;
 }
 
-/* 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;
+  min-height: 140px;
+  display:flex;
+  flex-direction:column;
+  justify-content:center;
+  gap:6px;
 }
 
-/* stem label: same system rhythm as body (no competing font) */
 .stem-label {
   font-size:13px;
-  font-weight:500;
+  font-weight:600;
   color: var(--accent);
-  margin-left: 4px;
-}
-
-/* neutralize Gradio's internal "Audio" label visually so it doesn't fight the stem label */
-.stem-surface .gradio-audio label {
-  display:none !important;
-}
-
-/* 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;
-  align-items:center;
-  justify-content:center;
+  letter-spacing: 0.3px;
 }
 
-/* ensure the internal audio element doesn't expand */
-.stem-surface audio {
-  width: 92%;
-  max-height: 36px;
-  opacity: 0.95;
+.stem-info {
+  font-size:11px;
+  color:var(--muted);
+  line-height:1.35;
+  opacity:0.85;
 }
 
-/* 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;
-}
+.stem-surface .gradio-audio label { display:none !important; }
+.stem-surface audio { width:92%; max-height:36px; }
 
-/* small responsive fallback */
 @media (max-width: 980px) {
   .main { grid-template-columns: 1fr; }
-  .stems { grid-template-columns: 1fr 1fr; gap:16px; }
-  .app { padding: 28px 20px; }
+  .stems { grid-template-columns: 1fr 1fr; }
 }
 """
 
 with gr.Blocks() as demo:
     with gr.Column(elem_classes="app"):
 
-        # Brand lockup (left-anchored)
+        # Brand
         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.
+        # Main
         with gr.Row(elem_classes="main"):
-            # LEFT: upload + CTA
+            # LEFT
             with gr.Column(elem_classes="left"):
                 gr.HTML("""
                     <h3>Select a track</h3>
@@ -268,23 +209,38 @@ with gr.Blocks() as demo:
                 input_audio = gr.Audio(type="filepath")
                 run_btn = gr.Button("Separate", elem_classes="button-primary")
 
-            # RIGHT: stems grid (fixed width column)
+            # RIGHT
             with gr.Column():
                 with gr.Row(elem_classes="stems"):
+
                     with gr.Column(elem_classes="stem-surface"):
-                        gr.HTML('<div class="stem-label">Vocals</div>')
+                        gr.HTML("""
+                            <div class="stem-label">Lead Vocals</div>
+                            <div class="stem-info">Primary melodic voice and lyrical content</div>
+                        """)
                         out_vocals = gr.Audio(interactive=False)
+
                     with gr.Column(elem_classes="stem-surface"):
-                        gr.HTML('<div class="stem-label">Drums</div>')
+                        gr.HTML("""
+                            <div class="stem-label">Mridangam / Percussion</div>
+                            <div class="stem-info">Rhythmic transients and percussive articulation</div>
+                        """)
                         out_drums = gr.Audio(interactive=False)
+
                     with gr.Column(elem_classes="stem-surface"):
-                        gr.HTML('<div class="stem-label">Bass</div>')
+                        gr.HTML("""
+                            <div class="stem-label">Tanpura / Drone</div>
+                            <div class="stem-info">Sustained harmonic bed and tonal reference</div>
+                        """)
                         out_bass = gr.Audio(interactive=False)
+
                     with gr.Column(elem_classes="stem-surface"):
-                        gr.HTML('<div class="stem-label">Other</div>')
+                        gr.HTML("""
+                            <div class="stem-label">Violin / Accompaniment</div>
+                            <div class="stem-info">Melodic support and expressive ornamentation</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__":