Create app.py

app.py

@@ -0,0 +1,85 @@
+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
+
+# 🚀 Verify function
+def verify_hcaptcha(token, username, password):
+    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()
+
+    if result.get("success"):
+        # You can extend this part to check username/password in a real app
+        return f"✅ Success! Welcome, {username or 'user'}"
+    else:
+        return f"❌ Verification failed: {result}"
+
+with gr.Blocks(css="""
+body { font-family: 'Segoe UI', sans-serif; background: #f8f9fa; }
+h2 { text-align:center; color:#333; }
+.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;
+}
+""") as demo:
+
+    gr.HTML("<h2>🔒 Login Form with hCaptcha</h2>")
+
+    with gr.Column(elem_classes="card"):
+        username = gr.Textbox(label="Username")
+        password = gr.Textbox(label="Password", type="password")
+
+        # Hidden box for hCaptcha token
+        token_box = gr.Textbox(label="hCaptcha Token", visible=False)
+
+        # Inject hCaptcha widget
+        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>
+        <script>
+        function setToken(token) {{
+            let textbox = document.querySelector('textarea[aria-label="hCaptcha Token"]');
+            if (textbox) {{
+                textbox.value = token;
+                textbox.dispatchEvent(new Event("input", {{ bubbles: true }}));
+            }}
+        }}
+        </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)
+
+        # Functions for loading state
+        def show_loading():
+            return gr.HTML.update(value='<div id="loading" class="loading" style="display:block;">⏳ Verifying...</div>')
+
+        def hide_loading():
+            return gr.HTML.update(value='<div id="loading" class="loading" style="display:none;">⏳ Verifying...</div>')
+
+        # 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
+        ).then(
+            fn=hide_loading, inputs=None, outputs=loading
+        )
+
+demo.launch()