Update app.py

app.py

@@ -1,58 +1,65 @@
 import os
-import time
 import requests
 import gradio as gr
 
-# 🔑 Load keys from Hugging Face Secrets (Settings → Repository secrets)
-HCAPTCHA_SECRET = os.environ.get("HCAPTCHA_SECRET")  # your secret key
-HCAPTCHA_SITEKEY = os.environ.get("HCAPTCHA_SITEKEY")  # your site key
+# Load keys from HF Secrets (Settings → Repository secrets)
+HCAPTCHA_SECRET = os.environ.get("HCAPTCHA_SECRET")
+HCAPTCHA_SITEKEY = os.environ.get("HCAPTCHA_SITEKEY")
 
-# 🚀 Verify function
-def verify_hcaptcha(token, username, password):
+def verify_hcaptcha(token):
+    """Verify hCaptcha token with hcaptcha.com/siteverify"""
     if not token:
         return "❌ Captcha not solved."
 
     url = "https://hcaptcha.com/siteverify"
-    data = {
-        "secret": HCAPTCHA_SECRET,
-        "response": token
-    }
-    result = requests.post(url, data=data).json()
+    data = {"secret": HCAPTCHA_SECRET, "response": token}
+    try:
+        r = requests.post(url, data=data, timeout=8)
+        result = r.json()
+    except Exception as e:
+        return f"❌ Verification error: {e}"
 
     if result.get("success"):
-        # You can extend this part to check username/password in a real app
-        return f"✅ Success! Welcome, {username or 'user'}"
+        return "✅ Verification passed — you are human!"
     else:
-        return f"❌ Verification failed: {result}"
+        # return short, useful message for debugging
+        msg = result.get("error-codes") or result
+        return f"❌ Verification failed: {msg}"
 
 with gr.Blocks(css="""
-body { font-family: 'Segoe UI', sans-serif; background: #f8f9fa; }
-h2 { text-align:center; color:#333; }
+body { font-family: 'Segoe UI', sans-serif; background: #f4f6f8; }
+h2 { text-align:center; color:#222; margin-top:18px; }
 .card {
-  background: white; border-radius: 16px; padding: 24px;
-  box-shadow: 0 4px 10px rgba(0,0,0,0.1); max-width: 400px; margin: auto;
-}
-button { border-radius: 12px !important; font-weight: bold; }
-.loading {
-  display:none; text-align:center; margin-top:10px;
+  background: white; border-radius: 12px; padding: 20px;
+  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
+  max-width: 520px; margin: 20px auto;
 }
+.button-row { display:flex; justify-content:center; gap:12px; margin-top:12px; }
 """) as demo:
 
-    gr.HTML("<h2>🔒 Login Form with hCaptcha</h2>")
+    gr.HTML("<h2>🔒 Let's verify!</h2>")
 
     with gr.Column(elem_classes="card"):
-        username = gr.Textbox(label="Username")
-        password = gr.Textbox(label="Password", type="password")
+        gr.Markdown("Complete the hCaptcha widget below, then click **Verify**. Loading indicator will show while verifying.")
 
-        # Hidden box for hCaptcha token
+        # Hidden token holder (will be filled by hCaptcha JS)
         token_box = gr.Textbox(label="hCaptcha Token", visible=False)
 
-        # Inject hCaptcha widget
+        # Loading textbox (visible) - we'll update this with .update()
+        loading = gr.Textbox(value="", interactive=False, label="", visible=True)
+
+        # Result/output textbox
+        output = gr.Textbox(label="Result", interactive=False)
+
+        # Inject hCaptcha widget + JS that writes token into the hidden textbox
         gr.HTML(f"""
         <script src="https://hcaptcha.com/1/api.js" async defer></script>
-        <div class="h-captcha" data-sitekey="{HCAPTCHA_SITEKEY}" data-callback="setToken"></div>
+        <div style="display:flex; justify-content:center; margin-top:10px;">
+          <div class="h-captcha" data-sitekey="{HCAPTCHA_SITEKEY}" data-callback="setToken"></div>
+        </div>
         <script>
         function setToken(token) {{
+            // Find the hidden Gradio textarea by aria-label
             let textbox = document.querySelector('textarea[aria-label="hCaptcha Token"]');
             if (textbox) {{
                 textbox.value = token;
@@ -62,22 +69,19 @@ button { border-radius: 12px !important; font-weight: bold; }
         </script>
         """)
 
-        with gr.Row():
-            submit = gr.Button("Login", variant="primary")
-
-        loading = gr.HTML('<div id="loading" class="loading">⏳ Verifying...</div>')
-        output = gr.Textbox(label="Result", interactive=False)
+        with gr.Row(elem_classes="button-row"):
+            verify_btn = gr.Button("Verify", variant="primary")
 
-        # Functions for loading state
+        # Functions to control loading (must return Textbox.update)
         def show_loading():
-            return gr.HTML.update(value='<div id="loading" class="loading" style="display:block;">⏳ Verifying...</div>')
+            return gr.Textbox.update(value="⏳ Verifying...", interactive=False)
 
         def hide_loading():
-            return gr.HTML.update(value='<div id="loading" class="loading" style="display:none;">⏳ Verifying...</div>')
+            return gr.Textbox.update(value="", interactive=False)
 
-        # Chain events: show loader → verify → hide loader
-        submit.click(fn=show_loading, inputs=None, outputs=loading).then(
-            fn=verify_hcaptcha, inputs=[token_box, username, password], outputs=output
+        # Chain: show loading -> verify -> hide loading
+        verify_btn.click(fn=show_loading, inputs=None, outputs=loading).then(
+            fn=verify_hcaptcha, inputs=token_box, outputs=output
         ).then(
             fn=hide_loading, inputs=None, outputs=loading
         )