Hugging Face's logo

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

App Files Community
UdaraChamidu commited on
Commit
5a9f96e
·
verified ·
1 Parent(s): 1162c0d

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +142 -78
templates/index.html CHANGED
@@ -1,78 +1,142 @@
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>♻️ Smart Waste Classification</title>
7
- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
8
-
9
- <style>
10
- /* Gradient Background */
11
- body {
12
- background: linear-gradient(135deg, #d4fc79, #96e6a1);
13
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
14
- margin: 0;
15
- padding: 0;
16
- }
17
-
18
- /* Content Card */
19
- .content-card {
20
- background: rgba(255, 255, 255, 0.95);
21
- border-radius: 20px;
22
- padding: 40px;
23
- box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2);
24
- animation: fadeIn 0.8s ease-in-out;
25
- }
26
-
27
- /* Headings */
28
- h1 {
29
- font-weight: bold;
30
- font-size: 2.5rem;
31
- color: #2c6e49;
32
- }
33
-
34
- p {
35
- color: #4b4b4b;
36
- }
37
-
38
- /* Buttons */
39
- .btn {
40
- font-size: 1.1rem;
41
- padding: 10px 20px;
42
- border-radius: 50px;
43
- transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
44
- }
45
-
46
- .btn:hover {
47
- transform: scale(1.05);
48
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
49
- }
50
-
51
- /* Smooth Animation */
52
- @keyframes fadeIn {
53
- from { opacity: 0; transform: translateY(15px); }
54
- to { opacity: 1; transform: translateY(0); }
55
- }
56
- </style>
57
- </head>
58
- <body>
59
- <div class="container d-flex justify-content-center align-items-center min-vh-100">
60
- <div class="content-card text-center col-md-6">
61
- <h1 class="mb-3">♻️ Smart Waste Classification</h1>
62
- <p class="mb-4">Upload a waste image or use your camera for real-time detection</p>
63
-
64
- <!-- Image Upload Form -->
65
- <form action="/" method="POST" enctype="multipart/form-data">
66
- <input type="file" name="file" class="form-control mb-3" required>
67
- <button class="btn btn-success w-100">Classify Waste</button>
68
- </form>
69
-
70
- <!-- Camera Detection Button -->
71
- <a href="/camera" class="btn btn-primary w-100 mt-3">📷 Use Camera for Real-Time Detection</a>
72
-
73
-
74
- <a href="/stats" class="btn btn-info w-100 mt-3">📊 View Statistics</a>
75
- </div>
76
- </div>
77
- </body>
78
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>♻️ Smart Waste Classification</title>
7
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
8
+
9
+ <style>
10
+ /* Gradient Background */
11
+ body {
12
+ background: linear-gradient(135deg, #d4fc79, #96e6a1);
13
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
14
+ margin: 0;
15
+ padding: 0;
16
+ }
17
+
18
+ /* Content Card */
19
+ .content-card {
20
+ background: rgba(255, 255, 255, 0.95);
21
+ border-radius: 20px;
22
+ padding: 40px;
23
+ box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2);
24
+ animation: fadeIn 0.8s ease-in-out;
25
+ }
26
+
27
+ /* Headings */
28
+ h1 {
29
+ font-weight: bold;
30
+ font-size: 2.5rem;
31
+ color: #2c6e49;
32
+ }
33
+
34
+ p {
35
+ color: #4b4b4b;
36
+ }
37
+
38
+ /* Buttons */
39
+ .btn {
40
+ font-size: 1.1rem;
41
+ padding: 10px 20px;
42
+ border-radius: 50px;
43
+ transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
44
+ }
45
+
46
+ .btn:hover {
47
+ transform: scale(1.05);
48
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
49
+ }
50
+
51
+ /* Smooth Animation */
52
+ @keyframes fadeIn {
53
+ from { opacity: 0; transform: translateY(15px); }
54
+ to { opacity: 1; transform: translateY(0); }
55
+ }
56
+
57
+ /* File input styling */
58
+ .form-control {
59
+ border-radius: 15px;
60
+ border: 2px solid #96e6a1;
61
+ padding: 12px;
62
+ }
63
+
64
+ .form-control:focus {
65
+ border-color: #2c6e49;
66
+ box-shadow: 0 0 0 0.2rem rgba(44, 110, 73, 0.25);
67
+ }
68
+ </style>
69
+ </head>
70
+ <body>
71
+ <div class="container d-flex justify-content-center align-items-center min-vh-100">
72
+ <div class="content-card text-center col-md-6">
73
+ <h1 class="mb-3">♻️ Smart Waste Classification</h1>
74
+ <p class="mb-4">Upload a waste image for AI-powered classification and recycling guidance</p>
75
+
76
+ {% if error %}
77
+ <div class="alert alert-danger">
78
+ ⚠️ {{ error }}
79
+ </div>
80
+ {% endif %}
81
+
82
+ <!-- Image Upload Form -->
83
+ <form action="/" method="POST" enctype="multipart/form-data">
84
+ <div class="mb-3">
85
+ <label for="file" class="form-label fw-bold">Select Image</label>
86
+ <input type="file" name="file" id="file" class="form-control"
87
+ accept="image/*" required>
88
+ <small class="text-muted">Supported: PNG, JPG, JPEG, GIF, BMP</small>
89
+ </div>
90
+
91
+ <!-- Detection Mode Selection -->
92
+ <div class="mb-4">
93
+ <label class="form-label fw-bold">Detection Mode</label>
94
+ <div class="row">
95
+ <div class="col-6">
96
+ <div class="form-check p-3 border rounded bg-light">
97
+ <input class="form-check-input" type="radio" name="detection_mode"
98
+ id="classification" value="classification" checked>
99
+ <label class="form-check-label" for="classification">
100
+ <strong>🧠 Classification</strong><br>
101
+ <small class="text-muted">Single item classification</small>
102
+ </label>
103
+ </div>
104
+ </div>
105
+ <div class="col-6">
106
+ <div class="form-check p-3 border rounded bg-light">
107
+ <input class="form-check-input" type="radio" name="detection_mode"
108
+ id="yolo" value="yolo">
109
+ <label class="form-check-label" for="yolo">
110
+ <strong>🎯 Detection</strong><br>
111
+ <small class="text-muted">Multiple object detection</small>
112
+ </label>
113
+ </div>
114
+ </div>
115
+ </div>
116
+ </div>
117
+
118
+ <button class="btn btn-success w-100" type="submit">
119
+ 🔍 Process Image
120
+ </button>
121
+ </form>
122
+
123
+ <!-- Camera Detection Button (Disabled for Hugging Face) -->
124
+ <a href="/camera" class="btn btn-secondary w-100 mt-3">
125
+ 📷 Camera Detection (Not Available in Cloud)
126
+ </a>
127
+
128
+ <!-- Statistics Button -->
129
+ <a href="/stats" class="btn btn-info w-100 mt-3">📊 View Statistics</a>
130
+
131
+ <!-- Information Section -->
132
+ <div class="mt-4 p-3 bg-light rounded">
133
+ <h6 class="text-success">🌱 How it works:</h6>
134
+ <small class="text-muted">
135
+ Our AI model can classify 10 types of waste materials and provides guidance on proper disposal.
136
+ Simply upload a clear image of your waste item!
137
+ </small>
138
+ </div>
139
+ </div>
140
+ </div>
141
+ </body>
142
+ </html>