Hugging Face's logo

Spaces:
aegisceo
/
apiingest-lite
Running

App Files Community
aegisceo commited on
Commit
57f951b
·
verified ·
1 Parent(s): 8a421f7

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +140 -88
  2. prompts.txt +2 -1
index.html CHANGED
@@ -20,19 +20,71 @@
20
  .json-viewer {
21
  font-family: 'Courier New', monospace;
22
  font-size: 0.9rem;
23
- background-color: #1E293B;
24
  border-radius: 0.5rem;
25
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
26
  </style>
27
  </head>
28
- <body class="bg-gray-100 min-h-screen">
29
  <div class="container mx-auto px-4 py-8 max-w-5xl">
30
  <!-- Header -->
31
  <header class="mb-8 text-center">
32
- <h1 class="text-3xl font-bold text-gray-800">
33
- <span class="text-blue-600">API</span> Ingestion Tool <span class="text-gray-500">for LLMs</span>
34
  </h1>
35
- <p class="text-gray-600 mt-2">Automate API documentation ingestion for your large language models</p>
36
  </header>
37
 
38
  <!-- Main Content -->
@@ -40,19 +92,19 @@
40
  <!-- Left Panel - API Configuration -->
41
  <div class="md:col-span-3 space-y-6">
42
  <!-- API URL Input -->
43
- <div class="bg-white rounded-lg shadow p-6">
44
- <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
45
- <i class="fas fa-link mr-2 text-blue-500"></i>
46
  API Configuration
47
  </h2>
48
  <div class="space-y-4">
49
  <div>
50
- <label class="block text-sm font-medium text-gray-700 mb-1">API Endpoint URL</label>
51
  <div class="flex">
52
  <input
53
  type="text"
54
  placeholder="https://api.example.com/v1"
55
- class="flex-grow px-4 py-2 border border-gray-300 rounded-l-md focus:ring-blue-500 focus:border-blue-500"
56
  id="apiUrl">
57
  <button
58
  class="px-4 py-2 bg-blue-600 text-white rounded-r-md hover:bg-blue-700 transition"
@@ -63,32 +115,32 @@
63
  </div>
64
 
65
  <!-- Authentication Section -->
66
- <div class="pt-4 border-t border-gray-200">
67
- <h3 class="text-lg font-medium text-gray-800 mb-3 flex items-center">
68
- <i class="fas fa-key mr-2 text-yellow-500"></i>
69
  Authentication
70
  </h3>
71
  <div class="space-y-4">
72
- <button id="detectAuthBtn" class="w-full py-2 px-4 bg-yellow-100 text-yellow-800 rounded-md hover:bg-yellow-200 transition flex items-center justify-center">
73
  <i class="fas fa-search mr-2"></i> Detect Authentication Method
74
  </button>
75
 
76
  <div id="authOptions" class="hidden space-y-3">
77
  <div class="flex items-center">
78
- <input type="radio" name="authType" id="noAuth" value="none" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300">
79
- <label for="noAuth" class="ml-2 block text-sm text-gray-700">No Authentication</label>
80
  </div>
81
  <div class="flex items-center">
82
- <input type="radio" name="authType" id="apiKey" value="apiKey" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300">
83
- <label for="apiKey" class="ml-2 block text-sm text-gray-700">API Key</label>
84
  </div>
85
  <div class="flex items-center">
86
- <input type="radio" name="authType" id="oauth" value="oauth" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300">
87
- <label for="oauth" class="ml-2 block text-sm text-gray-700">OAuth</label>
88
  </div>
89
  <div class="flex items-center">
90
- <input type="radio" name="authType" id="basic" value="basic" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300">
91
- <label for="basic" class="ml-2 block text-sm text-gray-700">Basic Auth</label>
92
  </div>
93
  </div>
94
 
@@ -96,16 +148,16 @@
96
  <!-- API Key Auth -->
97
  <div id="apiKeyAuth" class="hidden space-y-2">
98
  <div>
99
- <label class="block text-sm font-medium text-gray-700 mb-1">Key Name</label>
100
- <input type="text" placeholder="X-API-KEY" class="w-full px-4 py-2 border border-gray-300 rounded-md">
101
  </div>
102
  <div>
103
- <label class="block text-sm font-medium text-gray-700 mb-1">API Key</label>
104
- <input type="password" placeholder="Your API Key" class="w-full px-4 py-2 border border-gray-300 rounded-md">
105
  </div>
106
  <div>
107
- <label class="block text-sm font-medium text-gray-700 mb-1">Location</label>
108
- <select class="w-full px-4 py-2 border border-gray-300 rounded-md">
109
  <option>Header</option>
110
  <option>Query Parameter</option>
111
  </select>
@@ -115,28 +167,28 @@
115
  <!-- OAuth Auth -->
116
  <div id="oauthAuth" class="hidden space-y-2">
117
  <div>
118
- <label class="block text-sm font-medium text-gray-700 mb-1">Client ID</label>
119
- <input type="text" placeholder="Your Client ID" class="w-full px-4 py-2 border border-gray-300 rounded-md">
120
  </div>
121
  <div>
122
- <label class="block text-sm font-medium text-gray-700 mb-1">Client Secret</label>
123
- <input type="password" placeholder="Your Client Secret" class="w-full px-4 py-2 border border-gray-300 rounded-md">
124
  </div>
125
  <div>
126
- <label class="block text-sm font-medium text-gray-700 mb-1">Token URL</label>
127
- <input type="text" placeholder="https://api.example.com/oauth/token" class="w-full px-4 py-2 border border-gray-300 rounded-md">
128
  </div>
129
  </div>
130
 
131
  <!-- Basic Auth -->
132
  <div id="basicAuth" class="hidden space-y-2">
133
  <div>
134
- <label class="block text-sm font-medium text-gray-700 mb-1">Username</label>
135
- <input type="text" placeholder="Your username" class="w-full px-4 py-2 border border-gray-300 rounded-md">
136
  </div>
137
  <div>
138
- <label class="block text-sm font-medium text-gray-700 mb-1">Password</label>
139
- <input type="password" placeholder="Your password" class="w-full px-4 py-2 border border-gray-300 rounded-md">
140
  </div>
141
  </div>
142
  </div>
@@ -144,15 +196,15 @@
144
  </div>
145
 
146
  <!-- API Options -->
147
- <div class="pt-4 border-t border-gray-200">
148
- <h3 class="text-lg font-medium text-gray-800 mb-3 flex items-center">
149
- <i class="fas fa-cog mr-2 text-purple-500"></i>
150
  API Options
151
  </h3>
152
  <div class="space-y-4">
153
  <div>
154
- <label class="block text-sm font-medium text-gray-700 mb-1">Maximum Depth</label>
155
- <select class="w-full px-4 py-2 border border-gray-300 rounded-md">
156
  <option value="1">Shallow (1 level)</option>
157
  <option value="2" selected>Standard (2 levels)</option>
158
  <option value="3">Deep (3 levels)</option>
@@ -161,8 +213,8 @@
161
  </div>
162
 
163
  <div>
164
- <label class="block text-sm font-medium text-gray-700 mb-1">Ingestion Approach</label>
165
- <select class="w-full px-4 py-2 border border-gray-300 rounded-md">
166
  <option value="documentation">Documentation Only</option>
167
  <option value="documentation+examples" selected>Documentation + Examples</option>
168
  <option value="documentation+examples+code">Plus Source Code Analysis</option>
@@ -170,8 +222,8 @@
170
  </div>
171
 
172
  <div class="flex items-center">
173
- <input type="checkbox" id="paginationCheck" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300">
174
- <label for="paginationCheck" class="ml-2 block text-sm text-gray-700">Include Pagination Logic</label>
175
  </div>
176
  </div>
177
  </div>
@@ -179,22 +231,22 @@
179
  </div>
180
 
181
  <!-- Detection Buttons -->
182
- <div class="bg-white rounded-lg shadow p-6">
183
- <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
184
- <i class="fas fa-magic mr-2 text-green-500"></i>
185
  Auto-Detection
186
  </h2>
187
  <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
188
- <button id="detectMethodsBtn" class="flex items-center justify-center px-4 py-3 bg-blue-50 text-blue-700 rounded-md hover:bg-blue-100 transition">
189
  <i class="fas fa-random mr-2"></i> Detect Call Methods
190
  </button>
191
- <button id="detectProtocolBtn" class="flex items-center justify-center px-4 py-3 bg-purple-50 text-purple-700 rounded-md hover:bg-purple-100 transition">
192
  <i class="fas fa-plug mr-2"></i> Detect Protocol
193
  </button>
194
- <button id="detectStructureBtn" class="flex items-center justify-center px-4 py-3 bg-indigo-50 text-indigo-700 rounded-md hover:bg-indigo-100 transition">
195
  <i class="fas fa-sitemap mr-2"></i> Detect Structure
196
  </button>
197
- <button id="detectPaginationBtn" class="flex items-center justify-center px-4 py-3 bg-pink-50 text-pink-700 rounded-md hover:bg-pink-100 transition">
198
  <i class="fas fa-copy mr-2"></i> Detect Pagination
199
  </button>
200
  </div>
@@ -204,19 +256,19 @@
204
  <!-- Right Panel - Results and Helper Mode -->
205
  <div class="md:col-span-2 space-y-6">
206
  <!-- Output Console -->
207
- <div class="bg-white rounded-lg shadow h-full">
208
- <div class="p-4 border-b border-gray-200">
209
- <h2 class="text-xl font-semibold text-gray-800 flex items-center">
210
- <i class="fas fa-terminal mr-2 text-gray-500"></i>
211
  Ingestion Console
212
  </h2>
213
  </div>
214
  <div class="p-4">
215
- <div id="consoleOutput" class="h-64 overflow-y-auto scrollbar-hide bg-gray-50 rounded-md p-3 text-sm text-gray-700 font-mono space-y-2">
216
  <div class="text-gray-400">Ready to begin API ingestion process...</div>
217
  </div>
218
  </div>
219
- <div class="p-4 border-t border-gray-200 flex justify-between">
220
  <button id="startIngestionBtn" class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition flex items-center">
221
  <i class="fas fa-play mr-2"></i> Start Ingestion
222
  </button>
@@ -227,11 +279,11 @@
227
  </div>
228
 
229
  <!-- Detected Information -->
230
- <div id="detectedInfo" class="bg-white rounded-lg shadow hidden overflow-hidden">
231
- <div class="p-4 border-b border-gray-200 bg-amber-50">
232
- <h2 class="text-xl font-semibold text-gray-800 flex items-center justify-between">
233
- <span><i class="fas fa-info-circle mr-2 text-amber-500"></i> Detected Information</span>
234
- <button id="closeDetectedInfo" class="text-gray-400 hover:text-gray-600">
235
  <i class="fas fa-times"></i>
236
  </button>
237
  </h2>
@@ -247,32 +299,32 @@
247
  </div>
248
 
249
  <!-- Helper Mode Modal -->
250
- <div id="helperModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
251
- <div class="bg-white rounded-lg shadow-xl w-full max-w-4xl max-h-[90vh] flex flex-col">
252
- <div class="p-4 border-b border-gray-200 bg-indigo-50">
253
- <h2 class="text-xl font-semibold text-gray-800">
254
- <i class="fas fa-robot mr-2 text-indigo-500"></i> API Helper Mode
255
  </h2>
256
  </div>
257
  <div class="flex-1 overflow-hidden flex flex-col">
258
- <div id="chatContainer" class="flex-1 overflow-y-auto p-4 space-y-4 scrollbar-hide bg-gray-50">
259
  <div class="flex justify-start">
260
- <div class="max-w-[80%] bg-indigo-100 text-gray-800 p-3 rounded-lg">
261
  I've successfully ingested the API documentation. How can I help you work with this API?
262
  </div>
263
  </div>
264
  </div>
265
- <div class="p-4 border-t border-gray-200">
266
  <div class="flex">
267
- <input type="text" id="userQuery" placeholder="Ask me anything about this API..." class="flex-grow px-4 py-2 border border-gray-300 rounded-l-md focus:ring-indigo-500 focus:border-indigo-500">
268
  <button id="sendQueryBtn" class="px-4 py-2 bg-indigo-600 text-white rounded-r-md hover:bg-indigo-700 transition">
269
  <i class="fas fa-paper-plane"></i>
270
  </button>
271
  </div>
272
  </div>
273
  </div>
274
- <div class="p-4 border-t border-gray-200 flex justify-end">
275
- <button id="exitHelperBtn" class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300 transition">
276
  Exit Helper Mode
277
  </button>
278
  </div>
@@ -400,7 +452,7 @@
400
 
401
  setTimeout(() => {
402
  logToConsole('Extracting documentation...', 'processing');
403
- }, 5000);
404
 
405
  setTimeout(() => {
406
  logToConsole('Identifying relationships between endpoints...', 'processing');
@@ -508,26 +560,26 @@
508
 
509
  switch(type) {
510
  case 'error':
511
- icon = '<i class="fas fa-exclamation-circle text-red-500 mr-2"></i>';
512
- color = 'text-red-600';
513
  break;
514
  case 'success':
515
- icon = '<i class="fas fa-check-circle text-green-500 mr-2"></i>';
516
- color = 'text-green-600';
517
  break;
518
  case 'processing':
519
- icon = '<i class="fas fa-spinner fa-spin text-blue-500 mr-2"></i>';
520
- color = 'text-blue-600';
521
  break;
522
  default:
523
- icon = '<i class="fas fa-info-circle text-gray-500 mr-2"></i>';
524
- color = 'text-gray-600';
525
  }
526
 
527
  const entry = document.createElement('div');
528
  entry.className = 'flex items-start';
529
  entry.innerHTML = `
530
- <span class="text-xs text-gray-400 mr-2">[${timestamp}]</span>
531
  <span class="${color}">${icon}</span>
532
  <span class="${color} flex-1">${message}</span>
533
  `;
@@ -545,14 +597,14 @@
545
  if (sender === 'user') {
546
  messageDiv.className = 'flex justify-end';
547
  messageDiv.innerHTML = `
548
- <div class="max-w-[80%] bg-blue-600 text-white p-3 rounded-lg">
549
  ${text}
550
  </div>
551
  `;
552
  } else {
553
  messageDiv.className = 'flex justify-start';
554
  messageDiv.innerHTML = `
555
- <div class="max-w-[80%] bg-indigo-100 text-gray-800 p-3 rounded-lg">
556
  ${text}
557
  </div>
558
  `;
 
20
  .json-viewer {
21
  font-family: 'Courier New', monospace;
22
  font-size: 0.9rem;
23
+ background-color: #111827;
24
  border-radius: 0.5rem;
25
  }
26
+ body {
27
+ background-color: #181818;
28
+ color: #e5e7eb;
29
+ }
30
+ .bg-white {
31
+ background-color: #1f2937;
32
+ }
33
+ .text-gray-800 {
34
+ color: #e5e7eb;
35
+ }
36
+ .text-gray-700 {
37
+ color: #d1d5db;
38
+ }
39
+ .text-gray-600 {
40
+ color: #9ca3af;
41
+ }
42
+ .border-gray-200, .border-gray-300 {
43
+ border-color: #374151;
44
+ }
45
+ .bg-gray-100 {
46
+ background-color: #111827;
47
+ }
48
+ .bg-gray-50 {
49
+ background-color: #1f2937;
50
+ }
51
+ .bg-blue-50 {
52
+ background-color: #1e3a8a;
53
+ }
54
+ .bg-indigo-50 {
55
+ background-color: #3730a3;
56
+ }
57
+ .bg-purple-50 {
58
+ background-color: #5b21b6;
59
+ }
60
+ .bg-pink-50 {
61
+ background-color: #9d174d;
62
+ }
63
+ .bg-amber-50 {
64
+ background-color: #78350f;
65
+ }
66
+ .bg-yellow-100 {
67
+ background-color: #854d0e;
68
+ }
69
+ .bg-indigo-100 {
70
+ background-color: #3730a3;
71
+ }
72
+ .bg-indigo-50 {
73
+ background-color: #312e81;
74
+ }
75
+ .text-blue-700, .text-purple-700, .text-indigo-700, .text-pink-700, .text-yellow-800 {
76
+ color: #e5e7eb;
77
+ }
78
  </style>
79
  </head>
80
+ <body class="min-h-screen">
81
  <div class="container mx-auto px-4 py-8 max-w-5xl">
82
  <!-- Header -->
83
  <header class="mb-8 text-center">
84
+ <h1 class="text-3xl font-bold">
85
+ <span class="text-blue-400">API</span> Ingestion Tool <span class="text-gray-400">for LLMs</span>
86
  </h1>
87
+ <p class="text-gray-400 mt-2">Automate API documentation ingestion for your large language models</p>
88
  </header>
89
 
90
  <!-- Main Content -->
 
92
  <!-- Left Panel - API Configuration -->
93
  <div class="md:col-span-3 space-y-6">
94
  <!-- API URL Input -->
95
+ <div class="rounded-lg shadow p-6 bg-gray-800">
96
+ <h2 class="text-xl font-semibold mb-4 flex items-center">
97
+ <i class="fas fa-link mr-2 text-blue-400"></i>
98
  API Configuration
99
  </h2>
100
  <div class="space-y-4">
101
  <div>
102
+ <label class="block text-sm font-medium mb-1">API Endpoint URL</label>
103
  <div class="flex">
104
  <input
105
  type="text"
106
  placeholder="https://api.example.com/v1"
107
+ class="flex-grow px-4 py-2 border border-gray-600 rounded-l-md focus:ring-blue-500 focus:border-blue-500 bg-gray-700 text-white"
108
  id="apiUrl">
109
  <button
110
  class="px-4 py-2 bg-blue-600 text-white rounded-r-md hover:bg-blue-700 transition"
 
115
  </div>
116
 
117
  <!-- Authentication Section -->
118
+ <div class="pt-4 border-t border-gray-600">
119
+ <h3 class="text-lg font-medium mb-3 flex items-center">
120
+ <i class="fas fa-key mr-2 text-yellow-400"></i>
121
  Authentication
122
  </h3>
123
  <div class="space-y-4">
124
+ <button id="detectAuthBtn" class="w-full py-2 px-4 bg-yellow-800 text-yellow-100 rounded-md hover:bg-yellow-700 transition flex items-center justify-center">
125
  <i class="fas fa-search mr-2"></i> Detect Authentication Method
126
  </button>
127
 
128
  <div id="authOptions" class="hidden space-y-3">
129
  <div class="flex items-center">
130
+ <input type="radio" name="authType" id="noAuth" value="none" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-500">
131
+ <label for="noAuth" class="ml-2 block text-sm">No Authentication</label>
132
  </div>
133
  <div class="flex items-center">
134
+ <input type="radio" name="authType" id="apiKey" value="apiKey" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-500">
135
+ <label for="apiKey" class="ml-2 block text-sm">API Key</label>
136
  </div>
137
  <div class="flex items-center">
138
+ <input type="radio" name="authType" id="oauth" value="oauth" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-500">
139
+ <label for="oauth" class="ml-2 block text-sm">OAuth</label>
140
  </div>
141
  <div class="flex items-center">
142
+ <input type="radio" name="authType" id="basic" value="basic" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-500">
143
+ <label for="basic" class="ml-2 block text-sm">Basic Auth</label>
144
  </div>
145
  </div>
146
 
 
148
  <!-- API Key Auth -->
149
  <div id="apiKeyAuth" class="hidden space-y-2">
150
  <div>
151
+ <label class="block text-sm font-medium mb-1">Key Name</label>
152
+ <input type="text" placeholder="X-API-KEY" class="w-full px-4 py-2 border border-gray-600 rounded-md bg-gray-700 text-white">
153
  </div>
154
  <div>
155
+ <label class="block text-sm font-medium mb-1">API Key</label>
156
+ <input type="password" placeholder="Your API Key" class="w-full px-4 py-2 border border-gray-600 rounded-md bg-gray-700 text-white">
157
  </div>
158
  <div>
159
+ <label class="block text-sm font-medium mb-1">Location</label>
160
+ <select class="w-full px-4 py-2 border border-gray-600 rounded-md bg-gray-700 text-white">
161
  <option>Header</option>
162
  <option>Query Parameter</option>
163
  </select>
 
167
  <!-- OAuth Auth -->
168
  <div id="oauthAuth" class="hidden space-y-2">
169
  <div>
170
+ <label class="block text-sm font-medium mb-1">Client ID</label>
171
+ <input type="text" placeholder="Your Client ID" class="w-full px-4 py-2 border border-gray-600 rounded-md bg-gray-700 text-white">
172
  </div>
173
  <div>
174
+ <label class="block text-sm font-medium mb-1">Client Secret</label>
175
+ <input type="password" placeholder="Your Client Secret" class="w-full px-4 py-2 border border-gray-600 rounded-md bg-gray-700 text-white">
176
  </div>
177
  <div>
178
+ <label class="block text-sm font-medium mb-1">Token URL</label>
179
+ <input type="text" placeholder="https://api.example.com/oauth/token" class="w-full px-4 py-2 border border-gray-600 rounded-md bg-gray-700 text-white">
180
  </div>
181
  </div>
182
 
183
  <!-- Basic Auth -->
184
  <div id="basicAuth" class="hidden space-y-2">
185
  <div>
186
+ <label class="block text-sm font-medium mb-1">Username</label>
187
+ <input type="text" placeholder="Your username" class="w-full px-4 py-2 border border-gray-600 rounded-md bg-gray-700 text-white">
188
  </div>
189
  <div>
190
+ <label class="block text-sm font-medium mb-1">Password</label>
191
+ <input type="password" placeholder="Your password" class="w-full px-4 py-2 border border-gray-600 rounded-md bg-gray-700 text-white">
192
  </div>
193
  </div>
194
  </div>
 
196
  </div>
197
 
198
  <!-- API Options -->
199
+ <div class="pt-4 border-t border-gray-600">
200
+ <h3 class="text-lg font-medium mb-3 flex items-center">
201
+ <i class="fas fa-cog mr-2 text-purple-400"></i>
202
  API Options
203
  </h3>
204
  <div class="space-y-4">
205
  <div>
206
+ <label class="block text-sm font-medium mb-1">Maximum Depth</label>
207
+ <select class="w-full px-4 py-2 border border-gray-600 rounded-md bg-gray-700 text-white">
208
  <option value="1">Shallow (1 level)</option>
209
  <option value="2" selected>Standard (2 levels)</option>
210
  <option value="3">Deep (3 levels)</option>
 
213
  </div>
214
 
215
  <div>
216
+ <label class="block text-sm font-medium mb-1">Ingestion Approach</label>
217
+ <select class="w-full px-4 py-2 border border-gray-600 rounded-md bg-gray-700 text-white">
218
  <option value="documentation">Documentation Only</option>
219
  <option value="documentation+examples" selected>Documentation + Examples</option>
220
  <option value="documentation+examples+code">Plus Source Code Analysis</option>
 
222
  </div>
223
 
224
  <div class="flex items-center">
225
+ <input type="checkbox" id="paginationCheck" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-500">
226
+ <label for="paginationCheck" class="ml-2 block text-sm">Include Pagination Logic</label>
227
  </div>
228
  </div>
229
  </div>
 
231
  </div>
232
 
233
  <!-- Detection Buttons -->
234
+ <div class="rounded-lg shadow p-6 bg-gray-800">
235
+ <h2 class="text-xl font-semibold mb-4 flex items-center">
236
+ <i class="fas fa-magic mr-2 text-green-400"></i>
237
  Auto-Detection
238
  </h2>
239
  <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
240
+ <button id="detectMethodsBtn" class="flex items-center justify-center px-4 py-3 bg-blue-900 text-blue-100 rounded-md hover:bg-blue-800 transition">
241
  <i class="fas fa-random mr-2"></i> Detect Call Methods
242
  </button>
243
+ <button id="detectProtocolBtn" class="flex items-center justify-center px-4 py-3 bg-purple-900 text-purple-100 rounded-md hover:bg-purple-800 transition">
244
  <i class="fas fa-plug mr-2"></i> Detect Protocol
245
  </button>
246
+ <button id="detectStructureBtn" class="flex items-center justify-center px-4 py-3 bg-indigo-900 text-indigo-100 rounded-md hover:bg-indigo-800 transition">
247
  <i class="fas fa-sitemap mr-2"></i> Detect Structure
248
  </button>
249
+ <button id="detectPaginationBtn" class="flex items-center justify-center px-4 py-3 bg-pink-900 text-pink-100 rounded-md hover:bg-pink-800 transition">
250
  <i class="fas fa-copy mr-2"></i> Detect Pagination
251
  </button>
252
  </div>
 
256
  <!-- Right Panel - Results and Helper Mode -->
257
  <div class="md:col-span-2 space-y-6">
258
  <!-- Output Console -->
259
+ <div class="rounded-lg shadow h-full bg-gray-800">
260
+ <div class="p-4 border-b border-gray-600">
261
+ <h2 class="text-xl font-semibold flex items-center">
262
+ <i class="fas fa-terminal mr-2 text-gray-400"></i>
263
  Ingestion Console
264
  </h2>
265
  </div>
266
  <div class="p-4">
267
+ <div id="consoleOutput" class="h-64 overflow-y-auto scrollbar-hide bg-gray-700 rounded-md p-3 text-sm font-mono space-y-2">
268
  <div class="text-gray-400">Ready to begin API ingestion process...</div>
269
  </div>
270
  </div>
271
+ <div class="p-4 border-t border-gray-600 flex justify-between">
272
  <button id="startIngestionBtn" class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition flex items-center">
273
  <i class="fas fa-play mr-2"></i> Start Ingestion
274
  </button>
 
279
  </div>
280
 
281
  <!-- Detected Information -->
282
+ <div id="detectedInfo" class="rounded-lg shadow hidden overflow-hidden bg-gray-800">
283
+ <div class="p-4 border-b border-gray-600 bg-amber-900">
284
+ <h2 class="text-xl font-semibold flex items-center justify-between">
285
+ <span><i class="fas fa-info-circle mr-2 text-amber-400"></i> Detected Information</span>
286
+ <button id="closeDetectedInfo" class="text-gray-400 hover:text-gray-200">
287
  <i class="fas fa-times"></i>
288
  </button>
289
  </h2>
 
299
  </div>
300
 
301
  <!-- Helper Mode Modal -->
302
+ <div id="helperModal" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 hidden">
303
+ <div class="bg-gray-800 rounded-lg shadow-xl w-full max-w-4xl max-h-[90vh] flex flex-col">
304
+ <div class="p-4 border-b border-gray-600 bg-indigo-900">
305
+ <h2 class="text-xl font-semibold">
306
+ <i class="fas fa-robot mr-2 text-indigo-400"></i> API Helper Mode
307
  </h2>
308
  </div>
309
  <div class="flex-1 overflow-hidden flex flex-col">
310
+ <div id="chatContainer" class="flex-1 overflow-y-auto p-4 space-y-4 scrollbar-hide bg-gray-700">
311
  <div class="flex justify-start">
312
+ <div class="max-w-[80%] bg-indigo-800 p-3 rounded-lg">
313
  I've successfully ingested the API documentation. How can I help you work with this API?
314
  </div>
315
  </div>
316
  </div>
317
+ <div class="p-4 border-t border-gray-600">
318
  <div class="flex">
319
+ <input type="text" id="userQuery" placeholder="Ask me anything about this API..." class="flex-grow px-4 py-2 border border-gray-600 rounded-l-md focus:ring-indigo-500 focus:border-indigo-500 bg-gray-700 text-white">
320
  <button id="sendQueryBtn" class="px-4 py-2 bg-indigo-600 text-white rounded-r-md hover:bg-indigo-700 transition">
321
  <i class="fas fa-paper-plane"></i>
322
  </button>
323
  </div>
324
  </div>
325
  </div>
326
+ <div class="p-4 border-t border-gray-600 flex justify-end">
327
+ <button id="exitHelperBtn" class="px-4 py-2 bg-gray-700 text-white rounded-md hover:bg-gray-600 transition">
328
  Exit Helper Mode
329
  </button>
330
  </div>
 
452
 
453
  setTimeout(() => {
454
  logToConsole('Extracting documentation...', 'processing');
455
+ ], 5000);
456
 
457
  setTimeout(() => {
458
  logToConsole('Identifying relationships between endpoints...', 'processing');
 
560
 
561
  switch(type) {
562
  case 'error':
563
+ icon = '<i class="fas fa-exclamation-circle text-red-400 mr-2"></i>';
564
+ color = 'text-red-400';
565
  break;
566
  case 'success':
567
+ icon = '<i class="fas fa-check-circle text-green-400 mr-2"></i>';
568
+ color = 'text-green-400';
569
  break;
570
  case 'processing':
571
+ icon = '<i class="fas fa-spinner fa-spin text-blue-400 mr-2"></i>';
572
+ color = 'text-blue-400';
573
  break;
574
  default:
575
+ icon = '<i class="fas fa-info-circle text-gray-400 mr-2"></i>';
576
+ color = 'text-gray-400';
577
  }
578
 
579
  const entry = document.createElement('div');
580
  entry.className = 'flex items-start';
581
  entry.innerHTML = `
582
+ <span class="text-xs text-gray-500 mr-2">[${timestamp}]</span>
583
  <span class="${color}">${icon}</span>
584
  <span class="${color} flex-1">${message}</span>
585
  `;
 
597
  if (sender === 'user') {
598
  messageDiv.className = 'flex justify-end';
599
  messageDiv.innerHTML = `
600
+ <div class="max_w-[80%] bg-blue-600 text-white p-3 rounded-lg">
601
  ${text}
602
  </div>
603
  `;
604
  } else {
605
  messageDiv.className = 'flex justify-start';
606
  messageDiv.innerHTML = `
607
+ <div class="max-w-[80%] bg-indigo-800 text-gray-200 p-3 rounded-lg">
608
  ${text}
609
  </div>
610
  `;
prompts.txt CHANGED
@@ -1 +1,2 @@
1
- I want to create a simple but reliable And adaptable API Ingestion Application for LLMs with a clean minimalized ui that will allow you to define several attributes or options Like what's the end point of the API and do we already have authentication credentials to upload in the form of json or anything else, How far down should the api learning agent go, etc. The idea is that I can point this application at any API, ingest the instructions into my LLM, and, in an automated fashion trust that the large language model is going to determine the structure of the site crawl the site code pull down anything out of the source that they can sna that's helpful. The app should query the user for all fields that change and are normally manually set. Of the UI should have a space for the API URL , it should be able to detect the method for Interacting with the API, It should use protocol and site structure detecting logic so that it can achieve functional pagination (where necesarry) and walk throug the rest of the Do humans containing information that form the functionality of that api. maybe there should be a detect authentication method and detect api call method button or buttons in the ui to ensure everything is the way it should be before trying to launch the helper portion of the app. Once the model has fully ingested the API documentation, exmaples, and methods available it should ask if you want to switch to helper mode. In helper mode a natrural language conversation about what you want to design and build or achieve using the newly ingested API could be. 2 / 2 qwen2.5-coder-14b-instruct-abliterated The app will have a UI that allows users to input an API URL, detect authentication methods, API call methods, and pagination logic. The application should query for any user-provided credentials and then ingest the API documentation and examples.
 
 
1
+ I want to create a simple but reliable And adaptable API Ingestion Application for LLMs with a clean minimalized ui that will allow you to define several attributes or options Like what's the end point of the API and do we already have authentication credentials to upload in the form of json or anything else, How far down should the api learning agent go, etc. The idea is that I can point this application at any API, ingest the instructions into my LLM, and, in an automated fashion trust that the large language model is going to determine the structure of the site crawl the site code pull down anything out of the source that they can sna that's helpful. The app should query the user for all fields that change and are normally manually set. Of the UI should have a space for the API URL , it should be able to detect the method for Interacting with the API, It should use protocol and site structure detecting logic so that it can achieve functional pagination (where necesarry) and walk throug the rest of the Do humans containing information that form the functionality of that api. maybe there should be a detect authentication method and detect api call method button or buttons in the ui to ensure everything is the way it should be before trying to launch the helper portion of the app. Once the model has fully ingested the API documentation, exmaples, and methods available it should ask if you want to switch to helper mode. In helper mode a natrural language conversation about what you want to design and build or achieve using the newly ingested API could be. 2 / 2 qwen2.5-coder-14b-instruct-abliterated The app will have a UI that allows users to input an API URL, detect authentication methods, API call methods, and pagination logic. The application should query for any user-provided credentials and then ingest the API documentation and examples.
2
+ exact same thing but make everything that's white black, and everything that is black white