Hugging Face's logo

Spaces:
Soundaryasos
/
diabetes-predict
Running

App Files Community
Soundaryasos commited on
Commit
6295ad8
·
verified ·
1 Parent(s): d1a4106

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +535 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Diabetes Predict
3
- emoji: 🐨
4
  colorFrom: yellow
5
- colorTo: indigo
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: diabetes-predict
3
+ emoji: 🐳
4
  colorFrom: yellow
5
+ colorTo: green
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,535 @@
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>Diabetes Prediction Ensemble</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/shap@0.41.0/dist/shap.min.js"></script>
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
11
+ <style>
12
+ .gradient-bg {
13
+ background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #a855f7 100%);
14
+ }
15
+ .feature-importance-bar {
16
+ transition: width 0.5s ease-in-out;
17
+ }
18
+ .model-card:hover {
19
+ transform: translateY(-5px);
20
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
21
+ }
22
+ .shap-waterfall {
23
+ background-color: #f8fafc;
24
+ border-radius: 0.5rem;
25
+ padding: 1rem;
26
+ }
27
+ .input-highlight {
28
+ border-color: #4f46e5;
29
+ box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
30
+ }
31
+ </style>
32
+ </head>
33
+ <body class="bg-gray-50 min-h-screen">
34
+ <!-- Header -->
35
+ <header class="gradient-bg text-white shadow-lg">
36
+ <div class="container mx-auto px-4 py-6">
37
+ <div class="flex justify-between items-center">
38
+ <div class="flex items-center space-x-3">
39
+ <i class="fas fa-heartbeat text-3xl"></i>
40
+ <h1 class="text-2xl font-bold">DiabetesPredict</h1>
41
+ </div>
42
+ <nav>
43
+ <ul class="flex space-x-6">
44
+ <li><a href="#" class="hover:text-gray-200 transition">Home</a></li>
45
+ </ul>
46
+ </nav>
47
+ </div>
48
+ </div>
49
+ </header>
50
+
51
+ <!-- Main Content -->
52
+ <main class="container mx-auto px-4 py-8">
53
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
54
+ <!-- Input Form Section -->
55
+ <div class="lg:col-span-1 bg-white rounded-xl shadow-md p-6">
56
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">Patient Information</h2>
57
+ <p class="text-gray-600 mb-6">Enter your health metrics to assess diabetes risk using our advanced ensemble model.</p>
58
+
59
+ <form id="predictionForm" class="space-y-4">
60
+ <div>
61
+ <label for="pregnancies" class="block text-sm font-medium text-gray-700 mb-1">Pregnancies</label>
62
+ <input type="number" id="pregnancies" name="pregnancies" min="0" max="20" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
63
+ </div>
64
+
65
+ <div>
66
+ <label for="glucose" class="block text-sm font-medium text-gray-700 mb-1">Glucose (mg/dL)</label>
67
+ <input type="number" id="glucose" name="glucose" min="0" max="300" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
68
+ </div>
69
+
70
+ <div>
71
+ <label for="bloodPressure" class="block text-sm font-medium text-gray-700 mb-1">Blood Pressure (mmHg)</label>
72
+ <input type="number" id="bloodPressure" name="bloodPressure" min="0" max="150" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
73
+ </div>
74
+
75
+ <div>
76
+ <label for="skinThickness" class="block text-sm font-medium text-gray-700 mb-1">Skin Thickness (mm)</label>
77
+ <input type="number" id="skinThickness" name="skinThickness" min="0" max="100" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
78
+ </div>
79
+
80
+ <div>
81
+ <label for="insulin" class="block text-sm font-medium text-gray-700 mb-1">Insulin (μU/mL)</label>
82
+ <input type="number" id="insulin" name="insulin" min="0" max="300" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
83
+ </div>
84
+
85
+ <div>
86
+ <label for="bmi" class="block text-sm font-medium text-gray-700 mb-1">BMI</label>
87
+ <input type="number" id="bmi" name="bmi" step="0.1" min="0" max="60" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
88
+ </div>
89
+
90
+ <div>
91
+ <label for="diabetesPedigree" class="block text-sm font-medium text-gray-700 mb-1">Diabetes Pedigree Function</label>
92
+ <input type="number" id="diabetesPedigree" name="diabetesPedigree" step="0.001" min="0" max="2.5" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
93
+ </div>
94
+
95
+ <div>
96
+ <label for="age" class="block text-sm font-medium text-gray-700 mb-1">Age (years)</label>
97
+ <input type="number" id="age" name="age" min="0" max="120" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
98
+ </div>
99
+
100
+ <button type="submit" class="w-full gradient-bg text-white py-2 px-4 rounded-md hover:opacity-90 transition flex items-center justify-center space-x-2">
101
+ <i class="fas fa-chart-line"></i>
102
+ <span>Predict Diabetes Risk</span>
103
+ </button>
104
+ </form>
105
+ </div>
106
+
107
+ <!-- Results Section -->
108
+ <div class="lg:col-span-2 space-y-6">
109
+ <!-- Prediction Result Card -->
110
+ <div id="resultSection" class="hidden bg-white rounded-xl shadow-md p-6">
111
+ <div class="flex justify-between items-center mb-4">
112
+ <h2 class="text-xl font-semibold text-gray-800">Prediction Results</h2>
113
+ <div id="riskBadge" class="px-3 py-1 rounded-full text-sm font-medium"></div>
114
+ </div>
115
+
116
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
117
+ <!-- Ensemble Prediction -->
118
+ <div class="bg-indigo-50 rounded-lg p-4">
119
+ <div class="flex justify-between items-center mb-2">
120
+ <h3 class="font-medium text-indigo-800">Ensemble Model</h3>
121
+ <i class="fas fa-project-diagram text-indigo-500"></i>
122
+ </div>
123
+ <div class="flex items-center space-x-2">
124
+ <div id="ensembleScore" class="text-2xl font-bold text-indigo-700">0.72</div>
125
+ <div class="text-sm text-gray-500">probability</div>
126
+ </div>
127
+ <div class="mt-2 h-2 w-full bg-gray-200 rounded-full overflow-hidden">
128
+ <div id="ensembleBar" class="h-full gradient-bg rounded-full"></div>
129
+ </div>
130
+ </div>
131
+
132
+ <!-- Individual Model Predictions -->
133
+ <div class="bg-green-50 rounded-lg p-4">
134
+ <div class="flex justify-between items-center mb-2">
135
+ <h3 class="font-medium text-green-800">Random Forest</h3>
136
+ <i class="fas fa-tree text-green-500"></i>
137
+ </div>
138
+ <div class="flex items-center space-x-2">
139
+ <div id="rfScore" class="text-2xl font-bold text-green-700">0.68</div>
140
+ <div class="text-sm text-gray-500">probability</div>
141
+ </div>
142
+ <div class="mt-2 h-2 w-full bg-gray-200 rounded-full overflow-hidden">
143
+ <div id="rfBar" class="h-full bg-green-500 rounded-full"></div>
144
+ </div>
145
+ </div>
146
+
147
+ <div class="bg-blue-50 rounded-lg p-4">
148
+ <div class="flex justify-between items-center mb-2">
149
+ <h3 class="font-medium text-blue-800">XGBoost</h3>
150
+ <i class="fas fa-rocket text-blue-500"></i>
151
+ </div>
152
+ <div class="flex items-center space-x-2">
153
+ <div id="xgbScore" class="text-2xl font-bold text-blue-700">0.75</div>
154
+ <div class="text-sm text-gray-500">probability</div>
155
+ </div>
156
+ <div class="mt-2 h-2 w-full bg-gray-200 rounded-full overflow-hidden">
157
+ <div id="xgbBar" class="h-full bg-blue-500 rounded-full"></div>
158
+ </div>
159
+ </div>
160
+
161
+ <div class="bg-purple-50 rounded-lg p-4">
162
+ <div class="flex justify-between items-center mb-2">
163
+ <h3 class="font-medium text-purple-800">Neural Network</h3>
164
+ <i class="fas fa-brain text-purple-500"></i>
165
+ </div>
166
+ <div class="flex items-center space-x-2">
167
+ <div id="nnScore" class="text-2xl font-bold text-purple-700">0.71</div>
168
+ <div class="text-sm text-gray-500">probability</div>
169
+ </div>
170
+ <div class="mt-2 h-2 w-full bg-gray-200 rounded-full overflow-hidden">
171
+ <div id="nnBar" class="h-full bg-purple-500 rounded-full"></div>
172
+ </div>
173
+ </div>
174
+ </div>
175
+
176
+ <!-- SHAP Explanation -->
177
+ <div class="mt-6">
178
+ <h3 class="text-lg font-medium text-gray-800 mb-3">Feature Importance Analysis</h3>
179
+ <div class="shap-waterfall mb-4">
180
+ <div id="shapWaterfall" class="h-64 flex items-center justify-center text-gray-400">
181
+ <p>SHAP waterfall plot will appear here after prediction</p>
182
+ </div>
183
+ </div>
184
+
185
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
186
+ <div>
187
+ <h4 class="text-sm font-medium text-gray-700 mb-2">Most Influential Features</h4>
188
+ <div id="topFeatures" class="space-y-2">
189
+ <!-- Will be populated by JavaScript -->
190
+ </div>
191
+ </div>
192
+ <div>
193
+ <h4 class="text-sm font-medium text-gray-700 mb-2">Recommendations</h4>
194
+ <div id="recommendations" class="text-sm text-gray-600 space-y-2">
195
+ <!-- Will be populated by JavaScript -->
196
+ </div>
197
+ </div>
198
+ </div>
199
+ </div>
200
+ </div>
201
+
202
+ <!-- Model Comparison Section -->
203
+ <div class="bg-white rounded-xl shadow-md p-6">
204
+ <h2 class="text-xl font-semibold text-gray-800 mb-4">Model Performance Comparison</h2>
205
+ <p class="text-gray-600 mb-4">Our ensemble combines the strengths of three powerful machine learning models:</p>
206
+
207
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
208
+ <!-- Random Forest Card -->
209
+ <div class="model-card bg-white border border-gray-200 rounded-lg p-4 transition duration-300 hover:shadow-lg">
210
+ <div class="flex items-center space-x-3 mb-3">
211
+ <div class="bg-green-100 p-2 rounded-full">
212
+ <i class="fas fa-tree text-green-600"></i>
213
+ </div>
214
+ <h3 class="font-medium">Random Forest</h3>
215
+ </div>
216
+ <p class="text-sm text-gray-600 mb-3">An ensemble of decision trees that reduces overfitting and provides robust predictions.</p>
217
+ <div class="text-xs text-gray-500">
218
+ <div class="flex justify-between mb-1">
219
+ <span>Accuracy:</span>
220
+ <span class="font-medium">84.2%</span>
221
+ </div>
222
+ <div class="flex justify-between mb-1">
223
+ <span>Precision:</span>
224
+ <span class="font-medium">82.5%</span>
225
+ </div>
226
+ <div class="flex justify-between">
227
+ <span>Recall:</span>
228
+ <span class="font-medium">85.7%</span>
229
+ </div>
230
+ </div>
231
+ </div>
232
+
233
+ <!-- XGBoost Card -->
234
+ <div class="model-card bg-white border border-gray-200 rounded-lg p-4 transition duration-300 hover:shadow-lg">
235
+ <div class="flex items-center space-x-3 mb-3">
236
+ <div class="bg-blue-100 p-2 rounded-full">
237
+ <i class="fas fa-rocket text-blue-600"></i>
238
+ </div>
239
+ <h3 class="font-medium">XGBoost</h3>
240
+ </div>
241
+ <p class="text-sm text-gray-600 mb-3">A gradient boosting framework optimized for speed and performance with regularization.</p>
242
+ <div class="text-xs text-gray-500">
243
+ <div class="flex justify-between mb-1">
244
+ <span>Accuracy:</span>
245
+ <span class="font-medium">86.1%</span>
246
+ </div>
247
+ <div class="flex justify-between mb-1">
248
+ <span>Precision:</span>
249
+ <span class="font-medium">84.3%</span>
250
+ </div>
251
+ <div class="flex justify-between">
252
+ <span>Recall:</span>
253
+ <span class="font-medium">87.9%</span>
254
+ </div>
255
+ </div>
256
+ </div>
257
+
258
+ <!-- Neural Network Card -->
259
+ <div class="model-card bg-white border border-gray-200 rounded-lg p-4 transition duration-300 hover:shadow-lg">
260
+ <div class="flex items-center space-x-3 mb-3">
261
+ <div class="bg-purple-100 p-2 rounded-full">
262
+ <i class="fas fa-brain text-purple-600"></i>
263
+ </div>
264
+ <h3 class="font-medium">Neural Network</h3>
265
+ </div>
266
+ <p class="text-sm text-gray-600 mb-3">A deep learning model that captures complex non-linear relationships in the data.</p>
267
+ <div class="text-xs text-gray-500">
268
+ <div class="flex justify-between mb-1">
269
+ <span>Accuracy:</span>
270
+ <span class="font-medium">83.7%</span>
271
+ </div>
272
+ <div class="flex justify-between mb-1">
273
+ <span>Precision:</span>
274
+ <span class="font-medium">81.9%</span>
275
+ </div>
276
+ <div class="flex justify-between">
277
+ <span>Recall:</span>
278
+ <span class="font-medium">84.2%</span>
279
+ </div>
280
+ </div>
281
+ </div>
282
+ </div>
283
+
284
+ <div class="mt-6">
285
+ <h3 class="text-md font-medium text-gray-800 mb-2">Ensemble Performance</h3>
286
+ <div class="bg-gray-50 p-4 rounded-lg">
287
+ <div class="flex items-center space-x-2 mb-3">
288
+ <i class="fas fa-star text-yellow-500"></i>
289
+ <p class="text-sm text-gray-700">Our weighted ensemble achieves <span class="font-medium">88.3% accuracy</span> by combining the predictions of all three models.</p>
290
+ </div>
291
+ <canvas id="performanceChart" height="150"></canvas>
292
+ </div>
293
+ </div>
294
+ </div>
295
+ </div>
296
+ </div>
297
+ </main>
298
+
299
+ <!-- Footer -->
300
+ <footer class="bg-gray-800 text-white py-8">
301
+ <div class="container mx-auto px-4">
302
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
303
+ <div>
304
+ <h3 class="text-lg font-semibold mb-4">DiabetesPredict</h3>
305
+ <p class="text-gray-400">An advanced diabetes risk assessment tool using ensemble machine learning with explainable AI.</p>
306
+ </div>
307
+ <div>
308
+ <h3 class="text-lg font-semibold mb-4">Quick Links</h3>
309
+ <ul class="space-y-2">
310
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li>
311
+ </ul>
312
+ </div>
313
+ <div>
314
+ <h3 class="text-lg font-semibold mb-4">Contact</h3>
315
+ <ul class="space-y-2 text-gray-400">
316
+ <li class="flex items-center space-x-2">
317
+ <i class="fas fa-envelope"></i>
318
+ <span>contact@diabetespredict.org</span>
319
+ </li>
320
+ <li class="flex items-center space-x-2">
321
+ <i class="fas fa-phone"></i>
322
+ <span>+1 (555) 123-4567</span>
323
+ </li>
324
+ <li class="flex items-center space-x-2">
325
+ <i class="fas fa-map-marker-alt"></i>
326
+ <span>123 Health Lane, Boston, MA</span>
327
+ </li>
328
+ </ul>
329
+ </div>
330
+ </div>
331
+ <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400">
332
+ <p>© 2023 DiabetesPredict. All rights reserved.</p>
333
+ <p class="text-xs mt-2">Disclaimer: This tool is for informational purposes only and not a substitute for professional medical advice.</p>
334
+ </div>
335
+ </div>
336
+ </footer>
337
+
338
+ <script>
339
+ // Initialize performance chart
340
+ document.addEventListener('DOMContentLoaded', function() {
341
+ const ctx = document.getElementById('performanceChart').getContext('2d');
342
+ const performanceChart = new Chart(ctx, {
343
+ type: 'bar',
344
+ data: {
345
+ labels: ['Random Forest', 'XGBoost', 'Neural Network', 'Ensemble'],
346
+ datasets: [{
347
+ label: 'Accuracy (%)',
348
+ data: [84.2, 86.1, 83.7, 88.3],
349
+ backgroundColor: [
350
+ 'rgba(16, 185, 129, 0.7)',
351
+ 'rgba(59, 130, 246, 0.7)',
352
+ 'rgba(168, 85, 247, 0.7)',
353
+ 'rgba(79, 70, 229, 0.7)'
354
+ ],
355
+ borderColor: [
356
+ 'rgba(16, 185, 129, 1)',
357
+ 'rgba(59, 130, 246, 1)',
358
+ 'rgba(168, 85, 247, 1)',
359
+ 'rgba(79, 70, 229, 1)'
360
+ ],
361
+ borderWidth: 1
362
+ }]
363
+ },
364
+ options: {
365
+ responsive: true,
366
+ scales: {
367
+ y: {
368
+ beginAtZero: true,
369
+ max: 100,
370
+ title: {
371
+ display: true,
372
+ text: 'Accuracy (%)'
373
+ }
374
+ }
375
+ },
376
+ plugins: {
377
+ legend: {
378
+ display: false
379
+ }
380
+ }
381
+ }
382
+ });
383
+
384
+ // Highlight inputs on focus
385
+ const inputs = document.querySelectorAll('input');
386
+ inputs.forEach(input => {
387
+ input.addEventListener('focus', function() {
388
+ this.classList.add('input-highlight');
389
+ });
390
+ input.addEventListener('blur', function() {
391
+ this.classList.remove('input-highlight');
392
+ });
393
+ });
394
+ });
395
+
396
+ // Form submission handler
397
+ document.getElementById('predictionForm').addEventListener('submit', function(e) {
398
+ e.preventDefault();
399
+
400
+ // Show loading state
401
+ const submitBtn = this.querySelector('button[type="submit"]');
402
+ const originalBtnText = submitBtn.innerHTML;
403
+ submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
404
+ submitBtn.disabled = true;
405
+
406
+ // Simulate API call with timeout
407
+ setTimeout(() => {
408
+ // Generate random probabilities for demo purposes
409
+ const rfProb = (Math.random() * 0.3 + 0.5).toFixed(2);
410
+ const xgbProb = (Math.random() * 0.3 + 0.5).toFixed(2);
411
+ const nnProb = (Math.random() * 0.3 + 0.5).toFixed(2);
412
+ const ensembleProb = ((parseFloat(rfProb) + parseFloat(xgbProb) + parseFloat(nnProb)) / 3).toFixed(2);
413
+
414
+ // Update UI with results
415
+ document.getElementById('rfScore').textContent = rfProb;
416
+ document.getElementById('xgbScore').textContent = xgbProb;
417
+ document.getElementById('nnScore').textContent = nnProb;
418
+ document.getElementById('ensembleScore').textContent = ensembleProb;
419
+
420
+ // Update progress bars
421
+ document.getElementById('rfBar').style.width = `${rfProb * 100}%`;
422
+ document.getElementById('xgbBar').style.width = `${xgbProb * 100}%`;
423
+ document.getElementById('nnBar').style.width = `${nnProb * 100}%`;
424
+ document.getElementById('ensembleBar').style.width = `${ensembleProb * 100}%`;
425
+
426
+ // Set risk level
427
+ const riskBadge = document.getElementById('riskBadge');
428
+ if (ensembleProb >= 0.7) {
429
+ riskBadge.textContent = 'High Risk';
430
+ riskBadge.className = 'px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-800';
431
+ } else if (ensembleProb >= 0.5) {
432
+ riskBadge.textContent = 'Moderate Risk';
433
+ riskBadge.className = 'px-3 py-1 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800';
434
+ } else {
435
+ riskBadge.textContent = 'Low Risk';
436
+ riskBadge.className = 'px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800';
437
+ }
438
+
439
+ // Generate SHAP explanation (simulated)
440
+ const shapWaterfall = document.getElementById('shapWaterfall');
441
+ shapWaterfall.innerHTML = `
442
+ <div class="text-center">
443
+ <p class="text-sm text-gray-500 mb-2">SHAP values show how each feature contributes to the prediction</p>
444
+ <div class="inline-block bg-white p-4 rounded-lg shadow">
445
+ <div class="flex items-center justify-center space-x-2 mb-2">
446
+ <div class="w-4 h-4 bg-blue-500"></div>
447
+ <span class="text-xs">Positive impact</span>
448
+ <div class="w-4 h-4 bg-red-500 ml-2"></div>
449
+ <span class="text-xs">Negative impact</span>
450
+ </div>
451
+ <div class="h-40 w-64 bg-gradient-to-r from-red-500 via-gray-200 to-blue-500 rounded"></div>
452
+ </div>
453
+ </div>
454
+ `;
455
+
456
+ // Generate top features
457
+ const features = [
458
+ {name: 'Glucose', value: (Math.random() * 0.3 + 0.1).toFixed(2), impact: Math.random() > 0.5 ? 'positive' : 'negative'},
459
+ {name: 'BMI', value: (Math.random() * 0.2 + 0.1).toFixed(2), impact: Math.random() > 0.5 ? 'positive' : 'negative'},
460
+ {name: 'Age', value: (Math.random() * 0.2 + 0.05).toFixed(2), impact: Math.random() > 0.5 ? 'positive' : 'negative'},
461
+ {name: 'Diabetes Pedigree', value: (Math.random() * 0.15 + 0.05).toFixed(2), impact: Math.random() > 0.5 ? 'positive' : 'negative'},
462
+ {name: 'Blood Pressure', value: (Math.random() * 0.1 + 0.05).toFixed(2), impact: Math.random() > 0.5 ? 'positive' : 'negative'}
463
+ ];
464
+
465
+ // Sort by absolute value
466
+ features.sort((a, b) => Math.abs(b.value) - Math.abs(a.value));
467
+
468
+ const topFeaturesContainer = document.getElementById('topFeatures');
469
+ topFeaturesContainer.innerHTML = '';
470
+
471
+ features.forEach(feat => {
472
+ const featureEl = document.createElement('div');
473
+ featureEl.className = 'flex items-center justify-between';
474
+
475
+ const nameEl = document.createElement('span');
476
+ nameEl.className = 'text-sm font-medium';
477
+ nameEl.textContent = feat.name;
478
+
479
+ const valueEl = document.createElement('div');
480
+ valueEl.className = 'flex items-center';
481
+
482
+ const icon = document.createElement('i');
483
+ icon.className = `fas ${feat.impact === 'positive' ? 'fa-arrow-up text-red-500' : 'fa-arrow-down text-blue-500'} mr-1`;
484
+
485
+ const valueText = document.createElement('span');
486
+ valueText.className = 'text-sm';
487
+ valueText.textContent = feat.value;
488
+
489
+ valueEl.appendChild(icon);
490
+ valueEl.appendChild(valueText);
491
+
492
+ featureEl.appendChild(nameEl);
493
+ featureEl.appendChild(valueEl);
494
+
495
+ topFeaturesContainer.appendChild(featureEl);
496
+ });
497
+
498
+ // Generate recommendations
499
+ const recommendations = [
500
+ 'Monitor glucose levels regularly',
501
+ 'Maintain a healthy BMI through diet and exercise',
502
+ 'Schedule regular check-ups with your doctor',
503
+ 'Consider lifestyle changes to reduce risk factors'
504
+ ];
505
+
506
+ const recommendationsContainer = document.getElementById('recommendations');
507
+ recommendationsContainer.innerHTML = '';
508
+
509
+ recommendations.forEach(rec => {
510
+ const recEl = document.createElement('div');
511
+ recEl.className = 'flex items-start space-x-2';
512
+
513
+ const icon = document.createElement('i');
514
+ icon.className = 'fas fa-check-circle text-green-500 mt-0.5';
515
+
516
+ const text = document.createElement('p');
517
+ text.textContent = rec;
518
+
519
+ recEl.appendChild(icon);
520
+ recEl.appendChild(text);
521
+
522
+ recommendationsContainer.appendChild(recEl);
523
+ });
524
+
525
+ // Show results section
526
+ document.getElementById('resultSection').classList.remove('hidden');
527
+
528
+ // Reset button
529
+ submitBtn.innerHTML = originalBtnText;
530
+ submitBtn.disabled = false;
531
+ }, 1500);
532
+ });
533
+ </script>
534
+ <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=Soundaryasos/diabetes-predict" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
535
+ </html>