|
<!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>
|
|
|
|
<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">
|
|
|
|
<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>
|
|
|
|
|
|
<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>
|
|
|
|
|
|
<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>
|
|
|
|
|
|
<div class="d-grid">
|
|
<button type="submit" class="btn btn-primary btn-lg">Submit</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
|
|
{% 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>
|
|
|
|
|
|
<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>
|
|
|
