Hugging Face's logo

Spaces:
UdaraChamidu
/
Image-Processing-Based-Smart-Waste-Management-System
Runtime error

App Files Community
UdaraChamidu commited on
Commit
b8437bf
·
verified ·
1 Parent(s): 1391e39

Upload 3 files

Browse files
Files changed (3) hide show
  1. templates/camera.html +50 -0
  2. templates/report.html +84 -0
  3. templates/result.html +61 -0
templates/camera.html ADDED
@@ -0,0 +1,50 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>♻️ Real-Time Waste Detection</title>
7
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
8
+ <style>
9
+ body {
10
+ background: url("https://images.unsplash.com/photo-1590490357530-71d1f9f3b09b") no-repeat center center fixed;
11
+ background-size: cover;
12
+ font-family: 'Segoe UI', sans-serif;
13
+ }
14
+ .camera-card {
15
+ background: rgba(255, 255, 255, 0.9);
16
+ border-radius: 15px;
17
+ padding: 30px;
18
+ box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2);
19
+ max-width: 700px;
20
+ margin: auto;
21
+ }
22
+ .camera-feed {
23
+ border: 3px solid #198754;
24
+ border-radius: 15px;
25
+ max-width: 100%;
26
+ box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.3);
27
+ }
28
+ .btn {
29
+ border-radius: 50px;
30
+ padding: 10px 20px;
31
+ }
32
+ </style>
33
+ </head>
34
+ <body>
35
+ <div class="container mt-5">
36
+ <div class="camera-card text-center">
37
+ <h2 class="text-success fw-bold">📷 Real-Time Waste Detection</h2>
38
+ <p class="text-muted mb-3">Your camera is live. Detected objects will appear with bounding boxes and labels.</p>
39
+
40
+ <!-- Live Camera Feed -->
41
+ <img src="{{ url_for('video_feed') }}" class="camera-feed mt-3">
42
+
43
+ <!-- Action Button -->
44
+ <div class="mt-4">
45
+ <a href="/" class="btn btn-success">⬅️ Back to Upload</a>
46
+ </div>
47
+ </div>
48
+ </div>
49
+ </body>
50
+ </html>
templates/report.html ADDED
@@ -0,0 +1,84 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Waste Classification Report</title>
7
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
8
+ <style>
9
+ body {
10
+ background: url("https://images.unsplash.com/photo-1597668087701-04727ab4c3a3") no-repeat center center fixed;
11
+ background-size: cover;
12
+ }
13
+ .container {
14
+ background: rgba(255, 255, 255, 0.92);
15
+ padding: 30px;
16
+ border-radius: 15px;
17
+ box-shadow: 0px 8px 20px rgba(0,0,0,0.1);
18
+ }
19
+ .table thead {
20
+ background-color: #198754;
21
+ color: white;
22
+ }
23
+ .btn {
24
+ border-radius: 50px;
25
+ padding: 10px 20px;
26
+ }
27
+ .chart-container {
28
+ display: flex;
29
+ justify-content: center;
30
+ align-items: center;
31
+ margin-top: 20px;
32
+ }
33
+ img.chart {
34
+ border: 3px solid #198754;
35
+ border-radius: 10px;
36
+ max-width: 80%;
37
+ box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.2);
38
+ }
39
+ </style>
40
+ </head>
41
+ <body>
42
+ <div class="container mt-5">
43
+ <h2 class="text-center text-success fw-bold mb-4">📊 Waste Classification Report</h2>
44
+
45
+ {% if stats %}
46
+ <div class="chart-container">
47
+ <img src="{{ url_for('static', filename='stats_chart.png') }}" class="chart">
48
+ </div>
49
+
50
+ <div class="table-responsive mt-4">
51
+ <table class="table table-bordered table-hover text-center align-middle">
52
+ <thead>
53
+ <tr>
54
+ <th>Category</th>
55
+ <th>Count</th>
56
+ </tr>
57
+ </thead>
58
+ <tbody>
59
+ {% for category, count in stats.items() %}
60
+ <tr>
61
+ <td><strong>{{ category }}</strong></td>
62
+ <td>{{ count }}</td>
63
+ </tr>
64
+ {% endfor %}
65
+ </tbody>
66
+ </table>
67
+ </div>
68
+
69
+ <div class="text-center mt-4">
70
+ <a href="/download_csv" class="btn btn-primary me-2">📥 Download CSV</a>
71
+ <a href="/download_pdf" class="btn btn-danger">📄 Download PDF</a>
72
+ </div>
73
+ {% else %}
74
+ <div class="alert alert-warning mt-3 text-center shadow-sm">
75
+ ⚠️ No statistics yet! Please classify some images first.
76
+ </div>
77
+ {% endif %}
78
+ <!---->
79
+ <div class="text-center mt-4">
80
+ <a href="/" class="btn btn-success">⬅️ Go Back</a>
81
+ </div>
82
+ </div>
83
+ </body>
84
+ </html>
templates/result.html ADDED
@@ -0,0 +1,61 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Classification Result</title>
7
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
8
+ <style>
9
+ body {
10
+ background: url("https://images.unsplash.com/photo-1587574293340-73d0e176cda7") no-repeat center center fixed;
11
+ background-size: cover;
12
+ }
13
+ .result-card {
14
+ background: rgba(255, 255, 255, 0.92);
15
+ border-radius: 15px;
16
+ padding: 30px;
17
+ box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2);
18
+ max-width: 550px;
19
+ margin: auto;
20
+ }
21
+ .result-image {
22
+ border: 3px solid #198754;
23
+ border-radius: 10px;
24
+ max-width: 90%;
25
+ box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.2);
26
+ }
27
+ .btn {
28
+ border-radius: 50px;
29
+ padding: 10px 20px;
30
+ }
31
+ </style>
32
+ </head>
33
+ <body>
34
+ <div class="container mt-5">
35
+ <div class="result-card text-center">
36
+ <h2 class="text-success fw-bold">✅ Classification Result</h2>
37
+
38
+ <!-- Classified Image -->
39
+ <img src="{{ url_for('static', filename='uploads/' + image) }}" class="result-image mt-3">
40
+
41
+ <!-- Predicted Class & Confidence -->
42
+ <h3 class="mt-4">Predicted Class: <span class="text-primary fw-bold">{{ label }}</span></h3>
43
+ <h5 class="text-secondary">Confidence: {{ confidence }}</h5>
44
+
45
+ <!-- Result Message -->
46
+ {% if label.lower() in ["plastic", "metal", "green-glass", "white-glass", "brown-glass"] %}
47
+ <div class="alert alert-success mt-3 shadow-sm">
48
+ ♻️ <b>Recyclable:</b> Please place this item in the <b>Recycling Bin</b>.
49
+ </div>
50
+ {% else %}
51
+ <div class="alert alert-danger mt-3 shadow-sm">
52
+ 🚮 <b>General Waste:</b> Please dispose of this item in the <b>General Waste Bin</b>.
53
+ </div>
54
+ {% endif %}
55
+
56
+
57
+ <a href="/" class="btn btn-success mt-3">🔄 Classify Another Image</a>
58
+ </div>
59
+ </div>
60
+ </body>
61
+ </html>