-
Notifications
You must be signed in to change notification settings - Fork 0
/
blog.html
147 lines (134 loc) · 5.6 KB
/
blog.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Building a Symptom-Based Disease Diagnosis Web App</title>
<!-- Link to Font Awesome for icons -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
</head>
<body>
<style>
/* General Styles */
:root {
--primary-green: #4caf50; /* Vibrant Green for headers */
--soft-green: #7fbf7f; /* Lighter Green for backgrounds */
--dark-green: #2d6a3b; /* Darker Green for footers and text */
--light-beige: #e8f0e1; /* Soft Beige background for sections */
--white: #ffffff; /* White background for text */
}
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
color: var(--dark-green);
background: var(--light-beige);
}
/* Header */
.eco-header {
background: var(--primary-green);
color: var(--white);
text-align: center;
padding: 30px 15px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.eco-header h1 {
font-size: 2.8rem;
margin: 0;
font-family: 'Georgia', serif;
}
.eco-header p {
font-size: 1.2rem;
margin-top: 10px;
}
/* Sections */
.eco-section {
margin: 20px auto;
padding: 20px;
max-width: 800px;
background: var(--white);
border-radius: 15px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
border-left: 5px solid var(--primary-green);
transform: translateY(50px);
opacity: 0;
animation: slideIn 1.5s forwards;
}
ul {
list-style: none;
padding-left: 0;
}
ul li {
margin: 10px 0;
font-size: 1rem;
}
ul li i {
margin-right: 10px;
color: var(--primary-green);
}
/* Animations */
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animated-section:nth-child(odd) {
animation-delay: 0.2s;
}
.animated-section:nth-child(even) {
animation-delay: 0.4s;
}
/* Footer */
.eco-footer {
background: var(--dark-green);
color: var(--white);
text-align: center;
padding: 15px 0;
margin-top: 30px;
font-size: 0.9rem;
}
</style>
<header class="eco-header">
<h1><i class="fas fa-heartbeat"></i> Building a Symptom-Based Disease Diagnosis Web App</h1>
<p>Leveraging Flask and Machine Learning to Improve Healthcare Accessibility</p>
</header>
<main>
<section id="problem" class="eco-section animated-section">
<h2><i class="fas fa-exclamation-circle"></i> The Problem</h2>
<p>The project started with the recognition of a common issue: people often experience symptoms and want quick answers about their health concerns. Differentiating between diseases, especially when symptoms overlap, can be a challenge. Our goal was to provide a quick and accurate solution for users to input their symptoms and receive potential diagnoses.</p>
</section>
<section id="solution" class="eco-section animated-section">
<h2><i class="fas fa-lightbulb"></i> The Solution</h2>
<p>We developed a web app that allows users to enter symptoms they are experiencing. The app then uses a pre-trained Decision Tree Classifier model to predict the most likely disease based on the provided symptoms. Here's how it works:</p>
<ul>
<li><strong>Symptom Input:</strong> Users input their symptoms through an intuitive interface that supports a wide range of symptoms.</li>
<li><strong>Machine Learning Model:</strong> We trained a Decision Tree Classifier on a dataset of symptoms and diseases to make accurate predictions.</li>
<li><strong>Prediction:</strong> The model provides users with predictions about the most likely disease based on the entered symptoms.</li>
<li><strong>Additional Information:</strong> The app provides detailed descriptions of the predicted disease, along with precautions, medications, dietary advice, and workout tips.</li>
</ul>
</section>
<section id="features" class="eco-section animated-section">
<h2><i class="fas fa-cogs"></i> Key Features</h2>
<ul>
<li><strong>User-Friendly Interface:</strong> The app boasts an intuitive design that allows users to easily input their symptoms.</li>
<li><strong>Accurate Predictions:</strong> The machine learning model offers precise predictions based on the symptoms entered by users.</li>
<li><strong>Comprehensive Information:</strong> The app not only predicts the disease but also provides additional resources like disease descriptions, medication recommendations, and wellness tips.</li>
<li><strong>Educational Content:</strong> The app includes informative blog posts to further educate users on various health topics.</li>
</ul>
</section>
<section id="conclusion" class="eco-section animated-section">
<h2><i class="fas fa-thumbs-up"></i> Conclusion</h2>
<p>Our Symptom-Based Disease Diagnosis Web App blends machine learning and healthcare to provide users with quick and reliable insights into their health. By empowering users with accurate diagnoses and comprehensive information, we aim to make healthcare more accessible and user-centric. In an era of increasing reliance on remote healthcare solutions, this project represents a significant step forward in improving health awareness and well-being for individuals worldwide.</p>
</section>
</main>
<footer class="eco-footer">
<p>© 2024 Symptom-Based Disease Diagnosis Web App. Empowering technology for a healthier future.</p>
</footer>
</body>
</html>