Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> | |
| <title>Music Genre Classifier</title> | |
| <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"> | |
| <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header> | |
| <h1>Wave Prism AI</h1> | |
| <p>Music Genre Prediction Model</p> | |
| </header> | |
| <div class="main-content"> | |
| <div class="form-section"> | |
| <form id="predictionForm" onsubmit="event.preventDefault(); makePrediction();"> | |
| <div class="file-upload-container"> | |
| <label class="input-label" style="text-align: center; display: block; margin-bottom: 15px; font-size: 1.1rem;"> | |
| Upload an Audio File (.wav, .mp3) | |
| </label> | |
| <div class="upload-box" id="dropZone"> | |
| <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#7e57c2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-bottom: 10px;"> | |
| <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path> | |
| <polyline points="17 8 12 3 7 8"></polyline> | |
| <line x1="12" y1="3" x2="12" y2="15"></line> | |
| </svg> | |
| <p id="fileNameDisplay" style="color: #9ca3af; margin-bottom: 15px;">Drag & drop or click to select</p> | |
| <input type="file" id="audioFile" accept="audio/*" style="display: none;"> | |
| <button type="button" class="browse-btn" onclick="document.getElementById('audioFile').click()">Browse Files</button> | |
| </div> | |
| </div> | |
| <button type="submit" class="submit-btn" id="submitBtn" disabled style="opacity: 0.5;">Analyze & Predict Genre</button> | |
| </form> | |
| </div> | |
| <div class="result-section" id="resultCard"> | |
| <div class="placeholder-text"> | |
| <div style="font-size: 3rem; margin-bottom: 10px;">🎶</div> | |
| <h3>Ready to Classify</h3> | |
| <p>Upload a track to determine its genre.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="{{ url_for('static', filename='script.js') }}"></script> | |
| </body> | |
| </html> |