Update app.py

app.py

@@ -1,4 +1,5 @@
 import os
+import time
 import requests
 import gradio as gr
 
@@ -7,7 +8,10 @@ HCAPTCHA_SITEKEY = os.environ.get("HCAPTCHA_SITEKEY")
 
 def verify_hcaptcha(token):
     if not token:
-        return "❌ Captcha not solved (no token)."
+        return "❌ Captcha not solved.", "⚠️ No token received."
+
+    # simulate loading
+    time.sleep(1.5)
 
     url = "https://hcaptcha.com/siteverify"
     data = {"secret": HCAPTCHA_SECRET, "response": token}
@@ -15,36 +19,56 @@ def verify_hcaptcha(token):
         r = requests.post(url, data=data, timeout=8)
         result = r.json()
     except Exception as e:
-        return f"❌ Verification error: {e}"
+        return f"❌ Verification error: {e}", f"Token: {token}"
 
     if result.get("success"):
-        return "✅ Verification passed — you are human!"
+        return "✅ Verification passed — you are human!", f"🔑 Token:\n{token}"
     else:
-        return f"❌ Verification failed: {result}"
-
-with gr.Blocks() as demo:
+        return f"❌ Verification failed: {result.get('error-codes')}", f"🔑 Token:\n{token}"
 
-    token_state = gr.State(value="")  # store token here
+with gr.Blocks(css="""
+body { font-family: 'Segoe UI', sans-serif; background:#f5f7fa; }
+h2 { text-align:center; margin:20px; color:#222; }
+.card {
+  background:white; border-radius:14px; padding:20px;
+  box-shadow:0 4px 12px rgba(0,0,0,0.1);
+  max-width:500px; margin:20px auto;
+}
+button { border-radius:10px !important; font-weight:bold; }
+.debug-box {
+  background:#f1f1f1; border-radius:8px; padding:10px;
+  font-family: monospace; font-size: 0.85em;
+  white-space: break-all;
+}
+""") as demo:
 
     gr.HTML("<h2>🔒 hCaptcha Verification</h2>")
 
-    # Inject hCaptcha widget + JS that writes token to gr.State
-    gr.HTML(f"""
-    <script src="https://hcaptcha.com/1/api.js" async defer></script>
-    <div style="display:flex; justify-content:center; margin:10px;">
-      <div class="h-captcha" data-sitekey="{HCAPTCHA_SITEKEY}" data-callback="setToken"></div>
-    </div>
-    <script>
-    function setToken(token) {{
-        // trigger Gradio state update
-        window.gradioApp().getComponentById('{token_state.elem_id}').setEventValue(token)
-    }}
-    </script>
-    """)
-
-    verify_btn = gr.Button("Verify", variant="primary")
-    status = gr.Markdown("")
-
-    verify_btn.click(fn=verify_hcaptcha, inputs=token_state, outputs=status)
+    with gr.Column(elem_classes="card"):
+        token_state = gr.State(value="")  # token storage
+
+        # hCaptcha widget
+        gr.HTML(f"""
+        <script src="https://hcaptcha.com/1/api.js" async defer></script>
+        <div style="display:flex; justify-content:center; margin:10px;">
+          <div class="h-captcha" data-sitekey="{HCAPTCHA_SITEKEY}" data-callback="setToken"></div>
+        </div>
+        <script>
+        function setToken(token) {{
+            window.gradioApp().getComponentById('{token_state.elem_id}').setEventValue(token)
+        }}
+        </script>
+        """)
+
+        verify_btn = gr.Button("Verify", variant="primary")
+        status = gr.Markdown("")
+        debug = gr.Markdown("", elem_classes="debug-box")
+
+        def show_loading():
+            return "⏳ Verifying...", "⌛ Waiting for token..."
+
+        verify_btn.click(fn=show_loading, inputs=None, outputs=[status, debug]).then(
+            fn=verify_hcaptcha, inputs=token_state, outputs=[status, debug]
+        )
 
 demo.launch()