Hugging Face's logo

Spaces:
BetaCell
/
Diabetes-Prediction-Model
Sleeping

App Files Community
Zen-4011 commited on
Commit
5dea356
·
verified ·
1 Parent(s): 81db147

Update src/templates/index.html

Browse files
Files changed (1) hide show
  1. src/templates/index.html +137 -118
src/templates/index.html CHANGED
@@ -1,132 +1,151 @@
1
- document.addEventListener('DOMContentLoaded', function() {
2
-
3
- // INITIALIZE ALL NUMBER INPUTS
4
- const containers = document.querySelectorAll('.number-input-container');
 
 
 
 
 
 
5
 
6
- containers.forEach(container => {
7
- const input = container.querySelector('.number-input');
8
- const decreaseBtn = container.querySelector('.decrease-btn');
9
- const increaseBtn = container.querySelector('.increase-btn');
 
10
 
11
- // Helper: Validate and clamp value based on min/max attributes
12
- function validateAndClamp(value) {
13
- const min = parseFloat(input.getAttribute('min')) || 0;
14
- const max = parseFloat(input.getAttribute('max')) || Infinity;
15
- const step = parseFloat(input.getAttribute('step')) || 1;
 
16
 
17
- if (value > max) return max;
18
- if (value < min) return min;
19
- return value;
20
- }
21
-
22
- // Helper: Update value logic
23
- function updateValue(change) {
24
- let current = parseFloat(input.value) || 0;
25
- let step = parseFloat(input.getAttribute('step')) || 1;
26
-
27
- // Fix float math issues (e.g. 0.1 + 0.2)
28
- let newValue = current + (change * step);
29
- newValue = Math.round(newValue * 1000) / 1000;
30
-
31
- const clamped = validateAndClamp(newValue);
32
- input.value = clamped;
33
- input.dispatchEvent(new Event('input')); // Trigger events
34
- }
35
-
36
- // Button Listeners
37
- decreaseBtn.addEventListener('click', () => updateValue(-1));
38
- increaseBtn.addEventListener('click', () => updateValue(1));
39
-
40
- // Validation on Blur (Flash Red if corrected)
41
- input.addEventListener('blur', function() {
42
- let current = parseFloat(this.value) || 0;
43
- const clamped = validateAndClamp(current);
44
-
45
- if (current !== clamped) {
46
- this.value = clamped;
47
- this.style.color = '#f87171';
48
- setTimeout(() => this.style.color = '#ffffff', 300);
49
- }
50
- });
51
 
52
- // Mouse Wheel Support
53
- input.addEventListener('wheel', function(e) {
54
- if (document.activeElement === input) {
55
- e.preventDefault();
56
- updateValue(e.deltaY < 0 ? 1 : -1);
57
- }
58
- });
59
- });
60
- });
 
 
 
61
 
