Hugging Face's logo

Spaces:
Jurk06
/
data-processing-agent
Running

App Files Community
Jurk06 commited on
Commit
1911281
·
verified ·
1 Parent(s): 4ca56b8

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +1371 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Data Processing Agent
3
- emoji: 🐨
4
- colorFrom: yellow
5
  colorTo: blue
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: data-processing-agent
3
+ emoji: 🐳
4
+ colorFrom: blue
5
  colorTo: blue
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,1371 @@
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>Data Processing Agent | Automated Data Pipeline</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ :root {
10
+ --primary: #4a6bff;
11
+ --secondary: #6c5ce7;
12
+ --success: #00b894;
13
+ --danger: #d63031;
14
+ --warning: #fdcb6e;
15
+ --dark: #2d3436;
16
+ --light: #f5f6fa;
17
+ --gray: #636e72;
18
+ --white: #ffffff;
19
+ }
20
+
21
+ * {
22
+ margin: 0;
23
+ padding: 0;
24
+ box-sizing: border-box;
25
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
26
+ }
27
+
28
+ body {
29
+ background-color: #f8f9fa;
30
+ color: var(--dark);
31
+ line-height: 1.6;
32
+ }
33
+
34
+ .container {
35
+ max-width: 1200px;
36
+ margin: 0 auto;
37
+ padding: 20px;
38
+ }
39
+
40
+ header {
41
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
42
+ color: white;
43
+ padding: 2rem 0;
44
+ text-align: center;
45
+ border-radius: 10px;
46
+ margin-bottom: 30px;
47
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
48
+ }
49
+
50
+ header h1 {
51
+ font-size: 2.5rem;
52
+ margin-bottom: 1rem;
53
+ }
54
+
55
+ header p {
56
+ font-size: 1.2rem;
57
+ opacity: 0.9;
58
+ }
59
+
60
+ .agent-icon {
61
+ font-size: 4rem;
62
+ margin-bottom: 1rem;
63
+ animation: pulse 2s infinite;
64
+ }
65
+
66
+ @keyframes pulse {
67
+ 0% { transform: scale(1); }
68
+ 50% { transform: scale(1.1); }
69
+ 100% { transform: scale(1); }
70
+ }
71
+
72
+ .pipeline-container {
73
+ display: flex;
74
+ flex-direction: column;
75
+ gap: 30px;
76
+ }
77
+
78
+ .pipeline-step {
79
+ background-color: var(--white);
80
+ border-radius: 10px;
81
+ padding: 25px;
82
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
83
+ transition: transform 0.3s, box-shadow 0.3s;
84
+ position: relative;
85
+ overflow: hidden;
86
+ }
87
+
88
+ .pipeline-step:hover {
89
+ transform: translateY(-5px);
90
+ box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
91
+ }
92
+
93
+ .pipeline-step-header {
94
+ display: flex;
95
+ align-items: center;
96
+ justify-content: space-between;
97
+ margin-bottom: 20px;
98
+ }
99
+
100
+ .step-number {
101
+ background-color: var(--primary);
102
+ color: white;
103
+ width: 40px;
104
+ height: 40px;
105
+ border-radius: 50%;
106
+ display: flex;
107
+ align-items: center;
108
+ justify-content: center;
109
+ font-weight: bold;
110
+ flex-shrink: 0;
111
+ margin-right: 15px;
112
+ }
113
+
114
+ .step-title {
115
+ flex-grow: 1;
116
+ }
117
+
118
+ .step-title h2 {
119
+ color: var(--primary);
120
+ font-size: 1.5rem;
121
+ margin-bottom: 5px;
122
+ }
123
+
124
+ .step-title p {
125
+ color: var(--gray);
126
+ font-size: 0.9rem;
127
+ }
128
+
129
+ .step-actions {
130
+ margin-left: auto;
131
+ }
132
+
133
+ .btn {
134
+ padding: 10px 20px;
135
+ border: none;
136
+ border-radius: 5px;
137
+ cursor: pointer;
138
+ font-weight: 600;
139
+ transition: all 0.3s;
140
+ display: inline-flex;
141
+ align-items: center;
142
+ gap: 8px;
143
+ }
144
+
145
+ .btn-primary {
146
+ background-color: var(--primary);
147
+ color: white;
148
+ }
149
+
150
+ .btn-primary:hover {
151
+ background-color: #3a5aed;
152
+ transform: translateY(-2px);
153
+ }
154
+
155
+ .btn-outline {
156
+ background-color: transparent;
157
+ border: 1px solid var(--primary);
158
+ color: var(--primary);
159
+ }
160
+
161
+ .btn-outline:hover {
162
+ background-color: var(--primary);
163
+ color: white;
164
+ }
165
+
166
+ .form-group {
167
+ margin-bottom: 20px;
168
+ }
169
+
170
+ .form-group label {
171
+ display: block;
172
+ margin-bottom: 8px;
173
+ font-weight: 600;
174
+ color: var(--dark);
175
+ }
176
+
177
+ .form-control {
178
+ width: 100%;
179
+ padding: 12px;
180
+ border: 1px solid #ddd;
181
+ border-radius: 5px;
182
+ font-size: 1rem;
183
+ transition: border-color 0.3s;
184
+ }
185
+
186
+ .form-control:focus {
187
+ outline: none;
188
+ border-color: var(--primary);
189
+ }
190
+
191
+ .checkbox-group {
192
+ margin-top: 10px;
193
+ }
194
+
195
+ .checkbox-item {
196
+ display: flex;
197
+ align-items: center;
198
+ margin-bottom: 8px;
199
+ }
200
+
201
+ .checkbox-item input {
202
+ margin-right: 10px;
203
+ }
204
+
205
+ .progress-container {
206
+ margin-top: 30px;
207
+ background-color: #f1f1f1;
208
+ border-radius: 5px;
209
+ height: 10px;
210
+ overflow: hidden;
211
+ }
212
+
213
+ .progress-bar {
214
+ height: 100%;
215
+ background: linear-gradient(90deg, var(--primary), var(--secondary));
216
+ width: 0%;
217
+ transition: width 1s ease-in-out;
218
+ }
219
+
220
+ .status-message {
221
+ margin-top: 10px;
222
+ font-size: 0.9rem;
223
+ color: var(--gray);
224
+ }
225
+
226
+ .visualization-area {
227
+ margin-top: 20px;
228
+ padding: 15px;
229
+ border: 1px dashed #ddd;
230
+ border-radius: 5px;
231
+ min-height: 200px;
232
+ background-color: #f9f9f9;
233
+ display: flex;
234
+ align-items: center;
235
+ justify-content: center;
236
+ flex-direction: column;
237
+ }
238
+
239
+ .visualization-placeholder {
240
+ text-align: center;
241
+ color: var(--gray);
242
+ }
243
+
244
+ .visualization-placeholder i {
245
+ font-size: 2rem;
246
+ margin-bottom: 10px;
247
+ }
248
+
249
+ .file-upload {
250
+ border: 2px dashed #ddd;
251
+ border-radius: 5px;
252
+ padding: 30px;
253
+ text-align: center;
254
+ cursor: pointer;
255
+ transition: all 0.3s;
256
+ }
257
+
258
+ .file-upload:hover {
259
+ border-color: var(--primary);
260
+ background-color: rgba(74, 107, 255, 0.05);
261
+ }
262
+
263
+ .file-upload i {
264
+ font-size: 3rem;
265
+ color: var(--primary);
266
+ margin-bottom: 15px;
267
+ }
268
+
269
+ .file-upload p {
270
+ color: var(--gray);
271
+ margin-bottom: 15px;
272
+ }
273
+
274
+ .file-info {
275
+ margin-top: 15px;
276
+ padding: 10px;
277
+ background-color: #f1f1f1;
278
+ border-radius: 5px;
279
+ display: none;
280
+ }
281
+
282
+ .data-preview {
283
+ margin-top: 20px;
284
+ overflow-x: auto;
285
+ }
286
+
287
+ table {
288
+ width: 100%;
289
+ border-collapse: collapse;
290
+ }
291
+
292
+ th, td {
293
+ padding: 12px 15px;
294
+ text-align: left;
295
+ border-bottom: 1px solid #ddd;
296
+ }
297
+
298
+ th {
299
+ background-color: #f8f9fa;
300
+ font-weight: 600;
301
+ }
302
+
303
+ tr:hover {
304
+ background-color: #f5f5f5;
305
+ }
306
+
307
+ .params-grid {
308
+ display: grid;
309
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
310
+ gap: 15px;
311
+ margin-top: 15px;
312
+ }
313
+
314
+ .alert {
315
+ padding: 15px;
316
+ border-radius: 5px;
317
+ margin-bottom: 20px;
318
+ }
319
+
320
+ .alert-info {
321
+ background-color: #e3f2fd;
322
+ color: #1976d2;
323
+ }
324
+
325
+ .alert-success {
326
+ background-color: #e8f5e9;
327
+ color: #388e3c;
328
+ }
329
+
330
+ .alert-warning {
331
+ background-color: #fff8e1;
332
+ color: #ffa000;
333
+ }
334
+
335
+ footer {
336
+ text-align: center;
337
+ margin-top: 50px;
338
+ padding: 20px 0;
339
+ color: var(--gray);
340
+ font-size: 0.9rem;
341
+ }
342
+
343
+ @media (max-width: 768px) {
344
+ .pipeline-step-header {
345
+ flex-direction: column;
346
+ align-items: flex-start;
347
+ }
348
+
349
+ .step-actions {
350
+ margin-top: 15px;
351
+ width: 100%;
352
+ }
353
+
354
+ .btn {
355
+ width: 100%;
356
+ margin-bottom: 10px;
357
+ }
358
+
359
+ .params-grid {
360
+ grid-template-columns: 1fr;
361
+ }
362
+ }
363
+ </style>
364
+ </head>
365
+ <body>
366
+ <div class="container">
367
+ <header>
368
+ <div class="agent-icon">
369
+ <i class="fas fa-robot"></i>
370
+ </div>
371
+ <h1>Data Processing Agent</h1>
372
+ <p>Automated end-to-end data pipeline processing with AI assistance</p>
373
+ </header>
374
+
375
+ <div class="pipeline-container">
376
+ <!-- Data Collection Step -->
377
+ <div class="pipeline-step" id="data-collection">
378
+ <div class="pipeline-step-header">
379
+ <div style="display: flex; align-items: center;">
380
+ <div class="step-number">1</div>
381
+ <div class="step-title">
382
+ <h2>Data Collection</h2>
383
+ <p>Gather data from various sources</p>
384
+ </div>
385
+ </div>
386
+ <div class="step-actions">
387
+ <button class="btn btn-primary" onclick="runStep('data-collection')">
388
+ <i class="fas fa-play"></i> Run
389
+ </button>
390
+ </div>
391
+ </div>
392
+
393
+ <div class="form-group">
394
+ <label>Data Sources</label>
395
+ <div class="checkbox-group">
396
+ <div class="checkbox-item">
397
+ <input type="checkbox" id="source-csv" checked>
398
+ <label for="source-csv">CSV Files</label>
399
+ </div>
400
+ <div class="checkbox-item">
401
+ <input type="checkbox" id="source-database">
402
+ <label for="source-database">Databases (SQL, NoSQL)</label>
403
+ </div>
404
+ <div class="checkbox-item">
405
+ <input type="checkbox" id="source-api">
406
+ <label for="source-api">APIs (REST, GraphQL)</label>
407
+ </div>
408
+ <div class="checkbox-item">
409
+ <input type="checkbox" id="source-web">
410
+ <label for="source-web">Web Scraping</label>
411
+ </div>
412
+ </div>
413
+ </div>
414
+
415
+ <div class="file-upload" id="file-upload-area" onclick="document.getElementById('file-input').click()">
416
+ <input type="file" id="file-input" style="display: none;" accept=".csv,.json,.xlsx,.parquet" multiple>
417
+ <i class="fas fa-cloud-upload-alt"></i>
418
+ <h3>Upload Dataset Files</h3>
419
+ <p>Click to browse or drag and drop your files</p>
420
+ <button class="btn btn-outline">
421
+ <i class="fas fa-folder-open"></i> Select Files
422
+ </button>
423
+ <div class="file-info" id="file-info">
424
+ <i class="fas fa-file-alt"></i> <span id="file-name">0 files selected</span>
425
+ </div>
426
+ </div>
427
+
428
+ <div class="progress-container" id="collection-progress" style="display: none;">
429
+ <div class="progress-bar" id="collection-progress-bar"></div>
430
+ </div>
431
+ <div class="status-message" id="collection-status"></div>
432
+ </div>
433
+
434
+ <!-- Data Preparation Step -->
435
+ <div class="pipeline-step" id="data-preparation">
436
+ <div class="pipeline-step-header">
437
+ <div style="display: flex; align-items: center;">
438
+ <div class="step-number">2</div>
439
+ <div class="step-title">
440
+ <h2>Data Preparation</h2>
441
+ <p>Structure the raw data for processing</p>
442
+ </div>
443
+ </div>
444
+ <div class="step-actions">
445
+ <button class="btn btn-outline" onclick="autoConfigure('preparation')">
446
+ <i class="fas fa-magic"></i> Auto-Configure
447
+ </button>
448
+ <button class="btn btn-primary" onclick="runStep('data-preparation')">
449
+ <i class="fas fa-play"></i> Run
450
+ </button>
451
+ </div>
452
+ </div>
453
+
454
+ <div class="alert alert-info">
455
+ <i class="fas fa-info-circle"></i> The agent will analyze your data structure and suggest appropriate preparation steps.
456
+ </div>
457
+
458
+ <div class="form-group">
459
+ <label>Data Format</label>
460
+ <select class="form-control" id="data-format">
461
+ <option value="tabular">Tabular (CSV, Excel, etc.)</option>
462
+ <option value="json">JSON (Nested/Flattened)</option>
463
+ <option value="time-series">Time Series</option>
464
+ <option value="image">Image (Pixel/Matrix data)</option>
465
+ <option value="text">Text/NLP</option>
466
+ </select>
467
+ </div>
468
+
469
+ <div class="params-grid">
470
+ <div class="form-group">
471
+ <label>Encoding</label>
472
+ <select class="form-control" id="encoding-type">
473
+ <option value="auto">Auto-detect</option>
474
+ <option value="utf-8">UTF-8</option>
475
+ <option value="latin1">ISO-8859-1 (Latin-1)</option>
476
+ <option value="windows-1252">Windows-1252</option>
477
+ </select>
478
+ </div>
479
+
480
+ <div class="form-group">
481
+ <label>Header Row</label>
482
+ <select class="form-control" id="has-header">
483
+ <option value="auto">Auto-detect</option>
484
+ <option value="yes">Yes</option>
485
+ <option value="no">No</option>
486
+ </select>
487
+ </div>
488
+
489
+ <div class="form-group">
490
+ <label>Delimiter</label>
491
+ <select class="form-control" id="delimiter">
492
+ <option value="auto">Auto-detect</option>
493
+ <option value="comma">Comma (CSV)</option>
494
+ <option value="semicolon">Semicolon</option>
495
+ <option value="tab">Tab (TSV)</option>
496
+ </select>
497
+ </div>
498
+ </div>
499
+
500
+ <div class="data-preview" id="preparation-preview" style="display: none;">
501
+ <h3>Data Preview</h3>
502
+ <div class="visualization-area">
503
+ <div class="visualization-placeholder">
504
+ <i class="fas fa-table"></i>
505
+ <p>Run data preparation to see a preview of your structured data</p>
506
+ </div>
507
+ </div>
508
+ </div>
509
+
510
+ <div class="progress-container" id="preparation-progress" style="display: none;">
511
+ <div class="progress-bar" id="preparation-progress-bar"></div>
512
+ </div>
513
+ <div class="status-message" id="preparation-status"></div>
514
+ </div>
515
+
516
+ <!-- Data Cleaning Step -->
517
+ <div class="pipeline-step" id="data-cleaning">
518
+ <div class="pipeline-step-header">
519
+ <div style="display: flex; align-items: center;">
520
+ <div class="step-number">3</div>
521
+ <div class="step-title">
522
+ <h2>Data Cleaning</h2>
523
+ <p>Identify and handle missing, incorrect, or inconsistent data</p>
524
+ </div>
525
+ </div>
526
+ <div class="step-actions">
527
+ <button class="btn btn-outline" onclick="autoConfigure('cleaning')">
528
+ <i class="fas fa-magic"></i> Auto-Configure
529
+ </button>
530
+ <button class="btn btn-primary" onclick="runStep('data-cleaning')">
531
+ <i class="fas fa-play"></i> Run
532
+ </button>
533
+ </div>
534
+ </div>
535
+
536
+ <div class="alert alert-warning" id="cleaning-alert" style="display: none;">
537
+ <i class="fas fa-exclamation-triangle"></i> <span id="cleaning-issues-count">0</span> potential data quality issues detected
538
+ </div>
539
+
540
+ <div class="form-group">
541
+ <label>Handling Missing Values</label>
542
+ <div class="checkbox-group">
543
+ <div class="checkbox-item">
544
+ <input type="checkbox" id="remove-nulls" checked>
545
+ <label for="remove-nulls">Remove rows with missing values</label>
546
+ </div>
547
+ <div class="checkbox-item">
548
+ <input type="checkbox" id="impute-mean">
549
+ <label for="impute-mean">Impute with mean (numeric)</label>
550
+ </div>
551
+ <div class="checkbox-item">
552
+ <input type="checkbox" id="impute-mode">
553
+ <label for="impute-mode">Impute with mode (categorical)</label>
554
+ </div>
555
+ <div class="checkbox-item">
556
+ <input type="checkbox" id="mark-nulls">
557
+ <label for="mark-nulls">Mark missing values as 'Unknown'</label>
558
+ </div>
559
+ </div>
560
+ </div>
561
+
562
+ <div class="form-group">
563
+ <label>Handling Outliers</label>
564
+ <div class="checkbox-group">
565
+ <div class="checkbox-item">
566
+ <input type="checkbox" id="remove-outliers">
567
+ <label for="remove-outliers">Remove statistical outliers (z-score > 3)</label>
568
+ </div>
569
+ <div class="checkbox-item">
570
+ <input type="checkbox" id="winsorize">
571
+ <label for="winsorize">Winsorize (cap extreme values)</label>
572
+ </div>
573
+ <div class="checkbox-item">
574
+ <input type="checkbox" id="log-transform">
575
+ <label for="log-transform">Apply log transformation</label>
576
+ </div>
577
+ </div>
578
+ </div>
579
+
580
+ <div class="form-group">
581
+ <label>Text Normalization</label>
582
+ <div class="checkbox-group">
583
+ <div class="checkbox-item">
584
+ <input type="checkbox" id="lowercase" checked>
585
+ <label for="lowercase">Convert to lowercase</label>
586
+ </div>
587
+ <div class="checkbox-item">
588
+ <input type="checkbox" id="remove-whitespace">
589
+ <label for="remove-whitespace">Trim whitespace</label>
590
+ </div>
591
+ <div class="checkbox-item">
592
+ <input type="checkbox" id="remove-special-chars">
593
+ <label for="remove-special-chars">Remove special characters</label>
594
+ </div>
595
+ </div>
596
+ </div>
597
+
598
+ <div class="visualization-area" id="cleaning-visualization">
599
+ <div class="visualization-placeholder">
600
+ <i class="fas fa-broom"></i>
601
+ <p>Run data cleaning to visualize the cleaning process</p>
602
+ </div>
603
+ </div>
604
+
605
+ <div class="progress-container" id="cleaning-progress" style="display: none;">
606
+ <div class="progress-bar" id="cleaning-progress-bar"></div>
607
+ </div>
608
+ <div class="status-message" id="cleaning-status"></div>
609
+ </div>
610
+
611
+ <!-- Continue with other steps in the same pattern -->
612
+ <!-- Data Transformation - Step 4 -->
613
+ <div class="pipeline-step" id="data-transformation">
614
+ <div class="pipeline-step-header">
615
+ <div style="display: flex; align-items: center;">
616
+ <div class="step-number">4</div>
617
+ <div class="step-title">
618
+ <h2>Data Transformation</h2>
619
+ <p>Convert data into appropriate formats and scales</p>
620
+ </div>
621
+ </div>
622
+ <div class="step-actions">
623
+ <button class="btn btn-outline" onclick="autoConfigure('transformation')">
624
+ <i class="fas fa-magic"></i> Auto-Configure
625
+ </button>
626
+ <button class="btn btn-primary" onclick="runStep('data-transformation')">
627
+ <i class="fas fa-play"></i> Run
628
+ </button>
629
+ </div>
630
+ </div>
631
+
632
+ <div class="form-group">
633
+ <label>Feature Scaling</label>
634
+ <div class="checkbox-group">
635
+ <div class="checkbox-item">
636
+ <input type="radio" name="scaling" id="standard-scaling" checked>
637
+ <label for="standard-scaling">Standard Scaling (Z-score)</label>
638
+ </div>
639
+ <div class="checkbox-item">
640
+ <input type="radio" name="scaling" id="minmax-scaling">
641
+ <label for="minmax-scaling">Min-Max Scaling (0-1)</label>
642
+ </div>
643
+ <div class="checkbox-item">
644
+ <input type="radio" name="scaling" id="robust-scaling">
645
+ <label for="robust-scaling">Robust Scaling (median/IQR)</label>
646
+ </div>
647
+ <div class="checkbox-item">
648
+ <input type="radio" name="scaling" id="no-scaling">
649
+ <label for="no-scaling">No Scaling</label>
650
+ </div>
651
+ </div>
652
+ </div>
653
+
654
+ <div class="form-group">
655
+ <label>Encoding Categorical Variables</label>
656
+ <div class="checkbox-group">
657
+ <div class="checkbox-item">
658
+ <input type="radio" name="encoding" id="onehot-encoding" checked>
659
+ <label for="onehot-encoding">One-Hot Encoding</label>
660
+ </div>
661
+ <div class="checkbox-item">
662
+ <input type="radio" name="encoding" id="label-encoding">
663
+ <label for="label-encoding">Label Encoding</label>
664
+ </div>
665
+ <div class="checkbox-item">
666
+ <input type="radio" name="encoding" id="target-encoding">
667
+ <label for="target-encoding">Target Encoding</label>
668
+ </div>
669
+ <div class="checkbox-item">
670
+ <input type="radio" name="encoding" id="frequency-encoding">
671
+ <label for="frequency-encoding">Frequency Encoding</label>
672
+ </div>
673
+ </div>
674
+ </div>
675
+
676
+ <div class="form-group">
677
+ <label>Date/Time Features</label>
678
+ <div class="checkbox-group">
679
+ <div class="checkbox-item">
680
+ <input type="checkbox" id="extract-year">
681
+ <label for="extract-year">Extract year</label>
682
+ </div>
683
+ <div class="checkbox-item">
684
+ <input type="checkbox" id="extract-month">
685
+ <label for="extract-month">Extract month</label>
686
+ </div>
687
+ <div class="checkbox-item">
688
+ <input type="checkbox" id="extract-day">
689
+ <label for="extract-day">Extract day</label>
690
+ </div>
691
+ <div class="checkbox-item">
692
+ <input type="checkbox" id="extract-dow">
693
+ <label for="extract-dow">Extract day of week</label>
694
+ </div>
695
+ <div class="checkbox-item">
696
+ <input type="checkbox" id="extract-hour">
697
+ <label for="extract-hour">Extract hour</label>
698
+ </div>
699
+ </div>
700
+ </div>
701
+
702
+ <!-- Visualization for pre-post transformation comparison -->
703
+ <div class="visualization-area" id="transformation-visualization">
704
+ <div class="visualization-placeholder">
705
+ <i class="fas fa-exchange-alt"></i>
706
+ <p>Run data transformation to see before/after comparison</p>
707
+ </div>
708
+ </div>
709
+
710
+ <div class="progress-container" id="transformation-progress" style="display: none;">
711
+ <div class="progress-bar" id="transformation-progress-bar"></div>
712
+ </div>
713
+ <div class="status-message" id="transformation-status"></div>
714
+ </div>
715
+
716
+ <!-- Data Integration - Step 5 -->
717
+ <div class="pipeline-step" id="data-integration">
718
+ <div class="pipeline-step-header">
719
+ <div style="display: flex; align-items: center;">
720
+ <div class="step-number">5</div>
721
+ <div class="step-title">
722
+ <h2>Data Integration</h2>
723
+ <p>Combine data from multiple sources</p>
724
+ </div>
725
+ </div>
726
+ <div class="step-actions">
727
+ <button class="btn btn-outline" onclick="autoConfigure('integration')">
728
+ <i class="fas fa-magic"></i> Auto-Configure
729
+ </button>
730
+ <button class="btn btn-primary" onclick="runStep('data-integration')">
731
+ <i class="fas fa-play"></i> Run
732
+ </button>
733
+ </div>
734
+ </div>
735
+
736
+ <div class="alert alert-info">
737
+ <i class="fas fa-info-circle"></i> Upload additional datasets to integrate with your main dataset.
738
+ </div>
739
+
740
+ <div class="file-upload" id="secondary-upload-area" onclick="document.getElementById('secondary-input').click()">
741
+ <input type="file" id="secondary-input" style="display: none;" accept=".csv,.json,.xlsx,.parquet" multiple>
742
+ <i class="fas fa-plus-circle"></i>
743
+ <h3>Upload Additional Datasets</h3>
744
+ <p>Click to browse or drag and drop your files</p>
745
+ <button class="btn btn-outline">
746
+ <i class="fas fa-folder-plus"></i> Add Files
747
+ </button>
748
+ <div class="file-info" id="secondary-file-info">
749
+ <i class="fas fa-file-alt"></i> <span id="secondary-file-name">0 additional files</span>
750
+ </div>
751
+ </div>
752
+
753
+ <div class="form-group">
754
+ <label>Integration Method</label>
755
+ <select class="form-control" id="integration-method">
756
+ <option value="join">Join (on common columns)</option>
757
+ <option value="concat">Concatenate (same structure)</option>
758
+ <option value="merge">Merge (complex matching)</option>
759
+ </select>
760
+ </div>
761
+
762
+ <div id="join-settings" class="form-group" style="display: block;">
763
+ <label>Join Parameters</label>
764
+ <div class="params-grid">
765
+ <div class="form-group">
766
+ <label>Join Type</label>
767
+ <select class="form-control" id="join-type">
768
+ <option value="inner">Inner Join</option>
769
+ <option value="left">Left Join</option>
770
+ <option value="right">Right Join</option>
771
+ <option value="outer">Full Outer Join</option>
772
+ </select>
773
+ </div>
774
+ <div class="form-group">
775
+ <label>Left Join Key</label>
776
+ <select class="form-control" id="left-join-key">
777
+ <option value="">Select column...</option>
778
+ </select>
779
+ </div>
780
+ <div class="form-group">
781
+ <label>Right Join Key</label>
782
+ <select class="form-control" id="right-join-key">
783
+ <option value="">Select column...</option>
784
+ </select>
785
+ </div>
786
+ </div>
787
+ </div>
788
+
789
+ <!-- Visualization for integrated data -->
790
+ <div class="visualization-area" id="integration-visualization">
791
+ <div class="visualization-placeholder">
792
+ <i class="fas fa-object-group"></i>
793
+ <p>Run data integration to see the combined dataset</p>
794
+ </div>
795
+ </div>
796
+
797
+ <div class="progress-container" id="integration-progress" style="display: none;">
798
+ <div class="progress-bar" id="integration-progress-bar"></div>
799
+ </div>
800
+ <div class="status-message" id="integration-status"></div>
801
+ </div>
802
+
803
+ <!-- Data Reduction - Step 6 -->
804
+ <div class="pipeline-step" id="data-reduction">
805
+ <div class="pipeline-step-header">
806
+ <div style="display: flex; align-items: center;">
807
+ <div class="step-number">6</div>
808
+ <div class="step-title">
809
+ <h2>Data Reduction</h2>
810
+ <p>Reduce data size while preserving important information</p>
811
+ </div>
812
+ </div>
813
+ <div class="step-actions">
814
+ <button class="btn btn-outline" onclick="autoConfigure('reduction')">
815
+ <i class="fas fa-magic"></i> Auto-Configure
816
+ </button>
817
+ <button class="btn btn-primary" onclick="runStep('data-reduction')">
818
+ <i class="fas fa-play"></i> Run
819
+ </button>
820
+ </div>
821
+ </div>
822
+
823
+ <div class="form-group">
824
+ <label>Dimensionality Reduction</label>
825
+ <div class="checkbox-group">
826
+ <div class="checkbox-item">
827
+ <input type="radio" name="dim-reduction" id="pca-reduction" checked>
828
+ <label for="pca-reduction">PCA (Principal Component Analysis)</label>
829
+ </div>
830
+ <div class="checkbox-item">
831
+ <input type="radio" name="dim-reduction" id="tsne-reduction">
832
+ <label for="tsne-reduction">t-SNE (t-Distributed Stochastic Neighbor Embedding)</label>
833
+ </div>
834
+ <div class="checkbox-item">
835
+ <input type="radio" name="dim-reduction" id="umap-reduction">
836
+ <label for="umap-reduction">UMAP (Uniform Manifold Approximation)</label>
837
+ </div>
838
+ <div class="checkbox-item">
839
+ <input type="radio" name="dim-reduction" id="no-dim-reduction">
840
+ <label for="no-dim-reduction">No Dimensionality Reduction</label>
841
+ </div>
842
+ </div>
843
+ </div>
844
+
845
+ <div class="form-group" id="pca-settings">
846
+ <label>PCA Settings</label>
847
+ <div class="params-grid">
848
+ <div class="form-group">
849
+ <label>Number of Components</label>
850
+ <select class="form-control" id="pca-components">
851
+ <option value="auto">Auto (Keep 95% variance)</option>
852
+ <option value="2">2 Components</option>
853
+ <option value="3">3 Components</option>
854
+ <option value="custom">Custom</option>
855
+ </select>
856
+ </div>
857
+ <div class="form-group" id="custom-components-group" style="display: none;">
858
+ <label>Custom Components</label>
859
+ <input type="number" class="form-control" id="custom-components" min="1" max="50" placeholder="Enter number">
860
+ </div>
861
+ </div>
862
+ </div>
863
+
864
+ <div class="form-group">
865
+ <label>Feature Selection</label>
866
+ <div class="checkbox-group">
867
+ <div class="checkbox-item">
868
+ <input type="checkbox" id="remove-low-variance">
869
+ <label for="remove-low-variance">Remove low variance features</label>
870
+ </div>
871
+ <div class="checkbox-item">
872
+ <input type="checkbox" id="remove-correlated">
873
+ <label for="remove-correlated">Remove highly correlated features (>0.9)</label>
874
+ </div>
875
+ <div class="checkbox-item">
876
+ <input type="checkbox" id="select-kbest">
877
+ <label for="select-kbest">Select K best features (statistical tests)</label>
878
+ </div>
879
+ </div>
880
+ </div>
881
+
882
+ <div id="kbest-settings" class="form-group" style="display: none;">
883
+ <label>Select K Best Features Settings</label>
884
+ <div class="params-grid">
885
+ <div class="form-group">
886
+ <label>Number of Features (K)</label>
887
+ <input type="number" class="form-control" id="kbest-number" min="1" placeholder="e.g., 10">
888
+ </div>
889
+ <div class="form-group">
890
+ <label>Scoring Function</label>
891
+ <select class="form-control" id="kbest-score">
892
+ <option value="f_classif">ANOVA F-value (classification)</option>
893
+ <option value="mutual_info_classif">Mutual info (classification)</option>
894
+ <option value="f_regression">F-value (regression)</option>
895
+ <option value="mutual_info_regression">Mutual info (regression)</option>
896
+ </select>
897
+ </div>
898
+ </div>
899
+ </div>
900
+
901
+ <!-- Visualization for reduced data -->
902
+ <div class="visualization-area" id="reduction-visualization">
903
+ <div class="visualization-placeholder">
904
+ <i class="fas fa-compress-alt"></i>
905
+ <p>Run data reduction to see the feature importance and components</p>
906
+ </div>
907
+ </div>
908
+
909
+ <div class="progress-container" id="reduction-progress" style="display: none;">
910
+ <div class="progress-bar" id="reduction-progress-bar"></div>
911
+ </div>
912
+ <div class="status-message" id="reduction-status"></div>
913
+ </div>
914
+
915
+ <!-- Data Exploration (EDA) - Step 7 -->
916
+ <div class="pipeline-step" id="data-exploration">
917
+ <div class="pipeline-step-header">
918
+ <div style="display: flex; align-items: center;">
919
+ <div class="step-number">7</div>
920
+ <div class="step-title">
921
+ <h2>Exploratory Data Analysis</h2>
922
+ <p>Understand patterns, relationships, and statistics</p>
923
+ </div>
924
+ </div>
925
+ <div class="step-actions">
926
+ <button class="btn btn-primary" onclick="runStep('data-exploration')">
927
+ <i class="fas fa-chart-line"></i> Analyze
928
+ </button>
929
+ </div>
930
+ </div>
931
+
932
+ <div class="form-group">
933
+ <label>Analysis Types</label>
934
+ <div class="checkbox-group">
935
+ <div class="checkbox-item">
936
+ <input type="checkbox" id="summary-stats" checked>
937
+ <label for="summary-stats">Summary Statistics</label>
938
+ </div>
939
+ <div class="checkbox-item">
940
+ <input type="checkbox" id="distributions" checked>
941
+ <label for="distributions">Feature Distributions</label>
942
+ </div>
943
+ <div class="checkbox-item">
944
+ <input type="checkbox" id="correlations" checked>
945
+ <label for="correlations">Correlation Analysis</label>
946
+ </div>
947
+ <div class="checkbox-item">
948
+ <input type="checkbox" id="missing-analysis" checked>
949
+ <label for="missing-analysis">Missing Values Analysis</label>
950
+ </div>
951
+ <div class="checkbox-item">
952
+ <input type="checkbox" id="outlier-analysis">
953
+ <label for="outlier-analysis">Outlier Analysis</label>
954
+ </div>
955
+ <div class="checkbox-item">
956
+ <input type="checkbox" id="time-trends">
957
+ <label for="time-trends">Time Trends (if applicable)</label>
958
+ </div>
959
+ </div>
960
+ </div>
961
+
962
+ <div id="exploration-results">
963
+ <div class="visualization-area">
964
+ <div class="visualization-placeholder">
965
+ <i class="fas fa-search"></i>
966
+ <p>Run EDA to generate interactive visualizations and insights</p>
967
+ </div>
968
+ </div>
969
+
970
+ <div class="data-preview" id="eda-summary" style="display: none; margin-top: 20px;">
971
+ <h3>Summary Statistics</h3>
972
+ <div class="visualization-area" id="summary-stats-vis">
973
+ <!-- Will be filled with summary stats table -->
974
+ </div>
975
+ </div>
976
+
977
+ <div class="data-preview" id="eda-distributions" style="display: none; margin-top: 20px;">
978
+ <h3>Feature Distributions</h3>
979
+ <div class="visualization-area" id="distributions-vis">
980
+ <!-- Will be filled with distribution charts -->
981
+ </div>
982
+ </div>
983
+
984
+ <div class="data-preview" id="eda-correlations" style="display: none; margin-top: 20px;">
985
+ <h3>Correlation Analysis</h3>
986
+ <div class="visualization-area" id="correlations-vis">
987
+ <!-- Will be filled with correlation matrix -->
988
+ </div>
989
+ </div>
990
+ </div>
991
+
992
+ <div class="progress-container" id="exploration-progress" style="display: none;">
993
+ <div class="progress-bar" id="exploration-progress-bar"></div>
994
+ </div>
995
+ <div class="status-message" id="exploration-status"></div>
996
+ </div>
997
+
998
+ <!-- Feature Engineering - Step 8 -->
999
+ <div class="pipeline-step" id="feature-engineering">
1000
+ <div class="pipeline-step-header">
1001
+ <div style="display: flex; align-items: center;">
1002
+ <div class="step-number">8</div>
1003
+ <div class="step-title">
1004
+ <h2>Feature Engineering</h2>
1005
+ <p>Create new informative features from existing data</p>
1006
+ </div>
1007
+ </div>
1008
+ <div class="step-actions">
1009
+ <button class="btn btn-outline" onclick="autoConfigure('feature-engineering')">
1010
+ <i class="fas fa-magic"></i> Auto-Configure
1011
+ </button>
1012
+ <button class="btn btn-primary" onclick="runStep('feature-engineering')">
1013
+ <i class="fas fa-play"></i> Run
1014
+ </button>
1015
+ </div>
1016
+ </div>
1017
+
1018
+ <div class="alert alert-info">
1019
+ <i class="fas fa-lightbulb"></i> Feature engineering suggestions are based on your data characteristics from EDA.
1020
+ </div>
1021
+
1022
+ <div class="form-group">
1023
+ <label>Automated Feature Creation</label>
1024
+ <div class="checkbox-group">
1025
+ <div class="checkbox-item">
1026
+ <input type="checkbox" id="polynomial-features">
1027
+ <label for="polynomial-features">Polynomial Features (degree 2)</label>
1028
+ </div>
1029
+ <div class="checkbox-item">
1030
+ <input type="checkbox" id="interaction-features">
1031
+ <label for="interaction-features">Interaction Features</label>
1032
+ </div>
1033
+ <div class="checkbox-item">
1034
+ <input type="checkbox" id="binning-features">
1035
+ <label for="binning-features">Binning/Numeric Discretization</label>
1036
+ </div>
1037
+ <div class="checkbox-item">
1038
+ <input type="checkbox" id="datetime-features">
1039
+ <label for="datetime-features">Date/Time Features</label>
1040
+ </div>
1041
+ </div>
1042
+ </div>
1043
+
1044
+ <div id="custom-features-section" class="form-group">
1045
+ <label>Custom Feature Creation</label>
1046
+ <div class="visualization-area" style="min-height: 150px;">
1047
+ <div id="custom-features-container">
1048
+ <div class="form-group" id="feature-template" style="display: none;">
1049
+ <div class="params-grid">
1050
+ <div class="form-group">
1051
+ <input type="text" class="form-control" placeholder="Feature name">
1052
+ </div>
1053
+ <div class="form-group">
1054
+ <input type="text" class="form-control" placeholder="Formula (e.g. col1 / col2)">
1055
+ </div>
1056
+ <div class="form-group">
1057
+ <button class="btn btn-outline" onclick="removeFeature(this)"><i class="fas fa-trash"></i></button>
1058
+ </div>
1059
+ </div>
1060
+ </div>
1061
+ <button class="btn btn-outline" onclick="addFeature()">
1062
+ <i class="fas fa-plus"></i> Add Custom Feature
1063
+ </button>
1064
+ </div>
1065
+ </div>
1066
+ </div>
1067
+
1068
+ <!-- Feature importance visualization -->
1069
+ <div class="visualization-area" id="feature-importance-vis">
1070
+ <div class="visualization-placeholder">
1071
+ <i class="fas fa-star"></i>
1072
+ <p>Run feature engineering to see feature importance rankings</p>
1073
+ </div>
1074
+ </div>
1075
+
1076
+ <div class="progress-container" id="feature-progress" style="display: none;">
1077
+ <div class="progress-bar" id="feature-progress-bar"></div>
1078
+ </div>
1079
+ <div class="status-message" id="feature-status"></div>
1080
+ </div>
1081
+
1082
+ <!-- Data Splitting - Step 9 -->
1083
+ <div class="pipeline-step" id="data-splitting">
1084
+ <div class="pipeline-step-header">
1085
+ <div style="display: flex; align-items: center;">
1086
+ <div class="step-number">9</div>
1087
+ <div class="step-title">
1088
+ <h2>Data Splitting</h2>
1089
+ <p>Divide data into training, validation and test sets</p>
1090
+ </div>
1091
+ </div>
1092
+ <div class="step-actions">
1093
+ <button class="btn btn-primary" onclick="runStep('data-splitting')">
1094
+ <i class="fas fa-cut"></i> Split
1095
+ </button>
1096
+ </div>
1097
+ </div>
1098
+
1099
+ <div class="form-group">
1100
+ <label>Splitting Strategy</label>
1101
+ <div class="checkbox-group">
1102
+ <div class="checkbox-item">
1103
+ <input type="radio" name="split-strategy" id="default-split" checked>
1104
+ <label for="default-split">Default (70% train, 15% validation, 15% test)</label>
1105
+ </div>
1106
+ <div class="checkbox-item">
1107
+ <input type="radio" name="split-strategy" id="custom-split">
1108
+ <label for="custom-split">Custom Ratios</label>
1109
+ </div>
1110
+ <div class="checkbox-item">
1111
+ <input type="radio" name="split-strategy" id="time-split">
1112
+ <label for="time-split">Time-Based Split</label>
1113
+ </div>
1114
+ <div class="checkbox-item">
1115
+ <input type="radio" name="split-strategy" id="group-split">
1116
+ <label for="group-split">Group-Based Split</label>
1117
+ </div>
1118
+ </div>
1119
+ </div>
1120
+
1121
+ <div id="custom-split-settings" class="form-group" style="display: none;">
1122
+ <label>Custom Split Ratios</label>
1123
+ <div class="params-grid">
1124
+ <div class="form-group">
1125
+ <label>Training Set (%)</label>
1126
+ <input type="number" class="form-control" id="train-percent" min="1" max="98" value="70">
1127
+ </div>
1128
+ <div class="form-group">
1129
+ <label>Validation Set (%)</label>
1130
+ <input type="number" class="form-control" id="val-percent" min="1" max="98" value="15">
1131
+ </div>
1132
+ <div class="form-group">
1133
+ <label>Test Set (%)</label>
1134
+ <input type="number" class="form-control" id="test-percent" min="1" max="98" value="15">
1135
+ </div>
1136
+ </div>
1137
+ </div>
1138
+
1139
+ <div id="time-split-settings" class="form-group" style="display: none;">
1140
+ <label>Time-Based Split Settings</label>
1141
+ <div class="params-grid">
1142
+ <div class="form-group">
1143
+ <label>Date/Time Column</label>
1144
+ <select class="form-control" id="time-column">
1145
+ <option value="">Select column...</option>
1146
+ </select>
1147
+ </div>
1148
+ <div class="form-group">
1149
+ <label>Training Period</label>
1150
+ <input type="text" class="form-control" id="train-period" placeholder="e.g., first 70%">
1151
+ </div>
1152
+ <div class="form-group">
1153
+ <label>Validation Period</label>
1154
+ <input type="text" class="form-control" id="val-period" placeholder="e.g., next 15%">
1155
+ </div>
1156
+ </div>
1157
+ </div>
1158
+
1159
+ <div id="group-split-settings" class="form-group" style="display: none;">
1160
+ <label>Group-Based Split Settings</label>
1161
+ <div class="params-grid">
1162
+ <div class="form-group">
1163
+ <label>Group Column</label>
1164
+ <select class="form-control" id="group-column">
1165
+ <option value="">Select column...</option>
1166
+ </select>
1167
+ </div>
1168
+ </div>
1169
+ </div>
1170
+
1171
+ <div class="form-group">
1172
+ <label>Stratification</label>
1173
+ <div class="checkbox-item">
1174
+ <input type="checkbox" id="stratified-split" checked>
1175
+ <label for="stratified-split">Preserve target variable distribution across splits</label>
1176
+ </div>
1177
+ </div>
1178
+
1179
+ <div id="target-column-group" class="form-group" style="display: block;">
1180
+ <label>Target Column (For Stratification)</label>
1181
+ <select class="form-control" id="target-column">
1182
+ <option value="">Select column...</option>
1183
+ </select>
1184
+ </div>
1185
+
1186
+ <!-- Split visualization -->
1187
+ <div class="visualization-area" id="split-visualization">
1188
+ <div class="visualization-placeholder">
1189
+ <i class="fas fa-chart-pie"></i>
1190
+ <p>Run data splitting to see the distribution of your datasets</p>
1191
+ </div>
1192
+ </div>
1193
+
1194
+ <div class="progress-container" id="split-progress" style="display: none;">
1195
+ <div class="progress-bar" id="split-progress-bar"></div>
1196
+ </div>
1197
+ <div class="status-message" id="split-status"></div>
1198
+ </div>
1199
+
1200
+ <!-- Data Modeling - Step 10 -->
1201
+ <div class="pipeline-step" id="data-modeling">
1202
+ <div class="pipeline-step-header">
1203
+ <div style="display: flex; align-items: center;">
1204
+ <div class="step-number">10</div>
1205
+ <div class="step-title">
1206
+ <h2>Modeling</h2>
1207
+ <p>Build and evaluate machine learning models</p>
1208
+ </div>
1209
+ </div>
1210
+ <div class="step-actions">
1211
+ <button class="btn btn-outline" onclick="autoConfigure('modeling')">
1212
+ <i class="fas fa-magic"></i> Auto-Configure
1213
+ </button>
1214
+ <button class="btn btn-primary" onclick="runStep('data-modeling')">
1215
+ <i class="fas fa-rocket"></i> Run Models
1216
+ </button>
1217
+ </div>
1218
+ </div>
1219
+
1220
+ <div class="alert alert-info">
1221
+ <i class="fas fa-info-circle"></i> The agent will automatically select appropriate models based on your problem type.
1222
+ </div>
1223
+
1224
+ <div class="form-group">
1225
+ <label>Problem Type</label>
1226
+ <div class="checkbox-group">
1227
+ <div class="checkbox-item">
1228
+ <input type="radio" name="problem-type" id="classification" checked>
1229
+ <label for="classification">Classification</label>
1230
+ </div>
1231
+ <div class="checkbox-item">
1232
+ <input type="radio" name="problem-type" id="regression">
1233
+ <label for="regression">Regression</label>
1234
+ </div>
1235
+ <div class="checkbox-item">
1236
+ <input type="radio" name="problem-type" id="clustering">
1237
+ <label for="clustering">Clustering</label>
1238
+ </div>
1239
+ <div class="checkbox-item">
1240
+ <input type="radio" name="problem-type" id="anomaly">
1241
+ <label for="anomaly">Anomaly Detection</label>
1242
+ </div>
1243
+ </div>
1244
+ </div>
1245
+
1246
+ <div id="classification-models" class="form-group" style="display: block;">
1247
+ <label>Classification Models (Auto-Selected)</label>
1248
+ <div class="params-grid">
1249
+ <div class="form-group">
1250
+ <div class="checkbox-item">
1251
+ <input type="checkbox" id="model-rf" checked>
1252
+ <label for="model-rf">Random Forest</label>
1253
+ </div>
1254
+ </div>
1255
+ <div class="form-group">
1256
+ <div class="checkbox-item">
1257
+ <input type="checkbox" id="model-xgboost" checked>
1258
+ <label for="model-xgboost">XGBoost</label>
1259
+ </div>
1260
+ </div>
1261
+ <div class="form-group">
1262
+ <div class="checkbox-item">
1263
+ <input type="checkbox" id="model-logistic" checked>
1264
+ <label for="model-logistic">Logistic Regression</label>
1265
+ </div>
1266
+ </div>
1267
+ <div class="form-group">
1268
+ <div class="checkbox-item">
1269
+ <input type="checkbox" id="model-svm">
1270
+ <label for="model-svm">SVM</label>
1271
+ </div>
1272
+ </div>
1273
+ </div>
1274
+ </div>
1275
+
1276
+ <div id="regression-models" class="form-group" style="display: none;">
1277
+ <label>Regression Models (Auto-Selected)</label>
1278
+ <div class="params-grid">
1279
+ <div class="form-group">
1280
+ <div class="checkbox-item">
1281
+ <input type="checkbox" id="model-rf-reg" checked>
1282
+ <label for="model-rf-reg">Random Forest Regressor</label>
1283
+ </div>
1284
+ </div>
1285
+ <div class="form-group">
1286
+ <div class="checkbox-item">
1287
+ <input type="checkbox" id="model-xgb-reg" checked>
1288
+ <label for="model-xgb-reg">XGBoost Regressor</label>
1289
+ </div>
1290
+ </div>
1291
+ <div class="form-group">
1292
+ <div class="checkbox-item">
1293
+ <input type="checkbox" id="model-linear" checked>
1294
+ <label for="model-linear">Linear Regression</label>
1295
+ </div>
1296
+ </div>
1297
+ </div>
1298
+ </div>
1299
+
1300
+ <div class="form-group">
1301
+ <label>Cross-Validation</label>
1302
+ <div class="params-grid">
1303
+ <div class="form-group">
1304
+ <select class="form-control" id="cv-type">
1305
+ <option value="kfold">K-Fold (K=5)</option>
1306
+ <option value="stratified">Stratified K-Fold</option>
1307
+ <option value="timeseries">Time Series Split</option>
1308
+ <option value="none">No Cross-Validation</option>
1309
+ </select>
1310
+ </div>
1311
+ <div class="form-group">
1312
+ <input type="number" class="form-control" id="cv-folds" min="2" max="20" value="5">
1313
+ </div>
1314
+ </div>
1315
+ </div>
1316
+
1317
+ <div class="form-group">
1318
+ <label>Hyperparameter Tuning</label>
1319
+ <div class="params-grid">
1320
+ <div class="form-group">
1321
+ <select class="form-control" id="hpt-method">
1322
+ <option value="grid">Grid Search</option>
1323
+ <option value="random">Random Search</option>
1324
+ <option value="bayesian">Bayesian Optimization</option>
1325
+ <option value="none">No Tuning</option>
1326
+ </select>
1327
+ </div>
1328
+ </div>
1329
+ </div>
1330
+
1331
+ <!-- Model comparison visualization -->
1332
+ <div class="visualization-area" id="model-comparison-vis">
1333
+ <div class="visualization-placeholder">
1334
+ <i class="fas fa-trophy"></i>
1335
+ <p>Run modeling to see model performance comparison</p>
1336
+ </div>
1337
+ </div>
1338
+
1339
+ <div class="progress-container" id="model-progress" style="display: none;">
1340
+ <div class="progress-bar" id="model-progress-bar"></div>
1341
+ </div>
1342
+ <div class="status-message" id="model-status"></div>
1343
+ </div>
1344
+
1345
+ <!-- Final step - Export/Deploy -->
1346
+ <div class="pipeline-step" id="export-deploy">
1347
+ <div class="pipeline-step-header">
1348
+ <div style="display: flex; align-items: center;">
1349
+ <div class="step-number">11</div>
1350
+ <div class="step-title">
1351
+ <h2>Export & Deployment</h2>
1352
+ <p>Save your processed data and models</p>
1353
+ </div>
1354
+ </div>
1355
+ <div class="step-actions">
1356
+ <button class="btn btn-primary" onclick="exportPipeline()">
1357
+ <i class="fas fa-download"></i> Export
1358
+ </button>
1359
+ </div>
1360
+ </div>
1361
+
1362
+ <div class="form-group">
1363
+ <label>Export Options</label>
1364
+ <div class="checkbox-group">
1365
+ <div class="checkbox-item">
1366
+ <input type="checkbox" id="export-processed-data" checked>
1367
+ <label for="export-processed-data">Processed Dataset</label>
1368
+ </div>
1369
+ <div class="checkbox-item">
1370
+ <input type="checkbox"
1371
+ </html>