Hugging Face's logo

Spaces:
sikeaditya
/
AIO_Plant_Disease
Sleeping

App Files Community
2
sikeaditya RushiMane2003 commited on
Commit
752d421
·
verified ·
1 Parent(s): 7f1e78c

updated language (#2)

Browse files

- updated language (e76b89752b3e0a2d1e453c3fb47c8327b04c3441)


Co-authored-by: Rushikesh Balaji Mane <[email protected]>

Files changed (1) hide show
  1. templates/index.html +142 -125
templates/index.html CHANGED
@@ -1,126 +1,143 @@
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/[email protected]/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="d-grid">
98
- <button type="submit" class="btn btn-success btn-lg">Analyze Plant</button>
99
- </div>
100
- </form>
101
- </div>
102
- </div>
103
- </div>
104
- </div>
105
-
106
- <footer class="bg-dark text-white text-center py-3">
107
- <div class="container">
108
- <p class="mb-0">Plant Disease Detector &copy; 2025 | Powered by Gemini AI</p>
109
- </div>
110
- </footer>
111
-
112
- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
113
- <script>
114
- function previewImage(event) {
115
- var reader = new FileReader();
116
- reader.onload = function() {
117
- var output = document.getElementById('imagePreview');
118
- output.src = reader.result;
119
- output.style.display = 'block';
120
- document.getElementById('previewPlaceholder').style.display = 'none';
121
- };
122
- reader.readAsDataURL(event.target.files[0]);
123
- }
124
- </script>
125
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
126
  </html>
 
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/[email protected]/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/[email protected]/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>