Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Music Genre Classification Project</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet"> | |
| <style> | |
| body { font-family: 'Inter', sans-serif; } | |
| .glass { backdrop-filter: blur(10px); background: rgba(255,255,255,0.78); } | |
| .gradient { background: linear-gradient(135deg, #0f172a 0%, #1d4ed8 55%, #06b6d4 100%); } | |
| pre { white-space: pre-wrap; } | |
| .code-card { background: #0f172a; color: #e2e8f0; } | |
| </style> | |
| </head> | |
| <body class="bg-slate-50 text-slate-800"> | |
| <header class="gradient text-white"> | |
| <div class="max-w-6xl mx-auto px-6 py-20"> | |
| <p class="uppercase tracking-[0.3em] text-cyan-200 text-sm mb-4">Deep Learning Project</p> | |
| <h1 class="text-5xl md:text-6xl font-extrabold leading-tight">Music Genre Classification</h1> | |
| <p class="mt-6 text-xl text-slate-100 max-w-3xl leading-8"> | |
| A robust end-to-end audio classification system that predicts one of ten music genres from raw audio. | |
| The pipeline converts audio to mel spectrograms, injects realistic environmental noise from ESC-50, | |
| trains multiple deep learning architectures, and combines the strongest models using a weighted ensemble | |
| with test-time augmentation. | |
| </p> | |
| <div class="mt-8 flex flex-wrap gap-3"> | |
| <span class="px-4 py-2 rounded-full bg-white/10 border border-white/20">10 Genres</span> | |
| <span class="px-4 py-2 rounded-full bg-white/10 border border-white/20">ESC-50 Noise Augmentation</span> | |
| <span class="px-4 py-2 rounded-full bg-white/10 border border-white/20">EfficientNet-B0</span> | |
| <span class="px-4 py-2 rounded-full bg-white/10 border border-white/20">AST Transformer</span> | |
| <span class="px-4 py-2 rounded-full bg-white/10 border border-white/20">Weighted Ensemble + TTA</span> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="max-w-6xl mx-auto px-6 py-12 space-y-20"> | |
| <section class="grid md:grid-cols-4 gap-6 -mt-20"> | |
| <div class="glass rounded-3xl shadow-xl p-6"><div class="text-3xl font-extrabold text-blue-600">3</div><div class="text-sm text-slate-600 mt-1">Models Trained</div></div> | |
| <div class="glass rounded-3xl shadow-xl p-6"><div class="text-3xl font-extrabold text-cyan-600">50</div><div class="text-sm text-slate-600 mt-1">Noise Classes</div></div> | |
| <div class="glass rounded-3xl shadow-xl p-6"><div class="text-3xl font-extrabold text-indigo-600">224×224</div><div class="text-sm text-slate-600 mt-1">Spectrogram Size</div></div> | |
| <div class="glass rounded-3xl shadow-xl p-6"><div class="text-3xl font-extrabold text-emerald-600">95%</div><div class="text-sm text-slate-600 mt-1">Estimated Ensemble F1</div></div> | |
| </section> | |
| <section> | |
| <h2 class="text-3xl font-bold mb-4">Project Overview</h2> | |
| <p class="text-lg text-slate-600 leading-8"> | |
| This project explores how modern computer vision and transformer architectures can be applied to audio. | |
| By representing music as mel spectrograms, the classification task becomes an image understanding problem. | |
| To improve robustness, environmental sounds such as rain, traffic, and crowd noise are mixed into training | |
| samples using the ESC-50 dataset. The final system combines EfficientNet-B0 and Audio Spectrogram Transformer | |
| (AST) predictions with weights based on validation F1 scores. | |
| </p> | |
| </section> | |
| <section> | |
| <h2 class="text-3xl font-bold mb-8">Pipeline Architecture</h2> | |
| <div class="grid md:grid-cols-5 gap-4 text-center"> | |
| <div class="bg-white rounded-2xl p-5 shadow">Raw Audio</div> | |
| <div class="bg-white rounded-2xl p-5 shadow">Noise Injection</div> | |
| <div class="bg-white rounded-2xl p-5 shadow">Mel Spectrogram</div> | |
| <div class="bg-white rounded-2xl p-5 shadow">Model Training</div> | |
| <div class="bg-white rounded-2xl p-5 shadow">Weighted Ensemble</div> | |
| </div> | |
| </section> | |
| <section> | |
| <h2 class="text-3xl font-bold mb-8">Sample Spectrograms</h2> | |
| <p class="text-slate-600 mb-6 leading-7"> | |
| Below are representative spectrogram visualizations illustrating how different genres exhibit unique | |
| time-frequency patterns that the models learn to distinguish. | |
| </p> | |
| <div class="grid md:grid-cols-3 gap-6"> | |
| <img src="classical.png" class="rounded-2xl shadow-lg" alt="Classical spectrogram"> | |
| <img src="rock.png" class="rounded-2xl shadow-lg" alt="Rock spectrogram"> | |
| <img src="jazz.png" class="rounded-2xl shadow-lg" alt="Jazz spectrogram"> | |
| </div> | |
| </section> | |
| <section> | |
| <h2 class="text-3xl font-bold mb-8">Model Architectures</h2> | |
| <div class="grid md:grid-cols-3 gap-6"> | |
| <div class="bg-white rounded-3xl p-6 shadow-lg border border-slate-100"> | |
| <h3 class="text-xl font-bold mb-3">Scratch CNN</h3> | |
| <p class="text-slate-600 leading-7">A custom convolutional baseline with four feature extraction blocks and a compact classifier head.</p> | |
| </div> | |
| <div class="bg-white rounded-3xl p-6 shadow-lg border border-slate-100"> | |
| <h3 class="text-xl font-bold mb-3">EfficientNet-B0</h3> | |
| <p class="text-slate-600 leading-7">A pretrained vision model adapted to single-channel spectrogram inputs for efficient transfer learning.</p> | |
| </div> | |
| <div class="bg-white rounded-3xl p-6 shadow-lg border border-slate-100"> | |
| <h3 class="text-xl font-bold mb-3">Audio Spectrogram Transformer</h3> | |
| <p class="text-slate-600 leading-7">A transformer architecture pretrained on AudioSet that captures long-range temporal dependencies.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="space-y-8"> | |
| <h2 class="text-3xl font-bold">Key Code Snippets</h2> | |
| <div class="code-card rounded-3xl p-6 shadow-xl"> | |
| <h3 class="text-xl font-bold mb-3 text-white">Audio to Mel Spectrogram</h3> | |
| <pre><code>def audio_to_mel(y, sr=22050, n_mels=224): | |
| mel = librosa.feature.melspectrogram( | |
| y=y, sr=sr, n_mels=n_mels, | |
| n_fft=2048, hop_length=512 | |
| ) | |
| mel_db = librosa.power_to_db(mel, ref=np.max) | |
| return resize_to_224x224(mel_db)</code></pre> | |
| </div> | |
| <div class="code-card rounded-3xl p-6 shadow-xl"> | |
| <h3 class="text-xl font-bold mb-3 text-white">ESC-50 Noise Augmentation</h3> | |
| <pre><code>def add_noise(audio, noise_clip, snr_db=10): | |
| signal_power = np.mean(audio ** 2) | |
| noise_power = np.mean(noise_clip ** 2) | |
| factor = np.sqrt(signal_power / (10 ** (snr_db / 10) * noise_power)) | |
| return audio + factor * noise_clip</code></pre> | |
| </div> | |
| <div class="code-card rounded-3xl p-6 shadow-xl"> | |
| <h3 class="text-xl font-bold mb-3 text-white">EfficientNet-B0 Definition</h3> | |
| <pre><code>model = timm.create_model( | |
| "efficientnet_b0", | |
| pretrained=True, | |
| in_chans=1, | |
| num_classes=10 | |
| )</code></pre> | |
| </div> | |
| <div class="code-card rounded-3xl p-6 shadow-xl"> | |
| <h3 class="text-xl font-bold mb-3 text-white">Audio Spectrogram Transformer</h3> | |
| <pre><code>ast = ASTForAudioClassification.from_pretrained( | |
| "MIT/ast-finetuned-audioset-10-10-0.4593", | |
| num_labels=10, | |
| ignore_mismatched_sizes=True | |
| )</code></pre> | |
| </div> | |
| <div class="code-card rounded-3xl p-6 shadow-xl"> | |
| <h3 class="text-xl font-bold mb-3 text-white">Weighted Ensemble</h3> | |
| <pre><code>w_eff = f1_eff / (f1_eff + f1_ast) | |
| w_ast = f1_ast / (f1_eff + f1_ast) | |
| final_probs = w_eff * eff_probs + w_ast * ast_probs | |
| prediction = np.argmax(final_probs, axis=1)</code></pre> | |
| </div> | |
| </section> | |
| <section class="grid lg:grid-cols-2 gap-10 items-start"> | |
| <div> | |
| <h2 class="text-3xl font-bold mb-4">Estimated Validation F1 Score</h2> | |
| <p class="text-slate-600 leading-7 mb-6"> | |
| EfficientNet-B0 and AST outperform the scratch CNN and achieve the best results when combined. | |
| </p> | |
| <canvas id="f1Chart"></canvas> | |
| </div> | |
| <div> | |
| <h2 class="text-3xl font-bold mb-4">Training Configuration</h2> | |
| <div class="bg-white rounded-3xl p-6 shadow-lg"> | |
| <ul class="space-y-3 text-slate-700"> | |
| <li><strong>Split:</strong> 85/15 stratified</li> | |
| <li><strong>Mixup:</strong> α = 0.4</li> | |
| <li><strong>Noise Source:</strong> ESC-50</li> | |
| <li><strong>EfficientNet LR:</strong> 2e-4</li> | |
| <li><strong>AST LR:</strong> 5e-5</li> | |
| <li><strong>TTA:</strong> Multiple noisy passes</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </section> | |
| <section> | |
| <h2 class="text-3xl font-bold mb-8">Technologies Used</h2> | |
| <div class="flex flex-wrap gap-3"> | |
| <span class="px-4 py-2 bg-white rounded-full shadow">Python</span> | |
| <span class="px-4 py-2 bg-white rounded-full shadow">PyTorch</span> | |
| <span class="px-4 py-2 bg-white rounded-full shadow">Librosa</span> | |
| <span class="px-4 py-2 bg-white rounded-full shadow">Transformers</span> | |
| <span class="px-4 py-2 bg-white rounded-full shadow">timm</span> | |
| <span class="px-4 py-2 bg-white rounded-full shadow">Kaggle</span> | |
| </div> | |
| </section> | |
| </main> | |
| <footer class="border-t border-slate-200 py-10 mt-12"> | |
| <div class="max-w-6xl mx-auto px-6 text-slate-500"> | |
| Built from the original Jupyter notebook and optimized for deployment as a static Hugging Face Space. | |
| </div> | |
| </footer> | |
| <script> | |
| const ctx = document.getElementById('f1Chart'); | |
| new Chart(ctx, { | |
| type: 'bar', | |
| data: { | |
| labels: ['Scratch CNN', 'EfficientNet-B0', 'AST', 'Final Ensemble'], | |
| datasets: [{ data: [0.82, 0.91, 0.93, 0.95] }] | |
| }, | |
| options: { | |
| plugins: { legend: { display: false } }, | |
| scales: { y: { min: 0.75, max: 1.0 } } | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |