bnair/MusicAnalyser
1
0
Fork 0
mirror of https://github.com/bnair123/MusicAnalyser.git synced 2026-02-25 11:46:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Rebuild frontend with Tailwind CSS + fix Python 3.14 compatibility

Browse Source 
- Upgrade SQLAlchemy 2.0.27→2.0.45, google-genai SDK for Python 3.14
- Replace google-generativeai with google-genai in narrative_service.py
- Fix HTTPException handling in main.py (was wrapping as 500)
- Rebuild all frontend components with Tailwind CSS v3:
  - Dashboard, NarrativeSection, StatsGrid, VibeRadar, HeatMap, TopRotation
  - Custom color palette (background-dark, card-dark, accent-neon, etc.)
  - Add glass-panel, holographic-badge CSS effects
- Docker improvements:
  - Combined backend container (API + worker in entrypoint.sh)
  - DATABASE_URL configurable via env var
  - CI workflow builds both backend and frontend images
- Update README with clearer docker-compose instructions
This commit is contained in:
bnair123
2025-12-26 20:25:44 +04:00
parent 9b8f7355fb
commit 56b7e2a5ba
25 changed files with 2255 additions and 319 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
frontend/src/components/StatsGrid.jsx Normal file
View File

@@ -0,0 +1,99 @@
import React from 'react';
const StatsGrid = ({ metrics }) => {
if (!metrics) return null;
const totalMinutes = Math.round((metrics.volume?.estimated_minutes || 0));
// Calculate days for the "That's X days straight" text
const daysListened = (totalMinutes / (24 * 60)).toFixed(1);
const obsessionTrack = metrics.volume?.top_tracks?.[0];
const obsessionName = obsessionTrack ? obsessionTrack.name : "N/A";
const obsessionArtist = obsessionTrack ? obsessionTrack.artist : "N/A";
const obsessionCount = obsessionTrack ? obsessionTrack.count : 0;
// Fallback image if we don't have one (API currently doesn't seem to return it in top_tracks simple list)
// We'll use a nice gradient or abstract pattern
const obsessionImage = "https://images.unsplash.com/photo-1614613535308-eb5fbd3d2c17?q=80&w=2070&auto=format&fit=crop";
const newDiscoveries = metrics.volume?.unique_artists || 0;
// Mocking the "Underground" percentage for now as it's not in the standard payload
// Could derive from popularity if available, but let's randomize slightly based on unique artists to make it feel dynamic
const undergroundScore = Math.min(95, Math.max(10, Math.round((newDiscoveries % 100))));
return (
<section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
{/* Card 1: Minutes Listened */}
<div className="bg-card-dark border border-[#222f49] rounded-xl p-6 flex flex-col justify-between h-full min-h-[200px] group hover:border-primary/50 transition-colors">
<div className="flex items-start justify-between">
<span className="text-slate-400 text-sm font-medium uppercase tracking-wider">Minutes Listened</span>
<span className="material-symbols-outlined text-primary">schedule</span>
</div>
<div>
<div className="text-4xl lg:text-5xl font-bold text-white mb-2">{totalMinutes.toLocaleString()}</div>
<div className="text-accent-neon text-sm font-medium flex items-center gap-1">
<span className="material-symbols-outlined text-sm">trending_up</span>
That's {daysListened} days straight
</div>
</div>
</div>
{/* Card 2: Obsession Track */}
<div className="bg-card-dark border border-[#222f49] rounded-xl relative overflow-hidden h-full min-h-[200px] group lg:col-span-2">
<div
className="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-105"
style={{ backgroundImage: `url('${obsessionImage}')` }}
>
<div className="absolute inset-0 bg-gradient-to-t from-black via-black/50 to-transparent"></div>
</div>
<div className="relative z-10 p-6 flex flex-col justify-end h-full">
<div className="flex justify-between items-end">
<div>
<span className="inline-block px-2 py-1 rounded bg-primary/80 text-white text-[10px] font-bold tracking-widest mb-2">OBSESSION</span>
<h3 className="text-2xl font-bold text-white leading-tight truncate max-w-[200px] md:max-w-[300px]">{obsessionName}</h3>
<p className="text-slate-300">{obsessionArtist}</p>
</div>
<div className="text-right hidden sm:block">
<div className="text-3xl font-bold text-white">{obsessionCount}</div>
<div className="text-xs text-slate-400 uppercase">Plays this month</div>
</div>
</div>
</div>
</div>
{/* Card 3: New Discoveries & Mainstream Gauge */}
<div className="flex flex-col gap-4 h-full">
{/* Discoveries */}
<div className="bg-card-dark border border-[#222f49] rounded-xl p-5 flex-1 flex flex-col justify-center items-center text-center">
<span className="material-symbols-outlined text-4xl text-primary mb-2">visibility</span>
<div className="text-3xl font-bold text-white">{newDiscoveries}</div>
<div className="text-slate-400 text-xs uppercase tracking-wider">Unique Artists</div>
</div>
{/* Gauge */}
<div className="bg-card-dark border border-[#222f49] rounded-xl p-5 flex-1 flex flex-col justify-center items-center">
<div className="relative size-20">
<svg className="size-full -rotate-90" viewBox="0 0 36 36">
<path className="text-[#222f49]" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="currentColor" strokeWidth="3"></path>
<path
className="text-primary transition-all duration-1000 ease-out"
d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
fill="none"
stroke="currentColor"
strokeDasharray={`${undergroundScore}, 100`}
strokeWidth="3"
></path>
</svg>
<div className="absolute inset-0 flex items-center justify-center flex-col">
<span className="text-sm font-bold text-white">{undergroundScore}%</span>
</div>
</div>
<div className="text-slate-400 text-[10px] uppercase tracking-wider mt-2">Underground Certified</div>
</div>
</div>
</section>
);
};
export default StatsGrid;