-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
139 lines (131 loc) · 6.85 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Air Quality Index Prediction</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body class="bg-dark">
<!-- Navbar -->
<nav class="navbar navbar-dark bg-dark">
<div class="container">
<span class="navbar-brand mb-0 h1">Air Quality Index Predictor</span>
</div>
</nav>
<!-- Header -->
<div class="jumbotron jumbotron-fluid">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="text-center">
<img src="https://as2.ftcdn.net/v2/jpg/03/64/77/03/1000_F_364770325_4z7dxuDHN9OTCL85lxuJO3Ea4N2bKXUE.jpg" class="rounded img-fluid"
alt="intro-img" width="55%">
</div>
</div>
<div class="col-md-6 text-center">
<h1 class="display-5">AQI Prediction using ML, DL</h1>
<p class="lead">Air Pollution is Rising!</p>
<p>It is winter time and Air Quality Index of Delhi is in every newspaper / news channel. So I
decided to create a dataset for New Delhi which can be used to predict its AQI.</p>
<hr class="my-4">
<p>Predicting Pollution Levels using various Machine Learning algorithms.</p>
<p><span class="badge badge-primary">Linear Regression</span>,
<span class="badge badge-warning">Lasso Regression</span>,
<span class="badge badge-success">Random Forest Regressor</span>,
<span class="badge badge-danger">etc</span>,
</p>
</div>
</div>
<hr>
<!-- Row Ends -->
<!--T Average Temperature (°C)
TM Maximum temperature (°C)
Tm Minimum temperature (°C)
SLP Atmospheric pressure at sea level (hPa)
H Average relative humidity (%)
PP Total rainfall and / or snowmelt (mm)
VV Average visibility (Km)
V Average wind speed (Km/h)
VM Maximum sustained wind speed (Km/h) -->
<div class="row my-4">
<div class="col-md-6">
<h3>Form</h3>
<form method="POST" , action="/">
<div class="form-row">
<div class="col-6">
<input type="text" class="form-control my-1" placeholder="Average Temperature (°C)"
name='T' required>
</div>
<div class="col-6">
<input type="text" class="form-control my-1" placeholder="Maximum Temperature (°C)"
name='TM' required>
</div>
<div class="col-4">
<input type="text" class="form-control my-1" placeholder="Min Temp(°C)" name='Tm'
required>
</div>
<div class="col-8">
<input type="text" class="form-control my-1"
placeholder="Atmospheric pressure at sea level (hPa)" name='SLP' required>
</div>
<div class="col-6">
<input type="text" class="form-control my-1" placeholder="Average relative humidity (%)"
name='H' required>
</div>
<div class="col-7">
<input type="text" class="form-control my-1" placeholder="Avg visibility (Km)" name='VV'
required>
</div>
<div class="col-5">
<input type="text" class="form-control my-1" placeholder="Avg wind speed (Km/h)"
name='V' required>
</div>
<div class="col-9">
<input type="text" class="form-control my-1"
placeholder="Maximum sustained wind speed (Km/h)" name='VM' required>
</div>
<div class="col-3">
<button type="submit" class="btn btn-primary my-1 btn-block">Predict</button>
</div>
</div>
</form>
</div>
<div class="col-md-6">
<h3>Prediction </h3>
<!-- {% if lr_pm %}
{% if lr_pm < 51 %}
<h4 class="text text-success">Predicted value of PM<sub>2.5</sub> is {{ lr_pm[0] }} μg/m3, GOOD</h4>
{% elif lr_pm < 101 %}
<h4 class="text text-info">Predicted value of PM<sub>2.5</sub> is {{ lr_pm[0] }} μg/m3, MODERATE
</h4>
{% elif lr_pm < 151 %}
<h4 class="text text-primary">Predicted value of PM<sub>2.5</sub> is {{ lr_pm[0] }} μg/m3, UNHEALTHY
FOR KIDS</h4>
{% elif lr_pm < 201 %}
<h4 class="text text-warning">Predicted value of PM<sub>2.5</sub> is {{ lr_pm[0] }} μg/m3, UNHEALTHY
</h4>
{% elif lr_pm < 301 %}
<h4 class="text text-danger">Predicted value of PM<sub>2.5</sub> is {{ lr_pm[0] }} μg/m3, VERY
UNHEALTHY</h4>
{% else %}
<h4 class="text text-danger">Predicted value of PM<sub>2.5</sub> is {{ lr_pm[0] }} μg/m3, HAZARDOUS
</h4>
{% endif %}
{% endif %} -->
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer id="sticky-footer" class="py-1 bg-dark text-white-50">
<div class="container text-center text-white">
<a href="https://github.com/805karansaini/" target="_blank">Github | </a>
<a href="https://www.linkedin.com/in/805karansaini/" target="_blank">LinkedIn | </a>
<a href="https://github.com/805karansaini/AQI_Predictor" target="_blank">Code </a>
</div>
</footer>
</body>
</html>