Update app.py

app.py

@@ -1,23 +1,23 @@
 import gradio as gr
 
 # -----------------------------
-# CSS (FINAL, FIXED, ALIGNED)
+# CSS (Gradio 6 compatible)
 # -----------------------------
 css = """
 :root {
   --bg1: #1a0c12;
   --bg2: #3a1523;
-  --surface: rgba(255,255,255,0.04);
-  --surface-soft: rgba(255,255,255,0.03);
+  --panel: rgba(255,255,255,0.04);
+  --panel-soft: rgba(255,255,255,0.03);
   --border: rgba(255,255,255,0.10);
-  --text: #f5f5f5;
+  --text: #f4f4f4;
   --muted: rgba(255,255,255,0.65);
   --accent: #ff5c8a;
 }
 
 body {
   background: linear-gradient(135deg, var(--bg1), var(--bg2));
-  font-family: Poppins, system-ui, sans-serif;
+  font-family: Inter, system-ui, sans-serif;
 }
 
 .gradio-container {
@@ -27,7 +27,7 @@ body {
 
 /* Header */
 .header {
-  margin-bottom: 28px;
+  margin-bottom: 26px;
 }
 .logo {
   font-size: 42px;
@@ -40,7 +40,7 @@ body {
   color: var(--accent);
 }
 
-/* Section text */
+/* Section */
 .section-title {
   font-size: 20px;
   font-weight: 600;
@@ -51,7 +51,7 @@ body {
   margin-bottom: 14px;
 }
 
-/* GRID — THIS IS THE KEY FIX */
+/* GRID */
 .main-grid {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr;
@@ -59,18 +59,18 @@ body {
   gap: 22px;
 }
 
-/* Upload box */
+/* Upload */
 .upload-box {
   grid-row: span 2;
-  background: var(--surface);
+  background: var(--panel);
   border: 1px solid var(--border);
   border-radius: 14px;
-  padding: 20px;
+  padding: 18px;
 }
 
-/* Stem boxes */
+/* Stems */
 .stem-box {
-  background: var(--surface-soft);
+  background: var(--panel-soft);
   border: 1px solid var(--border);
   border-radius: 14px;
   padding: 14px;
@@ -99,7 +99,6 @@ body {
   letter-spacing: 0.3px;
 }
 
-/* Footer off */
 footer { display: none !important; }
 """
 
@@ -109,50 +108,44 @@ footer { display: none !important; }
 with gr.Blocks() as demo:
 
     # Header
-    gr.Markdown(
-        """
+    gr.HTML("""
         <div class="header">
           <div class="logo">SWARA STUDIO</div>
           <div class="tagline">Separating Music Into Its elements</div>
         </div>
-        """,
-        unsafe_allow_html=True
-    )
+    """)
 
-    # Intro text
-    gr.Markdown(
-        """
+    # Intro
+    gr.HTML("""
         <div class="section-title">Select a track</div>
         <div class="section-sub">We’ll break it down into individual parts</div>
-        """,
-        unsafe_allow_html=True
-    )
+    """)
 
-    # MAIN GRID
+    # Main grid
     with gr.Row(elem_classes="main-grid"):
 
-        # LEFT — Upload (spans 2 rows visually via CSS)
+        # Upload (aligned by grid, not hacks)
         with gr.Column(elem_classes="upload-box"):
             audio_in = gr.Audio(label="Audio", type="filepath")
 
-        # RIGHT — Vocals
+        # Vocals
         with gr.Column(elem_classes="stem-box"):
-            gr.Markdown('<div class="stem-title">Vocals</div>', unsafe_allow_html=True)
+            gr.HTML('<div class="stem-title">Vocals</div>')
             vocals = gr.Audio(label=None)
 
-        # RIGHT — Drums
+        # Drums
         with gr.Column(elem_classes="stem-box"):
-            gr.Markdown('<div class="stem-title">Drums</div>', unsafe_allow_html=True)
+            gr.HTML('<div class="stem-title">Drums</div>')
             drums = gr.Audio(label=None)
 
-        # RIGHT — Bass
+        # Bass
         with gr.Column(elem_classes="stem-box"):
-            gr.Markdown('<div class="stem-title">Bass</div>', unsafe_allow_html=True)
+            gr.HTML('<div class="stem-title">Bass</div>')
             bass = gr.Audio(label=None)
 
-        # RIGHT — Other
+        # Other
         with gr.Column(elem_classes="stem-box"):
-            gr.Markdown('<div class="stem-title">Other</div>', unsafe_allow_html=True)
+            gr.HTML('<div class="stem-title">Other</div>')
             other = gr.Audio(label=None)
 
     # Action