alejoalvarezt/stemsync-maestro
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>StemSync Maestro - AI Audio Separator</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>9 <script src="https://unpkg.com/feather-icons"></script>10 <link rel="stylesheet" href="style.css">11</head>12<body class="bg-gradient-to-br from-gray-900 to-black min-h-screen flex items-center justify-center p-5">13 <div class="plugin-container">14 <!-- Plugin Header -->15 <div class="plugin-header">16 <div class="plugin-brand">17 <div class="plugin-logo">STEMSYNC MAESTRO</div>18 <div class="plugin-manufacturer">by Entropía</div>19 </div>20 <div class="plugin-controls">21 <button class="icon-button" title="Settings">22 <i data-feather="settings"></i>23 </button>24 <button class="icon-button" title="Help">25 <i data-feather="help-circle"></i>26 </button>27 </div>28 </div>29 30 <!-- Main Content Area -->31 <div class="plugin-main">32 <!-- Left Panel -->33 <div class="plugin-main-left">34 <div class="upload-section" id="uploadArea">35 <div class="upload-icon">36 <i data-feather="upload-cloud"></i>37 </div>38 <div class="upload-text" id="uploadText">39 Drag & drop your audio file here or click to browse40 </div>41 <button class="browse-button" id="browseButton">BROWSE FILES</button>42 <input type="file" id="fileInput" accept="audio/*" style="display:none;" />43 </div>44 <div class="waveform-section">45 <div class="waveform-placeholder">46 <div class="waveform-pattern"></div>47 </div>48 <div class="transport-controls">49 <button class="transport-button stop">STOP</button>50 <button class="transport-button play">PLAY</button>51 <button class="transport-button pause">PAUSE</button>52 <div class="progress-bar">53 <div class="progress-fill" id="playbackProgress"></div>54 </div>55 </div>56 </div>57 </div>58 59 <!-- Right Panel -->60 <div class="plugin-main-right">61 <div class="status-panel">62 <div class="status-title">PROCESSING STATUS</div>63 <div class="status-text" id="statusText">Ready to process</div>64 65 <div class="progress-section">66 <div class="progress-label">67 <span>Progress</span>68 <span id="progressPercent">0%</span>69 </div>70 <div class="progress-container">71 <div class="progress-bar-fill" id="processingProgress"></div>72 </div>73 </div>74 75 <div class="log-section" id="logContainer">76 <div class="log-entry">Model loaded successfully</div>77 <div class="log-entry">Ready for audio input</div>78 </div>79 </div>80 <button class="separate-button" id="separateButton">SEPARATE STEMS</button>81 </div>82 </div>83 84 <!-- Mixer Section -->85 <div class="plugin-mixer">86 <!-- Stem Channel 1 - Vocals -->87 <div class="stem-channel">88 <div class="stem-header">89 <div class="stem-name">VOCALS</div>90 <div class="stem-level">-6.2 dB</div>91 </div>92 <div class="stem-controls">93 <button class="stem-button play-pause" data-stem="vocals">94 <i data-feather="play" class="play-icon"></i>95 <i data-feather="pause" class="pause-icon hidden"></i>96 </button>97 <button class="stem-button mute" data-stem="vocals">98 <i data-feather="volume-x"></i>99 </button>100 <button class="stem-button solo" data-stem="vocals">101 <i data-feather="headphones"></i>102 </button>103 </div>104 <div class="stem-fader-container">105 <div class="stem-fader">106 <div class="fader-track"></div>107 <div class="fader-knob" style="top: 50%;"></div>108 </div>109 <div class="stem-meter">110 <div class="meter-level" style="height: 30%;"></div>111 <div class="meter-peak" style="top: 25%;"></div>112 </div>113 </div>114 </div>115 116 <!-- Stem Channel 2 - Bass -->117 <div class="stem-channel">118 <div class="stem-header">119 <div class="stem-name">BASS</div>120 <div class="stem-level">-3.8 dB</div>121 </div>122 <div class="stem-controls">123 <button class="stem-button play-pause" data-stem="bass">124 <i data-feather="play" class="play-icon"></i>125 <i data-feather="pause" class="pause-icon hidden"></i>126 </button>127 <button class="stem-button mute" data-stem="bass">128 <i data-feather="volume-x"></i>129 </button>130 <button class="stem-button solo" data-stem="bass">131 <i data-feather="headphones"></i>132 </button>133 </div>134 <div class="stem-fader-container">135 <div class="stem-fader">136 <div class="fader-track"></div>137 <div class="fader-knob" style="top: 60%;"></div>138 </div>139 <div class="stem-meter">140 <div class="meter-level" style="height: 45%;"></div>141 <div class="meter-peak" style="top: 40%;"></div>142 </div>143 </div>144 </div>145 146 <!-- Stem Channel 3 - Drums -->147 <div class="stem-channel">148 <div class="stem-header">149 <div class="stem-name">DRUMS</div>150 <div class="stem-level">-1.5 dB</div>151 </div>152 <div class="stem-controls">153 <button class="stem-button play-pause" data-stem="drums">154 <i data-feather="play" class="play-icon"></i>155 <i data-feather="pause" class="pause-icon hidden"></i>156 </button>157 <button class="stem-button mute" data-stem="drums">158 <i data-feather="volume-x"></i>159 </button>160 <button class="stem-button solo" data-stem="drums">161 <i data-feather="headphones"></i>162 </button>163 </div>164 <div class="stem-fader-container">165 <div class="stem-fader">166 <div class="fader-track"></div>167 <div class="fader-knob" style="top: 70%;"></div>168 </div>169 <div class="stem-meter">170 <div class="meter-level" style="height: 65%;"></div>171 <div class="meter-peak" style="top: 60%;"></div>172 </div>173 </div>174 </div>175 176 <!-- Stem Channel 4 - Other -->177 <div class="stem-channel">178 <div class="stem-header">179 <div class="stem-name">OTHER</div>180 <div class="stem-level">-8.7 dB</div>181 </div>182 <div class="stem-controls">183 <button class="stem-button play-pause" data-stem="other">184 <i data-feather="play" class="play-icon"></i>185 <i data-feather="pause" class="pause-icon hidden"></i>186 </button>187 <button class="stem-button mute" data-stem="other">188 <i data-feather="volume-x"></i>189 </button>190 <button class="stem-button solo" data-stem="other">191 <i data-feather="headphones"></i>192 </button>193 </div>194 <div class="stem-fader-container">195 <div class="stem-fader">196 <div class="fader-track"></div>197 <div class="fader-knob" style="top: 40%;"></div>198 </div>199 <div class="stem-meter">200 <div class="meter-level" style="height: 25%;"></div>201 <div class="meter-peak" style="top: 20%;"></div>202 </div>203 </div>204 </div>205 </div>206 207 <!-- Plugin Footer -->208 <div class="plugin-footer">209 <div class="footer-info">210 <span>v1.1.0</span>211 <span>Powered by Spleeter</span>212 </div>213 <div class="footer-links">214 <a href="#" class="footer-link">License</a>215 <a href="#" class="footer-link">About</a>216 </div>217 </div>218 </div>219 220 <script src="components/playback-controls.js"></script>221 <script src="script.js"></script>222 <script>223 feather.replace();224 </script>225<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>226</body>227</html>