Spaces:

broadfield-dev
/

KeyLock-JS-test

Running

App Files Files Community

broadfield-dev commited on Jun 7

Commit

5c66633

verified ·

1 Parent(s): 73623b8

Update index.html

Browse files

Files changed (1) hide show

index.html +29 -113

index.html CHANGED Viewed

@@ -4,156 +4,72 @@
     <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>

     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>API Client for Secure Decoder Plugin</title>
+    <style>/* ... same styles as the previous index.html ... */</style>
 </head>
 <body>
     <h1>Secure Decoder Plugin Client</h1>
     <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:</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 = 'Uploading and decoding...';
             resultOutput.className = '';
             submitButton.disabled = true;
             const formData = new FormData();
+            formData.append('authImage', file);
             try {
+                const response = await fetch(apiUrl, { method: 'POST', body: formData });
+                // --- BETTER ERROR HANDLING ---
+                const contentType = response.headers.get("content-type");
+                if (contentType && contentType.indexOf("application/json") !== -1) {
+                    // It's JSON, process it
+                    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 {
+                    // It's NOT JSON, it's probably an HTML error page from the server
+                    const textResponse = await response.text();
+                    throw new Error(`Server did not return JSON. This usually means the API endpoint is wrong or the server crashed. Server response: ${textResponse.substring(0, 100)}...`);
+                }
             } catch (error) {
                 resultOutput.className = 'result-error';
                 resultOutput.textContent = `❌ API Request Failed:\n\n${error.message}`;
             } finally {
                 submitButton.disabled = false;
             }
         });
     </script>