Update app.py

app.py

@@ -1,7 +1,7 @@
 import os
 import requests
 import gradio as gr
-from flask import Flask, redirect, request
+from flask import redirect
 
 # Spotify API credentials (set in HF Space secrets)
 CLIENT_ID = os.getenv("SPOTIFY_CLIENT_ID")
@@ -11,15 +11,80 @@ SPOTIFY_AUTH_URL = "https://accounts.spotify.com/authorize"
 SPOTIFY_TOKEN_URL = "https://accounts.spotify.com/api/token"
 SCOPE = "playlist-modify-public playlist-modify-private"
 
-# Initialize Flask app (for route definitions, but we'll use Gradio's server)
-app = Flask(__name__)
-
 # Store access token (for demo; use a session store in production)
 access_token = None
 
-# Flask routes defined as functions
+# Flask-like route handlers
 def home():
-    return '<a href="/login">Login with Spotify</a>'
+    return """
+    <a href="/login">Login with Spotify</a><br><br>
+    <div id="song-form">
+        <input id="song-name" placeholder="Song Name" type="text">
+        <input id="artist-name" placeholder="Artist Name (optional)" type="text">
+        <button onclick="addSong()">Add Song to Playlist</button>
+        <div id="result"></div>
+    </div>
+    <script>
+        async function getTrackUri(songName, accessToken, artistName = null) {
+            let query = `track:${songName}`;
+            if (artistName) query += ` artist:${artistName}`;
+            const url = `https://api.spotify.com/v1/search?q=${encodeURIComponent(query)}&type=track&limit=1`;
+            const headers = { "Authorization": `Bearer ${accessToken}` };
+            try {
+                const response = await fetch(url, { headers });
+                const data = await response.json();
+                if (data.tracks && data.tracks.items.length > 0) {
+                    return data.tracks.items[0].uri;
+                }
+                throw new Error("Song not found");
+            } catch (error) {
+                throw new Error(`Search error: ${error.message}`);
+            }
+        }
+
+        async function addSongToPlaylist(playlistId, trackUri, accessToken) {
+            const url = `https://api.spotify.com/v1/playlists/${playlistId}/tracks`;
+            const headers = {
+                "Authorization": `Bearer ${accessToken}`,
+                "Content-Type": "application/json",
+            };
+            const body = { uris: [trackUri], position: 0 };
+            try {
+                const response = await fetch(url, {
+                    method: "POST",
+                    headers,
+                    body: JSON.stringify(body),
+                });
+                const data = await response.json();
+                if (response.status === 201) {
+                    return "Song added to playlist!";
+                }
+                throw new Error(`Error adding song: ${data.error?.message || "Unknown error"}`);
+            } catch (error) {
+                throw new Error(`Playlist error: ${error.message}`);
+            }
+        }
+
+        async function addSong() {
+            const songName = document.getElementById("song-name").value;
+            const artistName = document.getElementById("artist-name").value;
+            const resultDiv = document.getElementById("result");
+            const accessToken = "{{ACCESS_TOKEN}}"; // Replaced server-side
+            const playlistId = "YOUR_PLAYLIST_ID"; // Replace with actual ID
+            if (!accessToken || accessToken === "Not authenticated") {
+                resultDiv.innerText = "Please authenticate with Spotify first.";
+                return;
+            }
+            try {
+                const trackUri = await getTrackUri(songName, accessToken, artistName);
+                const result = await addSongToPlaylist(playlistId, trackUri, accessToken);
+                resultDiv.innerText = result;
+            } catch (error) {
+                resultDiv.innerText = error.message;
+            }
+        }
+    </script>
+    """.replace("{{ACCESS_TOKEN}}", access_token or "Not authenticated")
 
 def login():
     auth_url = (
@@ -33,7 +98,6 @@ def callback(code=None):
     if not code:
         return "Error: No authorization code provided", 400
 
-    # Exchange code for access token
     token_data = {
         "grant_type": "authorization_code",
         "code": code,
@@ -46,79 +110,58 @@ def callback(code=None):
 
     if response.status_code == 200:
         access_token = token_json.get("access_token")
-        return f"Authorization successful! Access token stored. <a href='/add-song'>Add a song</a>"
+        return redirect("/")
     else:
         return f"Error: {token_json.get('error_description', 'Failed to get access token')}", 400
 
-def add_song():
-    if not access_token:
-        return "Error: Not authenticated. <a href='/login'>Login with Spotify</a>", 401
-
-    playlist_id = "YOUR_PLAYLIST_ID"  # Replace with actual ID
-    track_uri = "spotify:track:4u7EnebtmKWzUH433cf5Qv"  # Example: Bohemian Rhapsody
-    url = f"https://api.spotify.com/v1/playlists/{playlist_id}/tracks"
-    headers = {
-        "Authorization": f"Bearer {access_token}",
-        "Content-Type": "application/json"
-    }
-    data = {"uris": [track_uri], "position": 0}
-    response = requests.post(url, headers=headers, json=data)
-
-    if response.status_code == 201:
-        return "Song added to playlist!"
-    else:
-        return f"Error adding song: {response.json().get('error', {}).get('message', 'Unknown error')}", 400
-
-# Gradio interface
+# Gradio interface for server-side song addition (optional fallback)
 def gradio_interface(song_name="", artist_name=""):
-    if song_name:
-        try:
-            track_uri = get_track_uri(song_name, access_token, artist_name)
-            result = add_song_to_playlist("YOUR_PLAYLIST_ID", track_uri, access_token)
-            return f"Added song: {song_name}. Result: {result}"
-        except Exception as e:
-            return f"Error: {str(e)}"
-    return "Enter a song name and artist (optional) to add to your playlist."
-
-# Spotify API helper functions
-def get_track_uri(song_name, access_token, artist_name=None):
-    query = f"track:{song_name}"
-    if artist_name:
-        query += f" artist:{artist_name}"
-    url = f"https://api.spotify.com/v1/search?q={query}&type=track&limit=1"
-    headers = {"Authorization": f"Bearer {access_token}"}
-    response = requests.get(url, headers=headers)
-    data = response.json()
-    if data.get("tracks", {}).get("items"):
-        return data["tracks"]["items"][0]["uri"]
-    raise Exception("Song not found")
-
-def add_song_to_playlist(playlist_id, track_uri, access_token):
-    url = f"https://api.spotify.com/v1/playlists/{playlist_id}/tracks"
-    headers = {
-        "Authorization": f"Bearer {access_token}",
-        "Content-Type": "application/json"
-    }
-    data = {"uris": [track_uri], "position": 0}
-    response = requests.post(url, headers=headers, json=data)
-    return response.json()
-
-# Set up Gradio Blocks with Flask-like routes
-with gr.Blocks() as demo:
+    if not access_token:
+        return "Error: Not authenticated. Please log in via /login."
+    if not song_name:
+        return "Please enter a song name."
+    try:
+        query = f"track:{song_name}"
+        if artist_name:
+            query += f" artist:{artist_name}"
+        url = f"https://api.spotify.com/v1/search?q={query}&type=track&limit=1"
+        headers = {"Authorization": f"Bearer {access_token}"}
+        response = requests.get(url, headers=headers)
+        data = response.json()
+        if not data.get("tracks", {}).get("items"):
+            return "Error: Song not found."
+        track_uri = data["tracks"]["items"][0]["uri"]
+
+        playlist_id = "YOUR_PLAYLIST_ID"  # Replace with actual ID
+        url = f"https://api.spotify.com/v1/playlists/{playlist_id}/tracks"
+        headers = {
+            "Authorization": f"Bearer {access_token}",
+            "Content-Type": "application/json",
+        }
+        data = {"uris": [track_uri], "position": 0}
+        response = requests.post(url, headers=headers, json=data)
+        if response.status_code == 201:
+            return f"Added '{song_name}' to playlist!"
+        return f"Error adding song: {response.json().get('error', {}).get('message', 'Unknown error')}"
+    except Exception as e:
+        return f"Error: {str(e)}"
+
+# Create Gradio Blocks
+demo = gr.Blocks()
+
+# Define routes outside Blocks context
+demo.route("/", home)
+demo.route("/login", login)
+demo.route("/callback", callback)
+
+# Define Gradio UI
+with demo:
     gr.Markdown("## Spotify Playlist Manager")
     with gr.Row():
         song_input = gr.Textbox(label="Song Name")
         artist_input = gr.Textbox(label="Artist Name (optional)")
         submit_button = gr.Button("Add Song to Playlist")
     output = gr.Textbox(label="Result")
-
-    # Map Flask routes to Gradio
-    demo.route("/", home)
-    demo.route("/login", login)
-    demo.route("/callback", callback)
-    demo.route("/add-song", add_song)
-
-    # Gradio interface submission
     submit_button.click(
         fn=gradio_interface,
         inputs=[song_input, artist_input],