Hugging Face's logo

Spaces:
broadfield-dev
/
KeyLock-JS-test
Running

App Files Community
broadfield-dev commited on
Commit
07a6bbe
·
verified ·
1 Parent(s): dc26049

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +31 -14
index.html CHANGED
@@ -4,25 +4,48 @@
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>API Client for Secure Decoder Plugin</title>
7
- <style>/* ... same styles as the previous index.html ... */</style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8
  </head>
9
  <body>
10
  <h1>Secure Decoder Plugin Client</h1>
 
 
11
  <main>
12
  <section>
13
- <label for="api-url">1. Your Deployed API Endpoint URL:</label>
14
- <input type="text" id="api-url" placeholder="https://your-space-name.hf.space/api/decode" value="https://huggingface.co/spaces/broadfield-dev/KeyLock-RSA-JS/api/decode">
15
  </section>
 
16
  <section>
17
  <label for="image-upload">2. Upload Image:</label>
18
  <input type="file" id="image-upload" accept="image/png">
19
  </section>
 
20
  <button id="submit-button">Send to Plugin for Decoding</button>
 
21
  <section>
22
  <h3>Result:</h3>
23
  <div id="result-output">Awaiting input...</div>
24
  </section>
25
  </main>
 
26
  <script>
27
  const apiUrlInput = document.getElementById('api-url');
28
  const imageInput = document.getElementById('image-upload');
@@ -39,7 +62,7 @@
39
  return;
40
  }
41
 
42
- resultOutput.textContent = 'Uploading and decoding...';
43
  resultOutput.className = '';
44
  submitButton.disabled = true;
45
 
@@ -48,23 +71,17 @@
48
 
49
  try {
50
  const response = await fetch(apiUrl, { method: 'POST', body: formData });
51
-
52
- // --- BETTER ERROR HANDLING ---
53
  const contentType = response.headers.get("content-type");
54
- if (contentType && contentType.indexOf("application/json") !== -1) {
55
- // It's JSON, process it
56
  const result = await response.json();
57
- if (!response.ok) {
58
- throw new Error(result.error || `Server responded with status ${response.status}`);
59
- }
60
  resultOutput.className = 'result-success';
61
  resultOutput.textContent = `✅ Success! Decoded Data:\n\n${JSON.stringify(result.data, null, 2)}`;
62
  } else {
63
- // It's NOT JSON, it's probably an HTML error page from the server
64
  const textResponse = await response.text();
65
- 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)}...`);
66
  }
67
-
68
  } catch (error) {
69
  resultOutput.className = 'result-error';
70
  resultOutput.textContent = `❌ API Request Failed:\n\n${error.message}`;
 
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>API Client for Secure Decoder Plugin</title>
7
+ <style>
8
+ :root {
9
+ --primary-color: #3b82f6; --primary-hover: #2563eb; --border-color: #d1d5db;
10
+ --background-color: #f9fafb; --text-color: #1f2937; --error-color: #ef4444; --success-color: #22c55e;
11
+ }
12
+ body { font-family: system-ui, sans-serif; line-height: 1.6; max-width: 700px; margin: 2rem auto; padding: 0 1rem; color: var(--text-color); }
13
+ 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; }
14
+ h1, p { text-align: center; }
15
+ section { display: flex; flex-direction: column; gap: 0.5rem; }
16
+ label { font-weight: 600; }
17
+ input[type="text"], input[type="file"] { font-size: 1rem; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color); border-radius: 0.375rem; }
18
+ 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; }
19
+ button:hover:not(:disabled) { background-color: var(--primary-hover); }
20
+ button:disabled { background-color: #9ca3af; cursor: not-allowed; }
21
+ #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); }
22
+ .result-error { color: var(--error-color); }
23
+ .result-success { color: var(--success-color); }
24
+ </style>
25
  </head>
26
  <body>
27
  <h1>Secure Decoder Plugin Client</h1>
28
+ <p>This page tests the live API endpoint for the KeyLock decoder.</p>
29
+
30
  <main>
31
  <section>
32
+ <label for="api-url">1. API Endpoint URL (Direct App URL):</label>
33
+ <input type="text" id="api-url" value="https://broadfield-dev-keylock-rsa-js.hf.space/api/decode">
34
  </section>
35
+
36
  <section>
37
  <label for="image-upload">2. Upload Image:</label>
38
  <input type="file" id="image-upload" accept="image/png">
39
  </section>
40
+
41
  <button id="submit-button">Send to Plugin for Decoding</button>
42
+
43
  <section>
44
  <h3>Result:</h3>
45
  <div id="result-output">Awaiting input...</div>
46
  </section>
47
  </main>
48
+
49
  <script>
50
  const apiUrlInput = document.getElementById('api-url');
51
  const imageInput = document.getElementById('image-upload');
 
62
  return;
63
  }
64
 
65
+ resultOutput.textContent = 'Sending request to API...';
66
  resultOutput.className = '';
67
  submitButton.disabled = true;
68
 
 
71
 
72
  try {
73
  const response = await fetch(apiUrl, { method: 'POST', body: formData });
 
 
74
  const contentType = response.headers.get("content-type");
75
+
76
+ if (contentType && contentType.includes("application/json")) {
77
  const result = await response.json();
78
+ if (!response.ok) { throw new Error(result.error || `Server responded with status ${response.status}`); }
 
 
79
  resultOutput.className = 'result-success';
80
  resultOutput.textContent = `✅ Success! Decoded Data:\n\n${JSON.stringify(result.data, null, 2)}`;
81
  } else {
 
82
  const textResponse = await response.text();
83
+ 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/...'`);
84
  }
 
85
  } catch (error) {
86
  resultOutput.className = 'result-error';
87
  resultOutput.textContent = `❌ API Request Failed:\n\n${error.message}`;