Hugging Face's logo

Spaces:
aigodking
/
aigodking-space
Running

App Files Community
aigodking commited on
Commit
08dc1a5
·
verified ·
1 Parent(s): 4fd3070

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +73 -89
index.html CHANGED
@@ -60,6 +60,14 @@
60
  0% { transform: rotate(0deg); }
61
  100% { transform: rotate(360deg); }
62
  }
 
 
 
 
 
 
 
 
63
  </style>
64
  </head>
65
  <body class="bg-gray-50 min-h-screen">
@@ -164,7 +172,7 @@
164
  <div class="ml-5 w-0 flex-1">
165
  <dt class="text-sm font-medium text-gray-500 truncate">Products Collected</dt>
166
  <dd class="flex items-baseline">
167
- <div class="text-2xl font-semibold text-gray-900">0</div>
168
  </dd>
169
  </div>
170
  </div>
@@ -196,7 +204,7 @@
196
  <div class="ml-5 w-0 flex-1">
197
  <dt class="text-sm font-medium text-gray-500 truncate">Errors Today</dt>
198
  <dd class="flex items-baseline">
199
- <div class="text-2xl font-semibold text-gray-9">0</div>
200
  </dd>
201
  </div>
202
  </div>
@@ -210,7 +218,7 @@
210
  <h3 class="text-lg leading-6 font-medium text-gray-900">Recent Activity</h3>
211
  </div>
212
  <div class="bg-white overflow-hidden">
213
- <ul class="divide-y divide-gray-200">
214
  <li class="px-6 py-4">
215
  <div class="flex items-center">
216
  <div class="flex-shrink-0 bg-blue-100 rounded-md p-2">
@@ -223,30 +231,6 @@
223
  <div class="ml-auto text-sm text-gray-500">Just now</div>
224
  </div>
225
  </li>
226
- <li class="px-6 py-4">
227
- <div class="flex items-center">
228
- <div class="flex-shrink-0 bg-green-100 rounded-md p-2">
229
- <i class="fas fa-check-circle text-green-600"></i>
230
- </div>
231
- <div class="ml-4">
232
- <div class="text-sm font-medium text-gray-900">System updated</div>
233
- <div class="text-sm text-gray-500">Version 1.3.2 installed</div>
234
- </div>
235
- <div class="ml-auto text-sm text-gray-500">1 hour ago</div>
236
- </div>
237
- </li>
238
- <li class="px-6 py-4">
239
- <div class="flex items-center">
240
- <div class="flex-shrink-0 bg-green-100 rounded-md p-2">
241
- <i class="fas fa-check-circle text-green-600"></i>
242
- </div>
243
- <div class="ml-4">
244
- <div class="text-sm font-medium text-gray-900">Data exported</div>
245
- <div class="text-sm text-gray-500">example_data.csv - 3.2MB</div>
246
- </div>
247
- <div class="ml-auto text-sm text-gray-500">Yesterday</div>
248
- </div>
249
- </li>
250
  </ul>
251
  </div>
252
  </div>
@@ -261,23 +245,36 @@
261
  <div>
262
  <h4 class="text-sm font-medium text-gray-500 mb-2">CPU Usage</h4>
263
  <div class="relative w-full h-4 bg-gray-200 rounded-full overflow-hidden">
264
- <div class="absolute top-0 left-0 h-full bg-blue-500" style="width: 35%"></div>
265
  </div>
266
- <div class="mt-1 text-sm text-gray-500">35% - 4 cores @ 2.8GHz</div>
267
  </div>
268
  <div>
269
  <h4 class="text-sm font-medium text-gray-500 mb-2">Memory Usage</h4>
270
  <div class="relative w-full h-4 bg-gray-200 rounded-full overflow-hidden">
271
- <div class="absolute top-0 left-0 h-full bg-green-500" style="width: 42%"></div>
272
  </div>
273
- <div class="mt-1 text-sm text-gray-500">42% - 3.2GB / 7.6GB</div>
274
  </div>
275
  <div>
276
  <h4 class="text-sm font-medium text-gray-500 mb-2">Disk Usage</h4>
