Hugging Face's logo

Spaces:
mathurinacheisoft
/
statmining-automl
Running

App Files Community
mathurinacheisoft commited on
Commit
ae0b104
·
verified ·
1 Parent(s): faa9155

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +638 -19
  3. prompts.txt +2 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Statmining Automl
3
- emoji: 🌍
4
- colorFrom: indigo
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: statmining-automl
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: purple
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,638 @@
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="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Bolt AutoML - Solution intuitive</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10
+ <style>
11
+ .file-upload {
12
+ position: relative;
13
+ display: flex;
14
+ flex-direction: column;
15
+ align-items: center;
16
+ padding: 2rem;
17
+ border: 2px dashed #cbd5e0;
18
+ border-radius: 1rem;
19
+ transition: all 0.3s ease;
20
+ }
21
+
22
+ .file-upload:hover {
23
+ border-color: #4f46e5;
24
+ background-color: #f8fafc;
25
+ }
26
+
27
+ .data-preview {
28
+ max-height: 300px;
29
+ overflow-y: auto;
30
+ border: 1px solid #e5e7eb;
31
+ border-radius: 0.5rem;
32
+ }
33
+
34
+ .dashboard-card {
35
+ transition: all 0.3s ease;
36
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
37
+ border-radius: 0.75rem;
38
+ }
39
+
40
+ .model-table {
41
+ width: 100%;
42
+ border-collapse: collapse;
43
+ }
44
+
45
+ .model-table th, .model-table td {
46
+ padding: 0.75rem;
47
+ text-align: left;
48
+ border-bottom: 1px solid #e5e7eb;
49
+ }
50
+
51
+ .model-table th {
52
+ background-color: #f9fafb;
53
+ font-weight: 600;
54
+ color: #4b5563;
55
+ }
56
+
57
+ @media (max-width: 768px) {
58
+ .dashboard-grid {
59
+ grid-template-columns: 1fr;
60
+ gap: 1rem;
61
+ }
62
+ }
63
+ </style>
64
+ </head>
65
+ <body class="bg-gray-50 font-sans">
66
+ <div class="container mx-auto px-4 py-8 max-w-6xl">
67
+ <!-- Header -->
68
+ <header class="mb-8 text-center">
69
+ <div class="flex justify-center items-center mb-4">
70
+ <i class="fas fa-bolt text-4xl text-indigo-600 mr-3"></i>
71
+ <h1 class="text-3xl font-bold text-gray-800">Statmining AutoML</h1>
72
+ </div>
73
+ <p class="text-gray-600 max-w-3xl mx-auto">
74
+ Solution intuitive de Machine Learning sans code pour vos analyses de données
75
+ </p>
76
+ </header>
77
+
78
+ <!-- Main Card -->
79
+ <div class="bg-white rounded-xl shadow-sm overflow-hidden mb-8">
80
+ <div class="p-6">
81
+ <div class="flex items-center mb-6">
82
+ <div class="bg-indigo-100 p-3 rounded-full mr-4">
83
+ <i class="fas fa-play-circle text-indigo-600 text-xl"></i>
84
+ </div>
85
+ <h2 class="text-xl font-semibold text-gray-800">Démarrer une nouvelle expérimentation AutoML</h2>
86
+ </div>
87
+
88
+ <!-- Step 1: File Upload -->
89
+ <div class="mb-8">
90
+ <h3 class="text-lg font-medium text-gray-700 mb-4 flex items-center">
91
+ <span class="bg-indigo-100 text-indigo-800 rounded-full w-6 h-6 flex items-center justify-center text-sm mr-2">1</span>
92
+ Importez votre jeu de données
93
+ </h3>
94
+ <div class="file-upload" id="fileUploadArea">
95
+ <input type="file" id="fileInput" class="hidden" accept=".csv, .xlsx">
96
+ <i class="fas fa-file-csv text-4xl text-gray-400 mb-3"></i>
97
+ <p class="text-gray-500 mb-4">Glissez-déposez votre fichier .csv ou .xlsx ici</p>
98
+ <button id="uploadBtn" class="px-6 py-2 bg-indigo-600 text-white rounded-full hover:bg-indigo-700 transition-colors">
99
+ <i class="fas fa-upload mr-2"></i> Sélectionner un fichier
100
+ </button>
101
+ </div>
102
+
103
+ <!-- Data Preview -->
104
+ <div id="dataPreview" class="hidden mt-6">
105
+ <h4 class="text-md font-medium text-gray-700 mb-3">Aperçu des données</h4>
106
+ <div class="data-preview">
107
+ <table class="w-full divide-y divide-gray-200">
108
+ <thead class="bg-gray-50">
109
+ <tr id="previewHeader"></tr>
110
+ </thead>
111
+ <tbody class="bg-white divide-y divide-gray-200" id="previewBody"></tbody>
112
+ </table>
113
+ </div>
114
+ </div>
115
+ </div>
116
+
117
+ <!-- Step 2: Target Selection -->
118
+ <div class="mb-8" id="targetSection" style="display: none;">
119
+ <h3 class="text-lg font-medium text-gray-700 mb-4 flex items-center">
120
+ <span class="bg-indigo-100 text-indigo-800 rounded-full w-6 h-6 flex items-center justify-center text-sm mr-2">2</span>
121
+ Sélectionnez la variable cible
122
+ </h3>
123
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
124
+ <div>
125
+ <select id="targetSelect" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500">
126
+ <option value="" disabled selected>Choisissez une colonne</option>
127
+ </select>
128
+ <p class="text-sm text-gray-500 mt-2">Cette variable sera celle que le modèle tentera de prédire.</p>
129
+ </div>
130
+ <div class="bg-gray-50 p-4 rounded-lg">
131
+ <canvas id="targetChart"></canvas>
132
+ </div>
133
+ </div>
134
+ </div>
135
+
136
+ <!-- Step 3: Objectives -->
137
+ <div class="mb-8" id="objectivesSection" style="display: none;">
138
+ <h3 class="text-lg font-medium text-gray-700 mb-4 flex items-center">
139
+ <span class="bg-indigo-100 text-indigo-800 rounded-full w-6 h-6 flex items-center justify-center text-sm mr-2">3</span>
140
+ Définissez vos objectifs
141
+ </h3>
142
+ <div class="space-y-3">
143
+ <div class="flex items-center">
144
+ <input type="checkbox" id="objective1" class="h-5 w-5 text-indigo-600 rounded focus:ring-indigo-500">
145
+ <label for="objective1" class="ml-3 text-gray-700">Obtenir un résultat très rapidement</label>
146
+ </div>
147
+ <div class="flex items-center">
148
+ <input type="checkbox" id="objective2" class="h-5 w-5 text-indigo-600 rounded focus:ring-indigo-500">
149
+ <label for="objective2" class="ml-3 text-gray-700">Obtenir un modèle très performant</label>
150
+ </div>
151
+ <div class="flex items-center">
152
+ <input type="checkbox" id="objective3" class="h-5 w-5 text-indigo-600 rounded focus:ring-indigo-500">
153
+ <label for="objective3" class="ml-3 text-gray-700">Obtenir un modèle interprétable</label>
154
+ </div>
155
+ <div class="flex items-center">
156
+ <input type="checkbox" id="objective4" class="h-5 w-5 text-indigo-600 rounded focus:ring-indigo-500">
157
+ <label for="objective4" class="ml-3 text-gray-700">Utiliser le modèle en temps réel</label>
158
+ </div>
159
+ <div class="flex items-center">
160
+ <input type="checkbox" id="objective5" class="h-5 w-5 text-indigo-600 rounded focus:ring-indigo-500">
161
+ <label for="objective5" class="ml-3 text-gray-700">Avoir un modèle simple</label>
162
+ </div>
163
+ </div>
164
+ </div>
165
+
166
+ <!-- Step 4: Launch -->
167
+ <div class="text-center pt-4">
168
+ <button id="launchBtn" class="px-8 py-3 bg-indigo-600 text-white rounded-full hover:bg-indigo-700 transition-colors font-medium flex items-center mx-auto">
169
+ <i class="fas fa-rocket mr-2"></i> Lancer l'entraînement AutoML
170
+ </button>
171
+ </div>
172
+ </div>
173
+ </div>
174
+
175
+ <!-- Results Dashboard (Initially Hidden) -->
176
+ <div id="resultsDashboard" class="hidden bg-white rounded-xl shadow-sm overflow-hidden mb-8">
177
+ <div class="p-6">
178
+ <div class="flex items-center mb-6">
179
+ <div class="bg-green-100 p-3 rounded-full mr-4">
180
+ <i class="fas fa-chart-line text-green-600 text-xl"></i>
181
+ </div>
182
+ <h2 class="text-xl font-semibold text-gray-800">Résultats de l'expérimentation AutoML</h2>
183
+ </div>
184
+
185
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
186
+ <!-- Top Left: Models Table -->
187
+ <div class="dashboard-card bg-white p-6 rounded-lg border border-gray-200">
188
+ <h3 class="text-lg font-medium text-gray-700 mb-4">
189
+ <i class="fas fa-table text-blue-500 mr-2"></i> Modèles testés
190
+ </h3>
191
+ <div class="overflow-x-auto">
192
+ <table class="model-table">
193
+ <thead>
194
+ <tr>
195
+ <th>Modèle</th>
196
+ <th>Score</th>
197
+ <th>Temps</th>
198
+ </tr>
199
+ </thead>
200
+ <tbody id="modelsTableBody">
201
+ <!-- Filled by JavaScript -->
202
+ </tbody>
203
+ </table>
204
+ </div>
205
+ </div>
206
+
207
+ <!-- Top Right: Feature Importance -->
208
+ <div class="dashboard-card bg-white p-6 rounded-lg border border-gray-200">
209
+ <h3 class="text-lg font-medium text-gray-700 mb-4">
210
+ <i class="fas fa-star text-yellow-500 mr-2"></i> Importance des variables
211
+ </h3>
212
+ <div class="h-64">
213
+ <canvas id="featureImportanceChart"></canvas>
214
+ </div>
215
+ </div>
216
+ </div>
217
+
218
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
219
+ <!-- Bottom Left: Apply Model -->
220
+ <div class="dashboard-card bg-white p-6 rounded-lg border border-gray-200">
221
+ <h3 class="text-lg font-medium text-gray-700 mb-4">
222
+ <i class="fas fa-file-import text-purple-500 mr-2"></i> Appliquer le modèle
223
+ </h3>
224
+ <p class="text-gray-600 mb-4">Téléchargez un nouveau jeu de données pour obtenir des prédictions.</p>
225
+ <div class="file-upload" id="newFileUploadArea">
226
+ <input type="file" id="newFileInput" class="hidden" accept=".csv, .xlsx">
227
+ <button id="newUploadBtn" class="px-6 py-2 bg-purple-600 text-white rounded-full hover:bg-purple-700 transition-colors">
228
+ <i class="fas fa-upload mr-2"></i> Sélectionner un fichier
229
+ </button>
230
+ </div>
231
+ </div>
232
+
233
+ <!-- Bottom Right: Summary -->
234
+ <div class="dashboard-card bg-white p-6 rounded-lg border border-gray-200">
235
+ <h3 class="text-lg font-medium text-gray-700 mb-4">
236
+ <i class="fas fa-info-circle text-green-500 mr-2"></i> Résumé
237
+ </h3>
238
+ <div class="space-y-3">
239
+ <div class="flex">
240
+ <span class="text-gray-500 font-medium w-32">Fichier:</span>
241
+ <span id="expFilename" class="text-gray-700">donnees.csv</span>
242
+ </div>
243
+ <div class="flex">
244
+ <span class="text-gray-500 font-medium w-32">Cible:</span>
245
+ <span id="expTarget" class="text-gray-700">prix</span>
246
+ </div>
247
+ <div class="flex">
248
+ <span class="text-gray-500 font-medium w-32">Objectifs:</span>
249
+ <span id="expObjectives" class="text-gray-700">Performance, Rapidité</span>
250
+ </div>
251
+ <div class="flex">
252
+ <span class="text-gray-500 font-medium w-32">Modèle:</span>
253
+ <span id="expModel" class="text-gray-700">H2O AutoML</span>
254
+ </div>
255
+ <div class="flex">
256
+ <span class="text-gray-500 font-medium w-32">Score:</span>
257
+ <span id="expScore" class="text-gray-700">0.92 (AUC)</span>
258
+ </div>
259
+ <div class="flex">
260
+ <span class="text-gray-500 font-medium w-32">Durée:</span>
261
+ <span id="expTime" class="text-gray-700">2 min 34 sec</span>
262
+ </div>
263
+ </div>
264
+ </div>
265
+ </div>
266
+ </div>
267
+ </div>
268
+ </div>
269
+
270
+ <script>
271
+ // Sample data for demonstration
272
+ const sampleData = {
273
+ headers: ['ID', 'Age', 'Salaire', 'Département', 'Expérience', 'Poste'],
274
+ rows: [
275
+ [1, 32, 75000, 'Marketing', 5, 'Manager'],
276
+ [2, 28, 65000, 'Ventes', 3, 'Associé'],
277
+ [3, 45, 95000, 'IT', 15, 'Directeur'],
278
+ [4, 36, 82000, 'RH', 8, 'Manager'],
279
+ [5, 29, 68000, 'Ventes', 4, 'Associé'],
280
+ [6, 41, 88000, 'IT', 10, 'Chef de projet'],
281
+ [7, 35, 78000, 'Marketing', 7, 'Manager'],
282
+ [8, 27, 62000, 'RH', 2, 'Associé']
283
+ ]
284
+ };
285
+
286
+ // Mock models data
287
+ const mockModels = [
288
+ { name: 'H2O AutoML', score: 0.92, time: '1:45', type: 'Ensemble' },
289
+ { name: 'LightAutoML', score: 0.91, time: '1:12', type: 'Gradient Boosting' },
290
+ { name: 'MLJAR', score: 0.89, time: '2:03', type: 'Random Forest' },
291
+ { name: 'Khiops', score: 0.88, time: '1:56', type: 'Decision Tree' },
292
+ { name: 'StatMining', score: 0.85, time: '0:45', type: 'Logistic Regression' }
293
+ ];
294
+
295
+ // Mock feature importance
296
+ const mockFeatures = [
297
+ { name: 'Expérience', importance: 0.45 },
298
+ { name: 'Age', importance: 0.32 },
299
+ { name: 'Département', importance: 0.25 },
300
+ { name: 'Formation', importance: 0.18 },
301
+ { name: 'Localisation', importance: 0.12 },
302
+ { name: 'Certifications', importance: 0.09 },
303
+ { name: 'Compétences', importance: 0.07 },
304
+ { name: 'Ancienneté', importance: 0.05 },
305
+ { name: 'Projets', importance: 0.04 },
306
+ { name: 'Langues', importance: 0.02 }
307
+ ];
308
+
309
+ // DOM Elements
310
+ const fileInput = document.getElementById('fileInput');
311
+ const uploadBtn = document.getElementById('uploadBtn');
312
+ const fileUploadArea = document.getElementById('fileUploadArea');
313
+ const dataPreview = document.getElementById('dataPreview');
314
+ const previewHeader = document.getElementById('previewHeader');
315
+ const previewBody = document.getElementById('previewBody');
316
+ const targetSection = document.getElementById('targetSection');
317
+ const targetSelect = document.getElementById('targetSelect');
318
+ const objectivesSection = document.getElementById('objectivesSection');
319
+ const launchBtn = document.getElementById('launchBtn');
320
+ const resultsDashboard = document.getElementById('resultsDashboard');
321
+ const modelsTableBody = document.getElementById('modelsTableBody');
322
+ const newFileInput = document.getElementById('newFileInput');
323
+ const newUploadBtn = document.getElementById('newUploadBtn');
324
+ const newFileUploadArea = document.getElementById('newFileUploadArea');
325
+
326
+ // Charts
327
+ let targetChart = null;
328
+ let featureImportanceChart = null;
329
+
330
+ // Event Listeners
331
+ uploadBtn.addEventListener('click', () => fileInput.click());
332
+ newUploadBtn.addEventListener('click', () => newFileInput.click());
333
+
334
+ fileInput.addEventListener('change', handleFileUpload);
335
+ newFileInput.addEventListener('change', handleNewFileUpload);
336
+
337
+ fileUploadArea.addEventListener('dragover', (e) => {
338
+ e.preventDefault();
339
+ fileUploadArea.classList.add('border-indigo-500', 'bg-indigo-50');
340
+ });
341
+
342
+ fileUploadArea.addEventListener('dragleave', () => {
343
+ fileUploadArea.classList.remove('border-indigo-500', 'bg-indigo-50');
344
+ });
345
+
346
+ fileUploadArea.addEventListener('drop', (e) => {
347
+ e.preventDefault();
348
+ fileUploadArea.classList.remove('border-indigo-500', 'bg-indigo-50');
349
+ fileInput.files = e.dataTransfer.files;
350
+ handleFileUpload();
351
+ });
352
+
353
+ targetSelect.addEventListener('change', updateTargetChart);
354
+ launchBtn.addEventListener('click', launchTraining);
355
+
356
+ // Functions
357
+ function handleFileUpload() {
358
+ // In a real app, you would parse the actual file here
359
+ // For this demo, we'll use sample data
360
+
361
+ // Show preview
362
+ displayDataPreview(sampleData.headers, sampleData.rows);
363
+ dataPreview.classList.remove('hidden');
364
+
365
+ // Populate target select
366
+ populateTargetSelect(sampleData.headers);
367
+ targetSection.style.display = 'block';
368
+ objectivesSection.style.display = 'block';
369
+ }
370
+
371
+ function handleNewFileUpload() {
372
+ alert('Nouveau fichier sélectionné pour les prédictions. Dans une application réelle, ce fichier serait envoyé au serveur pour traitement.');
373
+ }
374
+
375
+ function displayDataPreview(headers, rows) {
376
+ // Clear previous content
377
+ previewHeader.innerHTML = '';
378
+ previewBody.innerHTML = '';
379
+
380
+ // Add headers
381
+ headers.forEach(header => {
382
+ const th = document.createElement('th');
383
+ th.className = 'px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider';
384
+ th.textContent = header;
385
+ previewHeader.appendChild(th);
386
+ });
387
+
388
+ // Add rows
389
+ rows.forEach(row => {
390
+ const tr = document.createElement('tr');
391
+ row.forEach(cell => {
392
+ const td = document.createElement('td');
393
+ td.className = 'px-6 py-4 whitespace-nowrap text-sm text-gray-500';
394
+ td.textContent = cell;
395
+ tr.appendChild(td);
396
+ });
397
+ previewBody.appendChild(tr);
398
+ });
399
+ }
400
+
401
+ function populateTargetSelect(headers) {
402
+ targetSelect.innerHTML = '<option value="" disabled selected>Choisissez une colonne</option>';
403
+
404
+ headers.forEach(header => {
405
+ const option = document.createElement('option');
406
+ option.value = header;
407
+ option.textContent = header;
408
+ targetSelect.appendChild(option);
409
+ });
410
+ }
411
+
412
+ function updateTargetChart() {
413
+ const selectedColumn = targetSelect.value;
414
+ const columnIndex = sampleData.headers.indexOf(selectedColumn);
415
+
416
+ // Get values for the selected column
417
+ const values = sampleData.rows.map(row => row[columnIndex]);
418
+
419
+ // Determine if the column is categorical or numerical
420
+ const isCategorical = typeof values[0] === 'string';
421
+
422
+ // Destroy previous chart if exists
423
+ if (targetChart) {
424
+ targetChart.destroy();
425
+ }
426
+
427
+ const ctx = document.getElementById('targetChart').getContext('2d');
428
+
429
+ if (isCategorical) {
430
+ // For categorical data, create a bar chart
431
+ const valueCounts = {};
432
+ values.forEach(value => {
433
+ valueCounts[value] = (valueCounts[value] || 0) + 1;
434
+ });
435
+
436
+ targetChart = new Chart(ctx, {
437
+ type: 'bar',
438
+ data: {
439
+ labels: Object.keys(valueCounts),
440
+ datasets: [{
441
+ label: `Distribution de ${selectedColumn}`,
442
+ data: Object.values(valueCounts),
443
+ backgroundColor: 'rgba(79, 70, 229, 0.6)',
444
+ borderColor: 'rgba(79, 70, 229, 1)',
445
+ borderWidth: 1
446
+ }]
447
+ },
448
+ options: {
449
+ responsive: true,
450
+ plugins: {
451
+ legend: {
452
+ display: false
453
+ }
454
+ },
455
+ scales: {
456
+ y: {
457
+ beginAtZero: true,
458
+ title: {
459
+ display: true,
460
+ text: 'Nombre'
461
+ }
462
+ },
463
+ x: {
464
+ title: {
465
+ display: true,
466
+ text: selectedColumn
467
+ }
468
+ }
469
+ }
470
+ }
471
+ });
472
+ } else {
473
+ // For numerical data, create a box plot (simulated with bar chart)
474
+ // In a real app, you would use a proper box plot library
475
+ const sortedValues = [...values].sort((a, b) => a - b);
476
+ const q1 = sortedValues[Math.floor(sortedValues.length * 0.25)];
477
+ const median = sortedValues[Math.floor(sortedValues.length * 0.5)];
478
+ const q3 = sortedValues[Math.floor(sortedValues.length * 0.75)];
479
+ const iqr = q3 - q1;
480
+ const min = Math.max(sortedValues[0], q1 - 1.5 * iqr);
481
+ const max = Math.min(sortedValues[sortedValues.length - 1], q3 + 1.5 * iqr);
482
+
483
+ targetChart = new Chart(ctx, {
484
+ type: 'bar',
485
+ data: {
486
+ labels: [selectedColumn],
487
+ datasets: [{
488
+ label: 'Distribution',
489
+ data: [{
490
+ min: min,
491
+ q1: q1,
492
+ median: median,
493
+ q3: q3,
494
+ max: max
495
+ }],
496
+ backgroundColor: 'rgba(79, 70, 229, 0.2)',
497
+ borderColor: 'rgba(79, 70, 229, 1)',
498
+ borderWidth: 1
499
+ }]
500
+ },
501
+ options: {
502
+ responsive: true,
503
+ plugins: {
504
+ legend: {
505
+ display: false
506
+ },
507
+ tooltip: {
508
+ callbacks: {
509
+ label: function(context) {
510
+ const value = context.raw;
511
+ return [
512
+ `Min: ${value.min}`,
513
+ `Q1: ${value.q1}`,
514
+ `Médiane: ${value.median}`,
515
+ `Q3: ${value.q3}`,
516
+ `Max: ${value.max}`
517
+ ];
518
+ }
519
+ }
520
+ }
521
+ },
522
+ scales: {
523
+ y: {
524
+ beginAtZero: false,
525
+ title: {
526
+ display: true,
527
+ text: 'Valeur'
528
+ }
529
+ }
530
+ }
531
+ }
532
+ });
533
+ }
534
+ }
535
+
536
+ function launchTraining() {
537
+ // Show loading state
538
+ launchBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Entraînement en cours...';
539
+ launchBtn.disabled = true;
540
+
541
+ // Simulate training delay
542
+ setTimeout(() => {
543
+ // Display results
544
+ displayResults();
545
+
546
+ // Reset button
547
+ launchBtn.innerHTML = '<i class="fas fa-rocket mr-2"></i> Lancer l\'entraînement AutoML';
548
+ launchBtn.disabled = false;
549
+ }, 2000);
550
+ }
551
+
552
+ function displayResults() {
553
+ // Populate models table
554
+ modelsTableBody.innerHTML = '';
555
+ mockModels.forEach(model => {
556
+ const tr = document.createElement('tr');
557
+
558
+ const tdName = document.createElement('td');
559
+ tdName.className = 'text-sm text-gray-900';
560
+ tdName.textContent = model.name;
561
+
562
+ const tdScore = document.createElement('td');
563
+ tdScore.className = 'text-sm text-gray-900 font-medium';
564
+ tdScore.textContent = model.score;
565
+
566
+ const tdTime = document.createElement('td');
567
+ tdTime.className = 'text-sm text-gray-500';
568
+ tdTime.textContent = model.time;
569
+
570
+ tr.appendChild(tdName);
571
+ tr.appendChild(tdScore);
572
+ tr.appendChild(tdTime);
573
+ modelsTableBody.appendChild(tr);
574
+ });
575
+
576
+ // Create feature importance chart
577
+ const ctx = document.getElementById('featureImportanceChart').getContext('2d');
578
+ if (featureImportanceChart) {
579
+ featureImportanceChart.destroy();
580
+ }
581
+
582
+ featureImportanceChart = new Chart(ctx, {
583
+ type: 'bar',
584
+ data: {
585
+ labels: mockFeatures.map(f => f.name),
586
+ datasets: [{
587
+ label: 'Importance',
588
+ data: mockFeatures.map(f => f.importance),
589
+ backgroundColor: 'rgba(79, 70, 229, 0.6)',
590
+ borderColor: 'rgba(79, 70, 229, 1)',
591
+ borderWidth: 1
592
+ }]
593
+ },
594
+ options: {
595
+ indexAxis: 'y',
596
+ responsive: true,
597
+ plugins: {
598
+ legend: {
599
+ display: false
600
+ }
601
+ },
602
+ scales: {
603
+ x: {
604
+ beginAtZero: true,
605
+ title: {
606
+ display: true,
607
+ text: 'Importance relative'
608
+ }
609
+ }
610
+ }
611
+ }
612
+ });
613
+
614
+ // Update summary
615
+ document.getElementById('expFilename').textContent = 'donnees.csv';
616
+ document.getElementById('expTarget').textContent = targetSelect.value;
617
+
618
+ const selectedObjectives = [];
619
+ if (document.getElementById('objective1').checked) selectedObjectives.push('Rapidité');
620
+ if (document.getElementById('objective2').checked) selectedObjectives.push('Performance');
621
+ if (document.getElementById('objective3').checked) selectedObjectives.push('Interprétabilité');
622
+ if (document.getElementById('objective4').checked) selectedObjectives.push('Temps réel');
623
+ if (document.getElementById('objective5').checked) selectedObjectives.push('Simplicité');
624
+
625
+ document.getElementById('expObjectives').textContent = selectedObjectives.join(', ') || 'Aucun';
626
+ document.getElementById('expModel').textContent = mockModels[0].name;
627
+ document.getElementById('expScore').textContent = `${mockModels[0].score} (AUC)`;
628
+ document.getElementById('expTime').textContent = mockModels[0].time;
629
+
630
+ // Show results dashboard
631
+ resultsDashboard.classList.remove('hidden');
632
+
633
+ // Scroll to results
634
+ resultsDashboard.scrollIntoView({ behavior: 'smooth' });
635
+ }
636
+ </script>
637
+ <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=mathurinacheisoft/statmining-automl" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
638
+ </html>
prompts.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ Une application web responsive développée avec Bolt. L'interface est conçue pour des utilisateurs non data scientists, leur permettant d’utiliser une solution AutoML de façon intuitive. L’écran principal contient une carte centrée avec le titre “Démarrer une nouvelle expérimentation AutoML”, suivie d’un bloc de téléchargement de fichier (.csv, .xlsx) avec prévisualisation des premières lignes. En dessous, l’utilisateur choisit la variable cible à expliquer via un menu déroulant auto-rempli. Dès qu’une variable est sélectionnée : si la cible est catégorielle, un histogramme clair s'affiche à droite, si la cible est continue, un boxplot stylisé s’affiche à droite. Vient ensuite un encadré intitulé “Quels sont vos objectifs ?”, avec 5 checkboxes bien espacées : obtenir un résultat très rapidement obtenir un modèle très performant obtenir un modèle interprétable utiliser le modèle en temps réel avoir un modèle simple Un bouton “Lancer l’entraînement” déclenche la simulation de plusieurs algorithmes de ML (dont AutoML : H2O AutoML, LightAutoML, MLJAR, Khiops, StatMining, etc). Résultats affichés dans un dashboard à 4 sections : Haut gauche : tableau des modèles testés triés par performance décroissante (type de modèle, score, temps d’entraînement) Haut droite : graphique en barres de l’importance relative des variables (top 10) dans le meilleur modèle Bas gauche : bouton “Appliquer ce modèle à un nouveau fichier” (upload d’un second jeu de données) Bas droite : encadré synthétique avec les détails de l’expérimentation : nom du fichier, variable cible, objectifs choisis, algo sélectionné, temps total, score, etc. Design moderne, clair, boutons arrondis, icônes intuitives, typographie sans-serif, responsive sur desktop/tablette. Les couleurs et icônes aident à la lisibilité et à l'expérience utilisateur sans surcharger.
2
+ Une application web responsive développée avec Bolt (framework basé sur Python). L'interface est destinée à des utilisateurs non data scientists pour exploiter facilement une solution AutoML. Sur la page d’accueil, un titre centré “Démarrer une nouvelle expérimentation AutoML”. Étape 1 – Upload du jeu de données : Un composant st.file_uploader permet à l’utilisateur d’importer un fichier .csv ou .xlsx. Après l’upload, les premières lignes du fichier sont affichées dans un st.dataframe. Étape 2 – Choix de la variable cible : Un st.selectbox permet de choisir la colonne cible. Dès qu’elle est sélectionnée : Si la colonne est de type catégoriel (peu de modalités uniques), afficher un st.bar_chart de sa distribution. Si elle est continue, afficher un st.boxplot avec seaborn ou matplotlib dans un st.pyplot. Étape 3 – Objectifs de modélisation : Une zone de st.multiselect propose les objectifs suivants : “obtenir un résultat très rapidement” “obtenir un modèle très performant” “obtenir un modèle interprétable” “utiliser le modèle en temps réel” “avoir un modèle simple” Étape 4 – Entraînement : Un st.button("Lancer l'entraînement") déclenche une simulation de différents modèles, incluant plusieurs solutions AutoML : H2O AutoML LightAutoML MLJAR Khiops StatMining Affichage des résultats (après entraînement) dans une grille 2x2 : En haut à gauche : un st.table avec les modèles triés par performance (score, temps, nom du modèle). En haut à droite : un graphe d’importance des variables (top 10), affiché avec matplotlib dans un st.pyplot. En bas à gauche : un st.file_uploader pour charger un nouveau jeu de données et bouton “Appliquer ce modèle”. En bas à droite : bloc de résumé : fichier utilisé, cible, objectifs, algo retenu, durée, performance finale. Design épuré, icônes claires, boutons arrondis, typographie lisible. L’interface est responsive (desktop/tablette).