Update app.py

app.py

@@ -2,6 +2,45 @@ import streamlit as st
 import pandas as pd
 from sklearn.feature_extraction.text import TfidfVectorizer
 from sklearn.neighbors import NearestNeighbors
+import requests
+import os
+
+# Function to get Spotify access token
+def get_spotify_token(client_id, client_secret):
+    url = "https://accounts.spotify.com/api/token"
+    headers = {
+        "Content-Type": "application/x-www-form-urlencoded"
+    }
+    data = {
+        "grant_type": "client_credentials"
+    }
+    response = requests.post(url, headers=headers, data=data, auth=(client_id, client_secret))
+    if response.status_code == 200:
+        return response.json().get("access_token")
+    return None
+
+# Function to fetch Spotify track details
+def fetch_spotify_track(query, token):
+    url = "https://api.spotify.com/v1/search"
+    headers = {
+        "Authorization": f"Bearer {token}"
+    }
+    params = {
+        "q": query,
+        "type": "track",
+        "limit": 1
+    }
+    response = requests.get(url, headers=headers, params=params)
+    if response.status_code == 200:
+        data = response.json()
+        if data["tracks"]["items"]:
+            track = data["tracks"]["items"][0]
+            return {
+                "thumbnail": track["album"]["images"][0]["url"],  # Get the largest available thumbnail
+                "spotify_link": track["external_urls"]["spotify"]  # Spotify track link
+            }
+    return {"thumbnail": None, "spotify_link": None}
+
 
 # Page config
 st.set_page_config(
@@ -76,6 +115,28 @@ st.markdown("""
         transform: scale(1.05);
         box-shadow: 0 4px 12px rgba(255, 0, 0, 0.2);
     }
+    .spotify-link {
+        background-color: #1db954;
+        color: white !important;
+        padding: 8px 16px;
+        border-radius: 20px;
+        text-decoration: none;
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        font-family: 'Roboto', sans-serif;
+        font-weight: 500;
+        transition: all 0.3s ease;
+    }
+    .spotify-link:before {
+        content: "🎧";
+        font-size: 0.8em;
+    }
+    .spotify-link:hover {
+        background-color: #cc0000;
+        transform: scale(1.05);
+        box-shadow: 0 4px 12px rgba(255, 0, 0, 0.2);
+    }
 </style>
 <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&family=Roboto:wght@400;500&display=swap" rel="stylesheet">
 """, unsafe_allow_html=True)
@@ -178,18 +239,40 @@ with st.sidebar:
 if get_recs:
     st.header("🎵 Your Recommendations")
     recommendations = hybrid_recommendv2(user_id, song_title, top_n)
+    SPOTIFY_CLIENT_ID = os.getenv("SPOTIFY_CLIENT_ID", None)
+    SPOTIFY_CLIENT_SECRET = os.getenv("SPOTIFY_CLIENT_SECRET", None)
+
+# Get Spotify token
+    spotify_token = get_spotify_token(SPOTIFY_CLIENT_ID, SPOTIFY_CLIENT_SECRET)
     if recommendations.empty:
         st.error("No recommendations found. Try selecting different songs or users.")
     else:
         st.balloons()
         for idx, row in recommendations.iterrows():
             youtube_link = f"https://www.youtube.com/results?search_query={row['title']}+{row['artist_name']}"
+            spotify_data = fetch_spotify_track(f"{row['title']} {row['artist_name']}", spotify_token)
+            spotify_link = spotify_data.get("spotify_link", "#")
+            thumbnail_url = spotify_data.get("thumbnail")
+            # st.markdown(f"""
+            #     <div class="recommendation-card">
+            #         <h3>{row['title']}</h3>
+            #         <p><strong>Artist:</strong> {row['artist_name']}</p>
+            #         <p><strong>Album:</strong> {row['release']}</p>
+            #         <a href="{youtube_link}" target="_blank" class="youtube-link">
+            #             Watch on YouTube
+            #         </a>
+
+            #     </div>
+            # """, unsafe_allow_html=True)
             st.markdown(f"""
-                <div class="recommendation-card">
-                    <h3>{row['title']}</h3>
-                    <p><strong>Artist:</strong> {row['artist_name']}</p>
-                    <p><strong>Album:</strong> {row['release']}</p>
-                    <a href="{youtube_link}" target="_blank" class="youtube-link">
-                        Watch on YouTube
+                <div class="recommendation-card" style="display: flex; align-items: center; gap: 20px;">
+                    {"<img src='" + thumbnail_url + "' alt='Song Thumbnail' style='width:150px; height:150px; border-radius:10px; object-fit: cover;'>" if thumbnail_url else ""}
+                    <div>
+                        <h3>{row['title']}</h3>
+                        <p><strong>Artist:</strong> {row['artist_name']}</p>
+                        <p><strong>Album:</strong> {row['release']}</p>
+                        <a href="{youtube_link}" target="_blank" class="youtube-link">Watch on YouTube</a>
+                        <a href="{spotify_link}" target="_blank" class="spotify-link">Play on Spotify</a>
+                    </div>
                 </div>
             """, unsafe_allow_html=True)