dev2008/audio-separation
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Audio Separation with NMF + CLAP</title>7 <link rel="stylesheet" href="/static/styles.css?v=2">8</head>9<body>10 <div class="container">11 <header>12 <h1>🎵 Time-Selective Audio Separation</h1>13 <p>Text-guided source separation with UNet + CLAP (Time-Selective Editing)</p>14 </header>15 16 <div class="main-content">17 <!-- Left Panel: File Selection -->18 <div class="panel">19 <div class="card">20 <h2> Select Audio File</h2>21 22 <!-- Upload Section -->23 <div class="upload-section">24 <input type="file" id="fileUpload" accept=".wav,.mp3,.flac,.ogg,.m4a" style="display: none;">25 <button id="uploadBtn" class="btn btn-secondary">📤 Upload Your Audio</button>26 <div id="uploadStatus" class="info-badge" style="display: none;"></div>27 </div>28 29 <div style="text-align: center; margin: 10px 0; color: #666;">OR</div>30 31 <!-- Dataset Selection -->32 <select id="fileSelect" class="file-select">33 <option value="">Loading files...</option>34 </select>35 36 <div class="audio-section">37 <h3>Input Audio</h3>38 <audio id="mixPlayer" controls class="audio-player"></audio>39 <div class="info-badge" id="classInfo"></div>40 </div>41 42 <div class="spectrogram-section">43 <h3>Input Spectrogram</h3>44 <img id="mixSpectrogram" class="spectrogram" alt="Spectrogram will appear here">45 <div class="loading" id="mixLoading" style="display: none;">Loading spectrogram...</div>46 </div>47 </div>48 49 <!-- Detection Section -->50 <div class="card">51 <h2> Detect Sounds</h2>52 <button id="detectBtn" class="btn btn-secondary">Detect Classes</button>53 <div id="detectionResults" class="detection-results"></div>54 </div>55 </div>56 57 <!-- Right Panel: Separation Controls -->58 <div class="panel">59 <div class="card">60 <h2> Separation Settings</h2>61 62 <div class="form-group">63 <label for="promptInput">Text Prompt</label>64 <input type="text" id="promptInput" class="text-input" placeholder="e.g., dog barking, rain, helicopter">65 </div>66 67 <div class="form-group">68 <label>Mode</label>69 <div class="radio-group">70 <label class="radio-label">71 <input type="radio" name="mode" value="keep" checked>72 <span>Keep (isolate)</span>73 </label>74 <label class="radio-label">75 <input type="radio" name="mode" value="remove">76 <span>Remove (suppress)</span>77 </label>78 </div>79 </div>80 81 <div class="form-group">82 <label for="startTime">Start Time: <span id="startTimeValue">0.0</span>s</label>83 <input type="range" id="startTime" class="slider" min="0" max="5" step="0.1" value="0">84 </div>85 86 <div class="form-group">87 <label for="endTime">End Time: <span id="endTimeValue">5.0</span>s (full duration)</label>88 <input type="range" id="endTime" class="slider" min="0" max="5" step="0.1" value="5">89 </div>90 91 <div class="form-group">92 <label for="components">Components (K): <span id="componentsValue">10</span></label>93 <input type="range" id="components" class="slider" min="6" max="12" step="1" value="10">94 <small style="color: #666;">Only for NMF method</small>95 </div>96 97 <div class="form-group">98 <label for="maskContrast">Mask Contrast: <span id="maskContrastValue">1.5</span></label>99 <input type="range" id="maskContrast" class="slider" min="1.0" max="3.0" step="0.1" value="1.5">100 <small style="color: #666;">Higher values make separation sharper</small>101 </div>102 103 <div class="form-group">104 <label for="maskThreshold">Noise Gate Threshold: <span id="maskThresholdValue">0.00</span></label>105 <input type="range" id="maskThreshold" class="slider" min="0.0" max="0.5" step="0.05" value="0.0">106 <small style="color: #666;">Set higher to mute leakage in silent parts</small>107 </div>108 109 <div class="form-group">110 <label class="checkbox-label" style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-weight: 500; margin-bottom: 0.5rem;">111 <input type="checkbox" id="enhanceOutput" style="width: 18px; height: 18px; cursor: pointer;">112 <span>✨ Enhance Output Audio Quality</span>113 </label>114 115 <div id="enhanceSuboptions" style="display: none; margin-left: 1.5rem; margin-top: 0.5rem; background: rgba(0,0,0,0.03); padding: 0.75rem; border-radius: 6px; border-left: 3px solid var(--primary-color);">116 <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer; margin-bottom: 0.5rem;">117 <input type="checkbox" id="enhanceDenoise" checked>118 <span>Spectral Denoise</span>119 </label>120 <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer; margin-bottom: 0.5rem;">121 <input type="checkbox" id="enhanceDereverb" checked>122 <span>Dereverberation</span>123 </label>124 <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">125 <input type="checkbox" id="enhanceEq">126 <span>Speech EQ (Boost Presence)</span>127 </label>128 </div>129 </div>130 131 <div class="form-group">132 <label>Separation Method</label>133 <div class="radio-group">134 <label class="radio-label">135 <input type="radio" name="method" value="unet" checked>136 <span> UNet (Trained Model)</span>137 </label>138 <label class="radio-label">139 <input type="radio" name="method" value="nmf">140 <span> NMF (Baseline)</span>141 </label>142 </div>143 </div>144 145 <button id="runBtn" class="btn btn-primary">▶ Run Separation</button>146 <div class="spinner" id="spinner" style="display: none;"></div>147 </div>148 </div>149 </div>150 151 <!-- Results Section -->152 <div class="results-section" id="resultsSection" style="display: none;">153 <div class="card">154 <h2> Results</h2>155 156 <div class="results-grid">157 <div class="result-item">158 <h3>Output Audio</h3>159 <audio id="outPlayer" controls class="audio-player"></audio>160 </div>161 162 <div class="result-item">163 <h3>Residual Audio</h3>164 <audio id="residualPlayer" controls class="audio-player"></audio>165 </div>166 </div>167 168 <div class="results-grid">169 <div class="result-item">170 <h3>Output Spectrogram</h3>171 <img id="outSpectrogram" class="spectrogram" alt="Output spectrogram">172 </div>173 174 <div class="result-item">175 <h3>Separation Mask</h3>176 <img id="maskImage" class="spectrogram" alt="Separation mask">177 </div>178 </div>179 </div>180 </div>181 </div>182 183 <!-- Toast notifications -->184 <div id="toast" class="toast"></div>185 186 <script src="/static/app.js?v=2"></script>187</body>188</html>189