Update app.py

app.py

@@ -594,34 +594,6 @@ body {
     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 ==========
@@ -728,50 +700,56 @@ function startProcessing() {
 def create_input_file_html(files):
     """Create HTML for input files panel"""
     if not files:
-        return """
-        <div class='file-panel'>
-            <div class='file-panel-header'>
-                <span style='font-size: 20px; font-weight: 600;'>Input Files</span>
-            </div>
-            <div class='file-list' id='input-file-list'>
+        file_items_html = """
                 <div style='text-align: center; padding: 40px 20px; color: rgba(255,255,255,0.5);'>
                     <div style='font-size: 48px; opacity: 0.3; margin-bottom: 10px;'>📁</div>
                     <div>No files loaded</div>
-                    <div style='font-size: 12px; margin-top: 10px;'>Upload audio files to begin</div>
+                    <div style='font-size: 12px; margin-top: 10px;'>Import audio files to begin</div>
                 </div>
-            </div>
-        </div>
-        <script>inputFiles = [];</script>
         """
-    
-    file_items_html = ""
-    file_data = []
-    
-    for i, file in enumerate(files):
-        file_name = Path(file.name).name
-        file_size = os.path.getsize(file.name) / (1024 * 1024)  # Convert to MB
-        
-        file_info = {
-            'name': file_name,
-            'path': file.name,
-            'size': f"{file_size:.1f} MB"
-        }
-        file_data.append(file_info)
+        file_data = []
+    else:
+        file_items_html = ""
+        file_data = []
         
-        file_items_html += f"""
-        <div class='file-item' id='input-file-{i}' onclick='selectFile("input", {i})'>
-            <span style='font-size: 20px;'>🎵</span>
-            <div style='flex: 1;'>
-                <div style='font-weight: 500; color: #fff;'>{file_name}</div>
-                <div style='font-size: 11px; opacity: 0.7;'>{file_info['size']}</div>
+        for i, file in enumerate(files):
+            file_name = Path(file.name).name
+            file_size = os.path.getsize(file.name) / (1024 * 1024)  # Convert to MB
+            
+            file_info = {
+                'name': file_name,
+                'path': file.name,
+                'size': f"{file_size:.1f} MB"
+            }
+            file_data.append(file_info)
+            
+            file_items_html += f"""
+            <div class='file-item' id='input-file-{i}' onclick='selectFile("input", {i})'>
+                <span style='font-size: 20px;'>🎵</span>
+                <div style='flex: 1;'>
+                    <div style='font-weight: 500; color: #fff;'>{file_name}</div>
+                    <div style='font-size: 11px; opacity: 0.7;'>{file_info['size']}</div>
+                </div>
             </div>
-        </div>
-        """
+            """
     
     return f"""
     <div class='file-panel'>
         <div class='file-panel-header'>
             <span style='font-size: 20px; font-weight: 600;'>Input Files</span>
+            <div style='margin-left: auto; display: flex; gap: 8px;'>
+                <button onclick='document.getElementById("import-btn-trigger").click()' style='
+                    background: linear-gradient(135deg, #4ecdc4 0%, #44a3aa 100%);
+                    border: none;
+                    color: #fff;
+                    padding: 8px 16px;
+                    border-radius: 6px;
+                    cursor: pointer;
+                    font-weight: 500;
+                    font-size: 13px;
+                    min-width: 90px;
+                '>Import</button>
+            </div>
         </div>
         <div class='file-list' id='input-file-list'>
             {file_items_html}
@@ -983,21 +961,19 @@ 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"):
-            # 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(
                 value=create_input_file_html([]),
                 elem_classes="file-panel-container"
             )
             
+            # Hidden upload button (triggered by the Import button in the header)
+            upload_btn = gr.Button(
+                "Import",
+                elem_id="import-btn-trigger",
+                visible=False
+            )
+            
             # File upload (hidden)
             file_upload = gr.File(
                 label="Upload Audio Files",