Hugging Face's logo

Spaces:
SURESHBEEKHANI
/
Heart_Attack_Prediction
Build error

App Files Community
SURESHBEEKHANI commited on
Commit
f4f0f4e
·
verified ·
1 Parent(s): 424bbc5

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +204 -181
templates/index.html CHANGED
@@ -1,181 +1,204 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta charset="UTF-8">
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <meta name="description" content="Heart Attack Prediction Tool - Predict your risk of heart attack using medical data.">
8
- <title>Heart Attack Prediction</title>
9
- <link rel="icon" href="static/img/ht.jpg" type="image/x-icon">
10
-
11
- <!-- Google Fonts -->
12
- <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
13
-
14
- <!-- Custom Stylesheet -->
15
- <link rel="stylesheet" href="static/styles.css">
16
-
17
- <!-- Bootstrap CSS -->
18
- <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
19
- </head>
20
-
21
- <body>
22
- <header class="bg-primary text-white text-center py-3">
23
- <img src="static/img/ht.png" alt="Heart Health Logo" class="logo" style="max-width: 100px;">
24
- <h1>Heart Attack Prediction</h1>
25
- <p>Predict heart attack risk using an AI application Provide Details of Patient.</p>
26
- </header>
27
-
28
- <main>
29
- <div class="container">
30
- <form action="/predict" method="post" class="needs-validation" novalidate>
31
- <!-- Sex Selection -->
32
- <div class="form-group">
33
- <label for="sex">Sex:</label>
34
- <select id="sex" name="sex" class="form-control" required aria-label="Select your sex">
35
- <option value="" disabled selected>Select your sex</option>
36
- <option value="M">Male</option>
37
- <option value="F">Female</option>
38
- </select>
39
- <div class="invalid-feedback">Please select your sex.</div>
40
- </div>
41
-
42
- <!-- Chest Pain Type -->
43
- <div class="form-group">
44
- <label for="chestPainType">Chest Pain Type:</label>
45
- <select id="chestPainType" name="chestPainType" class="form-control" required aria-label="Select chest pain type">
46
- <option value="" disabled selected>Select chest pain type</option>
47
- <option value="ATA">ATA</option>
48
- <option value="NAP">NAP</option>
49
- <option value="ASY">ASY</option>
50
- <option value="TA">TA</option>
51
- </select>
52
- <div class="invalid-feedback">Please select chest pain type.</div>
53
- </div>
54
-
55
- <!-- Resting ECG -->
56
- <div class="form-group">
57
- <label for="restingECG">Resting ECG:</label>
58
- <select id="restingECG" name="restingECG" class="form-control" required aria-label="Select resting ECG result">
59
- <option value="" disabled selected>Select resting ECG result</option>
60
- <option value="Normal">Normal</option>
61
- <option value="ST">ST</option>
62
- <option value="LVH">LVH</option>
63
- </select>
64
- <div class="invalid-feedback">Please select resting ECG.</div>
65
- </div>
66
-
67
- <!-- Exercise Angina -->
68
- <div class="form-group">
69
- <label for="exerciseAngina">Exercise Angina:</label>
70
- <select id="exerciseAngina" name="exerciseAngina" class="form-control" required aria-label="Select exercise angina">
71
- <option value="" disabled selected>Select exercise angina</option>
72
- <option value="N">No</option>
73
- <option value="Y">Yes</option>
74
- </select>
75
- <div class="invalid-feedback">Please select exercise angina.</div>
76
- </div>
77
-
78
- <!-- ST Slope -->
79
- <div class="form-group">
80
- <label for="stSlope">ST Slope:</label>
81
- <select id="stSlope" name="stSlope" class="form-control" required aria-label="Select ST slope">
82
- <option value="" disabled selected>Select ST slope</option>
83
- <option value="Up">Up</option>
84
- <option value="Flat">Flat</option>
85
- <option value="Down">Down</option>
86
- </select>
87
- <div class="invalid-feedback">Please select ST slope.</div>
88
- </div>
89
-
90
- <!-- Age -->
91
- <div class="form-group">
92
- <label for="age">Age:</label>
93
- <input type="number" id="age" name="age" class="form-control" required min="0" placeholder="Enter your age" aria-label="Enter your age">
94
- <div class="invalid-feedback">Please enter a valid age.</div>
95
- </div>
96
-
97
- <!-- Resting Blood Pressure -->
98
- <div class="form-group">
99
- <label for="restingBP">Resting Blood Pressure (mm Hg):</label>
100
- <input type="number" id="restingBP" name="restingBP" class="form-control" required min="0" placeholder="Enter resting blood pressure" aria-label="Enter resting blood pressure">
101
- <div class="invalid-feedback">Please enter resting blood pressure.</div>
102
- </div>
103
-
104
- <!-- Cholesterol -->
105
- <div class="form-group">
106
- <label for="cholesterol">Cholesterol (mg/dl):</label>
107
- <input type="number" id="cholesterol" name="cholesterol" class="form-control" required min="0" placeholder="Enter cholesterol level" aria-label="Enter cholesterol level">
108
- <div class="invalid-feedback">Please enter cholesterol level.</div>
109
- </div>
110
-
111
- <!-- Fasting Blood Sugar -->
112
- <div class="form-group">
113
- <label for="fastingBS">Fasting Blood Sugar (mg/dl):</label>
114
- <input type="number" id="fastingBS" name="fastingBS" class="form-control" required min="0" placeholder="Enter fasting blood sugar" aria-label="Enter fasting blood sugar">
115
- <div class="invalid-feedback">Please enter fasting blood sugar.</div>
116
- </div>
117
-
118
- <!-- Max Heart Rate -->
119
- <div class="form-group">
120
- <label for="maxHR">Max Heart Rate:</label>
121
- <input type="number" id="maxHR" name="maxHR" class="form-control" required min="0" placeholder="Enter max heart rate" aria-label="Enter max heart rate">
122
- <div class="invalid-feedback">Please enter max heart rate.</div>
123
- </div>
124
-
125
- <!-- Oldpeak -->
126
- <div class="form-group">
127
- <label for="oldpeak">Oldpeak:</label>
128
- <input type="number" id="oldpeak" name="oldpeak" class="form-control" required step="0.1" min="0" placeholder="Enter oldpeak value" aria-label="Enter oldpeak value">
129
- <div class="invalid-feedback">Please enter a valid oldpeak value.</div>
130
- </div>
131
-
132
- <!-- Submit Button -->
133
- <div class="text-center">
134
- <input class="btn btn-primary btn-lg" type="submit" value="Predict Risk of Heart Attack" />
135
- </div>
136
- </form>
137
-
138
- <!-- Display prediction result -->
139
- {% if results %}
140
- <div class="alert alert-info mt-4 text-center prediction-result">
141
- <h2 class="result-title">The prediction is:</h2>
142
- <p class="result-value">{{ results }}</p>
143
- </div>
144
- {% endif %}
145
- </div>
146
- </main>
147
-
148
- <footer class="text-center py-3">
149
- <p>&copy; <span id="year"></span> Heart Health Initiative</p>
150
- </footer>
151
-
152
- <!-- Include Bootstrap JS for form validation -->
153
- <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
154
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>
155
-
156
- <!-- Dynamic Year Update -->
157
- <script>
158
- document.getElementById("year").textContent = new Date().getFullYear();
159
- </script>
160
-
161
- <!-- Bootstrap Form Validation -->
162
- <script>
163
- (function() {
164
- 'use strict';
165
- window.addEventListener('load', function() {
166
- var forms = document.getElementsByClassName('needs-validation');
167
- var validation = Array.prototype.filter.call(forms, function(form) {
168
- form.addEventListener('submit', function(event) {
169
- if (form.checkValidity() === false) {
170
- event.preventDefault();
171
- event.stopPropagation();
172
- }
173
- form.classList.add('was-validated');
174
- }, false);
175
- });
176
- }, false);
177
- })();
178
- </script>
179
- </body>
180
-
181
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <meta name="description" content="Heart Attack Prediction Tool - Predict your risk of heart attack using medical data.">
8
+ <title>Heart Attack Prediction</title>
9
+ <link rel="icon" href="static/img/ht.jpg" type="image/x-icon">
10
+
11
+ <!-- Google Fonts -->
12
+ <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
13
+
14
+ <!-- Custom Stylesheet -->
15
+ <link rel="stylesheet" href="static/styles.css">
16
+
17
+ <!-- Bootstrap CSS -->
18
+ <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
19
+ </head>
20
+
21
+ <body>
22
+
23
+ <div class="app-window bg-light p-4 shadow rounded">
24
+ <section class="bg-primary text-white p-3 text-center w-100 mb-4">
25
+ <div class="container">
26
+ <img src="static/img/ht.png" alt="Heart Health Logo" class="logo mb-2">
27
+ <h1 class="display-4">Heart Attack Prediction</h1>
28
+ </div>
29
+ </section>
30
+
31
+ <h2 class="text-center mb-4">Patient Details</h2>
32
+ <form action="/predict" method="post" class="needs-validation" novalidate>
33
+ <!-- Sex Selection -->
34
+ <div class="form-group row">
35
+ <label for="sex" class="col-sm-4 col-form-label">Sex:</label>
36
+ <div class="col-sm-8">
37
+ <select id="sex" name="sex" class="form-control" required>
38
+ <option value="" disabled selected>Select your sex</option>
39
+ <option value="M">Male</option>
40
+ <option value="F">Female</option>
41
+ </select>
42
+ <div class="invalid-feedback">Please select your sex.</div>
43
+ </div>
44
+ </div>
45
+
46
+ <!-- Chest Pain Type -->
47
+ <div class="form-group row">
48
+ <label for="chestPainType" class="col-sm-4 col-form-label">Chest Pain Type:</label>
49
+ <div class="col-sm-8">
50
+ <select id="chestPainType" name="chestPainType" class="form-control" required>
51
+ <option value="" disabled selected>Select chest pain type</option>
52
+ <option value="ATA">ATA</option>
53
+ <option value="NAP">NAP</option>
54
+ <option value="ASY">ASY</option>
55
+ <option value="TA">TA</option>
56
+ </select>
57
+ <div class="invalid-feedback">Please select chest pain type.</div>
58
+ </div>
59
+ </div>
60
+
61
+ <!-- Resting ECG -->
62
+ <div class="form-group row">
63
+ <label for="restingECG" class="col-sm-4 col-form-label">Resting ECG:</label>
64
+ <div class="col-sm-8">
65
+ <select id="restingECG" name="restingECG" class="form-control" required>
66
+ <option value="" disabled selected>Select resting ECG result</option>
67
+ <option value="Normal">Normal</option>
68
+ <option value="ST">ST</option>
69
+ <option value="LVH">LVH</option>
70
+ </select>
71
+ <div class="invalid-feedback">Please select resting ECG.</div>
72
+ </div>
73
+ </div>
74
+
75
+ <!-- Exercise Angina -->
76
+ <div class="form-group row">
77
+ <label for="exerciseAngina" class="col-sm-4 col-form-label">Exercise Angina:</label>
78
+ <div class="col-sm-8">
79
+ <select id="exerciseAngina" name="exerciseAngina" class="form-control" required>
80
+ <option value="" disabled selected>Select exercise angina</option>
81
+ <option value="N">No</option>
82
+ <option value="Y">Yes</option>
83
+ </select>
84
+ <div class="invalid-feedback">Please select exercise angina.</div>
85
+ </div>
86
+ </div>
87
+
88
+ <!-- ST Slope -->
89
+ <div class="form-group row">
90
+ <label for="stSlope" class="col-sm-4 col-form-label">ST Slope:</label>
91
+ <div class="col-sm-8">
92
+ <select id="stSlope" name="stSlope" class="form-control" required>
93
+ <option value="" disabled selected>Select ST slope</option>
94
+ <option value="Up">Up</option>
95
+ <option value="Flat">Flat</option>
96
+ <option value="Down">Down</option>
97
+ </select>
98
+ <div class="invalid-feedback">Please select ST slope.</div>
99
+ </div>
100
+ </div>
101
+
102
+ <!-- Age -->
103
+ <div class="form-group row">
104
+ <label for="age" class="col-sm-4 col-form-label">Age:</label>
105
+ <div class="col-sm-8">
106
+ <input type="number" id="age" name="age" class="form-control" required min="0" placeholder="Enter your age">
107
+ <div class="invalid-feedback">Please enter a valid age.</div>
108
+ </div>
109
+ </div>
110
+
111
+ <!-- Resting Blood Pressure -->
112
+ <div class="form-group row">
113
+ <label for="restingBP" class="col-sm-4 col-form-label">Resting Blood Pressure (mm Hg):</label>
114
+ <div class="col-sm-8">
115
+ <input type="number" id="restingBP" name="restingBP" class="form-control" required min="0" placeholder="Enter resting blood pressure">
116
+ <div class="invalid-feedback">Please enter resting blood pressure.</div>
117
+ </div>
118
+ </div>
119
+
120
+ <!-- Cholesterol -->
121
+ <div class="form-group row">
122
+ <label for="cholesterol" class="col-sm-4 col-form-label">Cholesterol (mg/dl):</label>
123
+ <div class="col-sm-8">
124
+ <input type="number" id="cholesterol" name="cholesterol" class="form-control" required min="0" placeholder="Enter cholesterol level">
125
+ <div class="invalid-feedback">Please enter cholesterol level.</div>
126
+ </div>
127
+ </div>
128
+
129
+ <!-- Fasting Blood Sugar -->
130
+ <div class="form-group row">
131
+ <label for="fastingBS" class="col-sm-4 col-form-label">Fasting Blood Sugar (mg/dl):</label>
132
+ <div class="col-sm-8">
133
+ <input type="number" id="fastingBS" name="fastingBS" class="form-control" required min="0" placeholder="Enter fasting blood sugar">
134
+ <div class="invalid-feedback">Please enter fasting blood sugar.</div>
135
+ </div>
136
+ </div>
137
+
138
+ <!-- Max Heart Rate -->
139
+ <div class="form-group row">
140
+ <label for="maxHR" class="col-sm-4 col-form-label">Max Heart Rate:</label>
141
+ <div class="col-sm-8">
142
+ <input type="number" id="maxHR" name="maxHR" class="form-control" required min="0" placeholder="Enter max heart rate">
143
+ <div class="invalid-feedback">Please enter max heart rate.</div>
144
+ </div>
145
+ </div>
146
+
147
+ <!-- Oldpeak -->
148
+ <div class="form-group row">
149
+ <label for="oldpeak" class="col-sm-4 col-form-label">Oldpeak:</label>
150
+ <div class="col-sm-8">
151
+ <input type="number" id="oldpeak" name="oldpeak" class="form-control" required step="0.1" min="0" placeholder="Enter oldpeak value">
152
+ <div class="invalid-feedback">Please enter a valid oldpeak value.</div>
153
+ </div>
154
+ </div>
155
+
156
+ <!-- Submit Button -->
157
+ <div class="text-center">
158
+ <input class="btn btn-primary btn-lg mt-3" type="submit" value="Predict Risk of Heart Attack">
159
+ </div>
160
+ </form>
161
+
162
+ <!-- Display prediction result -->
163
+ {% if results %}
164
+ <div class="alert alert-info mt-4 text-center prediction-result">
165
+ <h2 class="result-title">The prediction is:</h2>
166
+ <p class="result-value">{{ results }}</p>
167
+ </div>
168
+ {% endif %}
169
+ </div>
170
+ </main>
171
+
172
+ <footer class="text-center py-3 bg-primary text-white">
173
+ <p>&copy; <span id="year"></span> Heart Health Initiative</p>
174
+ </footer>
175
+ <!-- Include Bootstrap JS for form validation -->
176
+ <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
177
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>
178
+
179
+ <!-- Dynamic Year Update -->
180
+ <script>
181
+ document.getElementById("year").textContent = new Date().getFullYear();
182
+ </script>
183
+
184
+ <!-- Bootstrap Form Validation -->
185
+ <script>
186
+ (function() {
187
+ 'use strict';
188
+ window.addEventListener('load', function() {
189
+ var forms = document.getElementsByClassName('needs-validation');
190
+ var validation = Array.prototype.filter.call(forms, function(form) {
191
+ form.addEventListener('submit', function(event) {
192
+ if (form.checkValidity() === false) {
193
+ event.preventDefault();
194
+ event.stopPropagation();
195
+ }
196
+ form.classList.add('was-validated');
197
+ }, false);
198
+ });
199
+ }, false);
200
+ })();
201
+ </script>
202
+ </body>
203
+
204
+ </html>