Hugging Face's logo

Spaces:
sheikhcoders
/
ai-model-runner
Runtime error

App Files Community
sheikhcoders commited on
Commit
a2f73e6
·
verified ·
1 Parent(s): d60ca67

Upload index.html with huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +826 -287
index.html CHANGED
@@ -3,7 +3,7 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>AI Model Runner API</title>
7
  <style>
8
  * {
9
  margin: 0;
@@ -41,12 +41,19 @@
41
  opacity: 0.9;
42
  }
43
 
 
 
 
 
 
 
 
 
44
  .tabs {
45
  display: flex;
46
- background: white;
47
  border-radius: 10px 10px 0 0;
48
  overflow: hidden;
49
- box-shadow: 0 4px 6px rgba(0,0,0,0.1);
50
  }
51
 
52
  .tab {
@@ -73,53 +80,48 @@
73
  background: white;
74
  }
75
 
76
- .content {
77
- background: white;
78
- border-radius: 0 0 10px 10px;
79
- padding: 30px;
80
- box-shadow: 0 4px 6px rgba(0,0,0,0.1);
81
- }
82
-
83
  .tab-content {
84
  display: none;
 
85
  }
86
 
87
  .tab-content.active {
88
  display: block;
89
  }
90
 
91
- .form-group {
92
- margin-bottom: 20px;
93
- }
94
-
95
- .form-group label {
96
- display: block;
97
- margin-bottom: 5px;
98
- font-weight: bold;
99
- color: #555;
100
  }
101
 
102
- .form-group input,
103
- .form-group textarea,
104
- .form-group select {
105
- width: 100%;
106
- padding: 12px;
107
- border: 1px solid #ddd;
108
- border-radius: 6px;
109
- font-size: 16px;
110
- transition: border-color 0.3s;
111
  }
112
 
113
- .form-group input:focus,
114
- .form-group textarea:focus,
115
- .form-group select:focus {
116
- outline: none;
117
- border-color: #667eea;
 
118
  }
119
 
120
- .form-group textarea {
121
- height: 100px;
122
- resize: vertical;
123
  }
124
 
125
  .btn {
@@ -131,6 +133,7 @@
131
  cursor: pointer;
132
  font-size: 16px;
133
  transition: background 0.3s;
 
134
  }
135
 
136
  .btn:hover {
@@ -142,149 +145,751 @@
142
  cursor: not-allowed;
143
  }
144
 
145
- .response {
146
- background: #f8f9fa;
147
- border: 1px solid #e9ecef;
148
- border-radius: 6px;
149
- padding: 20px;
150
- margin-top: 20px;
151
- white-space: pre-wrap;
152
- font-family: 'Courier New', monospace;
153
  }
154
 
155
- .chat-messages {
156
- height: 300px;
157
- overflow-y: auto;
158
- border: 1px solid #ddd;
159
- border-radius: 6px;
160
- padding: 15px;
161
- background: #f8f9fa;
162
  }
163
 
164
- .message {
165
- margin-bottom: 10px;
166
- padding: 8px 12px;
167
- border-radius: 12px;
168
- max-width: 80%;
 
169
  }
170
 
171
- .user {
172
- background: #667eea;
173
  color: white;
174
- margin-left: auto;
175
- text-align: right;
 
 
176
  }
177
 
178
- .assistant {
179
- background: #e9ecef;
180
- color: #333;
 
 
 
181
  }
182
 
183
  .status {
184
  background: #d1edff;
185
  border: 1px solid #a8daff;
186
  color: #055160;
187
- padding: 10px;
188
- border-radius: 6px;
189
- margin-bottom: 20px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
190
  }
191
 
192
- .error {
193
- background: #f8d7da;
194
- border: 1px solid #f1aeb5;
195
- color: #721c24;
196
- padding: 10px;
197
  border-radius: 6px;
198
- margin-bottom: 20px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
199
  }
200
  </style>
201
  </head>
202
  <body>
203
  <div class="container">
204
  <div class="header">
205
- <h1>AI Model Runner API</h1>
206
- <p>Multi-purpose AI API for code understanding, dialogue, and reasoning</p>
207
  </div>
208
 
209
  <div class="tabs">
210
- <button class="tab active" onclick="showTab('chat')">Chat</button>
211
- <button class="tab" onclick="showTab('code')">Code Analysis</button>
212
- <button class="tab" onclick="showTab('reasoning')">Reasoning</button>
213
- <button class="tab" onclick="showTab('sentiment')">Sentiment</button>
 
214
  </div>
215
 
216
  <div class="content">
217
- <div id="chat" class="tab-content active">
218
- <div class="form-group">
219
- <label>Message:</label>
220
- <input type="text" id="chatMessage" placeholder="Type your message..." />
 
 
 
 
221
  </div>
222
- <div class="form-group">
223
- <label>Model:</label>
224
- <select id="chatModel">
225
- <option value="microsoft/DialoGPT-medium">DialoGPT-medium</option>
226
- </select>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
227
  </div>
228
- <button class="btn" onclick="sendChat()">Send Message</button>
229
 
230
- <div class="chat-messages" id="chatMessages"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
231
  </div>
232
 
233
- <div id="code" class="tab-content">
234
- <div class="form-group">
235
- <label>Code:</label>
236
- <textarea id="codeInput" placeholder="Enter your code here..."></textarea>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
237
  </div>
238
- <div class="form-group">
239
- <label>Task:</label>
240
- <select id="codeTask">
241
- <option value="explain">Explain</option>
242
- <option value="refactor">Refactor</option>
243
- <option value="debug">Debug</option>
244
- <option value="optimize">Optimize</option>
245
- </select>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
246
  </div>
247
- <div class="form-group">
248
- <label>Language:</label>
249
- <select id="codeLanguage">
250
- <option value="python">Python</option>
251
- <option value="javascript">JavaScript</option>
252
- <option value="java">Java</option>
253
- <option value="cpp">C++</option>
254
- <option value="csharp">C#</option>
255
- </select>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
256
  </div>
