Update app.py

app.py

@@ -3,35 +3,41 @@ import os, requests, gradio as gr
 HCAPTCHA_SECRET = os.environ.get("HCAPTCHA_SECRET")
 HCAPTCHA_SITEKEY = os.environ.get("HCAPTCHA_SITEKEY")
 
-def verify_hcaptcha(token):
+def verify_hcaptcha(token: str):
     if not token:
-        return "❌ No token received."
+        return "<b style='color:red'>❌ No token received.</b>"
     url = "https://hcaptcha.com/siteverify"
     data = {"secret": HCAPTCHA_SECRET, "response": token}
     result = requests.post(url, data=data).json()
-    return f"🔍 Token = {token}\n✅ Result: {result}"
+    return f"""
+    <div style='font-family:monospace; padding:10px; background:#f7f7f7; border-radius:8px;'>
+      <b>🔑 Token:</b> {token}<br><br>
+      <b>✅ Verification Result:</b><br>{result}
+    </div>
+    """
 
 with gr.Blocks() as demo:
-    # token box kelihatan biar gampang debug
-    token_box = gr.Textbox(label="hCaptcha Token (Debug Visible)", visible=True, elem_id="hcaptcha-token")
+    output = gr.HTML("<i>⚡ Solve captcha to continue...</i>", elem_id="verify-output")
 
     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 class="h-captcha" data-sitekey="{HCAPTCHA_SITEKEY}" data-callback="sendToken"></div>
     <script>
-      function setToken(token) {{
-        // debug visible
-        let textbox = document.getElementById("hcaptcha-token");
-        if (textbox) {{
-          textbox.value = token;
-          textbox.dispatchEvent(new Event("input", {{ bubbles: true }}));
+      async function sendToken(token) {{
+        document.querySelector('#verify-output').innerHTML = "⏳ Verifying token...";
+        try {{
+          const response = await fetch("/run/predict", {{
+            method: "POST",
+            headers: {{ "Content-Type": "application/json" }},
+            body: JSON.stringify({{ "data": [token], "fn_index": 0 }})
+          }});
+          const result = await response.json();
+          document.querySelector('#verify-output').innerHTML = result.data[0];
+        }} catch (e) {{
+          document.querySelector('#verify-output').innerHTML = "❌ Error: " + e;
         }}
       }}
     </script>
     """)
 
-    btn = gr.Button("Verify Captcha")
-    output = gr.Textbox(label="Result", lines=4)
-    btn.click(fn=verify_hcaptcha, inputs=[token_box], outputs=[output])
-
 demo.launch()