-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
366 lines (334 loc) · 17.8 KB
/
index.html
File metadata and controls
366 lines (334 loc) · 17.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title> MASP </title>
<link rel="icon" type="image/x-icon" href="assets/favicon.png" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
</head>
<body id="page-top">
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
<div class="container px-4">
<a class="navbar-brand" href="#page-top">M.A.S.P.</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive"
aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><span
class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#about">About</a></li>
<li class="nav-item"><a class="nav-link" href="#exploration"> Exploration</a>
</li>
<li class="nav-item"><a class="nav-link" href="#MLModels">
ML Models</a></li>
<li class="nav-item"><a class="nav-link" href="#conclusions">Conclusions</a></li>
<li class="nav-item"><a class="nav-link" href="#meettheteam">Meet the Team</a></li>
</ul>
</div>
</div>
</nav>
<!-- Header-->
<section class="bg-image">
<!--<header class="bg-primary bg-gradient text-white">-->
<div class="container px-4 text-center">
<h1 class="fw-bolder">
<font color="white">Welcome to M.A.S.P.<br> (Morbus Alzheimerii Sistēma Prognōstica)
</h1>
<br>
<p class="lead">A state-of-the-art prediction system that determines if a person has Alzheimer's disease</p>
</font>
<br>
<a class="btn btn-lg btn-light" href="#about">View Now!</a>
</div>
</header>
</body>
</html>
</section>
<!-- Why predict Alzheimer's disease? section-->
<section class="bg-green" id="about">
<div class="container px-4">
<div class="row gx-4 justify-content-center">
<div class="col-lg-8">
<h5>Date Published: June 30, 2023</h5>
<br>
<h2>Why Predict Alzheimer's Disease?</h2>
<p class="lead">This is a great place to initially find out about your situation relating to Alzheimer's
disease. This system will use an array of highly precise AI models to best possibly answer whether or not you
have Alzheimer's. The system was trained on <a
href="https://www.kaggle.com/datasets/brsdincer/alzheimer-features?select=alzheimer.csv"> this Kaggle
dataset.</a> The system takes inputs about your demographics and brain features (age, estimated total intracranial volume, atlas scaling factor, etc.) and outputs that you
either have Alzheimer's or do not. </p>
</div>
<div class="col-lg-8">
<p class="lead"> <br>Alzheimer's disease is a progressive disease in which brain cell connections and the cells
themselves degenerate and die, eventually destroying memory and other important mental functions. Memory loss
and confusion are the main symptoms. No cure exists, but medications and management strategies may temporarily
improve symptoms. <u>When Alzheimer's is diagnosed early on, treatments are more likely to be effective! </u>
<br><br>Some notable statistics about
Alzheimer's disease:
</p>
<ul>
<li>More than 6 million Americans of all ages have Alzheimer's. </li>
<li>About 1 in 9 people age 65 and older has Alzheimer's.</li>
<li>Almost 2 out of 3 Americans with Alzheimer's are women.</li>
<li>Deaths from Alzheimer’s have more than doubled between 2000 and 2019.</li>
<li>Source: Alzheimer's Association</li>
</ul>
<h4> Resources for Additional Information:</h4>
<ul>
<li><a
href="https://www.mayoclinic.org/diseases-conditions/alzheimers-disease/symptoms-causes/syc-20350447?utm_source=Google&utm_medium=abstract&utm_content=Alzheimers-disease&utm_campaign=Knowledge-panel">Mayo
Clinic</a></li>
<li><a href="https://www.youtube.com/watch?v=wfLP8fFrOp0">YouTube Video by Alzheimer's Society</a></li>
</ul>
<center><img class='radius'
src="https://www.alzheimersla.org/wp-content/uploads/2021/04/Understanding-Memory-Loss-Alzheimers-disease-the-basics.jpg.png"
alt="Brain" height=350 width=380></center>
</div>
</div>
</div>
</section>
<!-- Exploratory Data Analysis & Visualizations section-->
<section class="bg-pink" id="exploration">
<div class="container px-4">
<div class="row gx-4 justify-content-center">
<div class="col-lg-8">
<h2>Exploration</h2>
<br>
<div>
<h3>Pie Chart</h3>
<h5 style= "font-weight:normal;">This pie chart supports the fact that there are more nondemented persons found in the dataset compared to demented.</h5>
<p style= "text-align:center;">
<iframe width="600" height="600" title="Pie Chart Graph"
src="assets/images/pie_groups.html"></iframe>
</p>
</div>
<br>
<div>
<h3>MMSE vs. Age Scatter Plot</h3>
<h5 style= "font-weight:normal;">This scatter plot shows how people within the MMSE range of 25 and below have a higher chance to develop Alzheimer's whereas patients above 25 are more likely to be Nondemented. </h5>
<p style = "text-align:center;">
<iframe scrolling="no" width="600" height="600" title="Scatter Plot Graph"
src="assets/images/MMSE_Age.html"></iframe>
</p>
</div
<br><br>
<div>
<h3>Age and Group Histogram</h3>
<h5 style= "font-weight:normal;">This histogram shows that most Alzheimer's disease cases appear in people aged 65 years old through 85 years old.</h5>
<p style= "text-align:center;">
<iframe scrolling="no" width="600" height="600" src="assets/images/hist.html"></iframe>
</p>
</div>
<br>
<div>
<h3>3D Scatter Plot</h3>
<h5 style= "font-weight:normal;">This 3D scatter plot shows that, as eTIV goes up, ASF goes down and vice versa. Also, nWBV ranges from
approximately 0.65 to 0.83.</h5>
<p style= "text-align:center;">
<iframe scrolling="no" width="600" height="600" src="assets/images/scatter3D.html"></iframe>
</p>
</div>
<br>
<div>
<h3>Violin Graph</h3>
<h5 style= "font-weight:normal;">This violin graph shows that any person that has a MMSE value that is lower than 25 has Alzheimer's
disease. In addition, any person that has a CDR value of 1 or more has Alzheimer's disease, but they can
have a lower value and still be diagnosed with the disease. On the other hand, any person that has a CDR
score of 0 does not have Alzheimer's disease. On the other hand, a person can have a CDR value of 0.5 and
not be diagnosed with the disease.</h5>
<p style= "text-align:center;">
<iframe scrolling="no" width="800" height="600" src="assets/images/violin.html"></iframe>
</p>
</div>
<br>
<div>
<h3>Heatmap</h3>
<h5 style= "font-weight:normal;">This heatmap analyzes the mathematical relationships between all the variables used by the ML models to
predict whether a patient has Alzheimer's disease or not. The closer a number is to 1, the more closely
related the two variables that made that number are. On the other hand, the opposite effect happens the
closer a number is to -1. The audience should pay special attention to the 'Outcome' variable, which is the
one that says whether a patient has Alzheimer's disease or not. Clinical dementia rating (CDR) and mini
mental state examination (MMSE) seem to be the most influential features on whether or not a person has
Alzheimer's.</h5>
<p style= "text-align:center;">
<iframe scrolling="no" width="800" height="600" src="assets/images/heatmap.html"></iframe>
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ML Models section-->
<section class="bg-blue" id="MLModels">
<div class="container px-4">
<div class="row gx-4 justify-content-center">
<div class="col-lg-8">
<h2> Machine Learning Models</h2>
<p class="lead">We used a variety of different machine learning models with various results including: <br>
<ul>
<u><h5>K-Nearest Neighbors (KNN):</h5></u>
<h6>How It Works</h6>
<p> KNN works by finding the distances between a new data point and old data
points. Depending on what the closest old data points are classified as, the new point will get classified
accordingly. The amount of old data points it will look at depends on the specified number K. This model had a
64% accuracy. </p>
<img class='radius' src="https://miro.medium.com/v2/resize:fit:1151/0*ItVKiyx2F3ZU8zV5" alt="KNN" width="60%">
<div class="container">
<br>
<h6>KNN Results</h6>
<img width="60%" height="50%" src="assets/images/KNN_confusion.jpg">
</div>
<br><br>
<u><h5>Support Vector Classifiers (SVC):</h5></u>
<h6>How It Works</h6>
<p>SVC maps the data to a higher dimensional space and then finds
the optimal hyperplane that has the highest margins between the data points and the hyperplane. This model
had a 98% accuracy.</p>
<img class = "radius" src="https://editor.analyticsvidhya.com/uploads/72598SVM%20(1).png" alt="SVC" width = "50%">
<br><br>
<div class="container">
<h6>SVC Results</h6>
<img width="60%" height="50%" src="assets/images/confusionMatrix.jpg">
</div>
<br><br>
<u><h5>Random Forest Classifier (RFC):</h5></u>
<h6>How It Works</h6>
<p>RFC creates a randomly generated number of datasets that vary in size. It creates a decision tree from each new dataset. It then collects votes from each decision tree for
which category the new data point should belong in. Whatever category has the most votes, the data point
gets placed in that category. This model had a 100% accuracy. </p>
<img class = 'radius' src="https://www.freecodecamp.org/news/content/images/2020/08/how-random-forest-classifier-work.PNG" alt = "RFC" width = 60%>
<br><br>
<div class="container">
<h6>RFC Results</h6>
<img width="60%" height="50%" src="assets/images/RFC_confusion.png">
</div>
<br><br>
<u><h5>Logistic Regression Classifier (LRC):</h5></u>
<h6>How It Works</h6>
<p>LRC makes predictions based on the Sigmoid function which is a
squiggles-like line. Despite the fact that it returns the probabilities, the final output would be a label
assigned by comparing the likelihood with a threshold, which makes it eventually a classification algorithm.
This model had a 98% accuracy.</p>
<img width="45%" height="35%" src="https://sparkbyexamples.com/wp-content/uploads/2023/03/Screenshot-2023-03-11-at-4.19.28-PM.png">
<div class="container">
<br>
<h6>LRC Results</h6>
<img width="60%" height="50%" src="assets/images/confusionMatrix.jpg">
</div>
<br><br>
</ul>
</p>
</div>
</div>
</div>
</section>
<!-- Conclusions section-->
<section class="bg-coral" id="conclusions">
<div class="container px-4">
<div class="row gx-4 justify-content-center">
<div class="col-lg-8">
<h2>Conclusions</h2>
<p class="lead">We were not expecting our models to be so accurate when predicting whether or not a person had
Alzheimer's based on our training data. We were pleasantly surprised to see such high accuracies, and further
hyperparameter tuning for these models ensured that our models were more generally applicable to other data.
RFC ended up being our best machine learning model for this classification system, so we ended up using that model for the backend of our Alzheimer's Prediction Form. However, the fact that SVC and
LRC were nearly just as accurate was interesting. Perhaps because our dataset was small (only 317 instances to
train and test on), these models ended up being highly accurate. Demographic and brain
features (such as estimated total intracranial volume and normalize whole brain volume) prove to be highly
effective in determining whether people have Alzheimer's disease. <br><br> Such AI detection systems are easy
to use and can help patients seek treatments early -- before Alzheimer's disease causes serious harm.
</p>
<div class="container">
<h3>Conclusion Scores</h3>
<img width="90%" height="40%" title="Correlation Table of Features"
src="assets/images/bigger_conclusion_scores.jpg">
</div>
</div>
</div>
</div>
</section>
<!-- Meet the team section-->
<section class="bg-white" id="meettheteam">
<div class="container px-4">
<div class="row gx-4 justify-content-center">
<div class="col-lg-8">
<h2>Meet the Team!</h2>
<p class="lead">Each M.A.S.P. team member possesses a diverse skill set that actively contributed to every role,
which included being a product manager, data scientist, machine learning specialist, and web designer.
Everyone had shared responsibilities, so there are no specified roles. The team ultimately used effective
collaboration and communication skills to reach a final product that satisfies them all.<br>
<br>
</div>
<div class="row gx-4 justify-content-center">
<div class="card m-2" style="width: 18rem; border-color: darkgray; border-width:3px; padding-top:12px">
<img class="card-img-top" src="assets/images/Chetan K.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Chetan Khairnar</h5>
<p class="card-text">A 22-year-old Master Student from Texas, currently pursing masters in Computer Science
with aim to make development in field of Data Science</p>
</div>
</div>
<div class="card m-2" style="width: 18rem; border-color: mediumpurple; border-width: 3px; padding-top:12px">
<img class="card-img-top" src="assets/images/Jacob H.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Jacob Hanson</h5>
<p class="card-text">A 17-year-old high school student from Wisconsin, is currently dedicated to his studies
with the aim of pursuing a future career as an Information Security and Data Analytics professional</p>
</div>
</div>
<div class="card m-2" style="width: 18rem; border-color: green; border-width: 3px; padding-top:12px">
<img class="card-img-top" src="assets/images/Isaiah J.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Isaiah Johnson</h5>
<p class="card-text">A 15-year-old high school student from Wisconsin whose main interests reside in
computer science, including data analytics and game design</p>
</div>
</div>
</div>
<div class="card m-2" style="width: 18rem; border-color:coral; border-width:3px; padding-top:12px">
<img class="card-img-top" src="assets/images/Ashni K.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Ashni Kumar</h5>
<p class="card-text">A 17-year-old high school student from Pennsylvania who is interested in exploring computer science fields
and their applications</p>
</div>
</div>
<div class="card m-2" style="width: 18rem; border-width:3px; border-color: deepskyblue; padding-top:12px">
<img class="card-img-top" src="assets/images/Heath F.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Heath Fry</h5>
<p class="card-text">A 17-year-old high school student from North Carolina, who is diligently pursuing his
studies with the aim of securing a career in the field of data science</p>
</div>
</div>
<div class="card m-2" style="width: 18rem; border-width:3px; border-color: red; padding-top:12px">
<img class="card-img-top" src="assets/images/Fran Pic.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Francisco Apraiz</h5>
<p class="card-text">A 16-year-old Argentinian high school student now living in Miami, Florida. Francisco aspires to study computer science and finance and loves to play tennis</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer-->
<footer class="py-5 bg-dark bg-white">
<div class="container px-4">
<p class="m-0 text-center">Contact: theofficialmasp@gmail.com</p>
<br>
<p class="m-0 text-center">Copyright © MASP 2023</p>
</div>
</footer>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
</body>
</html>