Hugging Face's logo

Spaces:
omaralaa2004
/
stroke_model
Sleeping

App Files Community
omaralaa2004 commited on
Commit
7569664
·
verified ·
1 Parent(s): 9f6e37f

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +81 -284
templates/index.html CHANGED
@@ -1,43 +1,4 @@
1
- <script type="text/javascript">
2
- var gk_isXlsx = false;
3
- var gk_xlsxFileLookup = {};
4
- var gk_fileData = {};
5
- function filledCell(cell) {
6
- return cell !== '' && cell != null;
7
- }
8
- function loadFileData(filename) {
9
- if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
10
- try {
11
- var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
12
- var firstSheetName = workbook.SheetNames[0];
13
- var worksheet = workbook.Sheets[firstSheetName];
14
-
15
- // Convert sheet to JSON to filter blank rows
16
- var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
17
- // Filter out blank rows (rows where all cells are empty, null, or undefined)
18
- var filteredData = jsonData.filter(row => row.some(filledCell));
19
-
20
- // Heuristic to find the header row by ignoring rows with fewer filled cells than the next row
21
- var headerRowIndex = filteredData.findIndex((row, index) =>
22
- row.filter(filledCell).length >= filteredData[index + 1]?.filter(filledCell).length
23
- );
24
- // Fallback
25
- if (headerRowIndex === -1 || headerRowIndex > 25) {
26
- headerRowIndex = 0;
27
- }
28
-
29
- // Convert filtered JSON back to CSV
30
- var csv = XLSX.utils.aoa_to_sheet(filteredData.slice(headerRowIndex)); // Create a new sheet from filtered array of arrays
31
- csv = XLSX.utils.sheet_to_csv(csv, { header: 1 });
32
- return csv;
33
- } catch (e) {
34
- console.error(e);
35
- return "";
36
- }
37
- }
38
- return gk_fileData[filename] || "";
39
- }
40
- </script><!DOCTYPE html>
41
  <html lang="en">
42
  <head>
43
  <meta charset="UTF-8">
@@ -210,66 +171,46 @@
210
  transition: width 0.3s ease;
211
  }
212
 
213
- .gauge-container {
214
- width: 200px;
215
- height: 200px;
216
- margin: 0 auto;
217
- position: relative;
218
  }
219
 
220
- .gauge {
221
- width: 200px;
222
- height: 100px;
 
 
 
 
 
 
 
 
223
  position: relative;
224
- overflow: hidden;
225
- border-top-left-radius: 100px;
226
- border-top-right-radius: 100px;
227
- margin-bottom: 10px;
228
  }
229
 
