Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>API Client for Secure Decoder Plugin</title> | |
| <style> | |
| :root { | |
| --primary-color: #3b82f6; --primary-hover: #2563eb; --border-color: #d1d5db; | |
| --background-color: #f9fafb; --text-color: #1f2937; --error-color: #ef4444; --success-color: #22c55e; | |
| } | |
| body { font-family: system-ui, sans-serif; line-height: 1.6; max-width: 700px; margin: 2rem auto; padding: 0 1rem; color: var(--text-color); } | |
| main { display: flex; flex-direction: column; gap: 1.5rem; border: 1px solid var(--border-color); padding: 1.5rem; border-radius: 0.5rem; background-color: white; } | |
| h1, p { text-align: center; } | |
| section { display: flex; flex-direction: column; gap: 0.5rem; } | |
| label { font-weight: 600; } | |
| input[type="text"], input[type="file"] { font-size: 1rem; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color); border-radius: 0.375rem; } | |
| button { font-size: 1rem; font-weight: 600; padding: 0.75rem 1rem; cursor: pointer; border: none; border-radius: 0.375rem; background-color: var(--primary-color); color: white; transition: background-color 0.2s; } | |
| button:hover:not(:disabled) { background-color: var(--primary-hover); } | |
| button:disabled { background-color: #9ca3af; cursor: not-allowed; } | |
| #result-output { background: var(--background-color); padding: 1rem; border-radius: 5px; white-space: pre-wrap; word-wrap: break-word; font-family: ui-monospace, monospace; min-height: 60px; border: 1px solid var(--border-color); } | |
| .result-error { color: var(--error-color); } | |
| .result-success { color: var(--success-color); } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Secure Decoder Plugin Client</h1> | |
| <p>This page tests the live API endpoint for the KeyLock decoder.</p> | |
| <p>Server at: <a href="https://huggingface.co/spaces/broadfield-dev/KeyLock-RSA-JS" target="_blank">https://huggingface.co/spaces/broadfield-dev/KeyLock-RSA-JS</a></p> | |
| <main> | |
| <section> | |
| <label for="api-url">1. API Endpoint URL (Direct App URL):</label> | |
| <input type="text" id="api-url" value="https://broadfield-dev-keylock-rsa-js.hf.space/api/decode"> | |
| </section> | |
| <section> | |
| <label for="image-upload">2. Upload Image:</label> | |
| <input type="file" id="image-upload" accept="image/png"> | |
| </section> | |
| <button id="submit-button">Send to Plugin for Decoding</button> | |
| <section> | |
| <h3>Result:</h3> | |
| <div id="result-output">Awaiting input...</div> | |
| </section> | |
| </main> | |
| <script> | |
| const apiUrlInput = document.getElementById('api-url'); | |
| const imageInput = document.getElementById('image-upload'); | |
| const submitButton = document.getElementById('submit-button'); | |
| const resultOutput = document.getElementById('result-output'); | |
| submitButton.addEventListener('click', async () => { | |
| const file = imageInput.files[0]; | |
| const apiUrl = apiUrlInput.value.trim(); | |
| if (!apiUrl || !file) { | |
| resultOutput.textContent = 'Error: Please provide both an API URL and an image file.'; | |
| resultOutput.className = 'result-error'; | |
| return; | |
| } | |
| resultOutput.textContent = 'Sending request to API...'; | |
| resultOutput.className = ''; | |
| submitButton.disabled = true; | |
| const formData = new FormData(); | |
| formData.append('authImage', file); | |
| try { | |
| const response = await fetch(apiUrl, { method: 'POST', body: formData }); | |
| const contentType = response.headers.get("content-type"); | |
| if (contentType && contentType.includes("application/json")) { | |
| const result = await response.json(); | |
| if (!response.ok) { throw new Error(result.error || `Server responded with status ${response.status}`); } | |
| resultOutput.className = 'result-success'; | |
| resultOutput.textContent = `✅ Success! Decoded Data:\n\n${JSON.stringify(result.data, null, 2)}`; | |
| } else { | |
| const textResponse = await response.text(); | |
| throw new Error(`Server did not return JSON. This means the URL is wrong or the server crashed. The API URL should look like 'https://...hf.space/api/decode', not 'https://huggingface.co/...'`); | |
| } | |
| } catch (error) { | |
| resultOutput.className = 'result-error'; | |
| resultOutput.textContent = `❌ API Request Failed:\n\n${error.message}`; | |
| } finally { | |
| submitButton.disabled = false; | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |