Spaces:

broadfield-dev
/

KeyLock-RSA-JS

Sleeping

App Files Files Community

broadfield-dev commited on Jun 7

Commit

d15735a

verified ·

1 Parent(s): 122c74c

Update index.html

Browse files

Files changed (1) hide show

index.html +132 -31

index.html CHANGED Viewed

@@ -2,65 +2,166 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Secure Decoder Client Demo</title>
     <style>
-        body { font-family: sans-serif; max-width: 700px; margin: 2rem auto; }
-        .container { display: flex; flex-direction: column; gap: 1rem; border: 1px solid #ccc; padding: 1.5rem; border-radius: 8px; }
-        button { font-size: 1rem; padding: 0.5rem 1rem; cursor: pointer; }
-        #result { background: #f0f0f0; padding: 1rem; border-radius: 5px; white-space: pre-wrap; font-family: monospace; }
-        input[type="text"] { width: 100%; box-sizing: border-box; padding: 8px; }
     </style>
 </head>
 <body>
-    <h1>Client for Secure Decoder Plugin</h1>
-    <p>This demo sends an encrypted image to a secure backend API. The backend holds the private key and returns the decrypted data.</p>
-    <div class="container">
-        <div>
-            <label for="api-url"><b>Your Deployed API Endpoint URL:</b></label>
-            <input type="text" id="api-url" placeholder="e.g., https://your-plugin.vercel.app/api/decode">
-        </div>
-        <div>
-            <label for="image-upload"><b>Upload Image (Encrypted with Plugin's Public Key):</b></label>
             <input type="file" id="image-upload" accept="image/png">
-        </div>
         <button id="submit-button">Send to Plugin for Decoding</button>
-        <div>
             <h3>Result from Server:</h3>
-            <div id="result">...</div>
-        </div>
-    </div>
     <script>
         const apiUrlInput = document.getElementById('api-url');
         const imageInput = document.getElementById('image-upload');
         const submitButton = document.getElementById('submit-button');
-        const resultDiv = document.getElementById('result');
         submitButton.addEventListener('click', async () => {
             const file = imageInput.files[0];
             const apiUrl = apiUrlInput.value.trim();
-            if (!file) { resultDiv.textContent = 'Please select an image file.'; return; }
-            if (!apiUrl) { resultDiv.textContent = 'Please provide the API endpoint URL.'; return; }
-            resultDiv.textContent = 'Uploading and decoding...';
             submitButton.disabled = true;
             const formData = new FormData();
-            formData.append('authImage', file);
             try {
-                const response = await fetch(apiUrl, { method: 'POST', body: formData });
                 const result = await response.json();
-                if (!response.ok) throw new Error(result.error);
-                resultDiv.style.color = 'green';
-                resultDiv.textContent = JSON.stringify(result.data, null, 2);
             } catch (error) {
-                resultDiv.style.color = 'red';
-                resultDiv.textContent = `Error: ${error.message}`;
             } finally {
                 submitButton.disabled = false;
             }
         });
     </script>

 <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://your-space-name.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>