Update app.py

app.py

@@ -7,7 +7,7 @@ import numpy as np
 from huggingface_hub import hf_hub_download
 
 # =====================================================
-# 1. MODEL LOGIC (UNCHANGED)
+# MODEL LOGIC (UNCHANGED)
 # =====================================================
 try:
     from bs_roformer import BSRoformer
@@ -87,22 +87,22 @@ def separate_audio(audio_path):
     return files
 
 # =====================================================
-# 2. POLISHED UI (FIXED LAYOUT, NO SCROLL)
+# UI — FINAL POLISHED VERSION
 # =====================================================
 css = """
-@import url('https://fonts.googleapis.com/css2?family=Anton&family=Playfair+Display:ital@1&family=Poppins:wght@400;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Anton&family=Playfair+Display:ital@1&family=Poppins:wght@400;500;600&display=swap');
 
 :root {
     --bg1:#2b1620;
     --bg2:#1c0d14;
-    --panel:rgba(255,255,255,0.04);
-    --border:rgba(255,255,255,0.08);
+    --panel:rgba(255,255,255,0.035);
+    --border:rgba(255,255,255,0.06);
     --ink:#f6efe8;
-    --muted:#c7bfbf;
+    --muted:#c2baba;
     --accent:#ff73a6;
 }
 
-/* HARD RESET */
+/* GLOBAL RESET */
 html, body, .gradio-container {
     height:100%;
     width:100%;
@@ -114,15 +114,15 @@ html, body, .gradio-container {
     font-family:Poppins,sans-serif;
 }
 
-/* CENTERED APP */
+/* APP WRAPPER */
 .app {
-    max-width:1100px;
+    max-width:1080px;
     height:100%;
     margin:0 auto;
-    padding:32px;
+    padding:36px 32px;
     display:grid;
     grid-template-rows:auto 1fr;
-    gap:28px;
+    gap:32px;
     box-sizing:border-box;
 }
 
@@ -130,12 +130,12 @@ html, body, .gradio-container {
 .header {
     display:flex;
     justify-content:space-between;
-    align-items:center;
+    align-items:baseline;
 }
 
 .title {
     font-family:Anton,sans-serif;
-    font-size:44px;
+    font-size:42px;
     letter-spacing:1px;
 }
 
@@ -143,14 +143,14 @@ html, body, .gradio-container {
     font-family:'Playfair Display',serif;
     font-style:italic;
     color:var(--accent);
-    margin-left:14px;
+    opacity:0.85;
 }
 
 /* MAIN GRID */
 .main {
     display:grid;
-    grid-template-columns:1fr 1fr;
-    gap:32px;
+    grid-template-columns:1.05fr 0.95fr;
+    gap:36px;
     height:100%;
 }
 
@@ -158,101 +158,118 @@ html, body, .gradio-container {
 .panel {
     background:var(--panel);
     border:1px solid var(--border);
-    border-radius:16px;
-    padding:28px;
+    border-radius:18px;
+    padding:28px 30px;
     display:flex;
     flex-direction:column;
     gap:22px;
     box-sizing:border-box;
 }
 
-/* INPUT */
-.drop {
-    border:1px dashed var(--border);
-    border-radius:12px;
-    padding:32px;
+/* INPUT AREA */
+.input-copy {
     text-align:center;
+    margin-bottom:4px;
 }
 
-.drop h3 {
+.input-copy h3 {
     margin:0;
     font-size:18px;
-    letter-spacing:1px;
+    font-weight:500;
+    letter-spacing:0.5px;
+}
+
+.input-copy p {
+    margin-top:6px;
+    font-size:13px;
+    color:var(--muted);
 }
 
-/* BUTTON */
+/* RUN BUTTON */
 .run {
+    margin-top:6px;
     background:linear-gradient(90deg,#ff73a6,#ffd58a) !important;
     color:#160c10 !important;
-    font-weight:800 !important;
+    font-weight:700 !important;
     border-radius:10px !important;
     border:none !important;
 }
 
 /* STEMS */
-.stems {
+.stems-grid {
     display:grid;
     grid-template-columns:1fr 1fr;
-    gap:18px;
+    gap:22px;
 }
 
 .stem {
-    background:rgba(255,255,255,0.03);
-    border:1px solid var(--border);
-    border-radius:12px;
-    padding:16px;
+    background:rgba(255,255,255,0.025);
+    border-radius:14px;
+    padding:16px 18px 18px;
+    display:flex;
+    flex-direction:column;
+    gap:8px;
 }
 
-.label {
+.stem-label {
     font-family:'Playfair Display',serif;
     font-style:italic;
     color:var(--accent);
-    margin-bottom:6px;
+    opacity:0.9;
 }
 
-/* AUDIO FIX */
+/* AUDIO — BLENDED */
 audio {
     width:100%;
-    max-height:36px;
+    max-height:34px;
+    opacity:0.9;
+    filter:brightness(0.95);
 }
 """
 
 with gr.Blocks() as demo:
     with gr.Column(elem_classes="app"):
 
+        # Header
         with gr.Row(elem_classes="header"):
             gr.HTML('<div class="title">SWARA STUDIO</div>')
-            gr.HTML('<div class="subtitle">Audio Source Separation</div>')
+            gr.HTML('<div class="subtitle">audio source separation</div>')
 
+        # Main content
         with gr.Row(elem_classes="main"):
 
+            # Left: Input
             with gr.Column(elem_classes="panel"):
                 gr.HTML("""
-                    <div class="drop">
-                        <h3>MASTER AUDIO</h3>
-                        <p>Drop or upload WAV / MP3</p>
+                    <div class="input-copy">
+                        <h3>Choose an audio track</h3>
+                        <p>Upload a song to extract individual parts</p>
                     </div>
                 """)
-                inp = gr.Audio(type="filepath")
-                btn = gr.Button("RUN SEPARATION", elem_classes="run")
+                input_audio = gr.Audio(type="filepath")
+                run_btn = gr.Button("Separate", elem_classes="run")
 
+            # Right: Stems
             with gr.Column(elem_classes="panel"):
-                gr.HTML('<div class="label">STEMS</div>')
-                with gr.Row(elem_classes="stems"):
+                with gr.Row(elem_classes="stems-grid"):
                     with gr.Column(elem_classes="stem"):
-                        gr.HTML('<div class="label">Vocals</div>')
-                        o1 = gr.Audio(interactive=False)
+                        gr.HTML('<div class="stem-label">Vocals</div>')
+                        out_vocals = gr.Audio(interactive=False)
                     with gr.Column(elem_classes="stem"):
-                        gr.HTML('<div class="label">Drums</div>')
-                        o2 = gr.Audio(interactive=False)
+                        gr.HTML('<div class="stem-label">Drums</div>')
+                        out_drums = gr.Audio(interactive=False)
                     with gr.Column(elem_classes="stem"):
-                        gr.HTML('<div class="label">Bass</div>')
-                        o3 = gr.Audio(interactive=False)
+                        gr.HTML('<div class="stem-label">Bass</div>')
+                        out_bass = gr.Audio(interactive=False)
                     with gr.Column(elem_classes="stem"):
-                        gr.HTML('<div class="label">Other</div>')
-                        o4 = gr.Audio(interactive=False)
+                        gr.HTML('<div class="stem-label">Other</div>')
+                        out_other = gr.Audio(interactive=False)
 
-    btn.click(separate_audio, inp, [o1, o2, o3, o4])
+    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())