230
- .gauge-bg {
231
- width: 200px;
232
- height: 200px;
233
- border-radius: 100px;
234
- position: absolute;
235
- background: linear-gradient(0deg, #f0f0f0 0%, #e0e0e0 100%);
236
  }
237
 
238
- .gauge-fill {
239
- width: 200px;
240
- height: 200px;
241
- border-radius: 100px;
242
- position: absolute;
243
- background: linear-gradient(90deg, #23ce6b 0%, #ff6b6b 100%);
244
- transform-origin: center bottom;
245
- transform: rotate(0deg);
246
- transition: transform 1s ease-out;
247
  }
248
 
249
- .gauge-center {
250
- width: 160px;
251
- height: 160px;
252
- background: white;
253
- border-radius: 80px;
254
  position: absolute;
 
 
255
  top: 20px;
256
- left: 20px;
257
- z-index: 10;
258
- display: flex;
259
- align-items: center;
260
- justify-content: center;
261
- flex-direction: column;
262
- }
263
-
264
- .percentage {
265
- font-size: 32px;
266
- font-weight: 700;
267
- color: var(--dark-text);
268
- }
269
-
270
- .risk-label {
271
- font-size: 18px;
272
- font-weight: 600;
273
  }
274
 
275
  .form-nav {
@@ -308,83 +249,39 @@
308
  to { opacity: 1; transform: translateY(0); }
309
  }
310
 
311
- .step-indicator {
312
- display: flex;
313
- justify-content: center;
314
- margin-bottom: 30px;
 
 
 
 
 
315
  }
316
 
317
- .step {
318
- width: 40px;
319
- height: 40px;
 
 
 
320
  border-radius: 50%;
321
- background-color: #e0e0ff;
322
- display: flex;
323
- align-items: center;
324
- justify-content: center;
325
- font-weight: 600;
326
- color: var(--dark-text);
327
- margin: 0 10px;
328
- position: relative;
329
- transition: all 0.3s ease;
330
- }
331
-
332
- .step.active {
333
- background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
334
- color: white;
335
- transform: scale(1.1);
336
- }
337
-
338
- .step.completed {
339
- background: var(--success-color);
340
- color: white;
341
- }
342
-
343
- .step-line {
344
- position: absolute;
345
- height: 3px;
346
- background-color: #e0e0ff;
347
- top: 20px;
348
- left: 40px;
349
- width: calc(100% - 100px);
350
- z-index: -1;
351
- }
352
-
353
- .factors-list {
354
- padding: 20px;
355
- background-color: #f9f9ff;
356
- border-radius: 10px;
357
- margin-top: 20px;
358
- }
359
-
360
- .factor-item {
361
- margin-bottom: 10px;
362
- padding-left: 25px;
363
- position: relative;
364
- }
365
-
366
- .factor-item:before {
367
- content: '•';
368
  position: absolute;
369
- left: 8px;
370
- color: var(--primary-color);
371
- font-weight: bold;
372
- }
373
-
374
- .risk-actions {
375
- margin-top: 20px;
376
- padding: 20px;
377
- background-color: #fdfdff;
378
- border-radius: 10px;
379
- border-left: 4px solid var(--primary-color);
380
- }
381
-
382
- .form-floating {
383
- margin-bottom: 20px;
384
  }
385
 
386
- .form-floating label {
387
- padding: 1rem 0.75rem;
 
 
 
 
 
388
  }
389
 
390
  .info-tooltip {
@@ -425,41 +322,6 @@
425
  visibility: visible;
426
  opacity: 1;
427
  }
428
-
429
- .loader {
430
- display: none;
431
- width: 48px;
432
- height: 48px;
433
- border: 5px solid var(--primary-color);
434
- border-bottom-color: transparent;
435
- border-radius: 50%;
436
- box-sizing: border-box;
437
- animation: rotation 1s linear infinite;
438
- position: absolute;
439
- top: 50%;
440
- left: 50%;
441
- transform: translate(-50%, -50%);
442
- }
443
-
444
- @keyframes rotation {
445
- 0% {
446
- transform: translate(-50%, -50%) rotate(0deg);
447
- }
448
- 100% {
449
- transform: translate(-50%, -50%) rotate(360deg);
450
- }
451
- }
452
-
453
- .overlay {
454
- display: none;
455
- position: fixed;
456
- top: 0;
457
- left: 0;
458
- width: 100%;
459
- height: 100%;
460
- background-color: rgba(0, 0, 0, 0.5);
461
- z-index: 1000;
462
- }
463
  </style>
464
  </head>
465
  <body>
@@ -514,8 +376,8 @@
514
  </div>
515
  <div class="col-md-6">
516
  <div class="form-group">
517
- <label for="Residence_type">Residence Type <span class="info-tooltip">i<span class="tooltip-text">Urban or rural area</span></span></label>
518
- <select class="form-control" id="Residence_type" name="Residence_type" required>
519
  <option value="">Select</option>
520
  <option value="Urban">Urban</option>
521
  <option value="Rural">Rural</option>
@@ -575,7 +437,7 @@
575
  <div class="row">
576
  <div class="col-md-6">
577
  <div class="form-group">
578
- <label for="avg_glucose_level">Average Glucose Level (mg/dL) <span class="info-tooltip">i<span class="tooltip-text">Normal fasting blood sugar is under 100 mg/dL</span></span></label>
579
  <input type="number" class="form-control" id="avg_glucose_level" name="avg_glucose_level" required min="0" step="0.01">
580
  </div>
581
  </div>
@@ -641,42 +503,7 @@
641
 
642
  <div id="result" class="result-container animate__animated">
643
  <h3 id="result-title" class="text-center mb-4">Prediction Result</h3>
644
-
645
- <div class="gauge-container">
646
- <div class="gauge">
647
- <div class="gauge-bg"></div>
648
- <div class="gauge-fill" id="gauge-fill"></div>
649
- </div>
650
- <div class="gauge-center">
651
- <div class="percentage" id="probability-display">0%</div>
652
- <div class="risk-label" id="risk-label">Risk</div>
653
- </div>
654
- </div>
655
-
656
- <p id="result-message" class="text-center mt-4 mb-3"></p>
657
-
658
- <div class="factors-list" id="risk-factors">
659
- <h4>Key Risk Factors:</h4>
660
- <div class="factor-item">Age is a significant risk factor for stroke</div>
661
- <div class="factor-item" id="factor-glucose">High glucose levels increase stroke risk</div>
662
- <div class="factor-item" id="factor-hypertension">Hypertension significantly increases stroke risk</div>
663
- <div class="factor-item" id="factor-heart">Heart disease is a major risk factor</div>
664
- <div class="factor-item" id="factor-smoking">Smoking increases stroke risk</div>
665
- </div>
666
-
667
- <div class="risk-actions">
668
- <h4>Recommended Actions:</h4>
669
- <p>Based on your results, consider the following steps:</p>
670
- <ul>
671
- <li>Consult with your healthcare provider</li>
672
- <li>Monitor your blood pressure regularly</li>
673
- <li>Maintain a healthy diet and exercise routine</li>
674
- <li>If you smoke, consider quitting</li>
675
- <li>Keep your glucose levels in check</li>
676
- </ul>
677
- <p class="text-center mt-3"><strong>Remember:</strong> This tool provides an estimate only and is not a substitute for professional medical advice.</p>
678
- </div>
679
-
680
  <div class="text-center mt-4">
681
  <button type="button" class="btn btn-nav" id="start-over">Start Over</button>
682
  </div>
@@ -756,16 +583,16 @@
756
 
757
  // Update summary before submission
758
  function updateSummary() {
759
- $('#summary-age').text($('#age').val());
760
- $('#summary-gender').text($('#gender').val());
761
- $('#summary-married').text($('#ever_married').val());
762
- $('#summary-residence').text($('#Residence_type').val());
763
- $('#summary-work').text($('#work_type').val());
764
- $('#summary-hypertension').text($('#hypertension').val() === '1' ? 'Yes' : 'No');
765
- $('#summary-heart').text($('#heart_disease').val() === '1' ? 'Yes' : 'No');
766
- $('#summary-glucose').text($('#avg_glucose_level').val());
767
- $('#summary-bmi').text($('#bmi').val());
768
- $('#summary-smoking').text($('#smoking_status').val());
769
  }
770
 
771
  // Navigation button click handlers
@@ -817,7 +644,7 @@
817
  age: $('#age').val(),
818
  gender: $('#gender').val(),
819
  ever_married: $('#ever_married').val(),
820
- residence_type: $('#Residence_type').val(),
821
  work_type: $('#work_type').val(),
822
  hypertension: $('#hypertension').val(),
823
  heart_disease: $('#heart_disease').val(),
@@ -838,7 +665,15 @@
838
  $('#loading-overlay').fadeOut();
839
 
840
  // Process and display result
841
- processResult(response);
 
 
 
 
 
 
 
 
842
  } else {
843
  $('#loading-overlay').fadeOut();
844
  alert('Error: ' + response.error);
@@ -852,44 +687,6 @@
852
  });
