Hugging Face's logo

Spaces:
sikeaditya
/
AIO2
Running

App Files Community
2

Update templates/index.html

#1
by RushiMane2003 - opened
base: refs/heads/main
←
from: refs/pr/1
Discussion Files changed
+161
-142
Files changed (1) hide show
  1. templates/index.html +161 -142
templates/index.html CHANGED
@@ -1,143 +1,162 @@
1
- <!-- templates/index.html -->
2
- <!DOCTYPE html>
3
- <html lang="en">
4
- <head>
5
- <meta charset="UTF-8">
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>Plant Disease Detector</title>
8
- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
9
- <style>
10
- body {
11
- background-color: #f8f9fa;
12
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
13
- }
14
- .hero-section {
15
- background-color: #28a745;
16
- color: white;
17
- padding: 3rem 0;
18
- margin-bottom: 2rem;
19
- }
20
- .upload-container {
21
- background-color: white;
22
- border-radius: 10px;
23
- padding: 2rem;
24
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
25
- }
26
- .instructions {
27
- background-color: #e9f7ef;
28
- border-left: 4px solid #28a745;
29
- padding: 1rem;
30
- margin-bottom: 1.5rem;
31
- }
32
- .preview-container {
33
- max-width: 300px;
34
- max-height: 300px;
35
- overflow: hidden;
36
- margin: 0 auto;
37
- border: 2px dashed #dee2e6;
38
- border-radius: 5px;
39
- display: flex;
40
- align-items: center;
41
- justify-content: center;
42
- }
43
- #imagePreview {
44
- max-width: 100%;
45
- max-height: 100%;
46
- display: none;
47
- }
48
- </style>
49
- </head>
50
- <body>
51
- <div class="hero-section">
52
- <div class="container text-center">
53
- <h1 class="display-4">Plant Disease & Pest Detector</h1>
54
- <p class="lead">Upload an image of your plant to detect diseases and pests</p>
55
- </div>
56
- </div>
57
-
58
- <div class="container mb-5">
59
- {% with messages = get_flashed_messages() %}
60
- {% if messages %}
61
- {% for message in messages %}
62
- <div class="alert alert-warning alert-dismissible fade show" role="alert">
63
- {{ message }}
64
- <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
65
- </div>
66
- {% endfor %}
67
- {% endif %}
68
- {% endwith %}
69
-
70
- <div class="row justify-content-center">
71
- <div class="col-md-8">
72
- <div class="upload-container">
73
- <div class="instructions">
74
- <h5>How to use:</h5>
75
- <ol>
76
- <li>Select an image of your plant (preferably showing affected areas)</li>
77
- <li>Enter the name of the plant (e.g., Tomato, Rice, Potato)</li>
78
- <li>Click "Analyze Plant" to detect diseases or pests</li>
79
- </ol>
80
- </div>
81
-
82
- <form action="/analyze" method="post" enctype="multipart/form-data">
83
- <div class="mb-4">
84
- <div class="preview-container mb-3">
85
- <img id="imagePreview" src="#" alt="Image Preview">
86
- <span id="previewPlaceholder">Image preview will appear here</span>
87
- </div>
88
- <label for="plant_image" class="form-label">Upload Plant Image</label>
89
- <input class="form-control" type="file" id="plant_image" name="plant_image" accept="image/*" required onchange="previewImage(event)">
90
- </div>
91
-
92
- <div class="mb-4">
93
- <label for="plant_name" class="form-label">Plant Name</label>
94
- <input type="text" class="form-control" id="plant_name" name="plant_name" placeholder="e.g., Tomato, Rice, Potato" required>
95
- </div>
96
-
97
- <div class="mb-4">
98
- <label for="language" class="form-label">Response Language</label>
99
- <select class="form-control" id="language" name="language" required>
100
- <option value="English">English</option>
101
- <option value="Hindi">Hindi</option>
102
- <option value="Bengali">Bengali</option>
103
- <option value="Telugu">Telugu</option>
104
- <option value="Marathi">Marathi</option>
105
- <option value="Tamil">Tamil</option>
106
- <option value="Gujarati">Gujarati</option>
107
- <option value="Urdu">Urdu</option>
108
- <option value="Kannada">Kannada</option>
109
- <option value="Odia">Odia</option>
110
- <option value="Malayalam">Malayalam</option>
111
- </select>
112
- </div>
113
-
114
- <div class="d-grid">
115
- <button type="submit" class="btn btn-success btn-lg">Analyze Plant</button>
116
- </div>
117
- </form>
118
- </div>
119
- </div>
120
- </div>
121
- </div>
122
-
123
- <footer class="bg-dark text-white text-center py-3">
124
- <div class="container">
125
- <p class="mb-0">Plant Disease Detector &copy; 2025 | Powered by Gemini AI</p>
126
- </div>
127
- </footer>
128
-
129
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
130
- <script>
131
- function previewImage(event) {
132
- var reader = new FileReader();
133
- reader.onload = function() {
134
- var output = document.getElementById('imagePreview');
135
- output.src = reader.result;
136
- output.style.display = 'block';
137
- document.getElementById('previewPlaceholder').style.display = 'none';
138
- };
139
- reader.readAsDataURL(event.target.files[0]);
140
- }
141
- </script>
142
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
143
  </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>Plant Disease Detector</title>
