Spaces:

broadfield-dev
/

KeyLock-JS-test

Running

App Files Files Community

broadfield-dev commited on Jun 7

Commit

73623b8

verified ·

1 Parent(s): 286b23a

Update index.html

Browse files

Files changed (1) hide show

index.html +161 -19

index.html CHANGED Viewed

@@ -1,19 +1,161 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, 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 {
+            color: #111827;
+            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, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", 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 style="text-align: center;">Use this page to test your deployed Hugging Face API. It sends an encrypted image to your secure server endpoint for decoding.</p>
+    <main>
+        <section>
+            <label for="api-url">1. Your Deployed API Endpoint URL:</label>
+            <input type="text" id="api-url" placeholder="https://broadfield-dev-keylock-rsa-js.static.hf.space/api/decode">
+        </section>
+        <section>
+            <label for="image-upload">2. Upload Image (Encrypted with Plugin's Public Key):</label>
+            <input type="file" id="image-upload" accept="image/png">
+        </section>
+        <button id="submit-button">Send to Plugin for Decoding</button>
+        <section>
+            <h3>Result from Server:</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();
+            // --- Input Validation ---
+            if (!apiUrl) {
+                resultOutput.textContent = 'Error: Please provide the API endpoint URL.';
+                resultOutput.className = 'result-error';
+                return;
+            }
+            if (!file) {
+                resultOutput.textContent = 'Error: Please select an image file to upload.';
+                resultOutput.className = 'result-error';
+                return;
+            }
+            // --- UI Feedback for Loading State ---
+            resultOutput.textContent = 'Uploading and decoding...';
+            resultOutput.className = '';
+            submitButton.disabled = true;
+            submitButton.textContent = 'Processing...';
+            // --- Prepare and Send the Request ---
+            const formData = new FormData();
+            formData.append('authImage', file); // 'authImage' must match the server's expected field name
+            try {
+                const response = await fetch(apiUrl, {
+                    method: 'POST',
+                    body: formData,
+                });
+                const result = await response.json();
+                if (!response.ok) {
+                    // If the server returns an error (like 400 or 500), throw it
+                    throw new Error(result.error || `Server responded with status ${response.status}`);
+                }
+                // --- Handle Success ---
+                resultOutput.className = 'result-success';
+                resultOutput.textContent = `✅ Success! Decoded Data:\n\n${JSON.stringify(result.data, null, 2)}`;
+            } catch (error) {
+                // --- Handle Failure (Network error or server error) ---
+                resultOutput.className = 'result-error';
+                resultOutput.textContent = `❌ API Request Failed:\n\n${error.message}`;
+                console.error('API Error:', error);
+            } finally {
+                // --- Reset UI ---
+                submitButton.disabled = false;
+                submitButton.textContent = 'Send to Plugin for Decoding';
+            }
+        });
+    </script>
+</body>
+</html>