redesign UI two-column layout and add MP4 support

Dockerfile

@@ -15,6 +15,7 @@ COPY frontend/ ./frontend/
 
 RUN mkdir -p backend/uploads separated
 
+RUN python -c "from demucs.pretrained import get_model; get_model('mdx_extra')"
 RUN python -c "from df.enhance import init_df; init_df()"
 
 EXPOSE 7860

backend/demucs_runner.py

@@ -14,21 +14,66 @@ def _get_model():
     return _model, _df_state
 
 
-def run_demucs(input_path: str) -> str:
-    # Convert mp3 to wav — DeepFilterNet can't read mp3 directly
-    if input_path.lower().endswith('.mp3'):
-        wav_path = input_path.rsplit('.', 1)[0] + '.wav'
-        subprocess.run(['ffmpeg', '-i', input_path, wav_path, '-y'], check=True)
-        input_path = wav_path
-
+def _process_audio(wav_path: str, atten_lim_db) -> str:
     model, df_state = _get_model()
-    audio, _ = load_audio(input_path, sr=df_state.sr())
-    enhanced = enhance(model, df_state, audio)
-    enhanced = enhance(model, df_state, enhanced)  # second pass
+    audio, _ = load_audio(wav_path, sr=df_state.sr())
+    enhanced = enhance(model, df_state, audio, atten_lim_db=atten_lim_db)
+    enhanced_wav = wav_path.replace('.wav', '_enhanced.wav')
+    save_audio(enhanced_wav, enhanced, df_state.sr())
+    return enhanced_wav
+
 
+def run_demucs(input_path: str, atten_lim_db: int = None) -> tuple[str, str]:
     filename = os.path.splitext(os.path.basename(input_path))[0]
+    ext = os.path.splitext(input_path)[1].lower()
     os.makedirs("separated", exist_ok=True)
-    output_path = f"separated/{filename}_enhanced.wav"
-    save_audio(output_path, enhanced, df_state.sr())
 
-    return output_path
+    if ext == '.mp4':
+        # Extract audio from video
+        audio_path = f"separated/{filename}_audio.wav"
+        subprocess.run([
+            'ffmpeg', '-i', input_path, '-vn', '-ar', '44100', '-ac', '2',
+            audio_path, '-y'
+        ], check=True)
+
+        # Step 1: Demucs vocal separation
+        subprocess.run(
+            ['demucs', '--two-stems=vocals', '-n', 'mdx_extra', audio_path],
+            check=True
+        )
+        vocals_path = f"separated/mdx_extra/{filename}_audio/vocals.wav"
+
+        # Step 2: DeepFilterNet cleanup
+        enhanced_wav = _process_audio(vocals_path, atten_lim_db)
+
+        # Mux enhanced audio back into original video
+        output_path = f"separated/{filename}_enhanced.mp4"
+        subprocess.run([
+            'ffmpeg', '-i', input_path, '-i', enhanced_wav,
+            '-c:v', 'copy', '-map', '0:v:0', '-map', '1:a:0',
+            output_path, '-y'
+        ], check=True)
+
+        return output_path, 'video'
+
+    else:
+        # Audio file — convert to wav if needed
+        if ext == '.mp3':
+            wav_path = input_path.rsplit('.', 1)[0] + '.wav'
+            subprocess.run(['ffmpeg', '-i', input_path, wav_path, '-y'], check=True)
+            input_path = wav_path
+
+        # Step 1: Demucs vocal separation
+        subprocess.run(
+            ['demucs', '--two-stems=vocals', '-n', 'mdx_extra', input_path],
+            check=True
+        )
+        vocals_path = f"separated/mdx_extra/{filename}/vocals.wav"
+
+        # Step 2: DeepFilterNet cleanup
+        enhanced_wav = _process_audio(vocals_path, atten_lim_db)
+
+        output_path = f"separated/{filename}_enhanced.wav"
+        os.rename(enhanced_wav, output_path)
+
+        return output_path, 'audio'

backend/main.py

@@ -2,7 +2,7 @@ import os
 import shutil
 import uuid
 
