| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Voice Isolation</title> |
| <link rel="stylesheet" href="style.css"> |
| </head> |
| <body> |
|
|
| <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> |
|
|
| <main> |
|
|
| |
| <aside class="left-panel"> |
|
|
| |
| <div class="upload-zone" id="uploadZone"> |
| <input type="file" id="fileInput" accept="audio/*,video/*" 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="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> |
|
|
| |
| <button class="process-btn" id="uploadBtn" hidden>Enhance Audio</button> |
|
|
| <div id="status"></div> |
|
|
| </aside> |
|
|
| |
| <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> |
|
|
| |
| <div class="player-wrap"> |
| <audio id="audioPlayer" controls></audio> |
| <video id="videoPlayer" controls hidden></video> |
| </div> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <a class="download-btn" id="downloadLink" download>Download Enhanced File</a> |
|
|
| </div> |
|
|
| </section> |
|
|
| </main> |
|
|
| <script src="app.js"></script> |
| </body> |
| </html> |
|
|