277
  <div class="relative w-full h-4 bg-gray-200 rounded-full overflow-hidden">
278
- <div class="absolute top-0 left-0 h-full bg-yellow-500" style="width: 28%"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
279
  </div>
280
- <div class="mt-1 text-sm text-gray-500">28% - 56GB / 200GB</div>
281
  </div>
282
  </div>
283
  </div>
@@ -387,13 +384,27 @@
387
  </div>
388
  </div>
389
 
390
- <!-- Pagination Handling -->
391
  <div class="border-t border-gray-200 pt-4">
392
- <div class="flex items-center">
393
- <input id="handle-pagination" name="handle-pagination" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded" checked>
394
- <label for="handle-pagination" class="ml-3 block text-sm font-medium text-gray-700">Auto-handle pagination</label>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
395
  </div>
396
- <p class="mt-1 text-sm text-gray-500">Automatically follow pagination links to collect all products</p>
397
  </div>
398
 
399
  <!-- Advanced Options -->
@@ -449,10 +460,25 @@
449
  </div>
450
  </div>
451
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
452
  <!-- Custom Headers -->
453
  <div>
454
  <label for="custom-headers" class="block text-sm font-medium text-gray-700">Custom Headers (JSON)</label>
455
  <textarea id="custom-headers" name="custom-headers" rows="3" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" placeholder='{"User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64)", "Accept-Language": "en-US"}'></textarea>
 
456
  </div>
457
  </div>
458
  </div>
@@ -493,12 +519,16 @@
493
  <span class="font-medium text-gray-900">8 selected</span>
494
  </div>
495
  <div class="flex justify-between text-sm">
496
- <span class="text-gray-500">Pagination:</span>
497
- <span class="font-medium text-gray-900">Enabled</span>
 
 
 
 
498
  </div>
499
  <div class="flex justify-between text-sm">
500
- <span class="text-gray-500">Speed:</span>
501
- <span class="font-medium text-gray-900">Medium</span>
502
  </div>
503
  </div>
504
  </div>
@@ -531,51 +561,5 @@
531
  "metadata": {
532
  "crawl_date": "2023-06-20",
533
  "pages_crawled": 24,
534
- "products_found": 142
535
- }
536
- }</pre>
537
- </div>
538
- </div>
539
- </div>
540
- </div>
541
- </div>
542
- </div>
543
- </div>
544
-
545
- <!-- Results Tab -->
546
- <div class="tab-content" id="results-content">
547
- <div class="mb-8">
548
- <h1 class="text-3xl font-bold text-gray-900 mb-2">Crawl Results</h1>
549
- <p class="text-gray-600">View and manage your collected product data from Herholdts.co.za</p>
550
- </div>
551
-
552
- <div class="flex flex-col lg:flex-row gap-6">
553
- <div class="lg:w-1/4">
554
- <div class="bg-white shadow rounded-lg overflow-hidden h-full">
555
- <div class="px-4 py-5 sm:px-6 border-b border-gray-200">
556
- <div class="flex items-center justify-between">
557
- <h3 class="text-lg leading-6 font-medium text-gray-900">Saved Crawls</h3>
558
- <button type="button" class="text-blue-600 hover:text-blue-500 text-sm font-medium">
559
- <i class="fas fa-sync-alt"></i>
560
- </button>
561
- </div>
562
- </div>
563
- <div class="px-4 py-5 sm:p-6 overflow-y-auto custom-scrollbar" style="max-height: 500px;">
564
- <div class="space-y-3" id="saved-crawls-list">
565
- <div class="p-3 border rounded-lg cursor-pointer hover:bg-gray-50 saved-crawl selected" data-id="herholdts-20230620">
566
- <div class="flex justify-between">
567
- <h4 class="font-medium text-gray-900">Herholdts Full</h4>
568
- <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Active</span>
569
- </div>
570
- <div class="text-xs text-gray-500 mt-1">20 Jun 2023 • 142 products</div>
571
- </div>
572
- <div class="p-3 border rounded-lg cursor-pointer hover:bg-gray-50 saved-crawl" data-id="herholdts-test-20230615">
573
- <div class="flex justify-between">
574
- <h4 class="font-medium text-gray-900">Herholdts Test</h4>
575
- <span class="text-xs bg-gray-100 text-gray-800 px-2 py-1 rounded-full">Completed</span>
576
- </div>
577
- <div class="text-xs text-gray-500 mt-1">15 Jun 2023 • 87 products</div>
578
- </div>
579
- <div class="p-3 border rounded-lg cursor-pointer hover:bg-gray-50 saved-crawl" data-id="herholdts-office-20230610">
580
- <
581
  </html>
 