-from fastapi import FastAPI, File, HTTPException, UploadFile
+from fastapi import FastAPI, File, Form, HTTPException, UploadFile
 from fastapi.middleware.cors import CORSMiddleware
 from fastapi.responses import FileResponse
 from fastapi.staticfiles import StaticFiles
@@ -22,7 +22,7 @@ UPLOAD_DIR = "backend/uploads"
 
 
 @app.post("/upload")
-async def upload_audio(file: UploadFile = File(...)):
+async def upload_audio(file: UploadFile = File(...), atten_lim_db: int = Form(None)):
     ext = os.path.splitext(file.filename)[1]
     unique_name = f"{uuid.uuid4()}{ext}"
     save_path = os.path.join(UPLOAD_DIR, unique_name)
@@ -30,18 +30,22 @@ async def upload_audio(file: UploadFile = File(...)):
     with open(save_path, "wb") as buffer:
         shutil.copyfileobj(file.file, buffer)
 
-    output_path = run_demucs(save_path)
+    output_path, file_type = run_demucs(save_path, atten_lim_db=atten_lim_db)
     track_name = os.path.splitext(unique_name)[0]
 
-    return {"download_url": f"/download/{track_name}", "status": "done"}
+    return {"download_url": f"/download/{track_name}", "file_type": file_type, "status": "done"}
 
 
 @app.get("/download/{track_name}")
-def download_audio(track_name: str):
-    file_path = f"separated/{track_name}_enhanced.wav"
-    if not os.path.exists(file_path):
-        raise HTTPException(status_code=404, detail="File not found")
-    return FileResponse(file_path, media_type="audio/wav", filename="enhanced.wav")
+def download_file(track_name: str):
+    for ext, media_type, label in [
+        ("_enhanced.mp4", "video/mp4", "enhanced.mp4"),
+        ("_enhanced.wav", "audio/wav", "enhanced.wav"),
+    ]:
+        file_path = f"separated/{track_name}{ext}"
+        if os.path.exists(file_path):
+            return FileResponse(file_path, media_type=media_type, filename=label)
+    raise HTTPException(status_code=404, detail="File not found")
 
 
 app.mount("/", StaticFiles(directory="frontend", html=True), name="frontend")

docs/step-5-ui-redesign-and-mp4.md