853
  }
854
  });
855
-
856
- // Process and display prediction results
857
- function processResult(response) {
858
- const { probability, riskLevel, contributingFactors } = response;
859
-
860
- // Update gauge
861
- const rotation = (probability / 100) * 180; // Map 0-100% to 0-180 degrees
862
- $('#gauge-fill').css('transform', `rotate(${rotation}deg)`);
863
-
864
- // Update percentage and risk label
865
- $('#probability-display').text(`${probability}%`);
866
- $('#risk-label').text(`${riskLevel} Risk`);
867
-
868
- // Update result message and styling
869
- $('#result').removeClass('high-risk low-risk');
870
- if (riskLevel === 'High') {
871
- $('#result').addClass('high-risk');
872
- $('#result-message').text('Your stroke risk is high. Please consult a healthcare professional immediately.');
873
- } else if (riskLevel === 'Moderate') {
874
- $('#result').addClass('high-risk');
875
- $('#result-message').text('Your stroke risk is moderate. Consider discussing with your doctor.');
876
- } else {
877
- $('#result').addClass('low-risk');
878
- $('#result-message').text('Your stroke risk is low. Continue maintaining a healthy lifestyle.');
879
- }
880
-
881
- // Update risk factors visibility
882
- $('#factor-glucose').toggle(contributingFactors.glucose);
883
- $('#factor-hypertension').toggle(contributingFactors.hypertension);
884
- $('#factor-heart').toggle(contributingFactors.heartDisease);
885
- $('#factor-smoking').toggle(contributingFactors.smoking);
886
-
887
- // Show result with animation
888
- $('#result').show().removeClass('animate__fadeOut').addClass('animate__fadeIn');
889
-
890
- // Hide form
891
- $('#prediction-form').hide();
892
- }
893
  });