257
- <button class="btn" onclick="analyzeCode()">Analyze Code</button>
258
 
259
- <div id="codeResponse" class="response"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
260
  </div>
261
 
262
- <div id="reasoning" class="tab-content">
263
- <div class="form-group">
264
- <label>Problem:</label>
265
- <textarea id="problemInput" placeholder="Describe the problem you want to solve..."></textarea>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
266
  </div>
267
- <div class="form-group">
268
- <label>Context (optional):</label>
269
- <textarea id="contextInput" placeholder="Provide additional context..."></textarea>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
270
  </div>
271
- <div class="form-group">
272
- <label>Number of Steps:</label>
273
- <input type="number" id="stepsInput" value="5" min="1" max="10" />
 
 
 
 
 
 
 
 
 
 
 
 
274
  </div>
275
- <button class="btn" onclick="reasoning()">Analyze Problem</button>
276
 
277
- <div id="reasoningResponse" class="response"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
278
  </div>
279
 
280
- <div id="sentiment" class="tab-content">
281
- <div class="form-group">
282
- <label>Text:</label>
283
- <textarea id="sentimentInput" placeholder="Enter text to analyze sentiment..."></textarea>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
284
  </div>
285
- <button class="btn" onclick="analyzeSentiment()">Analyze Sentiment</button>
286
 
287
- <div id="sentimentResponse" class="response"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
288
  </div>
289
 
290
  <div id="status"></div>
@@ -292,9 +897,6 @@
292
  </div>
293
 
294
  <script>