60
  0% { transform: rotate(0deg); }
61
  100% { transform: rotate(360deg); }
62
  }
63
+ .crawl-error {
64
+ background-color: #fff5f5;
65
+ border-left: 4px solid #f56565;
66
+ }
67
+ .crawl-success {
68
+ background-color: #f0fff4;
69
+ border-left: 4px solid #48bb78;
70
+ }
71
  </style>
72
  </head>
73
  <body class="bg-gray-50 min-h-screen">
 
172
  <div class="ml-5 w-0 flex-1">
173
  <dt class="text-sm font-medium text-gray-500 truncate">Products Collected</dt>
174
  <dd class="flex items-baseline">
175
+ <div class="text-2xl font-semibold text-gray-900" id="total-products">0</div>
176
  </dd>
177
  </div>
178
  </div>
 
204
  <div class="ml-5 w-0 flex-1">
205
  <dt class="text-sm font-medium text-gray-500 truncate">Errors Today</dt>
206
  <dd class="flex items-baseline">
207
+ <div class="text-2xl font-semibold text-gray-9" id="error-count">0</div>
208
  </dd>
209
  </div>
210
  </div>
 
218
  <h3 class="text-lg leading-6 font-medium text-gray-900">Recent Activity</h3>
219
  </div>
220
  <div class="bg-white overflow-hidden">
221
+ <ul class="divide-y divide-gray-200" id="activity-feed">
222
  <li class="px-6 py-4">
223
  <div class="flex items-center">
224
  <div class="flex-shrink-0 bg-blue-100 rounded-md p-2">
 
231
  <div class="ml-auto text-sm text-gray-500">Just now</div>
232
  </div>
233
  </li>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
234
  </ul>
235
  </div>
236
  </div>
 
245
  <div>
246
  <h4 class="text-sm font-medium text-gray-500 mb-2">CPU Usage</h4>
247
  <div class="relative w-full h-4 bg-gray-200 rounded-full overflow-hidden">
248
+ <div class="absolute top-0 left-0 h-full bg-blue-500" id="cpu-bar" style="width: 35%"></div>
249
  </div>
250
+ <div class="mt-1 text-sm text-gray-500"><span id="cpu-percent">35</span>% - 4 cores @ 2.8GHz</div>
251
  </div>
252
  <div>
253
  <h4 class="text-sm font-medium text-gray-500 mb-2">Memory Usage</h4>
254
  <div class="relative w-full h-4 bg-gray-200 rounded-full overflow-hidden">
255
+ <div class="absolute top-0 left-0 h-full bg-green-500" id="memory-bar" style="width: 42%"></div>
256
  </div>
257
+ <div class="mt-1 text-sm text-gray-500"><span id="memory-percent">42</span>% - 3.2GB / 7.6GB</div>
258
  </div>
259
  <div>
260
  <h4 class="text-sm font-medium text-gray-500 mb-2">Disk Usage</h4>
261
  <div class="relative w-full h-4 bg-gray-200 rounded-full overflow-hidden">
262
+ <div class="absolute top-0 left-0 h-full bg-yellow-500" id="disk-bar" style="width: 28%"></div>
263
+ </div>
264
+ <div class="mt-1 text-sm text-gray-500"><span id="disk-percent">28</span>% - 56GB / 200GB</div>
265
+ </div>
266
+ </div>
267
+ <div class="mt-6">
268
+ <h4 class="text-sm font-medium text-gray-500 mb-2">Crawler Status</h4>
269
+ <div class="bg-gray-50 rounded-md p-4" id="crawler-status">
270
+ <div class="flex items-center">
271
+ <div class="flex-shrink-0 bg-green-100 rounded-full p-2">
272
+ <i class="fas fa-check-circle text-green-600"></i>
273
+ </div>
274
+ <div class="ml-3">
275
+ <p class="text-sm font-medium text-gray-700">Crawler service is operational</p>
276
+ </div>
277
  </div>
 