62
- // PREDICTION LOGIC (Sends data to Flask)
63
- async function makePrediction() {
64
- const submitBtn = document.querySelector('.submit-btn');
65
- const originalText = submitBtn.innerText;
66
-
67
- // Loading State
68
- submitBtn.innerText = "Analyzing...";
69
- submitBtn.disabled = true;
70
- submitBtn.style.opacity = "0.7";
 
 
 
71
 
72
- // Collect Data
73
- const data = {
74
- Pregnancies: Number(document.getElementById('Pregnancies').value),
75
- Glucose: Number(document.getElementById('Glucose').value),
76
- BloodPressure: Number(document.getElementById('BloodPressure').value),
77
- SkinThickness: Number(document.getElementById('SkinThickness').value),
78
- Insulin: Number(document.getElementById('Insulin').value),
79
- BMI: Number(document.getElementById('BMI').value),
80
- DiabetesPedigreeFunction: Number(document.getElementById('DiabetesPedigreeFunction').value),
81
- Age: Number(document.getElementById('Age').value)
82
- };
 
83
 
84
- try {
85
- // Send to Flask
86
- const response = await fetch('/predict', {
87
- method: 'POST',
88
- headers: { 'Content-Type': 'application/json' },
89
- body: JSON.stringify(data)
90
- });
 
 
 
 
 
91
 
92
- const result = await response.json();
 
 
 
 
 
 
 
 
 
 
 
 
 
93
 
94
- // Update UI
95
- const resultCard = document.getElementById('resultCard');
96
-
97
- const isHighRisk = result.prediction === 1;
98
- const colorClass = isHighRisk ? 'danger-color' : 'safe-color';
99
- const barColor = isHighRisk ? '#f87171' : '#34d399';
100
- const title = isHighRisk ? 'High Risk' : 'Low Risk';
101
- const message = isHighRisk
102
- ? 'The model suggests a high probability of diabetes.'
103
- : 'The model suggests a low probability of diabetes.';
 
 
104
 
105
- resultCard.innerHTML = `
106
- <div class="result-box">
107
- <p style="color: #9ca3af; font-size: 0.9rem; letter-spacing: 1px; margin-bottom:10px;">PREDICTION RESULT</p>
108
- <div class="risk-level ${colorClass}">${title}</div>
109
- <p style="margin-bottom: 20px; color: #e0e0e0;">${message}</p>
110
-
111
- <div style="text-align: left; width: 100%; background: #1c1c2e; padding: 15px; border-radius: 8px; border: 1px solid #2e2e42;">
112
- <div style="display:flex; justify-content:space-between; font-size: 0.9rem; color: #ccc; margin-bottom: 8px;">
113
- <span>Confidence Score</span>
114
- <span style="color: #fff; font-weight: bold;">${result.confidence.toFixed(1)}%</span>
115
- </div>
116
- <div class="confidence-bar-bg">
117
- <div class="confidence-bar-fill" style="width: ${result.confidence}%; background-color: ${barColor};"></div>
118
- </div>
119
  </div>
 
120
  </div>
121
- `;
122
 
123
- } catch (error) {
124
- console.error("Error:", error);
125
- alert("Server Error: Make sure the Flask app is running.");
126
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
127
 
128
- // Reset Button
129
- submitBtn.innerText = originalText;
130
- submitBtn.disabled = false;
131
- submitBtn.style.opacity = "1";
132
- }
 
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, maximum-scale=1.0, user-scalable=no">
6
+ <title>Diabetes Prediction Model</title>
7
+ <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
8
+ <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap" rel="stylesheet">
9
+ </head>
10
+ <body>
11
 
12
+ <div class="container">
13
+ <header>
14
+ <h1>🩺 BetaCell AI</h1>
15
+ <p>Diabetes Risk Prediction Model</p>
16
+ </header>
17
 
18
+ <div class="main-content">
19
+
20
+ <!-- The Form -->
21
+ <div class="form-section">
22
+ <form id="predictionForm" onsubmit="event.preventDefault(); makePrediction();">
23
+ <div class="form-grid">
24
 
25
+ <!-- 1. Pregnancies -->
26
+ <div class="input-group">
27
+ <label class="input-label">Pregnancies</label>
28
+ <div class="number-input-container">
29
+ <input type="number" id="Pregnancies" class="number-input" value="3" min="0" max="17" step="1" inputmode="numeric">
30
+ <div class="controls">
31
+ <button class="control-btn decrease-btn" type="button"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8h10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></button>
32
+ <div class="separator"></div>
33
+ <button class="control-btn increase-btn" type="button"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></button>
34
+ </div>
35
+ </div>
36
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
37
 
38
+ <!-- 2. Glucose -->
39
+ <div class="input-group">
40
+ <label class="input-label">Glucose (mg/dL)</label>
41
+ <div class="number-input-container">
42
+ <input type="number" id="Glucose" class="number-input" value="117" min="0" max="199" step="1" inputmode="numeric">
43
+ <div class="controls">
44
+ <button class="control-btn decrease-btn" type="button"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8h10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></button>
45
+ <div class="separator"></div>
46
+ <button class="control-btn increase-btn" type="button"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></button>
47
+ </div>
48
+ </div>
49
+ </div>
50
 
51
+ <!-- 3. Blood Pressure -->
52
+ <div class="input-group">
53
+ <label class="input-label">Blood Pressure (mm Hg)</label>
54
+ <div class="number-input-container">
55
+ <input type="number" id="BloodPressure" class="number-input" value="72" min="0" max="122" step="1" inputmode="numeric">
56
+ <div class="controls">
57
+ <button class="control-btn decrease-btn" type="button"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8h10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></button>
58
+ <div class="separator"></div>
59
+ <button class="control-btn increase-btn" type="button"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></button>
60
+ </div>
61
+ </div>
62
+ </div>
63
 
64
+ <!-- 4. Skin Thickness -->
65
+ <div class="input-group">
66
+ <label class="input-label">Skin Thickness (mm)</label>
67
+ <div class="number-input-container">
68
+ <input type="number" id="SkinThickness" class="number-input" value="23" min="0" max="99" step="1" inputmode="numeric">
69
+ <div class="controls">
70
+ <button class="control-btn decrease-btn" type="button"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8h10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></button>
71
+ <div class="separator"></div>
72
+ <button class="control-btn increase-btn" type="button"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></button>
73
+ </div>
74
+ </div>
75
+ </div>
76
 
77
+ <!-- 5. Insulin -->
78
+ <div class="input-group">
79
+ <label class="input-label">Insulin (mu U/ml)</label>
80
+ <div class="number-input-container">
81
+ <input type="number" id="Insulin" class="number-input" value="30" min="0" max="846" step="1" inputmode="numeric">
82
+ <div class="controls">
83
+ <button class="control-btn decrease-btn" type="button"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8h10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></button>
84
+ <div class="separator"></div>
85
+ <button class="control-btn increase-btn" type="button"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></button>
86
+ </div>
87
+ </div>
88
+ </div>
89
 
90
+ <!-- 6. BMI -->
91
+ <div class="input-group">
92
+ <label class="input-label">
93
+ <a href="https://www.calculator.net/bmi-calculator.html" target="_blank" class="external-link">BMI</a>
94
+ </label>
95
+ <div class="number-input-container">
96
+ <input type="number" id="BMI" class="number-input" value="32.0" min="0" max="67.1" step="0.1" inputmode="decimal">
97
+ <div class="controls">
98
+ <button class="control-btn decrease-btn" type="button"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8h10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></button>
99
+ <div class="separator"></div>
100
+ <button class="control-btn increase-btn" type="button"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></button>
101
+ </div>
102
+ </div>
103
+ </div>
104
 
105
+ <!-- 7. Diabetes Pedigree Function -->
106
+ <div class="input-group">
107
+ <label class="input-label">Diabetes Pedigree</label>
108
+ <div class="number-input-container">
109
+ <input type="number" id="DiabetesPedigreeFunction" class="number-input" value="0.372" min="0.078" max="2.42" step="0.001" inputmode="decimal">
110
+ <div class="controls">
111
+ <button class="control-btn decrease-btn" type="button"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8h10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></button>
112
+ <div class="separator"></div>
113
+ <button class="control-btn increase-btn" type="button"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></button>
114
+ </div>
115
+ </div>
116
+ </div>
117
 
118
+ <!-- 8. Age -->
119
+ <div class="input-group">
120
+ <label class="input-label">Age (Years)</label>
121
+ <div class="number-input-container">
122
+ <input type="number" id="Age" class="number-input" value="29" min="21" max="81" step="1" inputmode="numeric">
123
+ <div class="controls">
124
+ <button class="control-btn decrease-btn" type="button"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8h10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></button>
125
+ <div class="separator"></div>
126
+ <button class="control-btn increase-btn" type="button"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></button>
 
 
 
 
 
127
  </div>
128
+ </div>
129
  </div>
 
130
 
131
+ </div>
132
+
133
+ <button type="submit" class="submit-btn">Run Prediction</button>
134
+ </form>
135
+ </div>
136
+
137
+ <!-- Results -->
138
+ <div class="result-section" id="resultCard">
139
+ <div class="placeholder-text">
140
+ <div style="font-size: 3rem; margin-bottom: 10px;">⚡</div>
141
+ <h3>Ready to Predict</h3>
142
+ <p>Enter patient vitals and click Run Prediction.</p>
143
+ </div>
144
+ </div>
145
+
146
+ </div>
147
+ </div>
148
 
149
+ <script src="{{ url_for('static', filename='script.js') }}"></script>
150
+ </body>
151
+ </html>