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

Amélioration affichage genre : 'Pop---Rock' -> 'Pop' ; 'Rock'

Browse Source
This commit is contained in:
Benoit
2025-12-22 15:12:14 +01:00
parent d67d5ecadd
commit b0ba1e886c
1 changed files with 40 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
frontend/app/page.tsx
View File

@@ -5,6 +5,15 @@ import { useQuery } from "@tanstack/react-query"
import { getTracks, getStats } from "@/lib/api"
import type { FilterParams } from "@/lib/types"
// Helper function to format Discogs genre labels (e.g., "Pop---Ballad" -> ["Pop", "Ballad"])
function formatGenre(genre: string): { category: string; subgenre: string } {
const parts = genre.split('---')
return {
category: parts[0] || genre,
subgenre: parts[1] || ''
}
}
export default function Home() {
const [filters, setFilters] = useState<FilterParams>({})
const [page, setPage] = useState(0)
@@ -79,9 +88,21 @@ export default function Home() {
{/* 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}
</span>
{(() => {
const genre = formatGenre(track.classification.genre.primary)
return (
<>
<span className="inline-flex items-center px-2 py-1 rounded text-xs bg-blue-100 text-blue-800 font-semibold">
{genre.category}
</span>
{genre.subgenre && (
<span className="inline-flex items-center px-2 py-1 rounded text-xs bg-blue-50 text-blue-700">
{genre.subgenre}
</span>
)}
</>
)
})()}
<span className="inline-flex items-center px-2 py-1 rounded text-xs bg-purple-100 text-purple-800">
{track.classification.mood.primary}
</span>
@@ -96,10 +117,25 @@ export default function Home() {
</span>
</div>
{/* Secondary genres */}
{track.classification.genre.secondary && track.classification.genre.secondary.length > 0 && (
<div className="mt-2 flex flex-wrap gap-1">
<span className="text-xs text-gray-400">Also:</span>
{track.classification.genre.secondary.slice(0, 3).map((g, i) => {
const genre = formatGenre(g)
return (
<span key={i} className="inline-flex items-center px-2 py-0.5 rounded text-xs bg-blue-50 text-blue-600">
{genre.category}{genre.subgenre && ` • ${genre.subgenre}`}
</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>
<span className="text-xs text-gray-400">Moods:</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}