Hugging Face's logo

Spaces:
Breadwinner79
/
data-mining-project
Running

App Files Community
Breadwinner79 commited on
Commit
0d46658
·
verified ·
1 Parent(s): 85d851b

Make sure you fix all features, buttons, and components - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1103 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Data Mining Project
3
- emoji: 🏃
4
- colorFrom: green
5
- colorTo: pink
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-mining-project
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: red
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,1103 @@
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>Quantum Miner - Advanced Data Mining Platform</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
11
+ <style>
12
+ @keyframes pulse {
13
+ 0%, 100% { opacity: 1; }
14
+ 50% { opacity: 0.5; }
15
+ }
16
+ .animate-pulse {
17
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
18
+ }
19
+ .sidebar {
20
+ transition: all 0.3s ease;
21
+ }
22
+ .data-mining-card:hover {
23
+ transform: translateY(-5px);
24
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
25
+ }
26
+ .algorithm-card {
27
+ transition: all 0.2s ease;
28
+ }
29
+ .algorithm-card:hover {
30
+ transform: scale(1.02);
31
+ }
32
+ .node {
33
+ cursor: move;
34
+ user-select: none;
35
+ }
36
+ .connection {
37
+ stroke: #4f46e5;
38
+ stroke-width: 2px;
39
+ fill: none;
40
+ }
41
+ #dataCanvas {
42
+ background-color: #f8fafc;
43
+ border-radius: 0.5rem;
44
+ }
45
+ .dark #dataCanvas {
46
+ background-color: #1e293b;
47
+ }
48
+ .progress-ring__circle {
49
+ transition: stroke-dashoffset 0.35s;
50
+ transform: rotate(-90deg);
51
+ transform-origin: 50% 50%;
52
+ }
53
+ .tooltip {
54
+ position: relative;
55
+ display: inline-block;
56
+ }
57
+ .tooltip .tooltiptext {
58
+ visibility: hidden;
59
+ width: 200px;
60
+ background-color: #333;
61
+ color: #fff;
62
+ text-align: center;
63
+ border-radius: 6px;
64
+ padding: 5px;
65
+ position: absolute;
66
+ z-index: 1;
67
+ bottom: 125%;
68
+ left: 50%;
69
+ margin-left: -100px;
70
+ opacity: 0;
71
+ transition: opacity 0.3s;
72
+ }
73
+ .tooltip:hover .tooltiptext {
74
+ visibility: visible;
75
+ opacity: 1;
76
+ }
77
+ .glow {
78
+ box-shadow: 0 0 10px rgba(79, 70, 229, 0.7);
79
+ }
80
+ .node-highlight {
81
+ animation: glow-pulse 1.5s infinite alternate;
82
+ }
83
+ @keyframes glow-pulse {
84
+ from { box-shadow: 0 0 5px rgba(79, 70, 229, 0.5); }
85
+ to { box-shadow: 0 0 15px rgba(79, 70, 229, 0.9); }
86
+ }
87
+ .scrollbar-hide::-webkit-scrollbar {
88
+ display: none;
89
+ }
90
+ .scrollbar-hide {
91
+ -ms-overflow-style: none;
92
+ scrollbar-width: none;
93
+ }
94
+ </style>
95
+ </head>
96
+ <body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors duration-300">
97
+ <div class="flex h-screen overflow-hidden">
98
+ <!-- Sidebar -->
99
+ <div id="sidebar" class="sidebar w-64 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 flex flex-col transition-all duration-300">
100
+ <div class="p-4 border-b border-gray-200 dark:border-gray-700">
101
+ <div class="flex items-center">
102
+ <div class="w-10 h-10 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center text-white font-bold">QM</div>
103
+ <div class="ml-3">
104
+ <h1 class="font-bold text-lg">Quantum Miner</h1>
105
+ <p class="text-xs text-gray-500 dark:text-gray-400">v3.2.1</p>
106
+ </div>
107
+ </div>
108
+ </div>
109
+
110
+ <div class="flex-1 overflow-y-auto p-4 scrollbar-hide">
111
+ <div class="mb-6">
112
+ <h2 class="text-xs uppercase font-semibold text-gray-500 dark:text-gray-400 mb-2">Data Sources</h2>
113
+ <div class="space-y-1">
114
+ <button class="w-full flex items-center px-3 py-2 text-sm rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
115
+ <i class="fas fa-database mr-2 text-indigo-500"></i> Databases
116
+ <span class="ml-auto bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200 text-xs px-2 py-0.5 rounded-full">12</span>
117
+ </button>
118
+ <button class="w-full flex items-center px-3 py-2 text-sm rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
119
+ <i class="fas fa-file-csv mr-2 text-green-500"></i> CSV/Excel
120
+ <span class="ml-auto bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 text-xs px-2 py-0.5 rounded-full">8</span>
121
+ </button>
122
+ <button class="w-full flex items-center px-3 py-2 text-sm rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
123
+ <i class="fas fa-cloud mr-2 text-blue-500"></i> Cloud Storage
124
+ <span class="ml-auto bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs px-2 py-0.5 rounded-full">5</span>
125
+ </button>
126
+ <button class="w-full flex items-center px-3 py-2 text-sm rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
127
+ <i class="fas fa-globe mr-2 text-purple-500"></i> Web Scraping
128
+ <span class="ml-auto bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 text-xs px-2 py-0.5 rounded-full">3</span>
129
+ </button>
130
+ <button class="w-full flex items-center px-3 py-2 text-sm rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
131
+ <i class="fas fa-stream mr-2 text-yellow-500"></i> API Integration
132
+ <span class="ml-auto bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs px-2 py-0.5 rounded-full">7</span>
133
+ </button>
134
+ </div>
135
+ </div>
136
+
137
+ <div class="mb-6">
138
+ <h2 class="text-xs uppercase font-semibold text-gray-500 dark:text-gray-400 mb-2">Algorithms</h2>
139
+ <div class="space-y-1">
140
+ <button class="w-full flex items-center px-3 py-2 text-sm rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
141
+ <i class="fas fa-project-diagram mr-2 text-red-500"></i> Association Rules
142
+ </button>
143
+ <button class="w-full flex items-center px-3 py-2 text-sm rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
144
+ <i class="fas fa-sitemap mr-2 text-pink-500"></i> Decision Trees
145
+ </button>
146
+ <button class="w-full flex items-center px-3 py-2 text-sm rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
147
+ <i class="fas fa-chart-line mr-2 text-orange-500"></i> Regression
148
+ </button>
149
+ <button class="w-full flex items-center px-3 py-2 text-sm rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
150
+ <i class="fas fa-layer-group mr-2 text-teal-500"></i> Clustering
151
+ <span class="ml-auto bg-teal-100 dark:bg-teal-900 text-teal-800 dark:text-teal-200 text-xs px-2 py-0.5 rounded-full">Active</span>
152
+ </button>
153
+ <button class="w-full flex items-center px-3 py-2 text-sm rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
154
+ <i class="fas fa-brain mr-2 text-indigo-500"></i> Neural Networks
155
+ </button>
156
+ </div>
157
+ </div>
158
+
159
+ <div class="mb-6">
160
+ <h2 class="text-xs uppercase font-semibold text-gray-500 dark:text-gray-400 mb-2">Visualization</h2>
161
+ <div class="space-y-1">
162
+ <button class="w-full flex items-center px-3 py-2 text-sm rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
163
+ <i class="fas fa-chart-bar mr-2 text-blue-500"></i> Charts
164
+ </button>
165
+ <button class="w-full flex items-center px-3 py-2 text-sm rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
166
+ <i class="fas fa-map mr-2 text-green-500"></i> Geospatial
167
+ </button>
168
+ <button class="w-full flex items-center px-3 py-2 text-sm rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
169
+ <i class="fas fa-network-wired mr-2 text-purple-500"></i> Network Graphs
170
+ </button>
171
+ </div>
172
+ </div>
173
+
174
+ <div class="mb-6">
175
+ <h2 class="text-xs uppercase font-semibold text-gray-500 dark:text-gray-400 mb-2">Projects</h2>
176
+ <div class="space-y-1">
177
+ <button class="w-full flex items-center px-3 py-2 text-sm rounded-lg bg-indigo-50 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-200 border border-indigo-100 dark:border-indigo-800">
178
+ <i class="fas fa-chart-pie mr-2 text-indigo-500"></i> Customer Segmentation
179
+ </button>
180
+ <button class="w-full flex items-center px-3 py-2 text-sm rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
181
+ <i class="fas fa-shopping-cart mr-2 text-yellow-500"></i> Market Basket
182
+ </button>
183
+ <button class="w-full flex items-center px-3 py-2 text-sm rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
184
+ <i class="fas fa-robot mr-2 text-red-500"></i> Fraud Detection
185
+ </button>
186
+ <button class="w-full flex items-center px-3 py-2 text-sm rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
187
+ <i class="fas fa-bolt mr-2 text-green-500"></i> Real-time Analytics
188
+ </button>
189
+ </div>
190
+ </div>
191
+
192
+ <div class="mb-6">
193
+ <h2 class="text-xs uppercase font-semibold text-gray-500 dark:text-gray-400 mb-2">Quick Actions</h2>
194
+ <div class="grid grid-cols-2 gap-2">
195
+ <button class="flex items-center justify-center px-3 py-2 text-sm rounded-lg bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors">
196
+ <i class="fas fa-plus mr-1 text-indigo-500"></i> New
197
+ </button>
198
+ <button class="flex items-center justify-center px-3 py-2 text-sm rounded-lg bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors">
199
+ <i class="fas fa-upload mr-1 text-blue-500"></i> Import
200
+ </button>
201
+ <button class="flex items-center justify-center px-3 py-2 text-sm rounded-lg bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors">
202
+ <i class="fas fa-share-alt mr-1 text-green-500"></i> Share
203
+ </button>
204
+ <button class="flex items-center justify-center px-3 py-2 text-sm rounded-lg bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors">
205
+ <i class="fas fa-cog mr-1 text-purple-500"></i> Settings
206
+ </button>
207
+ </div>
208
+ </div>
209
+ </div>
210
+
211
+ <div class="p-4 border-t border-gray-200 dark:border-gray-700">
212
+ <div class="flex items-center">
213
+ <div class="w-8 h-8 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center">
214
+ <i class="fas fa-user text-white text-sm"></i>
215
+ </div>
216
+ <div class="ml-3">
217
+ <p class="text-sm font-medium">Admin User</p>
218
+ <p class="text-xs text-gray-500 dark:text-gray-400">Premium License</p>
219
+ </div>
220
+ <button class="ml-auto text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors">
221
+ <i class="fas fa-cog"></i>
222
+ </button>
223
+ </div>
224
+ </div>
225
+ </div>
226
+
227
+ <!-- Main Content -->
228
+ <div class="flex-1 flex flex-col overflow-hidden">
229
+ <!-- Top Navigation -->
230
+ <div class="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 p-4 flex items-center justify-between">
231
+ <div class="flex items-center">
232
+ <button id="sidebarToggle" class="mr-4 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition-colors">
233
+ <i class="fas fa-bars"></i>
234
+ </button>
235
+ <div class="flex items-center">
236
+ <h2 class="text-xl font-bold">Customer Segmentation Analysis</h2>
237
+ <span class="ml-2 bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200 text-xs px-2 py-0.5 rounded-full">Active</span>
238
+ </div>
239
+ </div>
240
+
241
+ <div class="flex items-center space-x-4">
242
+ <div class="relative hidden md:block">
243
+ <input type="text" placeholder="Search datasets..." class="pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent w-64 transition-all">
244
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
245
+ </div>
246
+ <button class="p-2 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 relative transition-colors">
247
+ <i class="fas fa-bell"></i>
248
+ <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span>
249
+ </button>
250
+ <button id="darkModeToggle" class="p-2 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition-colors">
251
+ <i class="fas fa-moon"></i>
252
+ </button>
253
+ <button class="hidden md:flex items-center px-3 py-1.5 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg font-medium transition-colors text-sm">
254
+ <i class="fas fa-plus mr-2"></i> New Project
255
+ </button>
256
+ </div>
257
+ </div>
258
+
259
+ <!-- Content Area -->
260
+ <div class="flex-1 overflow-y-auto p-6">
261
+ <!-- Stats Cards -->
262
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
263
+ <div class="data-mining-card bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6 transition-all duration-300">
264
+ <div class="flex items-center justify-between">
265
+ <div>
266
+ <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Total Records</p>
267
+ <h3 class="text-2xl font-bold mt-1">1,248,753</h3>
268
+ </div>
269
+ <div class="w-12 h-12 rounded-full bg-indigo-100 dark:bg-indigo-900 flex items-center justify-center">
270
+ <i class="fas fa-database text-indigo-600 dark:text-indigo-300"></i>
271
+ </div>
272
+ </div>
273
+ <div class="mt-4 flex items-center text-sm text-green-500">
274
+ <i class="fas fa-arrow-up mr-1"></i>
275
+ <span>12.5% from last week</span>
276
+ </div>
277
+ </div>
278
+
279
+ <div class="data-mining-card bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6 transition-all duration-300">
280
+ <div class="flex items-center justify-between">
281
+ <div>
282
+ <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Attributes</p>
283
+ <h3 class="text-2xl font-bold mt-1">47</h3>
284
+ </div>
285
+ <div class="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center">
286
+ <i class="fas fa-columns text-blue-600 dark:text-blue-300"></i>
287
+ </div>
288
+ </div>
289
+ <div class="mt-4 flex items-center text-sm text-yellow-500">
290
+ <i class="fas fa-info-circle mr-1"></i>
291
+ <span>8 categorical, 39 numerical</span>
292
+ </div>
293
+ </div>
294
+
295
+ <div class="data-mining-card bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6 transition-all duration-300">
296
+ <div class="flex items-center justify-between">
297
+ <div>
298
+ <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Processing Time</p>
299
+ <h3 class="text-2xl font-bold mt-1">3.2s</h3>
300
+ </div>
301
+ <div class="w-12 h-12 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center">
302
+ <i class="fas fa-bolt text-green-600 dark:text-green-300"></i>
303
+ </div>
304
+ </div>
305
+ <div class="mt-4 flex items-center text-sm text-indigo-500">
306
+ <i class="fas fa-robot mr-1"></i>
307
+ <span>AI-optimized pipeline</span>
308
+ </div>
309
+ </div>
310
+
311
+ <div class="data-mining-card bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6 transition-all duration-300">
312
+ <div class="flex items-center justify-between">
313
+ <div>
314
+ <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Model Accuracy</p>
315
+ <h3 class="text-2xl font-bold mt-1">94.7%</h3>
316
+ </div>
317
+ <div class="w-12 h-12 rounded-full bg-purple-100 dark:bg-purple-900 flex items-center justify-center">
318
+ <i class="fas fa-chart-line text-purple-600 dark:text-purple-300"></i>
319
+ </div>
320
+ </div>
321
+ <div class="mt-4 flex items-center text-sm text-red-500">
322
+ <i class="fas fa-exclamation-triangle mr-1"></i>
323
+ <span>Needs improvement</span>
324
+ </div>
325
+ </div>
326
+ </div>
327
+
328
+ <!-- Main Visualization Area -->
329
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
330
+ <!-- Cluster Visualization -->
331
+ <div class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
332
+ <div class="flex items-center justify-between mb-4">
333
+ <h3 class="font-bold">Customer Segmentation Clusters</h3>
334
+ <div class="flex space-x-2">
335
+ <div class="relative">
336
+ <select class="appearance-none bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg pl-3 pr-8 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
337
+ <option>2D View</option>
338
+ <option>3D View</option>
339
+ <option>PCA Projection</option>
340
+ </select>
341
+ <i class="fas fa-chevron-down absolute right-3 top-2 text-gray-400 text-xs"></i>
342
+ </div>
343
+ <button class="px-3 py-1 text-sm rounded-lg bg-indigo-100 dark:bg-indigo-900 text-indigo-700 dark:text-indigo-200 hover:bg-indigo-200 dark:hover:bg-indigo-800 transition-colors">
344
+ <i class="fas fa-sliders-h mr-1"></i> Adjust
345
+ </button>
346
+ <button class="px-3 py-1 text-sm rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors">
347
+ <i class="fas fa-download mr-1"></i> Export
348
+ </button>
349
+ </div>
350
+ </div>
351
+ <div class="h-96 relative">
352
+ <canvas id="clusterChart"></canvas>
353
+ <div id="clusterLoading" class="absolute inset-0 bg-white dark:bg-gray-800 bg-opacity-70 dark:bg-opacity-70 flex items-center justify-center hidden">
354
+ <div class="text-center">
355
+ <i class="fas fa-circle-notch fa-spin text-indigo-500 text-2xl mb-2"></i>
356
+ <p class="text-sm text-gray-600 dark:text-gray-300">Rendering clusters...</p>
357
+ </div>
358
+ </div>
359
+ </div>
360
+ <div class="mt-4 flex justify-between items-center">
361
+ <div class="flex flex-wrap gap-2">
362
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200">
363
+ <span class="w-2 h-2 mr-1 rounded-full bg-indigo-500"></span> Cluster 1
364
+ </span>
365
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200">
366
+ <span class="w-2 h-2 mr-1 rounded-full bg-green-500"></span> Cluster 2
367
+ </span>
368
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200">
369
+ <span class="w-2 h-2 mr-1 rounded-full bg-yellow-500"></span> Cluster 3
370
+ </span>
371
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200">
372
+ <span class="w-2 h-2 mr-1 rounded-full bg-red-500"></span> Cluster 4
373
+ </span>
374
+ </div>
375
+ <button class="text-sm text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 transition-colors">
376
+ <i class="fas fa-plus mr-1"></i> Add Cluster
377
+ </button>
378
+ </div>
379
+ </div>
380
+
381
+ <!-- Cluster Details -->
382
+ <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
383
+ <div class="flex items-center justify-between mb-4">
384
+ <h3 class="font-bold">Cluster Characteristics</h3>
385
+ <div class="relative">
386
+ <select id="clusterSelect" class="appearance-none bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg pl-3 pr-8 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
387
+ <option>Cluster 1</option>
388
+ <option>Cluster 2</option>
389
+ <option>Cluster 3</option>
390
+ <option>Cluster 4</option>
391
+ </select>
392
+ <i class="fas fa-chevron-down absolute right-3 top-2 text-gray-400 text-xs"></i>
393
+ </div>
394
+ </div>
395
+
396
+ <div class="space-y-4">
397
+ <div>
398
+ <div class="flex justify-between text-sm mb-1">
399
+ <span class="text-gray-500 dark:text-gray-400">Size</span>
400
+ <span class="font-medium">312,188 (25%)</span>
401
+ </div>
402
+ <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
403
+ <div class="bg-indigo-500 h-2 rounded-full" style="width: 25%"></div>
404
+ </div>
405
+ </div>
406
+
407
+ <div>
408
+ <div class="flex justify-between text-sm mb-1">
409
+ <span class="text-gray-500 dark:text-gray-400">Avg. Age</span>
410
+ <span class="font-medium">34.2 years</span>
411
+ </div>
412
+ <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
413
+ <div class="bg-green-500 h-2 rounded-full" style="width: 68%"></div>
414
+ </div>
415
+ </div>
416
+
417
+ <div>
418
+ <div class="flex justify-between text-sm mb-1">
419
+ <span class="text-gray-500 dark:text-gray-400">Avg. Income</span>
420
+ <span class="font-medium">$72,450</span>
421
+ </div>
422
+ <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
423
+ <div class="bg-yellow-500 h-2 rounded-full" style="width: 82%"></div>
424
+ </div>
425
+ </div>
426
+
427
+ <div>
428
+ <div class="flex justify-between text-sm mb-1">
429
+ <span class="text-gray-500 dark:text-gray-400">Purchase Freq.</span>
430
+ <span class="font-medium">3.2/month</span>
431
+ </div>
432
+ <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
433
+ <div class="bg-red-500 h-2 rounded-full" style="width: 45%"></div>
434
+ </div>
435
+ </div>
436
+
437
+ <div class="pt-4 border-t border-gray-200 dark:border-gray-700">
438
+ <h4 class="text-sm font-medium mb-2">Top Attributes</h4>
439
+ <div class="space-y-2">
440
+ <div class="flex items-center">
441
+ <div class="w-2 h-2 rounded-full bg-indigo-500 mr-2"></div>
442
+ <span class="text-sm flex-1">Urban residents</span>
443
+ <span class="text-sm font-medium">89%</span>
444
+ </div>
445
+ <div class="flex items-center">
446
+ <div class="w-2 h-2 rounded-full bg-green-500 mr-2"></div>
447
+ <span class="text-sm flex-1">College educated</span>
448
+ <span class="text-sm font-medium">76%</span>
449
+ </div>
450
+ <div class="flex items-center">
451
+ <div class="w-2 h-2 rounded-full bg-yellow-500 mr-2"></div>
452
+ <span class="text-sm flex-1">Tech enthusiasts</span>
453
+ <span class="text-sm font-medium">68%</span>
454
+ </div>
455
+ <div class="flex items-center">
456
+ <div class="w-2 h-2 rounded-full bg-red-500 mr-2"></div>
457
+ <span class="text-sm flex-1">Premium subscribers</span>
458
+ <span class="text-sm font-medium">52%</span>
459
+ </div>
460
+ </div>
461
+ </div>
462
+
463
+ <div class="pt-4 border-t border-gray-200 dark:border-gray-700">
464
+ <h4 class="text-sm font-medium mb-2">Recommended Actions</h4>
465
+ <div class="grid grid-cols-2 gap-2">
466
+ <button class="text-xs px-2 py-1 rounded bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200 hover:bg-indigo-200 dark:hover:bg-indigo-800 transition-colors">
467
+ Targeted Ads
468
+ </button>
469
+ <button class="text-xs px-2 py-1 rounded bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 hover:bg-green-200 dark:hover:bg-green-800 transition-colors">
470
+ Loyalty Program
471
+ </button>
472
+ <button class="text-xs px-2 py-1 rounded bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 hover:bg-yellow-200 dark:hover:bg-yellow-800 transition-colors">
473
+ Upsell Products
474
+ </button>
475
+ <button class="text-xs px-2 py-1 rounded bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200 hover:bg-red-200 dark:hover:bg-red-800 transition-colors">
476
+ Special Offers
477
+ </button>
478
+ </div>
479
+ </div>
480
+ </div>
481
+ </div>
482
+ </div>
483
+
484
+ <!-- Algorithm Selection and Pipeline -->
485
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
486
+ <!-- Algorithm Cards -->
487
+ <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
488
+ <div class="flex items-center justify-between mb-4">
489
+ <h3 class="font-bold">Algorithm Selection</h3>
490
+ <button class="text-sm text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 transition-colors">
491
+ <i class="fas fa-random mr-1"></i> Auto-select
492
+ </button>
493
+ </div>
494
+
495
+ <div class="space-y-3">
496
+ <div class="algorithm-card bg-gray-50 dark:bg-gray-700 p-4 rounded-lg border border-gray-200 dark:border-gray-600">
497
+ <div class="flex items-center justify-between">
498
+ <div class="flex items-center">
499
+ <div class="w-8 h-8 rounded-full bg-indigo-100 dark:bg-indigo-900 flex items-center justify-center mr-3">
500
+ <i class="fas fa-filter text-indigo-600 dark:text-indigo-300"></i>
501
+ </div>
502
+ <div>
503
+ <h4 class="font-medium">Data Preprocessing</h4>
504
+ <p class="text-xs text-gray-500 dark:text-gray-400">StandardScaler, PCA</p>
505
+ </div>
506
+ </div>
507
+ <i class="fas fa-check-circle text-green-500"></i>
508
+ </div>
509
+ </div>
510
+
511
+ <div class="algorithm-card bg-gray-50 dark:bg-gray-700 p-4 rounded-lg border border-gray-200 dark:border-gray-600">
512
+ <div class="flex items-center justify-between">
513
+ <div class="flex items-center">
514
+ <div class="w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center mr-3">
515
+ <i class="fas fa-project-diagram text-blue-600 dark:text-blue-300"></i>
516
+ </div>
517
+ <div>
518
+ <h4 class="font-medium">Clustering</h4>
519
+ <p class="text-xs text-gray-500 dark:text-gray-400">K-Means (k=4)</p>
520
+ </div>
521
+ </div>
522
+ <i class="fas fa-check-circle text-green-500"></i>
523
+ </div>
524
+ </div>
525
+
526
+ <div class="algorithm-card bg-gray-50 dark:bg-gray-700 p-4 rounded-lg border border-gray-200 dark:border-gray-600">
527
+ <div class="flex items-center justify-between">
528
+ <div class="flex items-center">
529
+ <div class="w-8 h-8 rounded-full bg-purple-100 dark:bg-purple-900 flex items-center justify-center mr-3">
530
+ <i class="fas fa-chart-bar text-purple-600 dark:text-purple-300"></i>
531
+ </div>
532
+ <div>
533
+ <h4 class="font-medium">Evaluation</h4>
534
+ <p class="text-xs text-gray-500 dark:text-gray-400">Silhouette Score</p>
535
+ </div>
536
+ </div>
537
+ <div class="flex items-center">
538
+ <span class="text-xs font-medium mr-2">Score: 0.72</span>
539
+ <i class="fas fa-info-circle text-blue-500"></i>
540
+ </div>
541
+ </div>
542
+ </div>
543
+
544
+ <div class="algorithm-card bg-gray-50 dark:bg-gray-700 p-4 rounded-lg border-2 border-indigo-200 dark:border-indigo-800 hover:border-indigo-300 dark:hover:border-indigo-700 transition-colors cursor-pointer">
545
+ <div class="flex items-center justify-between">
546
+ <div class="flex items-center">
547
+ <div class="w-8 h-8 rounded-full bg-yellow-100 dark:bg-yellow-900 flex items-center justify-center mr-3">
548
+ <i class="fas fa-brain text-yellow-600 dark:text-yellow-300"></i>
549
+ </div>
550
+ <div>
551
+ <h4 class="font-medium">Advanced Options</h4>
552
+ <p class="text-xs text-gray-500 dark:text-gray-400">Add algorithm</p>
553
+ </div>
554
+ </div>
555
+ <i class="fas fa-plus text-indigo-500"></i>
556
+ </div>
557
+ </div>
558
+ </div>
559
+
560
+ <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
561
+ <button id="runPipelineBtn" class="w-full py-2 bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white rounded-lg font-medium transition-all shadow-md hover:shadow-lg">
562
+ <i class="fas fa-play mr-2"></i> Run Pipeline
563
+ </button>
564
+ </div>
565
+ </div>
566
+
567
+ <!-- Pipeline Visualization -->
568
+ <div class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
569
+ <div class="flex items-center justify-between mb-4">
570
+ <h3 class="font-bold">Data Mining Pipeline</h3>
571
+ <div class="flex space-x-2">
572
+ <button class="px-3 py-1 text-sm rounded-lg bg-indigo-100 dark:bg-indigo-900 text-indigo-700 dark:text-indigo-200 hover:bg-indigo-200 dark:hover:bg-indigo-800 transition-colors">
573
+ <i class="fas fa-code-branch mr-1"></i> Branch
574
+ </button>
575
+ <button class="px-3 py-1 text-sm rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors">
576
+ <i class="fas fa-save mr-1"></i> Save
577
+ </button>
578
+ <button class="px-3 py-1 text-sm rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors">
579
+ <i class="fas fa-history mr-1"></i> Version
580
+ </button>
581
+ </div>
582
+ </div>
583
+
584
+ <div class="h-64 relative overflow-hidden rounded-lg bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600">
585
+ <svg id="dataCanvas" width="100%" height="100%">
586
+ <!-- Nodes -->
587
+ <g class="node node-highlight" transform="translate(50, 100)">
588
+ <rect x="0" y="0" width="120" height="60" rx="5" ry="5" fill="#e0e7ff" stroke="#818cf8" stroke-width="2"></rect>
589
+ <text x="60" y="35" text-anchor="middle" fill="#312e81" font-weight="500" font-size="14">Data Source</text>
590
+ <text x="60" y="50" text-anchor="middle" fill="#4f46e5" font-size="12">CSV Import</text>
591
+ </g>
592
+
593
+ <g class="node" transform="translate(220, 100)">
594
+ <rect x="0" y="0" width="120" height="60" rx="5" ry="5" fill="#e0e7ff" stroke="#818cf8" stroke-width="2"></rect>
595
+ <text x="60" y="35" text-anchor="middle" fill="#312e81" font-weight="500" font-size="14">Preprocessing</text>
596
+ <text x="60" y="50" text-anchor="middle" fill="#4f46e5" font-size="12">StandardScaler</text>
597
+ </g>
598
+
599
+ <g class="node" transform="translate(390, 100)">
600
+ <rect x="0" y="0" width="120" height="60" rx="5" ry="5" fill="#e0e7ff" stroke="#818cf8" stroke-width="2"></rect>
601
+ <text x="60" y="35" text-anchor="middle" fill="#312e81" font-weight="500" font-size="14">Dimensionality</text>
602
+ <text x="60" y="50" text-anchor="middle" fill="#4f46e5" font-size="12">PCA (n=5)</text>
603
+ </g>
604
+
605
+ <g class="node" transform="translate(560, 100)">
606
+ <rect x="0" y="0" width="120" height="60" rx="5" ry="5" fill="#e0e7ff" stroke="#818cf8" stroke-width="2"></rect>
607
+ <text x="60" y="35" text-anchor="middle" fill="#312e81" font-weight="500" font-size="14">Clustering</text>
608
+ <text x="60" y="50" text-anchor="middle" fill="#4f46e5" font-size="12">K-Means (k=4)</text>
609
+ </g>
610
+
611
+ <g class="node" transform="translate(730, 100)">
612
+ <rect x="0" y="0" width="120" height="60" rx="5" ry="5" fill="#e0e7ff" stroke="#818cf8" stroke-width="2"></rect>
613
+ <text x="60" y="35" text-anchor="middle" fill="#312e81" font-weight="500" font-size="14">Evaluation</text>
614
+ <text x="60" y="50" text-anchor="middle" fill="#4f46e5" font-size="12">Silhouette</text>
615
+ </g>
616
+
617
+ <!-- Connections -->
618
+ <path class="connection" d="M170,130 C195,130 195,130 220,130" marker-end="url(#arrowhead)"></path>
619
+ <path class="connection" d="M340,130 C365,130 365,130 390,130" marker-end="url(#arrowhead)"></path>
620
+ <path class="connection" d="M510,130 C535,130 535,130 560,130" marker-end="url(#arrowhead)"></path>
621
+ <path class="connection" d="M680,130 C705,130 705,130 730,130" marker-end="url(#arrowhead)"></path>
622
+
623
+ <!-- Arrowhead marker -->
624
+ <defs>
625
+ <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
626
+ <polygon points="0 0, 10 3.5, 0 7" fill="#818cf8"></polygon>
627
+ </marker>
628
+ </defs>
629
+ </svg>
630
+
631
+ <div id="pipelineLoading" class="absolute inset-0 bg-white dark:bg-gray-800 bg-opacity-70 dark:bg-opacity-70 flex items-center justify-center hidden">
632
+ <div class="text-center">
633
+ <i class="fas fa-circle-notch fa-spin text-indigo-500 text-2xl mb-2"></i>
634
+ <p class="text-sm text-gray-600 dark:text-gray-300">Building pipeline...</p>
635
+ </div>
636
+ </div>
637
+ </div>
638
+
639
+ <div class="mt-4 flex justify-between items-center">
640
+ <div class="flex items-center">
641
+ <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
642
+ <span class="text-sm">Pipeline valid</span>
643
+ </div>
644
+ <div class="flex space-x-3">
645
+ <button class="px-3 py-1 text-sm rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors">
646
+ <i class="fas fa-undo mr-1"></i> Reset
647
+ </button>
648
+ <button class="px-3 py-1 text-sm rounded-lg bg-indigo-600 text-white hover:bg-indigo-700 transition-colors">
649
+ <i class="fas fa-rocket mr-1"></i> Execute
650
+ </button>
651
+ </div>
652
+ </div>
653
+ </div>
654
+ </div>
655
+
656
+ <!-- Data Table Preview -->
657
+ <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
658
+ <div class="p-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
659
+ <h3 class="font-bold">Data Preview</h3>
660
+ <div class="flex space-x-2">
661
+ <div class="relative">
662
+ <select class="appearance-none bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg pl-3 pr-8 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
663
+ <option>First 100 rows</option>
664
+ <option>Random sample</option>
665
+ <option>Cluster 1 only</option>
666
+ <option>Cluster 2 only</option>
667
+ <option>Cluster 3 only</option>
668
+ <option>Cluster 4 only</option>
669
+ </select>
670
+ <i class="fas fa-chevron-down absolute right-3 top-2 text-gray-400 text-xs"></i>
671
+ </div>
672
+ <button class="px-3 py-1 text-sm rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors">
673
+ <i class="fas fa-filter mr-1"></i> Filter
674
+ </button>
675
+ <button class="px-3 py-1 text-sm rounded-lg bg-indigo-600 text-white hover:bg-indigo-700 transition-colors">
676
+ <i class="fas fa-sync-alt mr-1"></i> Refresh
677
+ </button>
678
+ </div>
679
+ </div>
680
+
681
+ <div class="overflow-x-auto">
682
+ <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
683
+ <thead class="bg-gray-50 dark:bg-gray-700">
684
+ <tr>
685
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">ID</th>
686
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Age</th>
687
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Income</th>
688
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Spending</th>
689
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Cluster</th>
690
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Actions</th>
691
+ </tr>
692
+ </thead>
693
+ <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
694
+ <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
695
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">CUST001</td>
696
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">32</td>
697
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">$68,200</td>
698
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">$1,250</td>
699
+ <td class="px-6 py-4 whitespace-nowrap">
700
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200">Cluster 1</span>
701
+ </td>
702
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
703
+ <button class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300 mr-3 transition-colors">
704
+ <i class="fas fa-eye"></i>
705
+ </button>
706
+ <button class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-300 transition-colors">
707
+ <i class="fas fa-ellipsis-v"></i>
708
+ </button>
709
+ </td>
710
+ </tr>
711
+ <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
712
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">CUST002</td>
713
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">45</td>
714
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">$92,500</td>
715
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">$2,780</td>
716
+ <td class="px-6 py-4 whitespace-nowrap">
717
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200">Cluster 2</span>
718
+ </td>
719
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
720
+ <button class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300 mr-3 transition-colors">
721
+ <i class="fas fa-eye"></i>
722
+ </button>
723
+ <button class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-300 transition-colors">
724
+ <i class="fas fa-ellipsis-v"></i>
725
+ </button>
726
+ </td>
727
+ </tr>
728
+ <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
729
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">CUST003</td>
730
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">28</td>
731
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">$52,300</td>
732
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">$890</td>
733
+ <td class="px-6 py-4 whitespace-nowrap">
734
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200">Cluster 3</span>
735
+ </td>
736
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
737
+ <button class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300 mr-3 transition-colors">
738
+ <i class="fas fa-eye"></i>
739
+ </button>
740
+ <button class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-300 transition-colors">
741
+ <i class="fas fa-ellipsis-v"></i>
742
+ </button>
743
+ </td>
744
+ </tr>
745
+ <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
746
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">CUST004</td>
747
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">38</td>
748
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">$112,000</td>
749
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">$3,450</td>
750
+ <td class="px-6 py-4 whitespace-nowrap">
751
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200">Cluster 4</span>
752
+ </td>
753
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
754
+ <button class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300 mr-3 transition-colors">
755
+ <i class="fas fa-eye"></i>
756
+ </button>
757
+ <button class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-300 transition-colors">
758
+ <i class="fas fa-ellipsis-v"></i>
759
+ </button>
760
+ </td>
761
+ </tr>
762
+ </tbody>
763
+ </table>
764
+ </div>
765
+
766
+ <div class="px-6 py-3 bg-gray-50 dark:bg-gray-700 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between">
767
+ <div class="flex-1 flex justify-between sm:hidden">
768
+ <button class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
769
+ Previous
770
+ </button>
771
+ <button class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
772
+ Next
773
+ </button>
774
+ </div>
775
+ <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
776
+ <div>
777
+ <p class="text-sm text-gray-700 dark:text-gray-300">
778
+ Showing <span class="font-medium">1</span> to <span class="font-medium">4</span> of <span class="font-medium">1,248,753</span> results
779
+ </p>
780
+ </div>
781
+ <div>
782
+ <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
783
+ <button class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
784
+ <span class="sr-only">Previous</span>
785
+ <i class="fas fa-chevron-left"></i>
786
+ </button>
787
+ <button aria-current="page" class="z-10 bg-indigo-50 dark:bg-indigo-900 border-indigo-500 dark:border-indigo-700 text-indigo-600 dark:text-indigo-300 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
788
+ 1
789
+ </button>
790
+ <button class="bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 relative inline-flex items-center px-4 py-2 border text-sm font-medium transition-colors">
791
+ 2
792
+ </button>
793
+ <button class="bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 relative inline-flex items-center px-4 py-2 border text-sm font-medium transition-colors">
794
+ 3
795
+ </button>
796
+ <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300">
797
+ ...
798
+ </span>
799
+ <button class="bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 relative inline-flex items-center px-4 py-2 border text-sm font-medium transition-colors">
800
+ 8
801
+ </button>
802
+ <button class="bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 relative inline-flex items-center px-4 py-2 border text-sm font-medium transition-colors">
803
+ 9
804
+ </button>
805
+ <button class="bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 relative inline-flex items-center px-4 py-2 border text-sm font-medium transition-colors">
806
+ 10
807
+ </button>
808
+ <button class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
809
+ <span class="sr-only">Next</span>
810
+ <i class="fas fa-chevron-right"></i>
811
+ </button>
812
+ </nav>
813
+ </div>
814
+ </div>
815
+ </div>
816
+ </div>
817
+ </div>
818
+ </div>
819
+ </div>
820
+
821
+ <script>
822
+ // Toggle sidebar
823
+ document.getElementById('sidebarToggle').addEventListener('click', function() {
824
+ document.querySelector('.sidebar').classList.toggle('hidden');
825
+ });
826
+
827
+ // Dark mode toggle
828
+ const darkModeToggle = document.getElementById('darkModeToggle');
829
+ darkModeToggle.addEventListener('click', function() {
830
+ const isDark = document.documentElement.classList.toggle('dark');
831
+ localStorage.setItem('darkMode', isDark);
832
+
833
+ // Update icon
834
+ const icon = this.querySelector('i');
835
+ icon.classList.toggle('fa-moon');
836
+ icon.classList.toggle('fa-sun');
837
+ });
838
+
839
+ // Check for saved dark mode preference
840
+ if (localStorage.getItem('darkMode') === 'true') {
841
+ document.documentElement.classList.add('dark');
842
+ document.getElementById('darkModeToggle').querySelector('i').classList.remove('fa-moon');
843
+ document.getElementById('darkModeToggle').querySelector('i').classList.add('fa-sun');
844
+ }
845
+
846
+ // Cluster Chart
847
+ const clusterCtx = document.getElementById('clusterChart').getContext('2d');
848
+ const clusterChart = new Chart(clusterCtx, {
849
+ type: 'scatter',
850
+ data: {
851
+ datasets: [
852
+ {
853
+ label: 'Cluster 1',
854
+ data: Array.from({length: 50}, () => ({
855
+ x: Math.random() * 30 + 10,
856
+ y: Math.random() * 40 + 20
857
+ })),
858
+ backgroundColor: '#6366f1',
859
+ borderColor: '#4338ca',
860
+ pointRadius: 6,
861
+ pointHoverRadius: 8
862
+ },
863
+ {
864
+ label: 'Cluster 2',
865
+ data: Array.from({length: 50}, () => ({
866
+ x: Math.random() * 30 + 40,
867
+ y: Math.random() * 40 + 60
868
+ })),
869
+ backgroundColor: '#10b981',
870
+ borderColor: '#047857',
871
+ pointRadius: 6,
872
+ pointHoverRadius: 8
873
+ },
874
+ {
875
+ label: 'Cluster 3',
876
+ data: Array.from({length: 50}, () => ({
877
+ x: Math.random() * 30 + 70,
878
+ y: Math.random() * 40 + 30
879
+ })),
880
+ backgroundColor: '#f59e0b',
881
+ borderColor: '#b45309',
882
+ pointRadius: 6,
883
+ pointHoverRadius: 8
884
+ },
885
+ {
886
+ label: 'Cluster 4',
887
+ data: Array.from({length: 50}, () => ({
888
+ x: Math.random() * 30 + 20,
889
+ y: Math.random() * 40 + 70
890
+ })),
891
+ backgroundColor: '#ef4444',
892
+ borderColor: '#b91c1c',
893
+ pointRadius: 6,
894
+ pointHoverRadius: 8
895
+ }
896
+ ]
897
+ },
898
+ options: {
899
+ responsive: true,
900
+ maintainAspectRatio: false,
901
+ scales: {
902
+ x: {
903
+ title: {
904
+ display: true,
905
+ text: 'Spending Score (1-100)'
906
+ },
907
+ min: 0,
908
+ max: 100
909
+ },
910
+ y: {
911
+ title: {
912
+ display: true,
913
+ text: 'Annual Income (k$)'
914
+ },
915
+ min: 0,
916
+ max: 100
917
+ }
918
+ },
919
+ plugins: {
920
+ tooltip: {
921
+ callbacks: {
922
+ label: function(context) {
923
+ return `Customer ${context.dataIndex + 1}:
924
+ Income: $${(context.parsed.y * 1000).toFixed(0)},
925
+ Score: ${context.parsed.x.toFixed(0)}`;
926
+ }
927
+ }
928
+ },
929
+ legend: {
930
+ position: 'bottom',
931
+ labels: {
932
+ boxWidth: 12,
933
+ padding: 20
934
+ }
935
+ }
936
+ }
937
+ }
938
+ });
939
+
940
+ // Make nodes draggable
941
+ const nodes = document.querySelectorAll('.node');
942
+ nodes.forEach(node => {
943
+ node.setAttribute('draggable', 'true');
944
+
945
+ node.addEventListener('dragstart', function(e) {
946
+ e.dataTransfer.setData('text/plain', this.id);
947
+ this.classList.add('opacity-50');
948
+ });
949
+
950
+ node.addEventListener('dragend', function() {
951
+ this.classList.remove('opacity-50');
952
+ });
953
+ });
954
+
955
+ // Handle drop on canvas
956
+ const canvas = document.getElementById('dataCanvas');
957
+ canvas.addEventListener('dragover', function(e) {
958
+ e.preventDefault();
959
+ this.classList.add('bg-indigo-50', 'dark:bg-gray-700');
960
+ });
961
+
962
+ canvas.addEventListener('dragleave', function() {
963
+ this.classList.remove('bg-indigo-50', 'dark:bg-gray-700');
964
+ });
965
+
966
+ canvas.addEventListener('drop', function(e) {
967
+ e.preventDefault();
968
+ this.classList.remove('bg-indigo-50', 'dark:bg-gray-700');
969
+
970
+ const id = e.dataTransfer.getData('text/plain');
971
+ const draggedElement = document.getElementById(id);
972
+
973
+ if (draggedElement) {
974
+ const rect = this.getBoundingClientRect();
975
+ const x = e.clientX - rect.left;
976
+ const y = e.clientY - rect.top;
977
+
978
+ // Create a new node in the canvas
979
+ const newNode = draggedElement.cloneNode(true);
980
+ newNode.removeAttribute('id');
981
+ newNode.setAttribute('transform', `translate(${x}, ${y})`);
982
+ this.appendChild(newNode);
983
+
984
+ // Make the new node draggable
985
+ newNode.setAttribute('draggable', 'true');
986
+ newNode.addEventListener('dragstart', function(e) {
987
+ e.dataTransfer.setData('text/plain', 'node');
988
+ this.classList.add('opacity-50');
989
+ });
990
+
991
+ newNode.addEventListener('dragend', function() {
992
+ this.classList.remove('opacity-50');
993
+ });
994
+ }
995
+ });
996
+
997
+ // Cluster selection change
998
+ document.getElementById('clusterSelect').addEventListener('change', function() {
999
+ const clusterIndex = this.selectedIndex;
1000
+ const pipelineNodes = document.querySelectorAll('#dataCanvas .node');
1001
+
1002
+ // Remove highlight from all nodes
1003
+ pipelineNodes.forEach(node => {
1004
+ node.classList.remove('node-highlight');
1005
+ });
1006
+
1007
+ // Highlight the clustering node (4th node) when any cluster is selected
1008
+ if (clusterIndex >= 0 && pipelineNodes.length > 3) {
1009
+ pipelineNodes[3].classList.add('node-highlight');
1010
+ }
1011
+ });
1012
+
1013
+ // Pipeline execution
1014
+ document.getElementById('runPipelineBtn').addEventListener('click', function() {
1015
+ const btn = this;
1016
+ const originalHTML = btn.innerHTML;
1017
+
1018
+ // Show loading states
1019
+ document.getElementById('clusterLoading').classList.remove('hidden');
1020
+ document.getElementById('pipelineLoading').classList.remove('hidden');
1021
+
1022
+ // Show processing state on button
1023
+ const originalText = this.innerHTML;
1024
+ this.innerHTML = '<i class="fas fa-circle-notch fa-spin mr-2"></i> Processing...';
1025
+ this.classList.add('opacity-75');
1026
+ this.disabled = true;
1027
+
1028
+ // Simulate processing delay
1029
+ setTimeout(() => {
1030
+ // Hide loading states
1031
+ document.getElementById('clusterLoading').classList.add('hidden');
1032
+ document.getElementById('pipelineLoading').classList.add('hidden');
1033
+
1034
+ // Restore button
1035
+ this.innerHTML = originalText;
1036
+ this.classList.remove('opacity-75');
1037
+ this.disabled = false;
1038
+
1039
+ // Show success notification
1040
+ const notification = document.createElement('div');
1041
+ notification.className = 'fixed bottom-4 right-4 px-4 py-2 bg-green-500 text-white rounded-lg shadow-lg flex items-center transition-all transform translate-y-2 opacity-0';
1042
+ notification.innerHTML = `
1043
+ <i class="fas fa-check-circle mr-2"></i>
1044
+ <span>Pipeline executed successfully! Updated 1,248,753 records.</span>
1045
+ `;
1046
+ document.body.appendChild(notification);
1047
+
1048
+ // Animate notification in
1049
+ setTimeout(() => {
1050
+ notification.classList.remove('translate-y-2', 'opacity-0');
1051
+ notification.classList.add('translate-y-0', 'opacity-100');
1052
+ }, 10);
1053
+
1054
+ // Remove notification after 3 seconds
1055
+ setTimeout(() => {
1056
+ notification.classList.add('translate-y-2', 'opacity-0');
1057
+ setTimeout(() => notification.remove(), 300);
1058
+ }, 3000);
1059
+
1060
+ // Update chart with new random data
1061
+ clusterChart.data.datasets.forEach(dataset => {
1062
+ dataset.data = Array.from({length: 50}, () => ({
1063
+ x: Math.random() * 100,
1064
+ y: Math.random() * 100
1065
+ }));
1066
+ });
1067
+ clusterChart.update();
1068
+
1069
+ // Highlight the clustering node in pipeline
1070
+ const clusteringNode = document.querySelectorAll('.node')[3];
1071
+ clusteringNode.classList.add('node-highlight');
1072
+
1073
+ }, 2000);
1074
+ });
1075
+
1076
+ // Table row hover effects
1077
+ document.querySelectorAll('tbody tr').forEach(row => {
1078
+ row.addEventListener('mouseenter', function() {
1079
+ const badge = this.querySelector('span');
1080
+ if (!badge) return;
1081
+
1082
+ const colorMap = {
1083
+ 'bg-indigo-100': 'bg-indigo-50 dark:bg-indigo-900/20',
1084
+ 'bg-green-100': 'bg-green-50 dark:bg-green-900/20',
1085
+ 'bg-yellow-100': 'bg-yellow-50 dark:bg-yellow-900/20',
1086
+ 'bg-red-100': 'bg-red-50 dark:bg-red-900/20'
1087
+ };
1088
+
1089
+ for (const [original, hover] of Object.entries(colorMap)) {
1090
+ if (badge.classList.contains(original)) {
1091
+ this.classList.add(...hover.split(' '));
1092
+ break;
1093
+ }
1094
+ }
1095
+ });
1096
+
1097
+ row.addEventListener('mouseleave', function() {
1098
+ this.className = this.className.replace(/(bg-\w+-50|dark:bg-\w+-900\/20)/g, '').trim();
1099
+ });
1100
+ });
1101
+ </script>
1102
+ <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=Breadwinner79/data-mining-project" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1103
+ </html>