| import os; os.system("pip install git+https://github.com/broadfield-dev/gradio-keylock.git") | |
| import gradio as gr | |
| from gradio_keylock.component import KeylockDecoderComponent, AppServerLogic | |
| import json | |
| server_logic = AppServerLogic() | |
| example_db = {"USER":"TestUser","PASS":"TestPass"} | |
| def login_fn(username,password): | |
| if username==example_db.get("USER") and password==example_db.get("PASS"): | |
| return "### ✅ Logged in" | |
| else: | |
| return "### 🛑 Incorrect Username or Password" | |
| def process_image_and_display_payload(image): | |
| if image is None: | |
| return "Upload a KeyLock image to auto-fill credentials.", {} | |
| result_dict = server_logic.decode_payload(image) | |
| if result_dict.get("status") == "Success": | |
| user = result_dict.get("payload", {}).get("USER", "") | |
| user_pass = result_dict.get("payload", {}).get("PASS", "") | |
| GROQ_API_KEY = result_dict.get("payload", {}).get("GROQ_API_KEY", "") | |
| HF_TOKEN = result_dict.get("payload", {}).get("HF_TOKEN", "") | |
| OPENAI_API_KEY = result_dict.get("payload", {}).get("OPENAI_API_KEY", "") | |
| OPENROUTER_API_KEY = result_dict.get("payload", {}).get("OPENROUTER_API_KEY", "") | |
| status_message = f"<p style='color:green; font-weight:bold;'>✅ Success! Decoded credentials for '{user}'.</p>" | |
| payload = result_dict.get("payload", {}) | |
| else: | |
| message = result_dict.get("message", "An unknown error occurred.") | |
| status_message = f"<p style='color:red; font-weight:bold;'>❌ Error: {message}</p>" | |
| payload = {} | |
| return status_message, payload, user, user_pass, GROQ_API_KEY, HF_TOKEN, OPENAI_API_KEY, OPENROUTER_API_KEY | |
| gr_head = "<style>" + KeylockDecoderComponent(server_logic=server_logic).CSS + "</style>" | |
| with gr.Blocks(theme=gr.themes.Soft(), head = gr_head) as demo: | |
| gr.Markdown("# Gradio KeyLock Component Demo") | |
| gr.Markdown( | |
| "**Instructions:**\n" | |
| "1. Use the 'Generate Encrypted Image' section to create a new secure image.\n" | |
| "2. Download the generated image or drag it to the 'KeyLock Image' upload area.\n" | |
| "3. The decoded data will **automatically** appear below." | |
| ) | |
| gr.Markdown("### github: [https://github.com/broadfield-dev/gradio-keylock](https://github.com/broadfield-dev/gradio-keylock)") | |
| with gr.Row(): | |
| with gr.Column(): | |
| gr.Markdown("## Login") | |
| user_name=gr.Textbox(label='User Name') | |
| user_pass=gr.Textbox(label='Password', type='password') | |
| login_btn=gr.Button("Login") | |
| login_msg=gr.Markdown("### Enter user name and password") | |
| gr.Markdown("## API Keys (Demo)") | |
| user_GROQ=gr.Textbox(label='GROQ_API_KEY') | |
| user_HF=gr.Textbox(label='HF_TOKEN') | |
| user_OPENAI=gr.Textbox(label='OPENAI_API_KEY') | |
| user_OPENROUTER=gr.Textbox(label='OPENROUTER_API_KEY') | |
| with gr.Column(): | |
| keylock_builder = KeylockDecoderComponent(server_logic) | |
| image_input, status_display = keylock_builder.build_ui() | |
| output_json = gr.JSON(label="Decoded Payload") | |
| login_btn.click(login_fn,[user_name,user_pass], login_msg) | |
| image_input.upload( | |
| fn=process_image_and_display_payload, | |
| inputs=image_input, | |
| outputs=[status_display, output_json, user_name, user_pass, user_GROQ, user_HF, user_OPENAI, user_OPENROUTER] | |
| ) | |
| demo.launch(mcp_server=True) |