Add "More Like This" button and "Why Do I Like This?" analyze feature
- Add Repeat button to RecommendationCard that navigates to Discover with a pre-filled query for similar songs - Read q param on Discover page to pre-fill the query field - Add POST /api/recommendations/analyze endpoint that uses Claude to explain why a user likes a song and suggest similar music - Create Analyze page with artist/title inputs, analysis card, quality tags, and recommendation cards - Add Analyze nav item and /analyze route
This commit is contained in:
root
@@ -1,6 +1,6 @@
|
||||
import { useState } from 'react'
|
||||
import { Link, useLocation, useNavigate } from 'react-router-dom'
|
||||
import { Disc3, LayoutDashboard, Fingerprint, ListMusic, Compass, Store, Heart, Crown, Shield, Menu, X, LogOut, User } from 'lucide-react'
|
||||
import { Disc3, LayoutDashboard, Fingerprint, ListMusic, Compass, Lightbulb, Store, Heart, Crown, Shield, Menu, X, LogOut, User } from 'lucide-react'
|
||||
import { useAuth } from '../lib/auth'
|
||||
|
||||
const ADMIN_EMAIL = 'chris.ryan@deepcutsai.com'
|
||||
@@ -10,6 +10,7 @@ const baseNavItems = [
|
||||
{ path: '/profile', label: 'My Taste', icon: Fingerprint },
|
||||
{ path: '/playlists', label: 'Playlists', icon: ListMusic },
|
||||
{ path: '/discover', label: 'Discover', icon: Compass },
|
||||
{ path: '/analyze', label: 'Analyze', icon: Lightbulb },
|
||||
{ path: '/bandcamp', label: 'Bandcamp', icon: Store },
|
||||
{ path: '/saved', label: 'Saved', icon: Heart },
|
||||
{ path: '/billing', label: 'Pro', icon: Crown },
|
||||
|
||||
205
frontend/src/pages/Analyze.tsx
Normal file
205
frontend/src/pages/Analyze.tsx
Normal file
@@ -0,0 +1,205 @@
|
||||
import { useState } from 'react'
|
||||
import { Lightbulb, Loader2, Sparkles } from 'lucide-react'
|
||||
import { analyzeSong, type AnalyzeResponse } from '../lib/api'
|
||||
import RecommendationCard from '../components/RecommendationCard'
|
||||
import { toggleSaveRecommendation, dislikeRecommendation } from '../lib/api'
|
||||
|
||||
export default function Analyze() {
|
||||
const [artist, setArtist] = useState('')
|
||||
const [title, setTitle] = useState('')
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
const [result, setResult] = useState<AnalyzeResponse | null>(null)
|
||||
const [savingIds, setSavingIds] = useState<Set<string>>(new Set())
|
||||
const [dislikingIds, setDislikingIds] = useState<Set<string>>(new Set())
|
||||
|
||||
const handleAnalyze = async () => {
|
||||
if (!artist.trim() || !title.trim()) return
|
||||
setLoading(true)
|
||||
setError('')
|
||||
setResult(null)
|
||||
|
||||
try {
|
||||
const data = await analyzeSong(artist.trim(), title.trim())
|
||||
setResult(data)
|
||||
} catch (err: any) {
|
||||
const msg = err.response?.data?.detail || err.message || 'Unknown error'
|
||||
setError(`Error: ${msg}`)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleToggleSave = async (id: string) => {
|
||||
const sid = String(id)
|
||||
setSavingIds((prev) => new Set(prev).add(sid))
|
||||
try {
|
||||
const { saved } = await toggleSaveRecommendation(sid)
|
||||
setResult((prev) =>
|
||||
prev
|
||||
? {
|
||||
...prev,
|
||||
recommendations: prev.recommendations.map((r) =>
|
||||
String(r.id) === sid ? { ...r, saved } : r
|
||||
),
|
||||
}
|
||||
: prev
|
||||
)
|
||||
} catch {
|
||||
// silent
|
||||
} finally {
|
||||
setSavingIds((prev) => {
|
||||
const next = new Set(prev)
|
||||
next.delete(sid)
|
||||
return next
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const handleDislike = async (id: string) => {
|
||||
const sid = String(id)
|
||||
setDislikingIds((prev) => new Set(prev).add(sid))
|
||||
try {
|
||||
const { disliked } = await dislikeRecommendation(sid)
|
||||
setResult((prev) =>
|
||||
prev
|
||||
? {
|
||||
...prev,
|
||||
recommendations: prev.recommendations.map((r) =>
|
||||
String(r.id) === sid ? { ...r, disliked } : r
|
||||
),
|
||||
}
|
||||
: prev
|
||||
)
|
||||
} catch {
|
||||
// silent
|
||||
} finally {
|
||||
setDislikingIds((prev) => {
|
||||
const next = new Set(prev)
|
||||
next.delete(sid)
|
||||
return next
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h1 className="text-2xl sm:text-3xl font-bold text-charcoal flex items-center gap-3">
|
||||
<Lightbulb className="w-8 h-8 text-purple" />
|
||||
Why Do I Like This?
|
||||
</h1>
|
||||
<p className="text-charcoal-muted mt-1">
|
||||
Paste a song and discover what draws you to it, plus find similar music
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Input Form */}
|
||||
<div className="bg-white rounded-2xl border border-purple-100 p-4 sm:p-6 space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-charcoal mb-2">
|
||||
Artist
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={artist}
|
||||
onChange={(e) => setArtist(e.target.value)}
|
||||
placeholder="e.g., Radiohead"
|
||||
className="w-full px-4 py-3 bg-cream/50 border border-purple-100 rounded-xl text-charcoal placeholder:text-charcoal-muted/40 focus:outline-none focus:ring-2 focus:ring-purple/30 focus:border-purple transition-colors text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-charcoal mb-2">
|
||||
Song Title
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
placeholder="e.g., Everything In Its Right Place"
|
||||
className="w-full px-4 py-3 bg-cream/50 border border-purple-100 rounded-xl text-charcoal placeholder:text-charcoal-muted/40 focus:outline-none focus:ring-2 focus:ring-purple/30 focus:border-purple transition-colors text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-600">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={handleAnalyze}
|
||||
disabled={loading || !artist.trim() || !title.trim()}
|
||||
className="w-full py-3.5 bg-gradient-to-r from-purple to-purple-dark text-white font-semibold rounded-xl hover:shadow-lg hover:shadow-purple/25 transition-all disabled:opacity-50 cursor-pointer border-none text-sm flex items-center justify-center gap-2"
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
<Loader2 className="w-5 h-5 animate-spin" />
|
||||
Analyzing...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Sparkles className="w-5 h-5" />
|
||||
Analyze
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Results */}
|
||||
{result && (
|
||||
<div className="space-y-6">
|
||||
{/* Analysis Card */}
|
||||
<div className="bg-gradient-to-br from-purple-50 to-cream rounded-2xl border border-purple-200 p-5 sm:p-6">
|
||||
<h2 className="text-lg font-semibold text-charcoal mb-3 flex items-center gap-2">
|
||||
<Lightbulb className="w-5 h-5 text-purple" />
|
||||
Why You Love This
|
||||
</h2>
|
||||
<p className="text-charcoal leading-relaxed">{result.analysis}</p>
|
||||
</div>
|
||||
|
||||
{/* Qualities */}
|
||||
{result.qualities.length > 0 && (
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-charcoal mb-3">
|
||||
Key Qualities
|
||||
</h2>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{result.qualities.map((quality, i) => (
|
||||
<span
|
||||
key={i}
|
||||
className="inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium bg-purple-100 text-purple-700"
|
||||
>
|
||||
{quality}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Similar Recommendations */}
|
||||
{result.recommendations.length > 0 && (
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-charcoal mb-4">
|
||||
Songs With the Same Qualities
|
||||
</h2>
|
||||
<div className="space-y-3">
|
||||
{result.recommendations.map((rec) => (
|
||||
<RecommendationCard
|
||||
key={rec.id}
|
||||
recommendation={rec}
|
||||
onToggleSave={handleToggleSave}
|
||||
onDislike={handleDislike}
|
||||
saving={savingIds.has(String(rec.id))}
|
||||
disliking={dislikingIds.has(String(rec.id))}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -41,6 +41,11 @@ export default function Discover() {
|
||||
const [count, setCount] = useState(5)
|
||||
const resultsRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const preQuery = searchParams.get('q')
|
||||
if (preQuery) setQuery(preQuery)
|
||||
}, [searchParams])
|
||||
|
||||
useEffect(() => {
|
||||
const load = async () => {
|
||||
try {
|
||||
|
||||
Reference in New Issue
Block a user