Hugging Face's logo

Spaces:
MagicMeWizard
/
ai-generate-website-ui
Running

App Files Community
MagicMeWizard commited on
Commit
262225b
·
verified ·
1 Parent(s): e1fa86c

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +510 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ai Generate Website Ui
3
- emoji: 😻
4
- colorFrom: green
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: ai-generate-website-ui
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,510 @@
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>LLMScraper | AI Data Collection Platform</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#4F46E5',
15
+ secondary: '#10B981',
16
+ dark: '#1F2937',
17
+ light: '#F9FAFB'
18
+ }
19
+ }
20
+ }
21
+ }
22
+ </script>
23
+ <style>
24
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
25
+
26
+ body {
27
+ font-family: 'Inter', sans-serif;
28
+ background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
29
+ min-height: 100vh;
30
+ }
31
+
32
+ .card-hover {
33
+ transition: all 0.3s ease;
34
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
35
+ }
36
+
37
+ .card-hover:hover {
38
+ transform: translateY(-5px);
39
+ box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
40
+ }
41
+
42
+ .gradient-bg {
43
+ background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
44
+ }
45
+
46
+ .progress-bar {
47
+ height: 8px;
48
+ border-radius: 4px;
49
+ overflow: hidden;
50
+ }
51
+
52
+ .progress-fill {
53
+ height: 100%;
54
+ border-radius: 4px;
55
+ background: linear-gradient(90deg, #4F46E5 0%, #10B981 100%);
56
+ width: 75%;
57
+ }
58
+
59
+ .data-table {
60
+ border-collapse: separate;
61
+ border-spacing: 0;
62
+ }
63
+
64
+ .data-table th {
65
+ background-color: #f3f4f6;
66
+ }
67
+
68
+ .data-table tr:nth-child(even) {
69
+ background-color: #f9fafb;
70
+ }
71
+
72
+ .data-table tr:hover {
73
+ background-color: #f0f9ff;
74
+ }
75
+
76
+ .glow {
77
+ box-shadow: 0 0 15px rgba(79, 70, 229, 0.3);
78
+ }
79
+
80
+ .pulse {
81
+ animation: pulse 2s infinite;
82
+ }
83
+
84
+ @keyframes pulse {
85
+ 0% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4); }
86
+ 70% { box-shadow: 0 0 0 10px rgba(79, 70, 229, 0); }
87
+ 100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); }
88
+ }
89
+
90
+ .tag {
91
+ display: inline-block;
92
+ padding: 2px 8px;
93
+ border-radius: 12px;
94
+ font-size: 0.75rem;
95
+ font-weight: 500;
96
+ }
97
+
98
+ .tag-processing {
99
+ background-color: #fef3c7;
100
+ color: #92400e;
101
+ }
102
+
103
+ .tag-cleaned {
104
+ background-color: #d1fae5;
105
+ color: #065f46;
106
+ }
107
+
108
+ .tag-labeled {
109
+ background-color: #dbeafe;
110
+ color: #1e40af;
111
+ }
112
+ </style>
113
+ </head>
114
+ <body class="text-gray-800">
115
+ <!-- Header -->
116
+ <header class="gradient-bg text-white">
117
+ <div class="container mx-auto px-4 py-6">
118
+ <div class="flex justify-between items-center">
119
+ <div class="flex items-center space-x-2">
120
+ <i class="fas fa-robot text-3xl"></i>
121
+ <h1 class="text-2xl font-bold">LLMScraper</h1>
122
+ </div>
123
+ <nav class="hidden md:block">
124
+ <ul class="flex space-x-8">
125
+ <li><a href="#" class="hover:text-indigo-200 transition">Dashboard</a></li>
126
+ <li><a href="#" class="hover:text-indigo-200 transition">Scrape Jobs</a></li>
127
+ <li><a href="#" class="hover:text-indigo-200 transition">Data Library</a></li>
128
+ <li><a href="#" class="hover:text-indigo-200 transition">Labeling</a></li>
129
+ <li><a href="#" class="hover:text-indigo-200 transition">API</a></li>
130
+ </ul>
131
+ </nav>
132
+ <div class="flex items-center space-x-4">
133
+ <button class="bg-white text-primary px-4 py-2 rounded-lg font-medium hover:bg-indigo-50 transition">Sign In</button>
134
+ <button class="hidden md:block bg-secondary text-white px-4 py-2 rounded-lg font-medium hover:bg-emerald-500 transition">Get Started</button>
135
+ <button class="md:hidden text-2xl"><i class="fas fa-bars"></i></button>
136
+ </div>
137
+ </div>
138
+ </div>
139
+ </header>
140
+
141
+ <!-- Hero Section -->
142
+ <section class="gradient-bg text-white py-16">
143
+ <div class="container mx-auto px-4 text-center">
144
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">AI-Powered Web Scraping & Data Labeling</h1>
145
+ <p class="text-xl max-w-3xl mx-auto mb-10">Collect, clean, and label web data at scale using advanced language models to fine-tune your AI systems</p>
146
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
147
+ <button class="bg-white text-primary px-8 py-3 rounded-lg font-bold text-lg hover:bg-indigo-50 transition">Start Free Trial</button>
148
+ <button class="bg-transparent border-2 border-white px-8 py-3 rounded-lg font-bold text-lg hover:bg-white hover:text-primary transition">View Demo</button>
149
+ </div>
150
+ </div>
151
+ </section>
152
+
153
+ <!-- Features Section -->
154
+ <section class="py-16 bg-light">
155
+ <div class="container mx-auto px-4">
156
+ <h2 class="text-3xl font-bold text-center mb-4">Powerful Data Collection Workflow</h2>
157
+ <p class="text-gray-600 text-center max-w-2xl mx-auto mb-12">Our AI-powered platform handles the entire data pipeline from collection to labeling</p>
158
+
159
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
160
+ <!-- Feature 1 -->
161
+ <div class="bg-white rounded-xl p-6 card-hover">
162
+ <div class="w-16 h-16 rounded-full bg-indigo-100 flex items-center justify-center mb-6">
163
+ <i class="fas fa-spider text-2xl text-primary"></i>
164
+ </div>
165
+ <h3 class="text-xl font-bold mb-3">Intelligent Web Scraping</h3>
166
+ <p class="text-gray-600 mb-4">Extract structured data from any website using natural language instructions. No complex selectors needed.</p>
167
+ <ul class="space-y-2">
168
+ <li class="flex items-start">
169
+ <i class="fas fa-check-circle text-secondary mt-1 mr-2"></i>
170
+ <span>Handles JavaScript-rendered content</span>
171
+ </li>
172
+ <li class="flex items-start">
173
+ <i class="fas fa-check-circle text-secondary mt-1 mr-2"></i>
174
+ <span>Automatic pagination & navigation</span>
175
+ </li>
176
+ <li class="flex items-start">
177
+ <i class="fas fa-check-circle text-secondary mt-1 mr-2"></i>
178
+ <span>Anti-bot detection bypass</span>
179
+ </li>
180
+ </ul>
181
+ </div>
182
+
183
+ <!-- Feature 2 -->
184
+ <div class="bg-white rounded-xl p-6 card-hover">
185
+ <div class="w-16 h-16 rounded-full bg-emerald-100 flex items-center justify-center mb-6">
186
+ <i class="fas fa-broom text-2xl text-secondary"></i>
187
+ </div>
188
+ <h3 class="text-xl font-bold mb-3">AI Data Cleaning</h3>
189
+ <p class="text-gray-600 mb-4">Automatically clean and normalize scraped data using language understanding to fix inconsistencies.</p>
190
+ <ul class="space-y-2">
191
+ <li class="flex items-start">
192
+ <i class="fas fa-check-circle text-secondary mt-1 mr-2"></i>
193
+ <span>Entity recognition & normalization</span>
194
+ </li>
195
+ <li class="flex items-start">
196
+ <i class="fas fa-check-circle text-secondary mt-1 mr-2"></i>
197
+ <span>Duplicate detection & removal</span>
198
+ </li>
199
+ <li class="flex items-start">
200
+ <i class="fas fa-check-circle text-secondary mt-1 mr-2"></i>
201
+ <span>Context-aware error correction</span>
202
+ </li>
203
+ </ul>
204
+ </div>
205
+
206
+ <!-- Feature 3 -->
207
+ <div class="bg-white rounded-xl p-6 card-hover">
208
+ <div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center mb-6">
209
+ <i class="fas fa-tags text-2xl text-blue-500"></i>
210
+ </div>
211
+ <h3 class="text-xl font-bold mb-3">Automated Labeling</h3>
212
+ <p class="text-gray-600 mb-4">Generate high-quality labels for your datasets using large language models with human-in-the-loop validation.</p>
213
+ <ul class="space-y-2">
214
+ <li class="flex items-start">
215
+ <i class="fas fa-check-circle text-secondary mt-1 mr-2"></i>
216
+ <span>Zero-shot & few-shot classification</span>
217
+ </li>
218
+ <li class="flex items-start">
219
+ <i class="fas fa-check-circle text-secondary mt-1 mr-2"></i>
220
+ <span>Semantic similarity clustering</span>
221
+ </li>
222
+ <li class="flex items-start">
223
+ <i class="fas fa-check-circle text-secondary mt-1 mr-2"></i>
224
+ <span>Active learning for model improvement</span>
225
+ </li>
226
+ </ul>
227
+ </div>
228
+ </div>
229
+ </div>
230
+ </section>
231
+
232
+ <!-- Demo Section -->
233
+ <section class="py-16 bg-white">
234
+ <div class="container mx-auto px-4">
235
+ <h2 class="text-3xl font-bold text-center mb-4">See It In Action</h2>
236
+ <p class="text-gray-600 text-center max-w-2xl mx-auto mb-12">Our platform makes it simple to collect and prepare training data</p>
237
+
238
+ <div class="bg-gray-50 rounded-xl p-6 mb-8">
239
+ <div class="flex flex-wrap gap-4 mb-6">
240
+ <div class="flex-1 min-w-[300px]">
241
+ <label class="block text-sm font-medium mb-2">Enter Website URL</label>
242
+ <div class="flex">
243
+ <input type="text" class="flex-1 border border-gray-300 rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="https://example.com/products">
244
+ <button class="bg-primary text-white px-6 py-2 rounded-r-lg font-medium">Scrape</button>
245
+ </div>
246
+ </div>
247
+ <div class="flex-1 min-w-[300px]">
248
+ <label class="block text-sm font-medium mb-2">Data Schema</label>
249
+ <select class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary">
250
+ <option>E-commerce Product Data</option>
251
+ <option>News Articles</option>
252
+ <option>Job Listings</option>
253
+ <option>Real Estate Listings</option>
254
+ <option>Custom Schema</option>
255
+ </select>
256
+ </div>
257
+ </div>
258
+
259
+ <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
260
+ <div class="overflow-x-auto">
261
+ <table class="w-full data-table">
262
+ <thead>
263
+ <tr>
264
+ <th class="text-left py-3 px-4 font-semibold text-sm border-b">Status</th>
265
+ <th class="text-left py-3 px-4 font-semibold text-sm border-b">Page URL</th>
266
+ <th class="text-left py-3 px-4 font-semibold text-sm border-b">Items Found</th>
267
+ <th class="text-left py-3 px-4 font-semibold text-sm border-b">Progress</th>
268
+ </tr>
269
+ </thead>
270
+ <tbody>
271
+ <tr>
272
+ <td class="py-3 px-4 border-b">
273
+ <span class="tag tag-processing">Processing</span>
274
+ </td>
275
+ <td class="py-3 px-4 border-b">https://example.com/products</td>
276
+ <td class="py-3 px-4 border-b">24</td>
277
+ <td class="py-3 px-4 border-b">
278
+ <div class="progress-bar bg-gray-200 w-full">
279
+ <div class="progress-fill"></div>
280
+ </div>
281
+ <div class="text-xs text-gray-500 mt-1">75% complete</div>
282
+ </td>
283
+ </tr>
284
+ <tr>
285
+ <td class="py-3 px-4 border-b">
286
+ <span class="tag tag-cleaned">Cleaned</span>
287
+ </td>
288
+ <td class="py-3 px-4 border-b">https://example.com/specials</td>
289
+ <td class="py-3 px-4 border-b">18</td>
290
+ <td class="py-3 px-4 border-b">
291
+ <div class="progress-bar bg-gray-200 w-full">
292
+ <div class="progress-fill" style="width: 100%"></div>
293
+ </div>
294
+ <div class="text-xs text-gray-500 mt-1">100% complete</div>
295
+ </td>
296
+ </tr>
297
+ <tr>
298
+ <td class="py-3 px-4">
299
+ <span class="tag tag-labeled">Labeled</span>
300
+ </td>
301
+ <td class="py-3 px-4">https://example.com/new-arrivals</td>
302
+ <td class="py-3 px-4">32</td>
303
+ <td class="py-3 px-4">
304
+ <div class="progress-bar bg-gray-200 w-full">
305
+ <div class="progress-fill" style="width: 100%"></div>
306
+ </div>
307
+ <div class="text-xs text-gray-500 mt-1">100% complete</div>
308
+ </td>
309
+ </tr>
310
+ </tbody>
311
+ </table>
312
+ </div>
313
+ </div>
314
+ </div>
315
+
316
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
317
+ <div class="bg-indigo-50 rounded-xl p-6">
318
+ <h3 class="text-xl font-bold mb-4">Raw Scraped Data</h3>
319
+ <div class="bg-white rounded-lg p-4 font-mono text-sm overflow-x-auto max-h-60">
320
+ <pre>{
321
+ "products": [
322
+ {
323
+ "title": "Premium Headphones - Wireless",
324
+ "price": "$199.99",
325
+ "description": "Experience crystal-clear audio with our premium wireless headphones...",
326
+ "rating": "4.5 out of 5 stars",
327
+ "availability": "In Stock"
328
+ },
329
+ ...
330
+ ]
331
+ }</pre>
332
+ </div>
333
+ </div>
334
+
335
+ <div class="bg-emerald-50 rounded-xl p-6">
336
+ <h3 class="text-xl font-bold mb-4">Cleaned & Labeled Data</h3>
337
+ <div class="bg-white rounded-lg p-4 font-mono text-sm overflow-x-auto max-h-60">
338
+ <pre>{
339
+ "products": [
340
+ {
341
+ "title": "Premium Headphones Wireless",
342
+ "price": 199.99,
343
+ "currency": "USD",
344
+ "description": "Experience crystal-clear audio with premium wireless headphones...",
345
+ "rating": 4.5,
346
+ "max_rating": 5,
347
+ "availability": true,
348
+ "category": "Electronics > Audio > Headphones",
349
+ "features": ["wireless", "noise-cancelling", "bluetooth"]
350
+ },
351
+ ...
352
+ ]
353
+ }</pre>
354
+ </div>
355
+ </div>
356
+ </div>
357
+ </div>
358
+ </section>
359
+
360
+ <!-- CTA Section -->
361
+ <section class="py-16 gradient-bg text-white">
362
+ <div class="container mx-auto px-4 text-center">
363
+ <h2 class="text-3xl font-bold mb-6">Ready to Enhance Your AI Models?</h2>
364
+ <p class="text-xl max-w-2xl mx-auto mb-10">Start collecting high-quality training data today with our AI-powered platform</p>
365
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
366
+ <button class="bg-white text-primary px-8 py-3 rounded-lg font-bold text-lg hover:bg-indigo-50 transition">Get Started Free</button>
367
+ <button class="bg-transparent border-2 border-white px-8 py-3 rounded-lg font-bold text-lg hover:bg-white hover:text-primary transition">Schedule a Demo</button>
368
+ </div>
369
+ </div>
370
+ </section>
371
+
372
+ <!-- Footer -->
373
+ <footer class="bg-dark text-gray-300 py-12">
374
+ <div class="container mx-auto px-4">
375
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
376
+ <div>
377
+ <div class="flex items-center space-x-2 mb-4">
378
+ <i class="fas fa-robot text-2xl text-primary"></i>
379
+ <h3 class="text-xl font-bold text-white">LLMScraper</h3>
380
+ </div>
381
+ <p class="mb-4">AI-powered web scraping and data labeling for machine learning teams.</p>
382
+ <div class="flex space-x-4">
383
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
384
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin"></i></a>
385
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-github"></i></a>
386
+ </div>
387
+ </div>
388
+
389
+ <div>
390
+ <h4 class="text-lg font-semibold text-white mb-4">Product</h4>
391
+ <ul class="space-y-2">
392
+ <li><a href="#" class="hover:text-white transition">Features</a></li>
393
+ <li><a href="#" class="hover:text-white transition">Pricing</a></li>
394
+ <li><a href="#" class="hover:text-white transition">Integrations</a></li>
395
+ <li><a href="#" class="hover:text-white transition">Roadmap</a></li>
396
+ </ul>
397
+ </div>
398
+
399
+ <div>
400
+ <h4 class="text-lg font-semibold text-white mb-4">Resources</h4>
401
+ <ul class="space-y-2">
402
+ <li><a href="#" class="hover:text-white transition">Documentation</a></li>
403
+ <li><a href="#" class="hover:text-white transition">API Reference</a></li>
404
+ <li><a href="#" class="hover:text-white transition">Tutorials</a></li>
405
+ <li><a href="#" class="hover:text-white transition">Blog</a></li>
406
+ </ul>
407
+ </div>
408
+
409
+ <div>
410
+ <h4 class="text-lg font-semibold text-white mb-4">Legal</h4>
411
+ <ul class="space-y-2">
412
+ <li><a href="#" class="hover:text-white transition">Privacy Policy</a></li>
413
+ <li><a href="#" class="hover:text-white transition">Terms of Service</a></li>
414
+ <li><a href="#" class="hover:text-white transition">Compliance</a></li>
415
+ <li><a href="#" class="hover:text-white transition">Scraping Ethics</a></li>
416
+ </ul>
417
+ </div>
418
+ </div>
419
+
420
+ <div class="border-t border-gray-700 mt-12 pt-8 text-center">
421
+ <p>&copy; 2023 LLMScraper. All rights reserved.</p>
422
+ </div>
423
+ </div>
424
+ </footer>
425
+
426
+ <!-- Floating Action Button -->
427
+ <div class="fixed bottom-6 right-6">
428
+ <button class="w-14 h-14 rounded-full bg-primary text-white flex items-center justify-center shadow-lg glow pulse">
429
+ <i class="fas fa-plus text-xl"></i>
430
+ </button>
431
+ </div>
432
+
433
+ <script>
434
+ // Simple demo functionality
435
+ document.addEventListener('DOMContentLoaded', function() {
436
+ // Simulate scraping process
437
+ const scrapeBtn = document.querySelector('button:contains("Scrape")');
438
+ if(scrapeBtn) {
439
+ scrapeBtn.addEventListener('click', function() {
440
+ const urlInput = document.querySelector('input[type="text"]');
441
+ if(urlInput.value.trim() === '') {
442
+ alert('Please enter a valid URL');
443
+ return;
444
+ }
445
+
446
+ // Show loading state
447
+ const originalText = scrapeBtn.textContent;
448
+ scrapeBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Scraping...';
449
+ scrapeBtn.disabled = true;
450
+
451
+ // Simulate processing delay
452
+ setTimeout(function() {
453
+ scrapeBtn.innerHTML = originalText;
454
+ scrapeBtn.disabled = false;
455
+
456
+ // Show success message
457
+ alert(`Successfully started scraping: ${urlInput.value}`);
458
+
459
+ // Add new row to table
460
+ const tableBody = document.querySelector('.data-table tbody');
461
+ const newRow = document.createElement('tr');
462
+ newRow.innerHTML = `
463
+ <td class="py-3 px-4 border-b">
464
+ <span class="tag tag-processing">Processing</span>
465
+ </td>
466
+ <td class="py-3 px-4 border-b">${urlInput.value}</td>
467
+ <td class="py-3 px-4 border-b">0</td>
468
+ <td class="py-3 px-4 border-b">
469
+ <div class="progress-bar bg-gray-200 w-full">
470
+ <div class="progress-fill" style="width: 5%"></div>
471
+ </div>
472
+ <div class="text-xs text-gray-500 mt-1">5% complete</div>
473
+ </td>
474
+ `;
475
+ tableBody.insertBefore(newRow, tableBody.firstChild);
476
+
477
+ // Simulate progress
478
+ simulateProgress(newRow);
479
+ }, 2000);
480
+ });
481
+ }
482
+
483
+ function simulateProgress(row) {
484
+ let progress = 5;
485
+ const interval = setInterval(() => {
486
+ progress += 5;
487
+ if(progress > 100) progress = 100;
488
+
489
+ const progressBar = row.querySelector('.progress-fill');
490
+ const progressText = row.querySelector('.text-xs');
491
+
492
+ if(progressBar && progressText) {
493
+ progressBar.style.width = `${progress}%`;
494
+ progressText.textContent = `${progress}% complete`;
495
+
496
+ if(progress === 100) {
497
+ clearInterval(interval);
498
+ const statusTag = row.querySelector('.tag');
499
+ if(statusTag) {
500
+ statusTag.textContent = "Cleaned";
501
+ statusTag.className = "tag tag-cleaned";
502
+ }
503
+ }
504
+ }
505
+ }, 500);
506
+ }
507
+ });
508
+ </script>
509
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=MagicMeWizard/ai-generate-website-ui" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
510
+ </html>