benoit/Audio-Classifier
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix bequcoup de choses : Genre OK, affichage des infos sur le front

Browse Source
This commit is contained in:
Benoit
2025-12-22 13:26:55 +01:00
parent dec30019e2
commit 90c841310c
2 changed files with 60 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
frontend/app/page.tsx
View File

@@ -76,6 +76,8 @@ export default function Home() {
<div className="flex justify-between items-start">
<div className="flex-1">
<h3 className="font-medium text-gray-900">{track.filename}</h3>
{/* Primary metadata */}
<div className="mt-1 flex flex-wrap gap-2">
<span className="inline-flex items-center px-2 py-1 rounded text-xs bg-blue-100 text-blue-800">
{track.classification.genre.primary}
@@ -86,10 +88,40 @@ export default function Home() {
<span className="text-xs text-gray-500">
{Math.round(track.features.tempo_bpm)} BPM
</span>
<span className="text-xs text-gray-500">
{track.features.key}
</span>
<span className="text-xs text-gray-500">
{Math.floor(track.duration_seconds / 60)}:{String(Math.floor(track.duration_seconds % 60)).padStart(2, '0')}
</span>
</div>
{/* Secondary moods */}
{track.classification.mood.secondary && track.classification.mood.secondary.length > 0 && (
<div className="mt-2 flex flex-wrap gap-1">
<span className="text-xs text-gray-400">Also:</span>
{track.classification.mood.secondary.map((mood, i) => (
<span key={i} className="inline-flex items-center px-2 py-0.5 rounded text-xs bg-purple-50 text-purple-600">
{mood}
</span>
))}
</div>
)}
{/* Instruments */}
{track.classification.instruments && track.classification.instruments.length > 0 && (
<div className="mt-2 flex flex-wrap gap-1">
<span className="text-xs text-gray-400">Instruments:</span>
{track.classification.instruments.slice(0, 6).map((instrument, i) => (
<span key={i} className="inline-flex items-center px-2 py-0.5 rounded text-xs bg-green-50 text-green-700">
{instrument}
</span>
))}
{track.classification.instruments.length > 6 && (
<span className="text-xs text-gray-400">+{track.classification.instruments.length - 6} more</span>
)}
</div>
)}
</div>
<div className="ml-4 flex gap-2">
<a