@@ -0,0 +1,122 @@
+# Step 5 — UI Redesign + MP4 Support
+
+**Status: TODO**
+
+---
+
+## Goals
+
+1. Redesign the frontend to match the Enhance-style UI (upload zone, file card, toggle)
+2. Add MP4 support — extract audio, clean it, mux back into video
+
+---
+
+## UI Redesign Plan
+
+### Layout
+
+```
++------------------------------------------+
+|  Voice Isolation                         |
+|                                          |
+|  +------------------------------------+  |
+|  |  [icon]                            |  |
+|  |  Drop your file here               |  |  <- dashed upload zone
+|  |  or Choose File                    |  |
+|  +------------------------------------+  |
+|                                          |
+|  +------------------------------------+  |
+|  |  filename.mp3   0:33        [del]  |  |  <- file card (shown after pick)
+|  +------------------------------------+  |
+|                                          |
+|  [ Upload & Clean ]                      |
+|                                          |
+|  [status message]                        |
+|                                          |
+|  Original  ●────────  Enhanced           |  <- toggle
+|                                          |
+|  +------------------------------------+  |
+|  |  ▶  ───────────────────  0:33      |  |  <- single audio/video player
+|  +------------------------------------+  |
++------------------------------------------+
+```
+
+### Key changes from current UI
+
+| Current | New |
+|---|---|
+| Plain file input | Dashed drag-and-drop zone |
+| Two separate players always visible | One player, toggled between original and enhanced |
+| No file info shown | File card with name, duration, delete button |
+| Blue button only | Purple accent color throughout |
+
+### Files to change
+
+- `frontend/index.html` — new structure
+- `frontend/style.css` — full rewrite
+- `frontend/app.js` — add drag-and-drop, toggle logic, file card, duration display
+
+---
+
+## MP4 Support Plan
+
+### How it works
+
+```
+User uploads MP4
+      ↓
+ffmpeg extracts audio track → temp.wav
+      ↓
+DeepFilterNet cleans the audio → enhanced.wav
+      ↓
+ffmpeg muxes enhanced audio back into original video → output.mp4
+      ↓
+User downloads clean MP4
+```
+
+### Backend changes
+
+**`backend/demucs_runner.py`**
+- Detect if input is `.mp4`
+- If mp4: extract audio with ffmpeg, process, mux back into video
+- If audio: existing flow (convert to wav if needed, process, return wav)
+
+**`backend/main.py`**
+- Update `/download/{track_name}` to serve either `.wav` or `.mp4` depending on what was uploaded
+- Return correct `media_type` in the response
+
+**`frontend/index.html`**
+- Change `accept="audio/*"` to `accept="audio/*,video/mp4"`
+
+**`frontend/app.js`**
+- Detect if uploaded file is video
+- Show `<video>` player instead of `<audio>` player for mp4 files
+- Toggle works the same way
+
+---
+
+## Implementation Order
+
+1. Update `demucs_runner.py` — MP4 extraction and mux logic
+2. Update `main.py` — serve mp4 or wav correctly
+3. Rewrite `index.html` — new structure
+4. Rewrite `style.css` — new design
+5. Rewrite `app.js` — drag-drop, file card, toggle, video/audio player
+6. Test locally with both mp3 and mp4 files
+7. Push to Hugging Face
+
+---
+
+## ffmpeg commands used
+
+```bash
+# Extract audio from mp4
+ffmpeg -i input.mp4 -vn -ar 44100 -ac 2 audio.wav -y
+
+# Mux enhanced audio back into video (replace audio, keep video stream)
+ffmpeg -i input.mp4 -i enhanced.wav -c:v copy -map 0:v:0 -map 1:a:0 output.mp4 -y
+```
+
+---
+
+*Created: 2026-05-01*

frontend/app.js

@@ -1,47 +1,126 @@
-const uploadBtn = document.getElementById('uploadBtn');
-const fileInput = document.getElementById('fileInput');
-const status = document.getElementById('status');
-const players = document.getElementById('players');
-const originalPlayer = document.getElementById('originalPlayer');
-const cleanedPlayer = document.getElementById('cleanedPlayer');
+const uploadZone    = document.getElementById('uploadZone');
+const fileInput     = document.getElementById('fileInput');
+const chooseBtn     = document.getElementById('chooseBtn');
+const fileCard      = document.getElementById('fileCard');
+const fileName      = document.getElementById('fileName');
+const fileDuration  = document.getElementById('fileDuration');
+const deleteBtn     = document.getElementById('deleteBtn');
+const attenSlider   = document.getElementById('attenSlider');
+const attenValue    = document.getElementById('attenValue');
+const uploadBtn     = document.getElementById('uploadBtn');
+const status        = document.getElementById('status');
+const emptyState    = document.getElementById('emptyState');
+const playerSection = document.getElementById('playerSection');
+const toggleEnhanced = document.getElementById('toggleEnhanced');
+const audioPlayer   = document.getElementById('audioPlayer');
+const videoPlayer   = document.getElementById('videoPlayer');
+const downloadLink  = document.getElementById('downloadLink');
 