7
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
8
+ <style>
9
+ body {
10
+ background-color: #f8f9fa;
11
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
12
+ }
13
+ .hero-section {
14
+ background-color: #28a745;
15
+ color: white;
16
+ padding: 3rem 0;
17
+ margin-bottom: 2rem;
18
+ }
19
+ .upload-container {
20
+ background-color: white;
21
+ border-radius: 10px;
22
+ padding: 2rem;
23
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
24
+ }
25
+ .instructions {
26
+ background-color: #e9f7ef;
27
+ border-left: 4px solid #28a745;
28
+ padding: 1rem;
29
+ margin-bottom: 1.5rem;
30
+ }
31
+ .preview-container {
32
+ max-width: 300px;
33
+ max-height: 300px;
34
+ overflow: hidden;
35
+ margin: 0 auto;
36
+ border: 2px dashed #dee2e6;
37
+ border-radius: 5px;
38
+ display: flex;
39
+ align-items: center;
40
+ justify-content: center;
41
+ }
42
+ #imagePreview {
43
+ max-width: 100%;
44
+ max-height: 100%;
45
+ display: none;
46
+ }
47
+ </style>
48
+ </head>
49
+ <body>
50
+ <div class="hero-section">
51
+ <div class="container text-center">
52
+ <h1 class="display-4">Plant Disease & Pest Detector</h1>
53
+ <p class="lead">Upload an image of your plant to detect diseases and pests</p>
54
+ </div>
55
+ </div>
56
+
57
+ <div class="container mb-5">
58
+ {% with messages = get_flashed_messages() %}
59
+ {% if messages %}
60
+ {% for message in messages %}
61
+ <div class="alert alert-warning alert-dismissible fade show" role="alert">
62
+ {{ message }}
63
+ <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
64
+ </div>
65
+ {% endfor %}
66
+ {% endif %}
67
+ {% endwith %}
68
+
69
+ <div class="row justify-content-center">
70
+ <div class="col-md-8">
71
+ <div class="upload-container">
72
+ <div class="instructions">
73
+ <h5>How to use:</h5>
74
+ <ol>
75
+ <li>Select an image of your plant (preferably showing affected areas)</li>
76
+ <li>Enter the name of the plant (e.g., Tomato, Rice, Potato)</li>
77
+ <li>Click "Analyze Plant" to detect diseases or pests</li>
78
+ </ol>
79
+ </div>
80
+
81
+ <form action="/analyze" method="post" enctype="multipart/form-data">
82
+ <div class="mb-4">
83
+ <div class="preview-container mb-3">
84
+ <img id="imagePreview" src="#" alt="Image Preview">
85
+ <span id="previewPlaceholder">Image preview will appear here</span>
86
+ </div>
87
+ <label for="plant_image" class="form-label">Upload Plant Image</label>
88
+ <input class="form-control" type="file" id="plant_image" name="plant_image" accept="image/*" required onchange="previewImage(event)">
89
+ </div>
90
+
91
+ <div class="mb-4">
92
+ <label for="plant_name" class="form-label">Plant Name</label>
93
+ <input type="text" class="form-control" id="plant_name" name="plant_name" placeholder="e.g., Tomato, Rice, Potato" required>
94
+ </div>
95
+
96
+ <div class="mb-4">
97
+ <label for="language" class="form-label">Response Language</label>
98
+ <select class="form-control" id="language" name="language" required>
99
+ <option value="English">English</option>
100
+ <option value="Hindi">Hindi</option>
101
+ <option value="Bengali">Bengali</option>
102
+ <option value="Telugu">Telugu</option>
103
+ <option value="Marathi">Marathi</option>
104
+ <option value="Tamil">Tamil</option>
105
+ <option value="Gujarati">Gujarati</option>
106
+ <option value="Urdu">Urdu</option>
107
+ <option value="Kannada">Kannada</option>
108
+ <option value="Odia">Odia</option>
109
+ <option value="Malayalam">Malayalam</option>
110
+ </select>
111
+ </div>
112
+
113
+ <div class="d-grid">
114
+ <button type="submit" class="btn btn-success btn-lg">Analyze Plant</button>
115
+ </div>
116
+ </form>
117
+ </div>
118
+ </div>
119
+ </div>
120
+ </div>
121
+
122
+ <!-- Loading Overlay -->
123
+ <div id="loadingOverlay" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.8); z-index: 1050; align-items: center; justify-content: center;">
124
+ <div class="text-center">
125
+ <div class="spinner-border text-success" role="status" style="width: 4rem; height: 4rem;">
126
+ <span class="visually-hidden">Loading...</span>
127
+ </div>
128
+ <div class="mt-3">
129
+ <h4>Processing, please wait...</h4>
130
+ </div>
131
+ </div>
132
+ </div>
133
+
134
+ <footer class="bg-dark text-white text-center py-3">
135
+ <div class="container">
136
+ <p class="mb-0">Plant Disease Detector &copy; 2025 | Powered by Gemini AI</p>
137
+ </div>
138
+ </footer>
139
+
140
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
141
+ <script>
142
+ function previewImage(event) {
143
+ var reader = new FileReader();
144
+ reader.onload = function() {
145
+ var output = document.getElementById('imagePreview');
146
+ output.src = reader.result;
147
+ output.style.display = 'block';
148
+ document.getElementById('previewPlaceholder').style.display = 'none';
149
+ };
150
+ reader.readAsDataURL(event.target.files[0]);
151
+ }
152
+
153
+ // Show loading overlay on form submit
154
+ document.addEventListener("DOMContentLoaded", function() {
155
+ const form = document.querySelector("form");
156
+ form.addEventListener("submit", function() {
157
+ document.getElementById("loadingOverlay").style.display = "flex";
158
+ });
159
+ });
160
+ </script>
161
+ </body>
162
  </html>