Update app.py

app.py

@@ -17,39 +17,44 @@ sp_oauth = SpotifyOAuth(
     scope=SCOPE
 )
 
-auth_url = sp_oauth.get_authorize_url()
-
-sp = None
+sp = None  # Will be set after authorization
 user_playlists = {}
 selected_playlist_id = None
 
+def get_auth_url():
+    return sp_oauth.get_authorize_url()
+
 with gr.Blocks(title="RNG Spotify Playlist Shuffler") as demo:
-    gr.Markdown("## 🎵 RNG Spotify Playlist Shuffler")
+    gr.Markdown("## 🎵 RNG Spotify Playlist Shuffler", elem_id="title")
     gr.Markdown("A clean and simple way to shuffle your Spotify playlists with one click.")
 
     with gr.Column():
-        login_link = gr.Markdown(f"[🔐 Step 1: Login to Spotify]({auth_url})")
-        code_box = gr.Textbox(label="Step 2: Paste Authorization Code", visible=True)
-        authorize_button = gr.Button("✅ Step 3: Authorize", visible=True)
+        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 Playlist", 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)
 
-        # Autofill JavaScript
         gr.HTML("""
         <script>
         window.onload = () => {
             const params = new URLSearchParams(window.location.search);
             const code = params.get("code");
             if (code) {
-                document.querySelector("textarea").value = code;
-                document.querySelector("button").click();
+                const textbox = document.querySelector("textarea");
+                if (textbox) {
+                    textbox.value = code;
+                }
             }
         }
         </script>
         """)
 
+    def open_auth_url():
+        return gr.update(value=get_auth_url())
+
     def check_login(code):
         global sp, user_playlists
         if not code:
@@ -67,7 +72,7 @@ with gr.Blocks(title="RNG Spotify Playlist Shuffler") as demo:
             gr.update(visible=True, value="✅ Logged in! Select your playlist below."),
             gr.update(visible=True, choices=list(user_playlists.keys())),
             gr.update(visible=True),
-            gr.update(visible=False)
+            gr.update(visible=True)
         )
 
     def shuffle_and_play(playlist_name):
@@ -94,12 +99,12 @@ 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=[code_box],
+        inputs=[auth_code_box],
         outputs=[login_status, playlist_dropdown, shuffle_button, result_box]
     )
-
     shuffle_button.click(
         shuffle_and_play,
         inputs=[playlist_dropdown],
@@ -108,3 +113,4 @@ with gr.Blocks(title="RNG Spotify Playlist Shuffler") as demo:
 
 if __name__ == "__main__":
     demo.launch()
+