File size: 3,148 Bytes
18479c9 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
<!DOCTYPE html>
<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>
|