Hugging Face's logo

Spaces:
broadfield-dev
/
KeyLock-Auth-dev1
Running

App Files Community
broadfield-dev commited on
Commit
f6072cb
·
verified ·
1 Parent(s): 8b0bb7d

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +109 -19
index.html CHANGED
@@ -1,19 +1,109 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Gradio API Client</title>
7
+ <style>
8
+ body { font-family: system-ui, sans-serif; line-height: 1.6; max-width: 800px; margin: 2rem auto; }
9
+ .container { display: flex; flex-direction: column; gap: 1.5rem; border: 1px solid #ccc; padding: 1.5rem; border-radius: 8px; }
10
+ .tab-content { display: none; }
11
+ .tab-content.active { display: block; }
12
+ .tabs button { padding: 10px; border: 1px solid #ccc; background: #f0f0f0; cursor: pointer; }
13
+ .tabs button.active { background: #fff; border-bottom: 1px solid #fff; }
14
+ h1, h3 { margin-top: 0; }
15
+ input, button, textarea { font-size: 1rem; padding: 0.5rem; }
16
+ pre { background: #f4f4f4; padding: 1rem; border-radius: 5px; white-space: pre-wrap; word-wrap: break-word; }
17
+ </style>
18
+ </head>
19
+ <body>
20
+
21
+ <h1>Gradio API Test Client</h1>
22
+ <div class="container">
23
+ <div>
24
+ <label for="api-url-base"><b>Base API URL (Your Space's Direct URL):</b></label>
25
+ <input type="text" id="api-url-base" placeholder="https://your-space-name.hf.space" style="width: 100%;">
26
+ </div>
27
+
28
+ <div class="tabs">
29
+ <button class="tab-button active" onclick="showTab('mcp')">Test /run/mcp_decode (Base64)</button>
30
+ </div>
31
+
32
+ <div id="mcp" class="tab-content active">
33
+ <h3>Test the MCP (Base64) Endpoint</h3>
34
+ <p>This method is simple and robust for programmatic use.</p>
35
+ <div>
36
+ <label for="image-upload-mcp">Upload Image to convert to Base64:</label>
37
+ <input type="file" id="image-upload-mcp" accept="image/png">
38
+ </div>
39
+ <textarea id="base64-output" rows="4" readonly placeholder="Base64 will appear here..."></textarea>
40
+ <button id="submit-mcp">Send Base64 to /run/mcp_decode</button>
41
+ <h3>MCP Result:</h3>
42
+ <pre id="result-mcp">...</pre>
43
+ </div>
44
+ </div>
45
+
46
+ <script>
47
+ const apiUrlBaseInput = document.getElementById('api-url-base');
48
+ const mcpUploadInput = document.getElementById('image-upload-mcp');
49
+ const b64Output = document.getElementById('base64-output');
50
+ const mcpSubmitBtn = document.getElementById('submit-mcp');
51
+ const mcpResultPre = document.getElementById('result-mcp');
52
+
53
+ // Convert file to Base64 for MCP endpoint
54
+ mcpUploadInput.addEventListener('change', () => {
55
+ const file = mcpUploadInput.files[0];
56
+ if (!file) return;
57
+ const reader = new FileReader();
58
+ reader.onload = (e) => {
59
+ // The result includes the data URL prefix, which we must remove.
60
+ const b64 = e.target.result.split(',')[1];
61
+ b64Output.value = b64;
62
+ };
63
+ reader.readAsDataURL(file);
64
+ });
65
+
66
+ // Handle MCP submission
67
+ mcpSubmitBtn.addEventListener('click', async () => {
68
+ const baseUrl = apiUrlBaseInput.value.trim();
69
+ const b64String = b64Output.value.trim();
70
+
71
+ if (!baseUrl || !b64String) {
72
+ mcpResultPre.textContent = 'Error: Please provide both a base URL and an image.';
73
+ return;
74
+ }
75
+
76
+ mcpResultPre.textContent = 'Sending request...';
77
+ mcpSubmitBtn.disabled = true;
78
+
79
+ const apiUrl = `${baseUrl}/run/mcp_decode`;
80
+
81
+ // Gradio API expects a specific JSON structure: {"data": [inputs...]}
82
+ const payload = {
83
+ data: [ b64String ]
84
+ };
85
+
86
+ try {
87
+ const response = await fetch(apiUrl, {
88
+ method: 'POST',
89
+ headers: { 'Content-Type': 'application/json' },
90
+ body: JSON.stringify(payload)
91
+ });
92
+
93
+ const result = await response.json();
94
+
95
+ if (result.error) {
96
+ throw new Error(result.error);
97
+ }
98
+
99
+ // The actual data is inside result.data[0]
100
+ mcpResultPre.textContent = `✅ Success!\n\n${JSON.stringify(result.data[0], null, 2)}`;
101
+ } catch (error) {
102
+ mcpResultPre.textContent = `❌ API Request Failed:\n\n${error.message}`;
103
+ } finally {
104
+ mcpSubmitBtn.disabled = false;
105
+ }
106
+ });
107
+ </script>
108
+ </body>
109
+ </html>