894
  </script>
895
  </body>
 
1
+ <!DOCTYPE html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
 
171
  transition: width 0.3s ease;
172
  }
173
 
174
+ .step-indicator {
175
+ display: flex;
176
+ justify-content: center;
177
+ margin-bottom: 30px;
 
178
  }
179
 
180
+ .step {
181
+ width: 40px;
182
+ height: 40px;
183
+ border-radius: 50%;
184
+ background-color: #e0e0ff;
185
+ display: flex;
186
+ align-items: center;
187
+ justify-content: center;
188
+ font-weight: 600;
189
+ color: var(--dark-text);
190
+ margin: 0 10px;
191
  position: relative;
192
+ transition: all 0.3s ease;
 
 
 
193
  }
194
 
195
+ .step.active {
196
+ background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
197
+ color: white;
198
+ transform: scale(1.1);
 
 
199
  }
200
 
201
+ .step.completed {
202
+ background: var(--success-color);
203
+ color: white;
 
 
 
 
 
 
204
  }
205
 
206
+ .step-line {
 
 
 
 
207
  position: absolute;
208
+ height: 3px;
209
+ background-color: #e0e0ff;
210
  top: 20px;
211
+ left: 40px;
212
+ width: calc(100% - 100px);
213
+ z-index: -1;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
214
  }
215
 
216
  .form-nav {
 
249
  to { opacity: 1; transform: translateY(0); }
250
  }
251
 
252
+ .overlay {
253
+ display: none;
254
+ position: fixed;
255
+ top: 0;
256
+ left: 0;
257
+ width: 100%;
258
+ height: 100%;
259
+ background-color: rgba(0, 0, 0, 0.5);
260
+ z-index: 1000;
261
  }
262
 
263
+ .loader {
264
+ display: none;
265
+ width: 48px;
266
+ height: 48px;
267
+ border: 5px solid var(--primary-color);
268
+ border-bottom-color: transparent;
269
  border-radius: 50%;
270
+ box-sizing: border-box;
271
+ animation: rotation 1s linear infinite;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
272
  position: absolute;
273
+ top: 50%;
274
+ left: 50%;
275
+ transform: translate(-50%, -50%);
 
 
 
 
 
 
 
 
 
 
 
 
276
  }