-uploadBtn.addEventListener('click', async () => {
-  const file = fileInput.files[0];
+const attenSteps  = [null, 80, 40, 20, 10, 5];
+const attenLabels = ['Off', 'High', 'Medium', 'Low', 'Minimal', 'Barely'];
 
-  if (!file) {
-    status.textContent = 'Please select an audio file first.';
-    status.className = 'error';
-    return;
-  }
+let originalSrc = null;
+let enhancedSrc = null;
+let isVideo = false;
+let selectedFile = null;
+
+// --- File picking ---
+chooseBtn.addEventListener('click', () => fileInput.click());
+uploadZone.addEventListener('click', (e) => { if (e.target !== chooseBtn) fileInput.click(); });
+
+uploadZone.addEventListener('dragover', (e) => { e.preventDefault(); uploadZone.classList.add('dragover'); });
+uploadZone.addEventListener('dragleave', () => uploadZone.classList.remove('dragover'));
+uploadZone.addEventListener('drop', (e) => {
+  e.preventDefault();
+  uploadZone.classList.remove('dragover');
+  const file = e.dataTransfer.files[0];
+  if (file) handleFile(file);
+});
+
+fileInput.addEventListener('change', () => {
+  if (fileInput.files[0]) handleFile(fileInput.files[0]);
+});
+
+function handleFile(file) {
+  selectedFile = file;
+  fileName.textContent = file.name;
+  fileDuration.textContent = '';
+  fileCard.hidden = false;
+  uploadBtn.hidden = false;
+  status.textContent = '';
+  status.className = '';
+
+  // Get duration via a temp media element
+  const url = URL.createObjectURL(file);
+  const media = file.type.startsWith('video') ? document.createElement('video') : document.createElement('audio');
+  media.src = url;
+  media.addEventListener('loadedmetadata', () => {
+    const mins = Math.floor(media.duration / 60);
+    const secs = Math.floor(media.duration % 60).toString().padStart(2, '0');
+    fileDuration.textContent = `${mins}:${secs}`;
+    URL.revokeObjectURL(url);
+  });
+}
+
+deleteBtn.addEventListener('click', () => {
+  fileInput.value = '';
+  selectedFile = null;
+  fileCard.hidden = true;
+  uploadBtn.hidden = true;
+  playerSection.hidden = true;
+  emptyState.hidden = false;
+  status.textContent = '';
+});
+
+// --- Slider ---
+attenSlider.addEventListener('input', () => {
+  attenValue.textContent = attenLabels[attenSlider.value];
+});
+
+// --- Upload & process ---
+uploadBtn.addEventListener('click', async () => {
+  const file = selectedFile || fileInput.files[0];
+  if (!file) return;
 
   uploadBtn.disabled = true;
-  players.hidden = true;
+  playerSection.hidden = true;
+  emptyState.hidden = false;
   status.className = '';
-  status.textContent = 'Uploading and processing... this takes 1-3 minutes on CPU.';
+  status.textContent = 'Processing... this may take a few minutes.';
 
   try {
     const formData = new FormData();
     formData.append('file', file);
+    const attenDb = attenSteps[attenSlider.value];
+    if (attenDb !== null) formData.append('atten_lim_db', attenDb);
 
-    const response = await fetch('/upload', {
-      method: 'POST',
-      body: formData,
-    });
-
-    if (!response.ok) {
-      throw new Error(`Server error: ${response.status}`);
-    }
+    const response = await fetch('/upload', { method: 'POST', body: formData });
+    if (!response.ok) throw new Error(`Server error: ${response.status}`);
 
     const data = await response.json();
+    isVideo = data.file_type === 'video';
+
+    originalSrc = URL.createObjectURL(file);
+    enhancedSrc = data.download_url;
 
-    originalPlayer.src = URL.createObjectURL(file);
-    cleanedPlayer.src = data.download_url;
+    // Set up players
+    if (isVideo) {
+      videoPlayer.hidden = false;
+      audioPlayer.hidden = true;
+      videoPlayer.src = originalSrc;
+    } else {
+      audioPlayer.hidden = false;
+      videoPlayer.hidden = true;
+      audioPlayer.src = originalSrc;
+    }
 
-    originalPlayer.addEventListener('play', () => cleanedPlayer.pause());
-    cleanedPlayer.addEventListener('play', () => originalPlayer.pause());
+    toggleEnhanced.checked = false;
+    downloadLink.href = enhancedSrc;
+    downloadLink.download = isVideo ? 'enhanced.mp4' : 'enhanced.wav';
 
-    players.hidden = false;
-    status.textContent = 'Done! Compare the two tracks below.';
+    emptyState.hidden = true;
+    playerSection.hidden = false;
+    status.textContent = 'Done!';
     status.className = 'success';
 
   } catch (err) {
@@ -51,3 +130,14 @@ uploadBtn.addEventListener('click', async () => {
     uploadBtn.disabled = false;
   }
 });
+
+// --- Toggle between original and enhanced ---
+toggleEnhanced.addEventListener('change', () => {
+  const src = toggleEnhanced.checked ? enhancedSrc : originalSrc;
+  const player = isVideo ? videoPlayer : audioPlayer;
+  const wasPlaying = !player.paused;
+  const currentTime = player.currentTime;
+  player.src = src;
+  player.currentTime = currentTime;
+  if (wasPlaying) player.play();
+});

frontend/index.html

@@ -7,28 +7,114 @@
   <link rel="stylesheet" href="style.css">
 </head>
 <body>
-  <div class="card">
-    <h1>Voice Isolation</h1>
-    <p>Upload an audio file to remove background noise.</p>
 
-    <div class="upload-area">
-      <input type="file" id="fileInput" accept="audio/*">
-      <button id="uploadBtn">Upload & Clean</button>
+  <header>
+    <div class="brand">
+      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#6366f1" stroke-width="2">
+        <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/>
+        <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
+        <line x1="12" y1="19" x2="12" y2="23"/>
+        <line x1="8" y1="23" x2="16" y2="23"/>
+      </svg>
+      <span>Voice Isolation</span>
     </div>
+  </header>
 
-    <div id="status"></div>
+  <main>
 
-    <div class="players" id="players" hidden>
-      <div class="player-box">
-        <p>Original</p>
-        <audio id="originalPlayer" controls></audio>
+    <!-- LEFT PANEL -->
+    <aside class="left-panel">
+
+      <!-- Upload zone -->
+      <div class="upload-zone" id="uploadZone">
+        <input type="file" id="fileInput" accept="audio/*,video/mp4" hidden>
+        <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#6366f1" stroke-width="1.5">
+          <path d="M9 19V6l12-3v13"/>
+          <circle cx="6" cy="18" r="3"/>
+          <circle cx="18" cy="15" r="3"/>
+        </svg>
+        <p class="upload-title">Enhance</p>
+        <button class="choose-btn" id="chooseBtn">Choose files</button>
       </div>
-      <div class="player-box">
-        <p>Cleaned</p>
-        <audio id="cleanedPlayer" controls></audio>
+
+      <!-- File card -->
+      <div class="file-card" id="fileCard" hidden>
+        <div class="file-info">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
+            <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/>
+          </svg>
+          <div>
+            <span class="file-name" id="fileName"></span>
+            <span class="file-duration" id="fileDuration"></span>
+          </div>
+        </div>
+        <button class="delete-btn" id="deleteBtn" title="Remove">
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <polyline points="3 6 5 6 21 6"/>
+            <path d="M19 6l-1 14H6L5 6"/>
+            <path d="M10 11v6M14 11v6"/>
+          </svg>
+        </button>
       </div>
-    </div>
-  </div>
+
+      <!-- Process button -->
+      <button class="process-btn" id="uploadBtn" hidden>Enhance Audio</button>
+
+      <div id="status"></div>
+
+    </aside>
+
+    <!-- RIGHT PANEL -->
+    <section class="right-panel" id="rightPanel">
+
+      <div class="empty-state" id="emptyState">
+        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#c7d2fe" stroke-width="1.2">
+          <path d="M9 19V6l12-3v13"/>
+          <circle cx="6" cy="18" r="3"/>
+          <circle cx="18" cy="15" r="3"/>
+        </svg>
+        <p>Upload a file to get started</p>
+      </div>
+
+      <div class="player-section" id="playerSection" hidden>
+
+        <!-- Player -->
+        <div class="player-wrap">
+          <audio id="audioPlayer" controls></audio>
+          <video id="videoPlayer" controls hidden></video>
+        </div>
+
+        <!-- Toggle -->
+        <div class="toggle-row">
+          <span class="toggle-label">Original</span>
+          <label class="toggle-switch">
+            <input type="checkbox" id="toggleEnhanced">
+            <span class="toggle-slider"></span>
+          </label>
+          <span class="toggle-label enhanced-label">Enhanced</span>
+        </div>
+
+        <!-- Strength slider -->
+        <div class="control-card">
+          <div class="control-header">
+            <span class="control-name">Noise Reduction</span>
+            <span class="control-value" id="attenValue">Max</span>
+          </div>
+          <input type="range" id="attenSlider" min="0" max="5" value="0" step="1">
+          <div class="slider-hints">
+            <span>Less</span>
+            <span>More</span>
+          </div>
+        </div>
+
+        <!-- Download -->
+        <a class="download-btn" id="downloadLink" download>Download Enhanced File</a>
+
+      </div>
+
+    </section>
+
+  </main>
 
   <script src="app.js"></script>
 </body>

frontend/style.css

@@ -5,106 +5,318 @@
 }
 
 body {
-  font-family: sans-serif;
-  background: #f0f2f5;
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-  padding: 60px 20px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  background: #f5f5ff;
   min-height: 100vh;
+  display: flex;
+  flex-direction: column;
 }
 
-.card {
+/* Header */
+header {
   background: white;
-  padding: 40px;
-  border-radius: 16px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
-  max-width: 580px;
-  width: 100%;
+  border-bottom: 1px solid #e8e8f0;
+  padding: 0 32px;
+  height: 52px;
+  display: flex;
+  align-items: center;
 }
 
-h1 {
-  font-size: 28px;
-  margin-bottom: 8px;
-  color: #111;
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 700;
+  font-size: 16px;
+  color: #1e1b4b;
 }
 
-p {
-  color: #666;
-  margin-bottom: 24px;
+/* Main layout */
+main {
+  display: flex;
+  flex: 1;
+  height: calc(100vh - 52px);
+  overflow: hidden;
 }
 
-.upload-area {
+/* Left panel */
+.left-panel {
+  width: 260px;
+  min-width: 260px;
+  background: white;
+  border-right: 1px solid #e8e8f0;
+  padding: 20px 16px;
   display: flex;
   flex-direction: column;
   gap: 12px;
-  margin-bottom: 24px;
+  overflow-y: auto;
 }
 
-input[type="file"] {
-  font-size: 14px;
-  color: #444;
+/* Upload zone */
+.upload-zone {
+  border: 2px dashed #c7d2fe;
+  border-radius: 14px;
+  padding: 28px 16px;
+  text-align: center;
+  cursor: pointer;
+  transition: border-color 0.2s, background 0.2s;
 }
 
-button {
-  background: #2563eb;
-  color: white;
-  border: none;
-  padding: 12px 24px;
-  border-radius: 8px;
+.upload-zone:hover,
+.upload-zone.dragover {
+  border-color: #6366f1;
+  background: #f5f3ff;
+}
+
+.upload-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: #1e1b4b;
+  margin: 10px 0 12px;
+}
+
+.choose-btn {
+  background: white;
+  border: 1.5px solid #d1d5db;
+  color: #374151;
+  padding: 6px 16px;
+  border-radius: 20px;
+  font-size: 13px;
   cursor: pointer;
-  font-size: 16px;
+  transition: border-color 0.2s;
+}
+
+.choose-btn:hover { border-color: #6366f1; color: #6366f1; }
+
+/* File card */
+.file-card {
+  background: #6366f1;
+  border-radius: 10px;
+  padding: 10px 12px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.file-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.file-name {
+  display: block;
+  font-size: 13px;
   font-weight: 500;
-  transition: background 0.2s;
-  width: fit-content;
+  color: white;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 140px;
 }
 
-button:hover {
-  background: #1d4ed8;
+.file-duration {
+  display: block;
+  font-size: 11px;
+  color: #c7d2fe;
+  margin-top: 2px;
 }
 
-button:disabled {
-  background: #93c5fd;
-  cursor: not-allowed;
+.delete-btn {
+  background: none;
+  border: none;
+  color: #c7d2fe;
+  cursor: pointer;
+  padding: 4px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  transition: color 0.2s;
 }
 
-#status {
+.delete-btn:hover { color: white; }
+
+/* Process button */
+.process-btn {
+  width: 100%;
+  background: #6366f1;
+  color: white;
+  border: none;
+  padding: 12px;
+  border-radius: 10px;
   font-size: 14px;
-  color: #555;
-  margin-bottom: 24px;
-  min-height: 20px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.2s;
 }
 
-#status.error {
-  color: #dc2626;
+.process-btn:hover { background: #4f46e5; }
+.process-btn:disabled { background: #a5b4fc; cursor: not-allowed; }
+
+/* Status */
+#status {
+  font-size: 13px;
+  color: #6b7280;
+  text-align: center;
 }
 
-#status.success {
-  color: #16a34a;
+#status.error { color: #dc2626; }
+#status.success { color: #16a34a; }
+
+/* Right panel */
+.right-panel {
+  flex: 1;
+  padding: 28px 32px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
 }
 
-.players {
+/* Empty state */
+.empty-state {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  color: #c7d2fe;
+  font-size: 14px;
+}
+
+/* Player section */
+.player-section {
   display: flex;
   flex-direction: column;
   gap: 20px;
 }
 
-.player-box {
-  background: #f8fafc;
-  border: 1px solid #e2e8f0;
-  border-radius: 10px;
-  padding: 16px;
+.player-wrap {
+  background: white;
+  border-radius: 16px;
+  padding: 20px;
+  box-shadow: 0 2px 12px rgba(99,102,241,0.08);
 }
 
-.player-box p {
-  font-weight: 600;
-  color: #333;
+audio, video {
+  width: 100%;
+  border-radius: 8px;
+}
+
+/* Toggle */
+.toggle-row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+}
+
+.toggle-label {
+  font-size: 14px;
+  font-weight: 500;
+  color: #9ca3af;
+}
+
+.enhanced-label { color: #6366f1; font-weight: 600; }
+
+.toggle-switch {
+  position: relative;
+  display: inline-block;
+  width: 48px;
+  height: 26px;
+}
+
+.toggle-switch input { display: none; }
+
+.toggle-slider {
+  position: absolute;
+  inset: 0;
+  background: #e5e7eb;
+  border-radius: 999px;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.toggle-slider:before {
+  content: '';
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  left: 3px;
+  top: 3px;
+  background: white;
+  border-radius: 50%;
+  transition: transform 0.2s;
+  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
+}
+
+.toggle-switch input:checked + .toggle-slider { background: #6366f1; }
+.toggle-switch input:checked + .toggle-slider:before { transform: translateX(22px); }
+
+/* Control card */
+.control-card {
+  background: white;
+  border-radius: 14px;
+  padding: 16px 20px;
+  box-shadow: 0 2px 12px rgba(99,102,241,0.06);
+}
+
+.control-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   margin-bottom: 10px;
+}
+
+.control-name {
   font-size: 14px;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
+  font-weight: 500;
+  color: #374151;
 }
 
-audio {
+.control-value {
+  font-size: 13px;
+  color: #6366f1;
+  font-weight: 600;
+}
+
+input[type="range"] {
   width: 100%;
+  accent-color: #6366f1;
+  cursor: pointer;
+}
+
+.slider-hints {
+  display: flex;
+  justify-content: space-between;
+  font-size: 11px;
+  color: #9ca3af;
+  margin-top: 6px;
+}
+
+/* Download button */
+.download-btn {
+  display: block;
+  text-align: center;
+  background: white;
+  color: #6366f1;
+  border: 1.5px solid #6366f1;
+  padding: 12px;
+  border-radius: 10px;
+  font-size: 14px;
+  font-weight: 600;
+  text-decoration: none;
+  transition: background 0.2s, color 0.2s;
+}
+
+.download-btn:hover {
+  background: #6366f1;
+  color: white;
+}
+
+/* Responsive */
+@media (max-width: 640px) {
+  main { flex-direction: column; height: auto; }
+  .left-panel { width: 100%; border-right: none; border-bottom: 1px solid #e8e8f0; }
 }

requirements.txt

@@ -1,6 +1,7 @@
 fastapi
 uvicorn
 python-multipart
+demucs
 deepfilternet
 torch
 aiofiles