295
- const API_BASE = window.location.origin;
296
- let chatHistory = [];
297
-
298
  function showTab(tabName) {
299
  // Hide all tabs
300
  document.querySelectorAll('.tab-content').forEach(tab => {
@@ -309,172 +911,109 @@
309
  event.target.classList.add('active');
310
  }
311
 
312
- function showStatus(message, isError = false) {
313
- const statusDiv = document.getElementById('status');
314
- statusDiv.innerHTML = `<div class="${isError ? 'error' : 'status'}">${message}</div>`;
315
- setTimeout(() => {
316
- statusDiv.innerHTML = '';
317
- }, 5000);
318
- }
319
-
320
- async function sendChat() {
321
- const message = document.getElementById('chatMessage').value.trim();
322
- if (!message) return;
323
-
324
- // Add user message to history
325
- chatHistory.push({ role: 'user', content: message });
326
- updateChatDisplay();
327
-
328
- // Clear input
329
- document.getElementById('chatMessage').value = '';
330
 
331
- try {
332
- const response = await fetch(`${API_BASE}/chat`, {
333
- method: 'POST',
334
- headers: { 'Content-Type': 'application/json' },
335
- body: JSON.stringify({
336
- messages: chatHistory,
337
- model: document.getElementById('chatModel').value
338
- })
339
- });
340
-
341
- const data = await response.json();
342
-
343
- if (response.ok) {
344
- chatHistory.push({ role: 'assistant', content: data.response });
345
- updateChatDisplay();
346
- } else {
347
- throw new Error(data.detail || 'Error processing request');
348
- }
349
- } catch (error) {
350
- showStatus('Error: ' + error.message, true);
351
- }
352
- }
353
-
354
- function updateChatDisplay() {
355
- const chatDiv = document.getElementById('chatMessages');
356
- chatDiv.innerHTML = chatHistory.map(msg =>
357
- `<div class="message ${msg.role}">${msg.content}</div>`
358
- ).join('');
359
- chatDiv.scrollTop = chatDiv.scrollHeight;
360
  }
361
 
362
- async function analyzeCode() {
363
- const code = document.getElementById('codeInput').value;
364
- const task = document.getElementById('codeTask').value;
365
- const language = document.getElementById('codeLanguage').value;
366
-
367
- if (!code) {
368
- showStatus('Please enter code to analyze', true);
369
- return;
370
- }
371
-
372
- showStatus('Analyzing code...');
373
-
374
- try {
375
- const response = await fetch(`${API_BASE}/code`, {
376
- method: 'POST',
377
- headers: { 'Content-Type': 'application/json' },
378
- body: JSON.stringify({ code, task, language })
379
- });
380
-
381
- const data = await response.json();
382
-
383
- if (response.ok) {
384
- document.getElementById('codeResponse').textContent = data.result;
385
- showStatus('Code analysis completed');
386
- } else {
387
- throw new Error(data.detail || 'Error processing request');
388
  }
389
- } catch (error) {
390
- showStatus('Error: ' + error.message, true);
391
  }
392
  }
393
-
394
- async function reasoning() {
395
- const problem = document.getElementById('problemInput').value;
396
- const context = document.getElementById('contextInput').value;
397
- const steps = parseInt(document.getElementById('stepsInput').value);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
398
 
399
- if (!problem) {
400
- showStatus('Please enter a problem to analyze', true);
401
- return;
402
- }
403
 
404
- showStatus('Analyzing problem...');
 
 
 
405
 
406
- try {
407
- const response = await fetch(`${API_BASE}/reasoning`, {
408
- method: 'POST',
409
- headers: { 'Content-Type': 'application/json' },
410
- body: JSON.stringify({ problem, context, steps })
411
- });
412
-
413
- const data = await response.json();
414
-
415
- if (response.ok) {
416
- document.getElementById('reasoningResponse').textContent = data.reasoning;
417
- showStatus('Problem analysis completed');
418
- } else {
419
- throw new Error(data.detail || 'Error processing request');
420
- }
421
- } catch (error) {
422
- showStatus('Error: ' + error.message, true);
423
- }
424
- }
425
-
426
- async function analyzeSentiment() {
427
- const text = document.getElementById('sentimentInput').value;
428
 
429
- if (!text) {
430
- showStatus('Please enter text to analyze', true);
431
- return;
432
- }
433
-
434
- showStatus('Analyzing sentiment...');
435
-
436
- try {
437
- const response = await fetch(`${API_BASE}/analyze-sentiment`, {
438
- method: 'POST',
439
- headers: { 'Content-Type': 'application/json' },
440
- body: JSON.stringify({ text })
441
- });
442
-
443
- const data = await response.json();
444
-
445
- if (response.ok) {
446
- const result = `Text: "${data.text}"
447
- Sentiment: ${data.sentiment}
448
- Confidence: ${(data.confidence * 100).toFixed(1)}%
449
- Model: ${data.model}`;
450
- document.getElementById('sentimentResponse').textContent = result;
451
- showStatus('Sentiment analysis completed');
452
- } else {
453
- throw new Error(data.detail || 'Error processing request');
454
- }
455
- } catch (error) {
456
- showStatus('Error: ' + error.message, true);
457
- }
458
  }
459
 
460
- // Handle Enter key in chat input
461
- document.getElementById('chatMessage').addEventListener('keypress', function(e) {
462
- if (e.key === 'Enter') {
463
- sendChat();
464
- }
465
- });
466
-
467
- // Initialize status
468
- fetch(`${API_BASE}/health`)
469
- .then(response => response.json())
470
- .then(data => {
471
- if (data.status === 'healthy') {
472
- showStatus('API is running and ready');
473
- }
474
- })
475
- .catch(() => {
476
- showStatus('Warning: Cannot connect to API', true);
477
- });
 
 
 
 
478
  </script>
479
  </body>
480
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>AI Model Runner - Claude Code Integration Guide</title>
7
  <style>
8
  * {
9
  margin: 0;
 
41
  opacity: 0.9;
42
  }
43
 
44
+ .content {
45
+ background: white;
46
+ border-radius: 15px;
47
+ padding: 30px;
48
+ box-shadow: 0 8px 16px rgba(0,0,0,0.1);
49
+ margin-bottom: 20px;
50
+ }
51
+
52
  .tabs {
53
  display: flex;
54
+ background: #f8f9fa;
55
  border-radius: 10px 10px 0 0;
56
  overflow: hidden;
 
57
  }
58
 
59
  .tab {
 
80
  background: white;
81
  }
82
 
 
 
 
 
 
 
 
83
  .tab-content {
84
  display: none;
85
+ padding-top: 20px;
86
  }
87
 
88
  .tab-content.active {
89
  display: block;
90
  }
91
 
92
+ .code-block {
93
+ background: #2d3748;
94
+ color: #e2e8f0;
95
+ padding: 20px;
96
+ border-radius: 8px;
97
+ font-family: 'Courier New', monospace;
98
+ font-size: 14px;
99
+ overflow-x: auto;
100
+ margin: 15px 0;
101
  }
102
 
103
+ .code-block .copy-btn {
104
+ background: #4299e1;
105
+ color: white;
106
+ border: none;
107
+ padding: 5px 10px;
108
+ border-radius: 4px;
109
+ cursor: pointer;
110
+ float: right;
111
+ font-size: 12px;
112
  }
113
 
114
+ .step {
115
+ background: #f7fafc;
116
+ border-left: 4px solid #667eea;
117
+ padding: 15px;
118
+ margin: 10px 0;
119
+ border-radius: 0 8px 8px 0;
120
  }
121
 
122
+ .step h4 {
123
+ color: #667eea;
124
+ margin-bottom: 8px;
125
  }
126
 
127
  .btn {
 
133
  cursor: pointer;
134
  font-size: 16px;
135
  transition: background 0.3s;
136
+ margin: 10px 5px;
137
  }
138
 
139
  .btn:hover {
 
145
  cursor: not-allowed;
146
  }
147
 
148
+ .btn-secondary {
149
+ background: #718096;
 
 
 
 
 
 
150
  }
151
 
152
+ .btn-secondary:hover {
153
+ background: #4a5568;
 
 
 
 
 
154
  }
155
 
156
+ .api-endpoint {
157
+ background: #edf2f7;
158
+ border: 1px solid #e2e8f0;
159
+ border-radius: 8px;
160
+ padding: 15px;
161
+ margin: 10px 0;
162
  }
163
 
164
+ .api-endpoint .method {
165
+ background: #48bb78;
166
  color: white;
167
+ padding: 2px 8px;
168
+ border-radius: 4px;
169
+ font-size: 12px;
170
+ font-weight: bold;
171
  }
172
 
173
+ .api-endpoint .method.get {
174
+ background: #4299e1;
175
+ }
176
+
177
+ .api-endpoint .method.post {
178
+ background: #48bb78;
179
  }
180
 
181
  .status {
182
  background: #d1edff;
183
  border: 1px solid #a8daff;
184
  color: #055160;
185
+ padding: 15px;
186
+ border-radius: 8px;
187
+ margin: 20px 0;
188
+ }
189
+
190
+ .warning {
191
+ background: #fef3c7;
192
+ border: 1px solid #fde68a;
193
+ color: #92400e;
194
+ padding: 15px;
195
+ border-radius: 8px;
196
+ margin: 20px 0;
197
+ }
198
+
199
+ .success {
200
+ background: #d1fae5;
201
+ border: 1px solid #a7f3d0;
202
+ color: #065f46;
203
+ padding: 15px;
204
+ border-radius: 8px;
205
+ margin: 20px 0;
206
+ }
207
+
208
+ .grid {
209
+ display: grid;
210
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
211
+ gap: 20px;
212
+ margin: 20px 0;
213
+ }
214
+
215
+ .card {
216
+ background: #f7fafc;
217
+ border: 1px solid #e2e8f0;
218
+ border-radius: 8px;
219
+ padding: 20px;
220
+ }
221
+
222
+ .card h3 {
223
+ color: #667eea;
224
+ margin-bottom: 10px;
225
+ }
226
+
227
+ pre {
228
+ white-space: pre-wrap;
229
+ word-wrap: break-word;
230
  }
231
 
232
+ .curl-example {
233
+ background: #2d3748;
234
+ color: #e2e8f0;
235
+ padding: 15px;
 
236
  border-radius: 6px;
237
+ font-family: monospace;
238
+ font-size: 13px;
239
+ overflow-x: auto;
240
+ }
241
+
242
+ .setup-section {
243
+ background: #f0fff4;
244
+ border: 2px dashed #68d391;
245
+ border-radius: 10px;
246
+ padding: 20px;
247
+ margin: 20px 0;
248
+ }
249
+
250
+ .setup-section h3 {
251
+ color: #38a169;
252
+ margin-bottom: 15px;
253
  }
254
  </style>
255
  </head>
256
  <body>
257
  <div class="container">
258
  <div class="header">
259
+ <h1>🤖 AI Model Runner</h1>
260
+ <p>Claude Code Integration Guide & API Documentation</p>
261
  </div>
262
 
263
  <div class="tabs">
264
+ <button class="tab active" onclick="showTab('setup')">🚀 Setup</button>
265
+ <button class="tab" onclick="showTab('config')">⚙️ Configuration</button>
266
+ <button class="tab" onclick="showTab('api')">📡 API Reference</button>
267
+ <button class="tab" onclick="showTab('examples')">💡 Examples</button>
268
+ <button class="tab" onclick="showTab('troubleshooting')">🔧 Troubleshooting</button>
269
  </div>
270
 
271
  <div class="content">
272
+ <!-- Setup Tab -->
273
+ <div id="setup" class="tab-content active">
274
+ <h2>🚀 Quick Setup Guide</h2>
275
+
276
+ <div class="status">
277
+ <strong>⚠️ Important:</strong> Your Hugging Face Space may still be building.
278
+ Once ready, the API will be available at:
279
+ <code>https://sheikhcoders-ai-model-runner.hf.space</code>
280
  </div>
281
+
282
+ <h3>Step 1: Locate Your Claude Code Settings</h3>
283
+ <div class="step">
284
+ <h4>Find the settings file</h4>
285
+ <p>The Claude Code settings file is located at:</p>
286
+ <div class="code-block">
287
+ <button class="copy-btn" onclick="copyToClipboard('~/.claude/settings.json')">Copy</button>
288
+ ~/.claude/settings.json
289
+ </div>
290
+ <p><strong>macOS/Linux:</strong> <code>~/.claude/settings.json</code></p>
291
+ <p><strong>Windows:</strong> <code>%USERPROFILE%\.claude\settings.json</code></p>
292
+ </div>
293
+
294
+ <h3>Step 2: Add AI Model Runner Configuration</h3>
295
+ <div class="step">
296
+ <h4>Basic Configuration</h4>
297
+ <p>Add the following to your settings.json file:</p>
298
+ <div class="code-block">
299
+ <button class="copy-btn" onclick="copyToClipboard('basic-config')">Copy</button>
300
+ <div id="basic-config">
301
+ {
302
+ "claude": {
303
+ "api": {
304
+ "endpoints": {
305
+ "ai_model_runner": {
306
+ "url": "https://sheikhcoders-ai-model-runner.hf.space",
307
+ "description": "AI Model Runner - Code analysis, dialogue, and reasoning",
308
+ "capabilities": {
309
+ "code_analysis": ["explain", "refactor", "debug", "optimize"],
310
+ "dialogue": "microsoft/DialoGPT-medium",
311
+ "reasoning": "step-by-step problem solving",
312
+ "sentiment": "text sentiment analysis"
313
+ }
314
+ }
315
+ }
316
+ }
317
+ }
318
+ }
319
+ </div>
320
+ </div>
321
  </div>
 
322
 
323
+ <h3>Step 3: Test the Connection</h3>
324
+ <div class="step">
325
+ <h4>Verify the API is working</h4>
326
+ <p>Run this command to test connectivity:</p>
327
+ <div class="curl-example">
328
+ curl https://sheikhcoders-ai-model-runner.hf.space/health
329
+ </div>
330
+ </div>
331
+
332
+ <div class="setup-section">
333
+ <h3>🛠️ Automated Setup Script</h3>
334
+ <p>Run this script to automatically configure your Claude Code integration:</p>
335
+
336
+ <h4>Python Script</h4>
337
+ <div class="code-block">
338
+ <button class="copy-btn" onclick="copyToClipboard('python-setup')">Copy</button>
339
+ <div id="python-setup">
340
+ import os
341
+ import json
342
+
343
+ # Create settings directory
344
+ settings_dir = os.path.expanduser("~/.claude")
345
+ os.makedirs(settings_dir, exist_ok=True)
346
+
347
+ # Configuration
348
+ config = {
349
+ "claude": {
350
+ "api": {
351
+ "endpoints": {
352
+ "ai_model_runner": {
353
+ "url": "https://sheikhcoders-ai-model-runner.hf.space",
354
+ "description": "AI Model Runner - Code analysis, dialogue, and reasoning"
355
+ }
356
+ }
357
+ }
358
+ }
359
+ }
360
+
361
+ # Save settings
362
+ settings_file = os.path.join(settings_dir, "settings.json")
363
+ with open(settings_file, 'w') as f:
364
+ json.dump(config, f, indent=2)
365
+
366
+ print(f"✅ Configuration saved to: {settings_file}")
367
+ </div>
368
+ </div>
369
+
370
+ <h4>Shell Script (Bash)</h4>
371
+ <div class="code-block">
372
+ <button class="copy-btn" onclick="copyToClipboard('bash-setup')">Copy</button>
373
+ <div id="bash-setup">
374
+ #!/bin/bash
375
+ mkdir -p ~/.claude
376
+ cat > ~/.claude/settings.json << 'EOF'
377
+ {
378
+ "claude": {
379
+ "api": {
380
+ "endpoints": {
381
+ "ai_model_runner": {
382
+ "url": "https://sheikhcoders-ai-model-runner.hf.space",
383
+ "description": "AI Model Runner - Code analysis, dialogue, and reasoning"
384
+ }
385
+ }
386
+ }
387
+ }
388
+ }
389
+ EOF
390
+ echo "✅ Configuration created at ~/.claude/settings.json"
391
+ </div>
392
+ </div>
393
+
394
+ <button class="btn" onclick="downloadSetupScripts()">📥 Download Setup Scripts</button>
395
+ </div>
396
  </div>
397
 
398
+ <!-- Configuration Tab -->
399
+ <div id="config" class="tab-content">
400
+ <h2>⚙️ Advanced Configuration</h2>
401
+
402
+ <h3>Basic Endpoint Configuration</h3>
403
+ <div class="code-block">
404
+ <button class="copy-btn" onclick="copyToClipboard('basic-endpoint')">Copy</button>
405
+ <div id="basic-endpoint">
406
+ {
407
+ "claude": {
408
+ "api": {
409
+ "endpoints": {
410
+ "ai_model_runner": {
411
+ "url": "https://sheikhcoders-ai-model-runner.hf.space",
412
+ "description": "AI Model Runner - All AI capabilities"
413
+ }
414
+ }
415
+ }
416
+ }
417
+ }
418
+ </div>
419
  </div>
420
+
421
+ <h3>Code Analysis Configuration</h3>
422
+ <div class="code-block">
423
+ <button class="copy-btn" onclick="copyToClipboard('code-config')">Copy</button>
424
+ <div id="code-config">
425
+ {
426
+ "claude": {
427
+ "api": {
428
+ "endpoints": {
429
+ "ai_model_runner": {
430
+ "url": "https://sheikhcoders-ai-model-runner.hf.space",
431
+ "description": "AI Model Runner - Code understanding",
432
+ "capabilities": {
433
+ "code_analysis": {
434
+ "tasks": ["explain", "refactor", "debug", "optimize"],
435
+ "supported_languages": ["python", "javascript", "java", "cpp", "csharp"]
436
+ }
437
+ }
438
+ }
439
+ }
440
+ }
441
+ }
442
+ }
443
+ </div>
444
  </div>
445
+
446
+ <h3>Dialogue System Configuration</h3>
447
+ <div class="code-block">
448
+ <button class="copy-btn" onclick="copyToClipboard('dialogue-config')">Copy</button>
449
+ <div id="dialogue-config">
450
+ {
451
+ "claude": {
452
+ "api": {
453
+ "endpoints": {
454
+ "ai_model_runner": {
455
+ "url": "https://sheikhcoders-ai-model-runner.hf.space",
456
+ "description": "AI Model Runner - Multi-turn dialogue",
457
+ "context": {
458
+ "model": "microsoft/DialoGPT-medium",
459
+ "max_length": 100,
460
+ "temperature": 0.7
461
+ }
462
+ }
463
+ }
464
+ }
465
+ }
466
+ }
467
+ </div>
468
  </div>
 
469
 
470
+ <h3>Complete Integration Configuration</h3>
471
+ <div class="code-block">
472
+ <button class="copy-btn" onclick="copyToClipboard('complete-config')">Copy</button>
473
+ <div id="complete-config">
474
+ {
475
+ "claude": {
476
+ "api": {
477
+ "endpoints": {
478
+ "ai_model_runner": {
479
+ "url": "https://sheikhcoders-ai-model-runner.hf.space",
480
+ "description": "Complete AI Model Runner integration",
481
+ "context": {
482
+ "models": {
483
+ "dialogue": "microsoft/DialoGPT-medium",
484
+ "text_generation": "gpt2",
485
+ "sentiment": "distilbert-base-uncased-finetuned-sst-2-english"
486
+ },
487
+ "capabilities": {
488
+ "code_analysis": {
489
+ "tasks": ["explain", "refactor", "debug", "optimize"],
490
+ "languages": ["python", "javascript", "java", "cpp", "csharp"]
491
+ },
492
+ "dialogue": {
493
+ "model": "microsoft/DialoGPT-medium",
494
+ "max_length": 100,
495
+ "temperature": 0.7
496
+ },
497
+ "reasoning": {
498
+ "max_steps": 5
499
+ }
500
+ }
501
+ }
502
+ }
503
+ }
504
+ }
505
+ }
506
+ }
507
+ </div>
508
+ </div>
509
  </div>
510
 
511
+ <!-- API Reference Tab -->
512
+ <div id="api" class="tab-content">
513
+ <h2>📡 API Reference</h2>
514
+
515
+ <h3>Core Endpoints</h3>
516
+
517
+ <div class="api-endpoint">
518
+ <div style="display: flex; align-items: center; margin-bottom: 10px;">
519
+ <span class="method get">GET</span>
520
+ <h4 style="margin-left: 10px; margin-bottom: 0;">/health</h4>
521
+ </div>
522
+ <p>Check API health and model status</p>
523
+ <p><strong>Response:</strong></p>
524
+ <div class="code-block">
525
+ {
526
+ "status": "healthy",
527
+ "models_loaded": 3
528
+ }
529
+ </div>
530
+ </div>
531
+
532
+ <div class="api-endpoint">
533
+ <div style="display: flex; align-items: center; margin-bottom: 10px;">
534
+ <span class="method get">GET</span>
535
+ <h4 style="margin-left: 10px; margin-bottom: 0;">/models</h4>
536
+ </div>
537
+ <p>List available AI models</p>
538
  </div>
539
+
540
+ <div class="api-endpoint">
541
+ <div style="display: flex; align-items: center; margin-bottom: 10px;">
542
+ <span class="method post">POST</span>
543
+ <h4 style="margin-left: 10px; margin-bottom: 0;">/chat</h4>
544
+ </div>
545
+ <p>Multi-turn dialogue with AI</p>
546
+ <p><strong>Request Body:</strong></p>
547
+ <div class="code-block">
548
+ {
549
+ "messages": [
550
+ {"role": "user", "content": "Hello!"}
551
+ ],
552
+ "model": "microsoft/DialoGPT-medium",
553
+ "max_length": 100,
554
+ "temperature": 0.7
555
+ }
556
+ </div>
557
  </div>
558
+
559
+ <div class="api-endpoint">
560
+ <div style="display: flex; align-items: center; margin-bottom: 10px;">
561
+ <span class="method post">POST</span>
562
+ <h4 style="margin-left: 10px; margin-bottom: 0;">/code</h4>
563
+ </div>
564
+ <p>Analyze code (explain, refactor, debug, optimize)</p>
565
+ <p><strong>Request Body:</strong></p>
566
+ <div class="code-block">
567
+ {
568
+ "code": "def hello(): print('world')",
569
+ "task": "explain",
570
+ "language": "python"
571
+ }
572
+ </div>
573
  </div>
 
574
 
575
+ <div class="api-endpoint">
576
+ <div style="display: flex; align-items: center; margin-bottom: 10px;">
577
+ <span class="method post">POST</span>
578
+ <h4 style="margin-left: 10px; margin-bottom: 0;">/reasoning</h4>
579
+ </div>
580
+ <p>Step-by-step problem solving</p>
581
+ </div>
582
+
583
+ <div class="api-endpoint">
584
+ <div style="display: flex; align-items: center; margin-bottom: 10px;">
585
+ <span class="method post">POST</span>
586
+ <h4 style="margin-left: 10px; margin-bottom: 0;">/analyze-sentiment</h4>
587
+ </div>
588
+ <p>Analyze text sentiment</p>
589
+ </div>
590
+
591
+ <h3>cURL Examples</h3>
592
+
593
+ <h4>Health Check</h4>
594
+ <div class="curl-example">
595
+ curl https://sheikhcoders-ai-model-runner.hf.space/health
596
+ </div>
597
+
598
+ <h4>Code Analysis</h4>
599
+ <div class="curl-example">
600
+ curl -X POST https://sheikhcoders-ai-model-runner.hf.space/code \
601
+ -H "Content-Type: application/json" \
602
+ -d '{"code": "def hello(): return \"world\"", "task": "explain", "language": "python"}'
603
+ </div>
604
+
605
+ <h4>Chat</h4>
606
+ <div class="curl-example">
607
+ curl -X POST https://sheikhcoders-ai-model-runner.hf.space/chat \
608
+ -H "Content-Type: application/json" \
609
+ -d '{"messages": [{"role": "user", "content": "Hello!"}]}'
610
+ </div>
611
+ </div>
612
+
613
+ <!-- Examples Tab -->
614
+ <div id="examples" class="tab-content">
615
+ <h2>💡 Usage Examples</h2>
616
+
617
+ <h3>Python Integration Example</h3>
618
+ <div class="code-block">
619
+ <button class="copy-btn" onclick="copyToClipboard('python-example')">Copy</button>
620
+ <div id="python-example">
621
+ import requests
622
+
623
+ class AIIntegrator:
624
+ def __init__(self, base_url="https://sheikhcoders-ai-model-runner.hf.space"):
625
+ self.base_url = base_url
626
+
627
+ def health_check(self):
628
+ response = requests.get(f"{self.base_url}/health")
629
+ return response.json()
630
+
631
+ def analyze_code(self, code, task="explain", language="python"):
632
+ data = {
633
+ "code": code,
634
+ "task": task,
635
+ "language": language
636
+ }
637
+ response = requests.post(f"{self.base_url}/code", json=data)
638
+ return response.json()
639
+
640
+ def chat(self, messages, model="microsoft/DialoGPT-medium"):
641
+ data = {
642
+ "messages": messages,
643
+ "model": model
644
+ }
645
+ response = requests.post(f"{self.base_url}/chat", json=data)
646
+ return response.json()
647
+
648
+ # Usage
649
+ integrator = AIIntegrator()
650
+
651
+ # Check health
652
+ print("Health:", integrator.health_check())
653
+
654
+ # Analyze code
655
+ code_analysis = integrator.analyze_code(
656
+ "def fibonacci(n): return [fib(i) for i in range(n)]",
657
+ task="explain",
658
+ language="python"
659
+ )
660
+ print("Analysis:", code_analysis)
661
+ </div>
662
+ </div>
663
+
664
+ <h3>JavaScript Integration Example</h3>
665
+ <div class="code-block">
666
+ <button class="copy-btn" onclick="copyToClipboard('js-example')">Copy</button>
667
+ <div id="js-example">
668
+ class AIIntegrator {
669
+ constructor(baseUrl = "https://sheikhcoders-ai-model-runner.hf.space") {
670
+ this.baseUrl = baseUrl;
671
+ }
672
+
673
+ async healthCheck() {
674
+ const response = await fetch(`${this.baseUrl}/health`);
675
+ return response.json();
676
+ }
677
+
678
+ async analyzeCode(code, task = "explain", language = "python") {
679
+ const data = { code, task, language };
680
+ const response = await fetch(`${this.baseUrl}/code`, {
681
+ method: 'POST',
682
+ headers: { 'Content-Type': 'application/json' },
683
+ body: JSON.stringify(data)
684
+ });
685
+ return response.json();
686
+ }
687
+
688
+ async chat(messages, model = "microsoft/DialoGPT-medium") {
689
+ const data = { messages, model };
690
+ const response = await fetch(`${this.baseUrl}/chat`, {
691
+ method: 'POST',
692
+ headers: { 'Content-Type': 'application/json' },
693
+ body: JSON.stringify(data)
694
+ });
695
+ return response.json();
696
+ }
697
+ }
698
+
699
+ // Usage
700
+ const integrator = new AIIntegrator();
701
+
702
+ integrator.healthCheck().then(result => {
703
+ console.log("Health:", result);
704
+ });
705
+
706
+ integrator.analyzeCode("console.log('Hello World')", "explain", "javascript")
707
+ .then(result => {
708
+ console.log("Analysis:", result);
709
+ });
710
+ </div>
711
+ </div>
712
+
713
+ <h3>Claude Code Integration Script</h3>
714
+ <div class="code-block">
715
+ <button class="copy-btn" onclick="copyToClipboard('claude-integration')">Copy</button>
716
+ <div id="claude-integration">
717
+ # Claude Code Integration Script
718
+ # Save as: ~/setup-claude-integration.py
719
+
720
+ import os
721
+ import json
722
+ import shutil
723
+
724
+ def setup_claude_integration():
725
+ """Setup Claude Code with AI Model Runner"""
726
+
727
+ # Create settings directory
728
+ settings_dir = os.path.expanduser("~/.claude")
729
+ if not os.path.exists(settings_dir):
730
+ os.makedirs(settings_dir)
731
+ print(f"📁 Created directory: {settings_dir}")
732
+
733
+ # Backup existing settings
734
+ settings_file = os.path.join(settings_dir, "settings.json")
735
+ if os.path.exists(settings_file):
736
+ backup_file = settings_file + ".backup"
737
+ shutil.copy2(settings_file, backup_file)
738
+ print(f"💾 Backed up existing settings to: {backup_file}")
739
+
740
+ # Load existing settings
741
+ with open(settings_file, 'r') as f:
742
+ settings = json.load(f)
743
+ else:
744
+ settings = {}
745
+
746
+ # Add AI Model Runner configuration
747
+ if "claude" not in settings:
748
+ settings["claude"] = {}
749
+ if "api" not in settings["claude"]:
750
+ settings["claude"]["api"] = {}
751
+ if "endpoints" not in settings["claude"]["api"]:
752
+ settings["claude"]["api"]["endpoints"] = {}
753
+
754
+ settings["claude"]["api"]["endpoints"]["ai_model_runner"] = {
755
+ "url": "https://sheikhcoders-ai-model-runner.hf.space",
756
+ "description": "AI Model Runner - Code analysis, dialogue, and reasoning",
757
+ "capabilities": {
758
+ "code_analysis": ["explain", "refactor", "debug", "optimize"],
759
+ "dialogue": "microsoft/DialoGPT-medium",
760
+ "reasoning": "step-by-step problem solving",
761
+ "sentiment": "text sentiment analysis"
762
+ }
763
+ }
764
+
765
+ # Save settings
766
+ with open(settings_file, 'w') as f:
767
+ json.dump(settings, f, indent=2)
768
+
769
+ print(f"✅ Configuration saved to: {settings_file}")
770
+ print("🚀 AI Model Runner is now integrated with Claude Code!")
771
+ print(f"📡 API Endpoint: https://sheikhcoders-ai-model-runner.hf.space")
772
+
773
+ if __name__ == "__main__":
774
+ setup_claude_integration()
775
+ </div>
776
+ </div>
777
  </div>
778
 
779
+ <!-- Troubleshooting Tab -->
780
+ <div id="troubleshooting" class="tab-content">
781
+ <h2>🔧 Troubleshooting</h2>
782
+
783
+ <h3>Common Issues</h3>
784
+
785
+ <div class="grid">
786
+ <div class="card">
787
+ <h3>🚫 Space Not Loading</h3>
788
+ <p><strong>Issue:</strong> "Preparing Space" message persists</p>
789
+ <p><strong>Solution:</strong></p>
790
+ <ul>
791
+ <li>Wait 2-5 minutes for initial build</li>
792
+ <li>Check Hugging Face Space logs</li>
793
+ <li>Verify no syntax errors in code</li>
794
+ </ul>
795
+ </div>
796
+
797
+ <div class="card">
798
+ <h3>🔌 Connection Timeout</h3>
799
+ <p><strong>Issue:</strong> Requests timeout</p>
800
+ <p><strong>Solution:</strong></p>
801
+ <ul>
802
+ <li>First load takes longer (model loading)</li>
803
+ <li>Check internet connection</li>
804
+ <li>Try again in a few minutes</li>
805
+ </ul>
806
+ </div>
807
+
808
+ <div class="card">
809
+ <h3>📁 Settings File Not Found</h3>
810
+ <p><strong>Issue:</strong> ~/.claude/settings.json doesn't exist</p>
811
+ <p><strong>Solution:</strong></p>
812
+ <ul>
813
+ <li>Create the directory: mkdir -p ~/.claude</li>
814
+ <li>Copy the configuration manually</li>
815
+ <li>Use the setup script</li>
816
+ </ul>
817
+ </div>
818
+
819
+ <div class="card">
820
+ <h3>❌ API Returns 404</h3>
821
+ <p><strong>Issue:</strong> Endpoint not found</p>
822
+ <p><strong>Solution:</strong></p>
823
+ <ul>
824
+ <li>Verify space URL is correct</li>
825
+ <li>Check space is fully built</li>
826
+ <li>Use correct endpoint paths</li>
827
+ </ul>
828
+ </div>
829
+ </div>
830
+
831
+ <h3>Testing Your Setup</h3>
832
+
833
+ <div class="step">
834
+ <h4>1. Check API Health</h4>
835
+ <div class="curl-example">
836
+ curl https://sheikhcoders-ai-model-runner.hf.space/health
837
+ </div>
838
+ <p>Expected response: <code>{"status": "healthy"}</code></p>
839
  </div>
 
840
 
841
+ <div class="step">
842
+ <h4>2. Test Code Analysis</h4>
843
+ <div class="curl-example">
844
+ curl -X POST https://sheikhcoders-ai-model-runner.hf.space/code \
845
+ -H "Content-Type: application/json" \
846
+ -d '{"code": "print(\"Hello World\")", "task": "explain"}'
847
+ </div>
848
+ </div>
849
+
850
+ <div class="step">
851
+ <h4>3. Verify Settings File</h4>
852
+ <div class="code-block">
853
+ cat ~/.claude/settings.json
854
+ </div>
855
+ <p>Look for the "ai_model_runner" endpoint configuration</p>
856
+ </div>
857
+
858
+ <div class="warning">
859
+ <h4>⚠️ Performance Notes</h4>
860
+ <ul>
861
+ <li><strong>First Load:</strong> 30-60 seconds (model loading)</li>
862
+ <li><strong>Subsequent Requests:</strong> 2-5 seconds (cached models)</li>
863
+ <li><strong>Model Loading:</strong> Automatically handled on startup</li>
864
+ <li><strong>Graceful Fallbacks:</strong> Mock responses if models fail</li>
865
+ </ul>
866
+ </div>
867
+
868
+ <div class="success">
869
+ <h4>✅ Success Indicators</h4>
870
+ <ul>
871
+ <li>Health check returns "healthy" status</li>
872
+ <li>Code analysis returns detailed explanations</li>
873
+ <li>Chat responses are coherent</li>
874
+ <li>All endpoints return proper JSON</li>
875
+ </ul>
876
+ </div>
877
+
878
+ <h3>Debugging Commands</h3>
879
+ <div class="code-block">
880
+ # Check space status
881
+ curl -I https://sheikhcoders-ai-model-runner.hf.space/
882
+
883
+ # List available endpoints
884
+ curl https://sheikhcoders-ai-model-runner.hf.space/
885
+
886
+ # Test specific endpoint
887
+ curl -X GET https://sheikhcoders-ai-model-runner.hf.space/models
888
+
889
+ # Check settings file
890
+ ls -la ~/.claude/
891
+ cat ~/.claude/settings.json
892
+ </div>
893
  </div>
894
 
895
  <div id="status"></div>
 
897
  </div>
898
 
899
  <script>
 
 
 
900
  function showTab(tabName) {
901
  // Hide all tabs
902
  document.querySelectorAll('.tab-content').forEach(tab => {
 
911
  event.target.classList.add('active');
912
  }
913
 
914
+ function copyToClipboard(elementId) {
915
+ const element = document.getElementById(elementId);
916
+ const text = element.textContent;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
917
 
918
+ navigator.clipboard.writeText(text).then(() => {
919
+ showStatus('Copied to clipboard!', false);
920
+ }).catch(err => {
921
+ console.error('Failed to copy: ', err);
922
+ showStatus('Failed to copy to clipboard', true);
923
+ });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
924
  }
925
 
926
+ function downloadSetupScripts() {
927
+ const pythonScript = `import os
928
+ import json
929
+
930
+ # Create settings directory
931
+ settings_dir = os.path.expanduser("~/.claude")
932
+ os.makedirs(settings_dir, exist_ok=True)
933
+
934
+ # Configuration
935
+ config = {
936
+ "claude": {
937
+ "api": {
938
+ "endpoints": {
939
+ "ai_model_runner": {
940
+ "url": "https://sheikhcoders-ai-model-runner.hf.space",
941
+ "description": "AI Model Runner - Code analysis, dialogue, and reasoning"
 
 
 
 
 
 
 
 
 
 
942
  }
 
 
943
  }
944
  }
945
+ }
946
+ }
947
+
948
+ # Save settings
949
+ settings_file = os.path.join(settings_dir, "settings.json")
950
+ with open(settings_file, 'w') as f:
951
+ json.dump(config, f, indent=2)
952
+
953
+ print(f"✅ Configuration saved to: {settings_file}")
954
+ print("🚀 Claude Code integration complete!")`;
955
+
956
+ const bashScript = `#!/bin/bash
957
+ mkdir -p ~/.claude
958
+ cat > ~/.claude/settings.json << 'EOF'
959
+ {
960
+ "claude": {
961
+ "api": {
962
+ "endpoints": {
963
+ "ai_model_runner": {
964
+ "url": "https://sheikhcoders-ai-model-runner.hf.space",
965
+ "description": "AI Model Runner - Code analysis, dialogue, and reasoning"
966
+ }
967
+ }
968
+ }
969
+ }
970
+ }
971
+ EOF
972
+ echo "✅ Configuration created at ~/.claude/settings.json"
973
+ echo "🚀 Claude Code integration complete!"`;
974
+
975
+ // Create download links
976
+ const pythonBlob = new Blob([pythonScript], {type: 'text/x-python'});
977
+ const bashBlob = new Blob([bashScript], {type: 'text/x-shellscript'});
978
 
979
+ const pythonUrl = URL.createObjectURL(pythonBlob);
980
+ const bashUrl = URL.createObjectURL(bashBlob);
 
 
981
 
982
+ const a1 = document.createElement('a');
983
+ a1.href = pythonUrl;
984
+ a1.download = 'setup-claude-integration.py';
985
+ a1.click();
986
 
987
+ const a2 = document.createElement('a');
988
+ a2.href = bashUrl;
989
+ a2.download = 'setup-claude-integration.sh';
990
+ a2.click();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
991
 
992
+ showStatus('Setup scripts downloaded!', false);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
993
  }
994
 
995
+ function showStatus(message, isError = false) {
996
+ const statusDiv = document.getElementById('status');
997
+ statusDiv.innerHTML = `<div class="${isError ? 'warning' : 'success'}" style="position: fixed; top: 20px; right: 20px; z-index: 1000; max-width: 300px;">${message}</div>`;
998
+ setTimeout(() => {
999
+ statusDiv.innerHTML = '';
1000
+ }, 3000);
1001
+ }
1002
+
1003
+ // Check API status on load
1004
+ setTimeout(() => {
1005
+ fetch('https://sheikhcoders-ai-model-runner.hf.space/health')
1006
+ .then(response => {
1007
+ if (response.ok) {
1008
+ showStatus('✅ API is ready!', false);
1009
+ } else {
1010
+ showStatus('⚠️ API is still building. Please wait...', true);
1011
+ }
1012
+ })
1013
+ .catch(() => {
1014
+ showStatus('⚠️ API is still building. Please wait...', true);
1015
+ });
1016
+ }, 2000);
1017
  </script>
1018
  </body>
1019
  </html>