Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Music Genre Classification</title> | |
| <!-- Bootstrap CSS --> | |
| <link | |
| href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" | |
| rel="stylesheet" | |
| > | |
| </head> | |
| <body class="bg-light"> | |
| <div class="container mt-5"> | |
| <!-- Header --> | |
| <div class="text-center mb-4"> | |
| <h1 class="display-5 fw-bold">Music Genre Classification</h1> | |
| <p class="lead text-secondary">Upload your music file (wav/mp3) and discover its genre!</p> | |
| </div> | |
| <!-- Upload Form --> | |
| <div class="card shadow p-4"> | |
| <form action="/" method="post" enctype="multipart/form-data"> | |
| <div class="mb-3"> | |
| <label for="file" class="form-label fw-bold">Upload a music file</label> | |
| <input type="file" id="file" name="file" class="form-control" accept=".wav,.mp3" onchange="previewAudio(event)"> | |
| </div> | |
| <!-- Audio Player --> | |
| <div class="mb-3" id="audioPlayerContainer" style="display: none;"> | |
| <label class="form-label fw-bold">Preview:</label> | |
| <audio id="audioPlayer" controls class="w-100"> | |
| <source id="audioSource" type="audio/wav"> | |
| Your browser does not support the audio element. | |
| </audio> | |
| </div> | |
| <!-- Submit Button --> | |
| <div class="d-grid"> | |
| <button type="submit" class="btn btn-primary btn-lg">Submit</button> | |
| </div> | |
| </form> | |
| </div> | |
| <!-- Prediction Result --> | |
| {% if file_path %} | |
| <div class="card shadow mt-4 p-4"> | |
| <h4 class="fw-bold">Uploaded File:</h4> | |
| <audio controls class="w-100 mb-3"> | |
| <source src="{{ file_path }}" type="audio/wav"> | |
| Your browser does not support the audio element. | |
| </audio> | |
| <h4 class="fw-bold">Predicted Genre:</h4> | |
| <p class="fs-4 text-success"><strong>{{ prediction }}</strong></p> | |
| </div> | |
| {% endif %} | |
| </div> | |
| <!-- Bootstrap JS Bundle with Popper --> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> | |
| <script> | |
| function previewAudio(event) { | |
| const file = event.target.files[0]; | |
| if (file) { | |
| const audioPlayer = document.getElementById('audioPlayer'); | |
| const audioSource = document.getElementById('audioSource'); | |
| const audioPlayerContainer = document.getElementById('audioPlayerContainer'); | |
| audioSource.src = URL.createObjectURL(file); | |
| audioPlayerContainer.style.display = 'block'; | |
| audioPlayer.load(); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> | |