Spaces:
Running
Running
File size: 4,944 Bytes
73623b8 07a6bbe 73623b8 07a6bbe 24c2956 07a6bbe 73623b8 07a6bbe 73623b8 07a6bbe 73623b8 5c66633 73623b8 07a6bbe 73623b8 07a6bbe 73623b8 5c66633 73623b8 07a6bbe 73623b8 5c66633 73623b8 5c66633 73623b8 5c66633 07a6bbe 73623b8 5c66633 73623b8 5c66633 73623b8 5c66633 07a6bbe 5c66633 07a6bbe 5c66633 07a6bbe 5c66633 73623b8 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 |
<!DOCTYPE html>
<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> |