277
 
278
+ @keyframes rotation {
279
+ 0% {
280
+ transform: translate(-50%, -50%) rotate(0deg);
281
+ }
282
+ 100% {
283
+ transform: translate(-50%, -50%) rotate(360deg);
284
+ }
285
  }
286
 
287
  .info-tooltip {
 
322
  visibility: visible;
323
  opacity: 1;
324
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
325
  </style>
326
  </head>
327
  <body>
 
376
  </div>
377
  <div class="col-md-6">
378
  <div class="form-group">
379
+ <label for="residence_type">Residence Type <span class="info-tooltip">i<span class="tooltip-text">Urban or rural area</span></span></label>
380
+ <select class="form-control" id="residence_type" name="residence_type" required>
381
  <option value="">Select</option>
382
  <option value="Urban">Urban</option>
383
  <option value="Rural">Rural</option>
 
437
  <div class="row">
438
  <div class="col-md-6">
439
  <div class="form-group">
440
+ <label for="avg_glucose_level">Avg. Glucose Level <span class="info-tooltip">i<span class="tooltip-text">Normal fasting blood sugar is under 100 mg/dL</span></span></label>
441
  <input type="number" class="form-control" id="avg_glucose_level" name="avg_glucose_level" required min="0" step="0.01">
442
  </div>
443
  </div>
 
503
 
504
  <div id="result" class="result-container animate__animated">
505
  <h3 id="result-title" class="text-center mb-4">Prediction Result</h3>
506
+ <p id="prediction-result" class="text-center fs-4 fw-bold"></p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
507
  <div class="text-center mt-4">
508
  <button type="button" class="btn btn-nav" id="start-over">Start Over</button>
509
  </div>
 
583
 
584
  // Update summary before submission
585
  function updateSummary() {
586
+ $('#summary-age').text($('#age').val() || 'Not specified');
587
+ $('#summary-gender').text($('#gender').val() || 'Not specified');
588
+ $('#summary-married').text($('#ever_married').val() || 'Not specified');
589
+ $('#summary-residence').text($('#residence_type').val() || 'Not specified');
590
+ $('#summary-work').text($('#work_type').val() || 'Not specified');
591
+ $('#summary-hypertension').text($('#hypertension').val() === '1' ? 'Yes' : $('#hypertension').val() === '0' ? 'No' : 'Not specified');
592
+ $('#summary-heart').text($('#heart_disease').val() === '1' ? 'Yes' : $('#heart_disease').val() === '0' ? 'No' : 'Not specified');
593
+ $('#summary-glucose').text($('#avg_glucose_level').val() || 'Not specified');
594
+ $('#summary-bmi').text($('#bmi').val() || 'Not specified');
595
+ $('#summary-smoking').text($('#smoking_status').val() || 'Not specified');
596
  }
597
 
598
  // Navigation button click handlers
 
644
  age: $('#age').val(),
645
  gender: $('#gender').val(),
646
  ever_married: $('#ever_married').val(),
647
+ residence_type: $('#residence_type').val(),
648
  work_type: $('#work_type').val(),
649
  hypertension: $('#hypertension').val(),
650
  heart_disease: $('#heart_disease').val(),
 
665
  $('#loading-overlay').fadeOut();
666
 
667
  // Process and display result
668
+ $('#prediction-result').text(response.prediction);
669
+ $('#result').removeClass('high-risk low-risk');
670
+ if (response.prediction === 'Stroke Risk') {
671
+ $('#result').addClass('high-risk');
672
+ } else {
673
+ $('#result').addClass('low-risk');
674
+ }
675
+ $('#result').show().removeClass('animate__fadeOut').addClass('animate__fadeIn');
676
+ $('#prediction-form').hide();
677
  } else {
678
  $('#loading-overlay').fadeOut();
679
  alert('Error: ' + response.error);
 
687
  });
688
  }
689
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
690
  });
691
  </script>
692
  </body>