Update app.py

app.py

@@ -1,54 +1,38 @@
 import gradio as gr
 
-# 🧠 Step 1: Greeting function
 def greet_user(profile: gr.OAuthProfile | None):
     if profile is None:
-        return (
-            "You are not logged in yet.\n\n"
-            "Please use the **Sign In** button above."
-        )
+        return "🔒 You are not logged in yet.\n\nPlease use the **Sign In** button above."
     return (
-        f"Welcome, **{profile.name}**!\n\n"
-        f"our unique Hugging Face ID is:\n`{profile.sub}`"
+        f"👋 Welcome, **{profile.name}**!\n\n"
+        f"🆔 Your unique Hugging Face ID is:\n`{profile.sub}`"
     )
 
-
-# 🧠 Step 2: UI Structure
 with gr.Blocks() as demo:
-    gr.Markdown("## Hugging Face OAuth Login Demo", elem_id="title")
+    gr.Markdown("## 🔐 Hugging Face OAuth Login Demo", elem_id="title")
 
     with gr.Row():
         login_btn = gr.LoginButton()
-        logout_btn = gr.Button("Log Out", visible=False)
-
-    welcome_text = gr.Markdown("Checking login status...", elem_id="welcome")
-
-    # 👇 Automatically greet the user on load
-    demo.load(greet_user, inputs=None, outputs=welcome_text)
-
-    # 👇 Logic when user logs in
-    login_btn.click(fn=greet_user, inputs=login_btn, outputs=welcome_text)
-    
-    # 👇 Simple logout (reload)
-    logout_btn.click(fn=None, inputs=None, outputs=None, _js="() => location.reload()")
-
-    # 👇 JavaScript to show/hide buttons based on login
-    demo.load(
-        None,
-        inputs=None,
-        outputs=None,
-        _js="""
-        () => {
-            const token = window.localStorage.getItem('hf_oauth_access_token');
-            const loginBtn = document.querySelector('[data-testid="login-button"]');
-            const logoutBtn = document.querySelector('button:contains("Log Out")');
-
+        logout_html = gr.HTML(
+            """
+            <button id='logoutBtn' style="display:none;padding:8px 16px;background:#e74c3c;color:#fff;border:none;border-radius:6px;cursor:pointer;">
+              🚪 Log Out
+            </button>
+            <script>
+            const token = localStorage.getItem("hf_oauth_access_token");
             if (token) {
-                if (loginBtn) loginBtn.style.display = "none";
-                if (logoutBtn) logoutBtn.style.display = "inline-block";
+                document.getElementById("logoutBtn").style.display = "inline-block";
             }
-        }
-        """
-    )
+            document.getElementById("logoutBtn").onclick = () => {
+                localStorage.removeItem("hf_oauth_access_token");
+                location.reload();
+            };
+            </script>
+            """
+        )
+
+    output = gr.Markdown("Checking login status...")
+
+    demo.load(fn=greet_user, inputs=None, outputs=output)
 
 demo.launch()