Update app.py

app.py

@@ -383,10 +383,10 @@ body {
     overflow: hidden !important;
 }
 
-/* Clean modern design */
+/* Clean modern design - Dark teal/coral theme */
 .gradio-container {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
     color: #fff;
     height: 100vh;
     max-height: 100vh;
@@ -455,7 +455,7 @@ body {
 .file-panel-header {
     background: rgba(255, 255, 255, 0.15);
     padding: 15px;
-    border-bottom: 2px solid #fbbf24;
+    border-bottom: 2px solid #ff6b6b;
     display: flex;
     align-items: center;
     gap: 10px;
@@ -484,13 +484,13 @@ body {
 }
 
 .file-item:hover {
-    background: rgba(251, 191, 36, 0.3);
+    background: rgba(255, 107, 107, 0.3);
     transform: translateX(5px);
 }
 
 .file-item.selected {
-    background: rgba(251, 191, 36, 0.4);
-    border-left: 4px solid #fbbf24;
+    background: rgba(255, 107, 107, 0.4);
+    border-left: 4px solid #ff6b6b;
 }
 
 /* Main content area */
@@ -513,11 +513,11 @@ body {
     border: 1px solid rgba(255, 255, 255, 0.2);
 }
 
-/* Button styling */
+/* Button styling - Coral accent */
 .gr-button {
-    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
+    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a50 100%) !important;
     border: none !important;
-    color: #1f2937 !important;
+    color: #fff !important;
     padding: 10px 20px !important;
     border-radius: 6px !important;
     font-weight: 600 !important;
@@ -525,14 +525,14 @@ body {
 }
 
 .gr-button:hover {
-    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
+    background: linear-gradient(135deg, #ee5a50 0%, #e04545 100%) !important;
     transform: translateY(-2px) !important;
-    box-shadow: 0 5px 15px rgba(251, 191, 36, 0.4) !important;
+    box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4) !important;
 }
 
 /* Slider styling */
 .gr-slider input {
-    accent-color: #fbbf24 !important;
+    accent-color: #ff6b6b !important;
 }
 
 /* Center slider values */
@@ -549,7 +549,7 @@ body {
     position: relative;
     background: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(10px);
-    border: 1px solid rgba(251, 191, 36, 0.5);
+    border: 1px solid rgba(255, 107, 107, 0.5);
     border-radius: 6px;
     padding: 0;
     margin-top: 20px;
@@ -562,7 +562,7 @@ body {
     top: 0;
     left: 0;
     height: 100%;
-    background: linear-gradient(90deg, #fbbf24, #f59e0b);
+    background: linear-gradient(90deg, #ff6b6b, #ee5a50);
     width: 0%;
     transition: width 0.3s ease;
 }
@@ -590,10 +590,38 @@ body {
 /* Dropdown styling */
 .gr-dropdown {
     background: rgba(255, 255, 255, 0.1) !important;
-    border: 1px solid rgba(251, 191, 36, 0.5) !important;
+    border: 1px solid rgba(255, 107, 107, 0.5) !important;
     color: #fff !important;
     user-select: none !important;
 }
+
+/* Import button styling */
+.upload-button {
+    width: 100% !important;
+    margin-bottom: 10px !important;
+    background: linear-gradient(135deg, #4ecdc4 0%, #44a3aa 100%) !important;
+}
+
+.upload-button:hover {
+    background: linear-gradient(135deg, #44a3aa 0%, #3a8f96 100%) !important;
+}
+
+/* File column layout fix */
+.file-column > div {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.file-column .file-panel-container {
+    flex: 1 1 auto;
+    min-height: 0;
+}
+
+.file-column .gr-row:first-child {
+    flex: 0 0 auto;
+    padding: 10px 10px 0 10px;
+}
 """
 
 # ========== FILE MANAGEMENT JAVASCRIPT ==========
@@ -637,7 +665,7 @@ function updateWaveformForFile(fileInfo) {
         canvas.height = canvas.offsetHeight;
         
         ctx.clearRect(0, 0, canvas.width, canvas.height);
-        ctx.strokeStyle = '#fbbf24';
+        ctx.strokeStyle = '#ff6b6b';
         ctx.lineWidth = 2;
         ctx.beginPath();
         
@@ -660,7 +688,7 @@ function updateWaveformForFile(fileInfo) {
         }
         ctx.stroke();
         
-        ctx.fillStyle = '#fbbf24';
+        ctx.fillStyle = '#ff6b6b';
         ctx.font = '12px monospace';
         ctx.fillText(fileInfo ? `${fileInfo.name}` : 'No file selected', 10, 20);
     }
@@ -761,25 +789,27 @@ def create_processed_file_html(files):
                 <span style='font-size: 20px; font-weight: 600;'>Processed Files</span>
                 <div style='margin-left: auto; display: flex; gap: 8px;'>
                     <button onclick='saveSelectedFile()' style='
-                        background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
+                        background: linear-gradient(135deg, #ff6b6b 0%, #ee5a50 100%);
                         border: none;
-                        color: #1f2937;
-                        padding: 8px 12px;
+                        color: #fff;
+                        padding: 8px 16px;
                         border-radius: 6px;
                         cursor: pointer;
                         font-weight: 500;
                         font-size: 13px;
-                    '>Save Selected</button>
+                        min-width: 90px;
+                    '>Export</button>
                     <button onclick='saveAllFiles()' style='
-                        background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
+                        background: linear-gradient(135deg, #ff6b6b 0%, #ee5a50 100%);
                         border: none;
-                        color: #1f2937;
-                        padding: 8px 12px;
+                        color: #fff;
+                        padding: 8px 16px;
                         border-radius: 6px;
                         cursor: pointer;
                         font-weight: 500;
                         font-size: 13px;
-                    '>Save All</button>
+                        min-width: 90px;
+                    '>Export All</button>
                 </div>
             </div>
             <div class='file-list' id='processed-file-list'>
@@ -814,25 +844,27 @@ def create_processed_file_html(files):
             <span style='font-size: 20px; font-weight: 600;'>Processed Files</span>
             <div style='margin-left: auto; display: flex; gap: 8px;'>
                 <button onclick='saveSelectedFile()' style='
-                    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
+                    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a50 100%);
                     border: none;
-                    color: #1f2937;
-                    padding: 8px 12px;
+                    color: #fff;
+                    padding: 8px 16px;
                     border-radius: 6px;
                     cursor: pointer;
                     font-weight: 500;
                     font-size: 13px;
-                '>Save Selected</button>
+                    min-width: 90px;
+                '>Export</button>
                 <button onclick='saveAllFiles()' style='
-                    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
+                    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a50 100%);
                     border: none;
-                    color: #1f2937;
-                    padding: 8px 12px;
+                    color: #fff;
+                    padding: 8px 16px;
                     border-radius: 6px;
                     cursor: pointer;
                     font-weight: 500;
                     font-size: 13px;
-                '>Save All</button>
+                    min-width: 90px;
+                '>Export All</button>
             </div>
         </div>
         <div class='file-list' id='processed-file-list'>
@@ -951,14 +983,14 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Base()) as demo:
     with gr.Row():
         # Left panel - Input files
         with gr.Column(scale=1, min_width=250, elem_classes="file-column"):
-            # File upload (hidden)
-            file_upload = gr.File(
-                label="Upload Audio Files",
-                file_count="multiple",
-                file_types=["audio"],
-                visible=False,
-                elem_id="file-upload"
-            )
+            # Import Audio button at the TOP
+            with gr.Row():
+                upload_btn = gr.Button(
+                    "📁 Import Audio",
+                    elem_classes="upload-button",
+                    size="sm",
+                    variant="primary"
+                )
             
             # Input files display
             input_file_panel = gr.HTML(
@@ -966,10 +998,13 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Base()) as demo:
                 elem_classes="file-panel-container"
             )
             
-            # Upload button
-            upload_btn = gr.Button(
-                "📁 Upload Audio Files",
-                elem_classes="upload-button"
+            # File upload (hidden)
+            file_upload = gr.File(
+                label="Upload Audio Files",
+                file_count="multiple",
+                file_types=["audio"],
+                visible=False,
+                elem_id="file-upload"
             )
         
         # Center - Main content