Update app.py

app.py

@@ -7,7 +7,7 @@ import random
 # Load environment variables securely from Hugging Face secrets
 CLIENT_ID = os.environ["SPOTIFY_CLIENT_ID"]
 CLIENT_SECRET = os.environ["SPOTIFY_CLIENT_SECRET"]
-REDIRECT_URI = os.environ.get("SPOTIFY_REDIRECT_URI", "https://jisaacso219-rng-shuffle.hf.space/callback")
+REDIRECT_URI = os.environ.get("SPOTIFY_REDIRECT_URI", "https://jisaacso219-rng-shuffle.hf.space/")  # ✅ Updated to match registered redirect URI
 SCOPE = "user-read-playback-state user-modify-playback-state playlist-read-private"
 
 sp_oauth = SpotifyOAuth(
@@ -29,31 +29,30 @@ with gr.Blocks(title="RNG Spotify Playlist Shuffler") as demo:
     gr.Markdown("A clean and simple way to shuffle your Spotify playlists with one click.")
 
     with gr.Column():
-        auth_url_button = gr.Button("🔐 Step 1: Login to Spotify")
-        auth_code_box = gr.Textbox(label="Step 2: Paste authorization code", placeholder="...?code=ABC123")
-        authorize_button = gr.Button("✅ Step 3: Complete Authorization")
-        login_status = gr.Markdown(visible=False)
-        playlist_dropdown = gr.Dropdown(choices=[], label="Step 4: 🎧 Select a Playlist", visible=False)
-        shuffle_button = gr.Button("🔀 Step 5: Shuffle and Play", visible=False)
-        result_box = gr.Markdown(visible=False)
-
-        gr.HTML("""
+        gr.HTML(f"""
+        <a href='{get_auth_url()}' target='_blank'>
+            <button style='font-size: 16px; padding: 10px 20px; width: 100%; background-color: #4f46e5; color: white; border: none; border-radius: 6px;'>🔐 Step 1: Login to Spotify</button>
+        </a>
         <script>
-        window.onload = () => {
+        window.onload = () => {{
             const params = new URLSearchParams(window.location.search);
             const code = params.get("code");
-            if (code) {
+            if (code) {{
                 const textbox = document.querySelector("textarea");
-                if (textbox) {
+                if (textbox) {{
                     textbox.value = code;
-                }
-            }
-        }
+                }}
+            }}
+        }}
         </script>
         """)
 
-    def open_auth_url():
-        return gr.update(value=get_auth_url())
+        auth_code_box = gr.Textbox(label="Step 2: Paste authorization code", placeholder="...?code=ABC123")
+        authorize_button = gr.Button("✅ Step 3: Complete Authorization")
+        login_status = gr.Markdown(visible=False)
+        playlist_dropdown = gr.Dropdown(choices=[], label="Step 4: 🎧 Select a Playlist", visible=False)
+        shuffle_button = gr.Button("🔀 Step 5: Shuffle and Play", visible=False)
+        result_box = gr.Markdown(visible=False)
 
     def check_login(code):
         global sp, user_playlists
@@ -99,7 +98,6 @@ with gr.Blocks(title="RNG Spotify Playlist Shuffler") as demo:
         sp.start_playback(device_id=device_id, uris=uris)
         return gr.update(value=f"▶️ Now playing: **{playlist_name}** in shuffled order!", visible=True)
 
-    auth_url_button.click(fn=lambda: None, _js=f"() => window.open('{get_auth_url()}', '_blank')")
     authorize_button.click(
         check_login,
         inputs=[auth_code_box],