Hugging Face's logo

Spaces:
datasci-rahul
/
WasteManagement
Configuration error

App Files Community
datasci-rahul commited on
Commit
ba3e1ca
•
1 Parent(s): 6b98c48

Upload 3 files

Browse files
Files changed (3) hide show
  1. 404.html +9 -0
  2. base.html +302 -0
  3. home.html +196 -0
404.html ADDED
@@ -0,0 +1,9 @@
 
 
 
 
 
 
 
 
 
 
1
+ {% extends "base.html" %}
2
+ {% block content %}
3
+
4
+ <div class = "container text-center">
5
+ <h4 style="font-size: 400px;"><b>404</b></h4>
6
+ <h4>The Dish you're looking for is not here you can try <a href = "/" style="color: green;"><u>this page</u></a> instead</h4>
7
+ </div>
8
+
9
+ {% endblock %}
base.html ADDED
@@ -0,0 +1,302 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <title>Awareness of Waste Recycling</title>
5
+ <meta charset="utf-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1">
7
+ <!-- Bootstrap CSS -->
8
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
9
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
10
+ <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
11
+
12
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
13
+
14
+ <script src="https://use.fontawesome.com/305ad9003c.js"></script>
15
+
16
+ <style>
17
+ .topnav {
18
+ overflow: hidden;
19
+ background-color: #232a34;
20
+ }
21
+
22
+ .topnav a {
23
+ float: left;
24
+ display: block;
25
+ color: wheat;
26
+ text-align: center;
27
+ padding: 14px 16px;
28
+ text-decoration: none;
29
+ font-size: 17px;
30
+ }
31
+
32
+ .topnav a:hover {
33
+ background-color: wheat;
34
+ color: #232a34;
35
+ }
36
+
37
+ .topnav a.active {
38
+ background-color: wheat;
39
+ color: #232a34;
40
+ }
41
+
42
+ a {
43
+ cursor: alias;
44
+ color: wheat;
45
+ font-size: 120%;
46
+ }
47
+
48
+ h4{
49
+ color: wheat;
50
+ padding-top: 4%;
51
+ padding-left: 4px;
52
+ padding-right: 4px;
53
+ padding-bottom: 4px;
54
+ background-color: #232a34;
55
+ }
56
+
57
+ h3{
58
+ color: wheat;
59
+ background-color: #232a34;
60
+ padding-top: 2%;
61
+ padding-bottom: 1%;
62
+ padding-left: 4px;
63
+ }
64
+
65
+ h2{
66
+ color: wheat;
67
+ background-color: #232a34;
68
+ padding-top: 2%;
69
+ padding-bottom: 1%;
70
+ padding-left: 4px;
71
+ }
72
+
73
+ @media screen and (min-width: 601px) {
74
+ h4 {
75
+ font-size: 25px;
76
+ }
77
+
78
+ h3 {
79
+ font-size: 30px;
80
+ }
81
+
82
+ h2 {
83
+ font-size: 30px;
84
+ }
85
+
86
+ .image-upload img
87
+ {
88
+ width: 80px;
89
+ cursor: pointer;
90
+ }
91
+
92
+ #upload-web {
93
+ display: block;
94
+ }
95
+
96
+ #upload-mobile {
97
+ display: none;
98
+ }
99
+
100
+ .classify-button{
101
+ border: 2px;
102
+ background: none;
103
+ background-color: wheat;
104
+ color: #232a34;
105
+ font-size: large;
106
+ font-weight: bold;
107
+ width: 250px;
108
+ padding: 10px;
109
+ border-radius-top-right: 5px;
110
+ -moz-border-radius-top-right: 5px;
111
+ -webkit-border-radius-top-right: 5px;
112
+ border-radius-bottom-right: 5px;
113
+ -moz-border-radius-bottom-right: 5px;
114
+ -webkit-border-radius-bottom-right: 5px;
115
+ cursor:pointer;
116
+ }
117
+
118
+ #logo-img{
119
+ height: 140px;
120
+ width: 580px;
121
+ }
122
+
123
+ }
124
+
125
+ @media screen and (max-width: 600px) {
126
+ h4 {
127
+ font-size: 15px;
128
+ }
129
+
130
+ h3 {
131
+ font-size: 20px;
132
+ }
133
+
134
+ h2 {
135
+ font-size: 12px;
136
+ }
137
+
138
+ .image-upload img
139
+ {
140
+ width: 40px;
141
+ cursor: pointer;
142
+ }
143
+
144
+ #upload-web {
145
+ display: none;
146
+ }
147
+
148
+ #upload-mobile {
149
+ display: block;
150
+ }
151
+
152
+ .classify-button{
153
+ border: 0px;
154
+ background: none;
155
+ background-color: wheat;
156
+ color: #232a34;
157
+ font-size: small;
158
+ font-weight: bold;
159
+ width: 195px;
160
+ padding: 10px;
161
+ border-radius-top-right: 5px;
162
+ -moz-border-radius-top-right: 5px;
163
+ -webkit-border-radius-top-right: 5px;
164
+ border-radius-bottom-right: 5px;
165
+ -moz-border-radius-bottom-right: 5px;
166
+ -webkit-border-radius-bottom-right: 5px;
167
+ cursor:pointer;
168
+ }
169
+
170
+ #logo-img{
171
+ height: 120px;
172
+ width: 360px;
173
+ }
174
+
175
+ }
176
+
177
+ body{
178
+ background-color: black;
179
+ font-family: 'Times New Roman';
180
+ }
181
+
182
+ .classy_frame{
183
+ position: relative;
184
+ display: block;
185
+ border: solid;
186
+ border-color: wheat;
187
+ border-radius: 7px;
188
+ overflow: hidden;
189
+ box-shadow: none;
190
+ transform: scale(0.98) translateY(5px);
191
+ padding-top: 2%;
192
+ margin-bottom: 3%;
193
+
194
+
195
+ }
196
+ .classy_frame:hover{
197
+ box-shadow: 0px 20px 30px wheat;
198
+ transition: all ease 0.4s;
199
+ }
200
+
201
+ hr {
202
+ border:6px solid #232a34;
203
+ border-radius: 5px;
204
+ background-color: wheat;
205
+
206
+ }
207
+
208
+ .image-upload > input
209
+ {
210
+ display: none;
211
+ }
212
+
213
+ #loading {
214
+ background: #000 url("{{ url_for('static', filename='images/loading.gif') }}") no-repeat center center;
215
+ position: fixed;
216
+ top: 0;
217
+ left: 0;
218
+ height: 100%;
219
+ width: 100%;
220
+ z-index: 9999999;
221
+ display: none;
222
+ }
223
+
224
+ </style>
225
+
226
+ <link rel="shortcut icon" href="{{ url_for('static', filename='images/favicon.ico') }}" type="image/x-icon">
227
+ {{ JSGlue.include() }} <!-- this is use for use url_for() from javascript -->
228
+ </head>
229
+ <body>
230
+
231
+ <nav class="navbar" style="background-color: #232a34;">
232
+ <div class="container">
233
+ <center>
234
+ <div>
235
+ <a href="/"><img id="logo-img" src="{{ url_for('static', filename = 'images/awareness_of_waste_recycling.png') }}" alt="awareness of waste recycling" title = "awareness of waste recycling"></center></a>
236
+ </div>
237
+ </center>
238
+ </div>
239
+ </nav>
240
+ <br>
241
+
242
+ <!-- Modal -->
243
+ <div class="modal fade" id="errorPopup" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
244
+ <div class="modal-dialog modal-dialog-centered" role="document">
245
+ <div class="modal-content classy_frame" style="background-color: #0b2438;">
246
+ <div class="modal-header">
247
+ <p class="modal-title" id="errorTitle" style="color:wheat;font-size:large;">Modal title</p>
248
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color:wheat;font-size: large;">
249
+ <span aria-hidden="true">&times;</span>
250
+ </button>
251
+ </div>
252
+ <div class="modal-body">
253
+ <p style="color:wheat; font-size:medium;" id="errorMessage" style="color:wheat;"></p>
254
+ </div>
255
+ <div class="modal-footer">
256
+ <button type="button" class="btn btn-secondary" data-dismiss="modal" style="background-color: wheat; color: #0b2438;">OK</button>
257
+ </div>
258
+ </div>
259
+ </div>
260
+ </div>
261
+ <div id="loading">
262
+ <h3 style="text-align: center;">Wait a second your messy waste is classifying...</h3>
263
+ </div>
264
+
265
+ {% block content %}
266
+ {% endblock %}
267
+
268
+ <footer style="background-color:#232a34">
269
+ <div class = "container">
270
+ <div class = "row">
271
+ <h4 style="text-align:center">Developed by</h4>
272
+ <hr>
273
+ <div class = "col-xs-6 col-sm-3">
274
+ <h4>
275
+ <a href="https://www.instagram.com/jaysoftic/" target="_blank"><i class="fa fa-instagram"></i> Instagram</a>
276
+ </h4>
277
+ <h4>
278
+ <a href="https://www.linkedin.com/in/jaysoftic/" target="_blank"><i class="fa fa-linkedin-square"></i> Linkedin</a>
279
+ </h4>
280
+ <h4>
281
+ <a href="https://github.com/jaysoftic" target="_blank"><i class="fa fa-github"></i> Github</a>
282
+ </h4>
283
+ <h4>
284
+ <a href="https://www.kaggle.com/jaysoftic/" target="_blank"><i class="fab fa-kaggle"></i> Kaggle</a>
285
+ </h4>
286
+ </div>
287
+ <div class = "col-xs-0 col-sm-6">
288
+
289
+ </div>
290
+ <div class = "col-xs-6 col-sm-3">
291
+ <img src="{{ url_for('static', filename = 'images/jaysoftic_brand.png') }}" alt="jaysoftic" height="47%" width="70%" title = "jaysoftic" class = "classy_frame" style="padding: 1%;" align="right">
292
+ </div>
293
+ </div>
294
+ <br>
295
+ <div class="row" style="background-color: #0b2438;">
296
+ <p style="color:wheat; text-align: center;">Learn from Mistakes and Live for Today.</p>
297
+ </div>
298
+ </div>
299
+ </footer>
300
+
301
+ </body>
302
+ </html>
home.html ADDED
@@ -0,0 +1,196 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ {% extends "base.html" %}
2
+ {% block content %}
3
+
4
+ <div class="container">
5
+ <br>
6
+ <div class="row">
7
+ <div class="col-md-6 classy_frame" style="padding-top: 0%;">
8
+ <center><h3 style="text-transform: capitalize;">Classify Your Waste Material</h3></center>
9
+ <img id="preview" src="{{ url_for('static', filename = 'images/reuse.png') }}" height="400px" width="100%" title = "client pic">
10
+
11
+ <center>
12
+ <br>
13
+ <div class="image-upload">
14
+ <p style="color:wheat;" id="upload-web">Click the image upload icon below to upload a image.</p style="color:wheat;"">
15
+ <p style="color:wheat;" id="upload-mobile">Click the camera icon below to click a image.</p style="color:wheat;"">
16
+
17
+ <label for="file">
18
+ <img id="upload-web" src="{{ url_for('static', filename = 'images/upload.png') }}"/>
19
+ <img id="upload-mobile" src="{{ url_for('static', filename = 'images/camera.png') }}"/>
20
+
21
+ </label>
22
+ <input type="file" name="file" id="file" onchange="previewImage()">
23
+ </div>
24
+
25
+ <br>
26
+ <button class="classify-button" onclick="classifyWaste()">Classify your waste material</button>
27
+ </center>
28
+ <br>
29
+ </div>
30
+
31
+ <div class="col-md-6 classy_frame" style="padding-top: 0%;" id="about">
32
+ <center><h3 style="text-transform: capitalize;">About</h3></center>
33
+ <h4>The world generates at least 3.5 million tons of waste per day and this number is still increasing day by day
34
+ that's why we need to aware about waste.<br><br>This app is help you to classify your waste with 9 different waste materials.
35
+ The recycling process of these waste materials are very hard and even it's very difficult to classify these 9 different waste
36
+ materials at recycling factory.<br><br>But what if every people make 9 trash for 9 different waste materials and put the waste to the
37
+ particular trash according to that waste materials this would be much more better for cleaners and recycling factory to classify
38
+ and recycle the waste. Everyone should do this because around 70% of waste are not recycled just because that was not classified.
39
+ <br><br><br><br><br><br>
40
+ </h4>
41
+ </div>
42
+ </div>
43
+
44
+ <div class="row" id="recycling-videos">
45
+ <br>
46
+ <hr>
47
+ <h3 id="video-title"></h3>
48
+ <div class="col-md-6 col-xs-6 classy_frame" style="padding-top: 0%; padding-bottom: 2%;">
49
+ <div class="embed-responsive embed-responsive-16by9">
50
+ <iframe id="video1" width="560" height="315" src="https://www.youtube.com/embed/zO3jFKiqmHo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope;" allowfullscreen></iframe>
51
+ </div>
52
+ </div>
53
+ <div class="col-md-6 col-xs-6 classy_frame" style="padding-top: 0%; padding-bottom: 2%;">
54
+ <div class="embed-responsive embed-responsive-16by9">
55
+ <iframe id="video2" width="560" height="315" src="https://www.youtube.com/embed/I_fUpP-hq3A" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope;" allowfullscreen></iframe>
56
+ </div>
57
+ </div>
58
+ </div>
59
+
60
+ <div class="row" id="what-if">
61
+ <br>
62
+ <hr>
63
+ <div class="col-md-6 col-xs-6 classy_frame" style="padding-top: 0%; padding-bottom: 2%;">
64
+ <center><h2 style="text-transform: capitalize;">What If We Stopped Recycling?</h2></center>
65
+
66
+ <div class="embed-responsive embed-responsive-16by9">
67
+ <iframe width="560" height="315" src="https://www.youtube.com/embed/8fFJOzXxB54" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope;" allowfullscreen></iframe>
68
+ </div>
69
+ </div>
70
+ <div class="col-md-6 col-xs-6 classy_frame" style="padding-top: 0%; padding-bottom: 2%;">
71
+ <center><h2 style="text-transform: capitalize;">What If We Created No Waste?</h2></center>
72
+
73
+ <div class="embed-responsive embed-responsive-16by9">
74
+ <iframe width="560" height="315" src="https://www.youtube.com/embed/wWbL7Mv2MFw" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope;" allowfullscreen></iframe>
75
+ </div>
76
+ </div>
77
+ </div>
78
+
79
+
80
+ <div class="row" id="motivation">
81
+ <br>
82
+ <hr>
83
+ <h3>Why We Need Awareness</h3>
84
+ <div class="col-md-12 classy_frame" style="padding-top: 0%; padding-bottom: 2%;">
85
+ <div class="embed-responsive embed-responsive-16by9">
86
+ <iframe width="560" height="315" src="https://www.youtube.com/embed/NhF4pXBNfq8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope;" allowfullscreen></iframe>
87
+ </div>
88
+ </div>
89
+ </div>
90
+
91
+ <div class="row" id="quotes">
92
+ <br>
93
+ <hr>
94
+ <div class="col-md-6 col-xs-6 classy_frame" style="padding-top: 0%;">
95
+ <h4>They don’t dive into the swimming pool they dive into the mud. We can't even imagine how they would feel.</h4>
96
+ </div>
97
+ <div class="col-md-6 col-xs-6 classy_frame" style="padding-top: 0%;">
98
+ <h4>Your one step to waste recycling can make a cleaner’s life 10 minutes better.<br> &nbsp;</h4>
99
+ </div>
100
+ </div>
101
+ </div>
102
+
103
+ <script>
104
+ var imgData;
105
+ var loading = document.getElementById("loading");
106
+ var whatif = document.getElementById("what-if");
107
+ var motivation = document.getElementById("motivation");
108
+ var quotes = document.getElementById("quotes");
109
+ var recyclingvideos = document.getElementById("recycling-videos");
110
+
111
+ whatif.style.display = "none";
112
+ motivation.style.display = "none";
113
+ quotes.style.display = "none";
114
+ recyclingvideos.style.display = "none";
115
+
116
+ function previewImage(){
117
+
118
+ var file = document.getElementById("file").files;
119
+ if(file.length>0){
120
+ var fileName = file[0].name;
121
+ var allowed_extensions = new Array("jpeg", "jpg","png");
122
+ var file_extension = fileName.split('.').pop().toLowerCase();
123
+
124
+ if(allowed_extensions[0] == file_extension || allowed_extensions[1] == file_extension || allowed_extensions[2] == file_extension){
125
+ var imgObj = document.getElementById("preview");
126
+ var fileReader = new FileReader();
127
+
128
+ fileReader.onload = function(event){
129
+ document.getElementById("preview").setAttribute("src", event.target.result);
130
+ imgData = event.target.result;
131
+ };
132
+
133
+ fileReader.readAsDataURL(file[0]);
134
+ }
135
+ else{
136
+ document.getElementById("file").value = "";
137
+ document.getElementById("errorTitle").innerHTML = "Error - Only Image File Acceptable";
138
+ document.getElementById("errorMessage").innerHTML = "We only accept image with .jpeg .jpg or .png extensions.";
139
+ $("#errorPopup").modal("show");
140
+
141
+ }
142
+
143
+
144
+ }
145
+ }
146
+
147
+ function classifyWaste(){
148
+ var file = document.getElementById("file").files;
149
+ if(file.length > 0){
150
+ loading.style.display = "block";
151
+ whatif.style.display = "block";
152
+ motivation.style.display = "block";
153
+ quotes.style.display = "block";
154
+ recyclingvideos.style.display = "block";
155
+
156
+ var form_data = new FormData();
157
+ form_data.append("file", document.getElementById("file").files[0]);
158
+ $.ajax({
159
+ url: 'classifywaste', // point to server-side URL
160
+ dataType: 'json', // what to expect back from server
161
+ cache: false,
162
+ contentType: false,
163
+ processData: false,
164
+ data: form_data,
165
+ type: 'post',
166
+ success: function (data) {
167
+
168
+ var predicted_value = data["predicted_value"];
169
+ var details = data["details"];
170
+ var video1 = data["video1"];
171
+ var video2 = data["video2"];
172
+
173
+ var about = document.getElementById("about");
174
+ var videotitle = document.getElementById("video-title");
175
+
176
+ about.innerHTML = "<center><h3>Waste classified as <b style='background-color: #0b2438;'>" + predicted_value + "</b> material</h3></center><h4>"+ details +"</h4>";
177
+ videotitle.innerHTML = "How "+ predicted_value +" Recycling Works?";
178
+
179
+ document.getElementById("video1").setAttribute("src", "https://www.youtube.com/embed/" + video1);
180
+ document.getElementById("video2").setAttribute("src", "https://www.youtube.com/embed/" + video2);
181
+
182
+ loading.style.display = "none";
183
+ }
184
+
185
+ });
186
+ }
187
+ else{
188
+ document.getElementById("errorTitle").innerHTML = "Error - Image not uploaded";
189
+ document.getElementById("errorMessage").innerHTML = "Please upload image of your waste material.";
190
+ $("#errorPopup").modal("show");
191
+ }
192
+ }
193
+ </script>
194
+
195
+
196
+ {% endblock %}