278
  </div>
279
  </div>
280
  </div>
 
384
  </div>
385
  </div>
386
 
387
+ <!-- Crawl Parameters -->
388
  <div class="border-t border-gray-200 pt-4">
389
+ <h3 class="text-lg font-medium text-gray-900 mb-4">Crawl Parameters</h3>
390
+
391
+ <div class="mb-4">
392
+ <label for="max-pages" class="block text-sm font-medium text-gray-700">Maximum Pages to Crawl</label>
393
+ <input type="number" id="max-pages" name="max-pages" min="1" max="1000" value="50" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
394
+ <p class="mt-1 text-sm text-gray-500">Set to 0 for unlimited (not recommended)</p>
395
+ </div>
396
+
397
+ <div class="mb-4">
398
+ <label for="request-delay" class="block text-sm font-medium text-gray-700">Request Delay (seconds)</label>
399
+ <input type="number" id="request-delay" name="request-delay" min="1" max="60" value="3" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
400
+ <p class="mt-1 text-sm text-gray-500">Higher values reduce server load and detection risk</p>
401
+ </div>
402
+
403
+ <div class="mb-4">
404
+ <label for="timeout" class="block text-sm font-medium text-gray-700">Page Load Timeout (seconds)</label>
405
+ <input type="number" id="timeout" name="timeout" min="10" max="120" value="30" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
406
+ <p class="mt-1 text-sm text-gray-500">Maximum time to wait for each page to load</p>
407
  </div>
 
408
  </div>
409
 
410
  <!-- Advanced Options -->
 
460
  </div>
461
  </div>
462
 
463
+ <!-- Proxy Configuration -->
464
+ <div>
465
+ <label for="proxy-type" class="block text-sm font-medium text-gray-700">Proxy Configuration</label>
466
+ <select id="proxy-type" name="proxy-type" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
467
+ <option value="none" selected>No Proxy</option>
468
+ <option value="rotating">Rotating Proxies</option>
469
+ <option value="custom">Custom Proxy List</option>
470
+ </select>
471
+ <div id="proxy-custom-container" class="mt-2 hidden">
472
+ <label for="proxy-list" class="block text-sm font-medium text-gray-700">Proxy List (one per line)</label>
473
+ <textarea id="proxy-list" name="proxy-list" rows="3" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" placeholder="http://username:password@proxy_ip:port"></textarea>
474
+ </div>
475
+ </div>
476
+
477
  <!-- Custom Headers -->
478
  <div>
479
  <label for="custom-headers" class="block text-sm font-medium text-gray-700">Custom Headers (JSON)</label>
480
  <textarea id="custom-headers" name="custom-headers" rows="3" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" placeholder='{"User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64)", "Accept-Language": "en-US"}'></textarea>
481
+ <p class="mt-1 text-sm text-gray-500">Specify custom HTTP headers for requests</p>
482
  </div>
483
  </div>
484
  </div>
 
519
  <span class="font-medium text-gray-900">8 selected</span>
520
  </div>
521
  <div class="flex justify-between text-sm">
522
+ <span class="text-gray-500">Max Pages:</span>
523
+ <span class="font-medium text-gray-900" id="preview-max-pages">50</span>
524
+ </div>
525
+ <div class="flex justify-between text-sm">
526
+ <span class="text-gray-500">Request Delay:</span>
527
+ <span class="font-medium text-gray-900" id="preview-delay">3 seconds</span>
528
  </div>
529
  <div class="flex justify-between text-sm">
530
+ <span class="text-gray-500">Proxy:</span>
531
+ <span class="font-medium text-gray-900" id="preview-proxy">None</span>
532
  </div>
533
  </div>
534
  </div>
 
561
  "metadata": {
562
  "crawl_date": "2023-06-20",
563
  "pages_crawled": 24,
564
+ "products_found":
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
565
  </html>