Update app.py

app.py

@@ -9,7 +9,7 @@ import sys
 from huggingface_hub import hf_hub_download
 
 # ==========================================
-# 1. BACKEND ENGINE
+# 1. ENGINE SETUP
 # ==========================================
 try:
     from bs_roformer import BSRoformer
@@ -28,7 +28,7 @@ except NameError:
     pass 
 
 def load_model():
-    print(">>> 📡 Loading Engine...")
+    print(">>> 📡 Connecting to Neural Engine...")
     try:
         checkpoint_path = hf_hub_download(
             repo_id="Tachyeon/IAM-RoFormer-Model-Weights",
@@ -60,7 +60,7 @@ def separate_audio(audio_path):
     mix, sr = librosa.load(audio_path, sr=44100, mono=False)
     if len(mix.shape) == 1: mix = np.stack([mix, mix], axis=0)
     
-    # Config
+    # Process
     chunk_size = 44100 * 10
     overlap = 44100 * 1
     
@@ -71,7 +71,6 @@ def separate_audio(audio_path):
     final_output = torch.zeros(1, 4, 2, length).to(DEVICE)
     counts = torch.zeros(1, 4, 2, length).to(DEVICE)
 
-    # Process
     with torch.no_grad():
         context = torch.amp.autocast('cuda') if torch.cuda.is_available() else torch.no_grad()
         with context:
@@ -89,7 +88,7 @@ def separate_audio(audio_path):
 
     stems = (final_output / torch.clamp(counts, min=1.0)).cpu().numpy()[0]
     
-    # Write
+    # Export
     outputs = []
     for i in range(4):
         outfile = f"stem_{i}.wav"
@@ -99,156 +98,159 @@ def separate_audio(audio_path):
     return outputs
 
 # ==========================================
-# 2. VIBRANT UI DESIGN (CSS)
+# 2. SHARP & PUNCHY UI DESIGN (No Blur)
 # ==========================================
 css = """
-@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;500;800&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Teko:wght@300;500;700&family=Work+Sans:wght@400;600;800&display=swap');
 
 :root {
-    --bg-dark: #09090b;
-    --panel-glass: rgba(255, 255, 255, 0.03);
-    --border-light: rgba(255, 255, 255, 0.1);
-    --accent-gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 100%); /* Indigo to Purple */
-    --text-glow: 0 0 20px rgba(168, 85, 247, 0.5);
+    --bg-color: #050505;
+    --card-bg: #111111;
+    --border-color: #333333;
+    --highlight-cyan: #00F0FF;
+    --highlight-violet: #8F00FF;
+    --text-white: #FFFFFF;
+    --text-gray: #888888;
 }
 
 body, .gradio-container {
-    background-color: var(--bg-dark) !important;
-    font-family: 'Outfit', sans-serif !important;
-    color: #ffffff !important;
+    background-color: var(--bg-color) !important;
+    color: var(--text-white) !important;
+    font-family: 'Work Sans', sans-serif !important;
     margin: 0; padding: 0;
-    height: 100vh; overflow: hidden;
 }
 
-/* HEADER */
-.brand-container {
-    padding: 20px 0;
-    border-bottom: 1px solid var(--border-light);
-    margin-bottom: 25px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
+/* CONTAINER RESET */
+.contain {
+    padding: 30px !important;
+    max-width: 1400px !important;
+    margin: 0 auto !important;
 }
-.brand-text {
-    font-size: 2.2rem;
-    font-weight: 800;
-    letter-spacing: -1px;
-    background: var(--accent-gradient);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    text-shadow: 0px 5px 15px rgba(99, 102, 241, 0.3);
+
+/* HEADER STYLE */
+.header-wrapper {
+    margin-bottom: 40px;
+    border-bottom: 2px solid var(--border-color);
+    padding-bottom: 20px;
 }
-.version-tag {
-    background: rgba(255,255,255,0.1);
-    padding: 4px 12px;
-    border-radius: 20px;
-    font-size: 0.8rem;
-    font-weight: 500;
-    color: #a5b4fc;
+.title-main {
+    font-family: 'Teko', sans-serif;
+    font-size: 5rem; /* Massive Title */
+    line-height: 0.9;
+    font-weight: 700;
+    text-transform: uppercase;
+    color: white;
+    letter-spacing: 2px;
+}
+.title-sub {
+    font-family: 'Work Sans', sans-serif;
+    color: var(--highlight-cyan);
+    font-size: 1.2rem;
+    font-weight: 600;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+    margin-top: 5px;
 }
 
-/* PANELS */
-.glass-panel {
-    background: var(--panel-glass);
-    backdrop-filter: blur(10px);
-    border: 1px solid var(--border-light);
-    border-radius: 24px;
-    padding: 30px;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
+/* SHARP CARD PANELS (No Blur) */
+.sharp-card {
+    background-color: var(--card-bg);
+    border: 1px solid var(--border-color);
+    padding: 0px; /* Reset Padding */
+    margin-bottom: 0px;
 }
 
-.panel-title {
-    font-size: 1.1rem;
-    font-weight: 500;
-    color: #94a3b8;
+.card-header {
+    background-color: #1A1A1A;
+    padding: 15px 20px;
+    border-bottom: 1px solid var(--border-color);
+    font-family: 'Teko', sans-serif;
+    font-size: 1.8rem;
+    color: var(--text-gray);
     text-transform: uppercase;
-    letter-spacing: 2px;
-    margin-bottom: 20px;
-    display: flex;
-    align-items: center;
-    gap: 10px;
+    letter-spacing: 1px;
+}
+.card-content {
+    padding: 25px;
 }
 
-/* BUTTON */
-button.primary-btn {
-    background: var(--accent-gradient) !important;
-    border: none !important;
-    color: white !important;
-    font-size: 1.1rem !important;
+/* BUTTON STYLING */
+#run-btn {
+    background: linear-gradient(90deg, var(--highlight-violet), var(--highlight-cyan)) !important;
+    color: #000 !important;
+    font-family: 'Work Sans', sans-serif !important;
     font-weight: 800 !important;
-    padding: 18px !important;
-    border-radius: 16px !important;
-    margin-top: auto !important;
-    cursor: pointer !important;
-    transition: transform 0.2s, box-shadow 0.2s !important;
-    box-shadow: 0 10px 30px -10px rgba(168, 85, 247, 0.6) !important;
+    font-size: 1.2rem !important;
+    text-transform: uppercase !important;
+    border: none !important;
+    border-radius: 0px !important; /* Sharp Edges */
+    padding: 20px !important;
+    transition: all 0.2s ease-in-out !important;
 }
-button.primary-btn:hover {
-    transform: translateY(-3px);
-    box-shadow: 0 20px 40px -10px rgba(168, 85, 247, 0.8) !important;
+#run-btn:hover {
+    filter: brightness(1.2);
+    transform: scale(1.01);
 }
 
 /* AUDIO PLAYERS */
 .audio-player {
-    border: 1px solid var(--border-light) !important;
     background: transparent !important;
-    border-radius: 12px !important;
+    border: 1px solid var(--border-color) !important;
+    border-radius: 0px !important;
     margin-bottom: 15px !important;
 }
+
+/* LABEL OVERRIDES */
+span.svelte-1gfkn6j {
+    color: var(--highlight-cyan) !important;
+    font-weight: 600 !important;
+    text-transform: uppercase;
+    font-size: 0.8rem;
+}
 """
 
-# ==========================================
-# 3. LAYOUT
-# ==========================================
 with gr.Blocks(css=css, theme=gr.themes.Base()) as demo:
     
-    with gr.Column(elem_id="main-container"):
+    with gr.Column(elem_classes="contain"):
         
-        # HEADLINE
-        with gr.Row(elem_classes="brand-container"):
+        # 1. HEADER AREA
+        with gr.Group(elem_classes="header-wrapper"):
             gr.HTML("""
-            <div style="display:flex; align-items:center; width:100%; justify-content:space-between;">
-                <div class="brand-text">SWARA STUDIO</div>
-                <div class="version-tag">V11.0 CONSENSUS</div>
+            <div>
+                <div class="title-main">Swara Studio</div>
+                <div class="title-sub">Neural Audio Source Separation Engine</div>
             </div>
             """)
 
-        # WORKSPACE
-        with gr.Row(equal_height=True):
+        # 2. MAIN GRID
+        with gr.Row(equal_height=True, variant="compact"):
             
-            # LEFT: INPUT
+            # LEFT COLUMN: INPUT
             with gr.Column(scale=1):
-                with gr.Group(elem_classes="glass-panel"):
-                    gr.HTML('<div class="panel-title">💿 INPUT SOURCE</div>')
-                    
-                    input_audio = gr.Audio(
-                        label="Upload Track", 
-                        type="filepath",
-                        elem_classes="audio-player"
-                    )
-                    
-                    gr.Markdown("*Optimized for: Indian Classical / Fusion*", elem_id="hint-text")
-                    
-                    process_btn = gr.Button("⚡  INITIALIZE SEPARATION", elem_classes="primary-btn")
+                with gr.Group(elem_classes="sharp-card"):
+                    gr.HTML('<div class="card-header">Input Source</div>')
+                    with gr.Column(elem_classes="card-content"):
+                        input_audio = gr.Audio(
+                            label="MASTER AUDIO TRACK",
+                            type="filepath",
+                            elem_classes="audio-player"
+                        )
+                        run_btn = gr.Button("RUN SEPARATION PROCESS", elem_id="run-btn")
 
-            # RIGHT: OUTPUT
+            # RIGHT COLUMN: OUTPUT
             with gr.Column(scale=2):
-                with gr.Group(elem_classes="glass-panel"):
-                    gr.HTML('<div class="panel-title">🎚️ ISOLATED STEMS</div>')
-                    
-                    with gr.Row():
-                        out_vocals = gr.Audio(label="Vocals", interactive=False, elem_classes="audio-player")
-                        out_drums = gr.Audio(label="Mridangam / Drums", interactive=False, elem_classes="audio-player")
-                    
-                    with gr.Row():
-                        out_bass = gr.Audio(label="Tanpura / Bass", interactive=False, elem_classes="audio-player")
-                        out_other = gr.Audio(label="Violin / Other", interactive=False, elem_classes="audio-player")
+                with gr.Group(elem_classes="sharp-card"):
+                    gr.HTML('<div class="card-header">Stem Output</div>')
+                    with gr.Column(elem_classes="card-content"):
+                        with gr.Row():
+                            out_vocals = gr.Audio(label="VOCALS", interactive=False, elem_classes="audio-player")
+                            out_drums = gr.Audio(label="DRUMS / MRIDANGAM", interactive=False, elem_classes="audio-player")
+                        with gr.Row():
+                            out_bass = gr.Audio(label="BASS / TANPURA", interactive=False, elem_classes="audio-player")
+                            out_other = gr.Audio(label="OTHER / VIOLIN", interactive=False, elem_classes="audio-player")
 
     # LOGIC
-    process_btn.click(
+    run_btn.click(
         fn=separate_audio,
         inputs=[input_audio],
         outputs=[out_vocals, out_drums, out_bass, out_other]