Hugging Face's logo

Spaces:
Yango1
/
https-huggingface-co-spaces-yango1-cropspest
Running

App Files Community
Yango1 commited on
Commit
b7c572a
·
verified ·
1 Parent(s): 23aa66d

It generated well, but it seems that after uploading the image, the displayed page is a little incomplete. - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +641 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Https Huggingface Co Spaces Yango1 Cropspest
3
- emoji: 📉
4
- colorFrom: indigo
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: https-huggingface-co-spaces-yango1-cropspest
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: green
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,641 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </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>AgriScan - Agricultural Diagnosis System</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
11
+
12
+ :root {
13
+ --primary: #4CAF50;
14
+ --primary-dark: #388E3C;
15
+ --secondary: #FFC107;
16
+ --dark: #263238;
17
+ --light: #f5f7fa;
18
+ }
19
+
20
+ body {
21
+ font-family: 'Poppins', sans-serif;
22
+ background-color: #f5f7fa;
23
+ color: var(--dark);
24
+ overflow-x: hidden;
25
+ }
26
+
27
+ .glass-card {
28
+ background: rgba(255, 255, 255, 0.15);
29
+ backdrop-filter: blur(10px);
30
+ border: 1px solid rgba(255, 255, 255, 0.2);
31
+ box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
32
+ }
33
+
34
+ .floating-animation {
35
+ animation: float 6s ease-in-out infinite;
36
+ }
37
+
38
+ @keyframes float {
39
+ 0% { transform: translateY(0px); }
40
+ 50% { transform: translateY(-20px); }
41
+ 100% { transform: translateY(0px); }
42
+ }
43
+
44
+ .pulse-animation {
45
+ animation: pulse 2s infinite;
46
+ }
47
+
48
+ @keyframes pulse {
49
+ 0% { transform: scale(1); }
50
+ 50% { transform: scale(1.05); }
51
+ 100% { transform: scale(1); }
52
+ }
53
+
54
+ .disease-card {
55
+ transition: all 0.3s ease;
56
+ transform-style: preserve-3d;
57
+ }
58
+
59
+ .disease-card:hover {
60
+ transform: translateY(-10px) rotateX(5deg);
61
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
62
+ }
63
+
64
+ .severity-low {
65
+ border-left: 4px solid #4CAF50;
66
+ }
67
+
68
+ .severity-medium {
69
+ border-left: 4px solid #FFC107;
70
+ }
71
+
72
+ .severity-high {
73
+ border-left: 4px solid #F44336;
74
+ }
75
+
76
+ .upload-area {
77
+ border: 2px dashed #B0BEC5;
78
+ transition: all 0.3s ease;
79
+ }
80
+
81
+ .upload-area:hover {
82
+ border-color: var(--primary);
83
+ background-color: rgba(76, 175, 80, 0.05);
84
+ }
85
+
86
+ .upload-area.active {
87
+ border-color: var(--primary);
88
+ background-color: rgba(76, 175, 80, 0.1);
89
+ }
90
+
91
+ .loading-spinner {
92
+ width: 50px;
93
+ height: 50px;
94
+ border: 5px solid rgba(76, 175, 80, 0.2);
95
+ border-radius: 50%;
96
+ border-top-color: var(--primary);
97
+ animation: spin 1s linear infinite;
98
+ }
99
+
100
+ @keyframes spin {
101
+ 100% { transform: rotate(360deg); }
102
+ }
103
+
104
+ .modal-overlay {
105
+ background-color: rgba(0, 0, 0, 0.7);
106
+ backdrop-filter: blur(5px);
107
+ }
108
+
109
+ .leaf-decoration {
110
+ position: absolute;
111
+ opacity: 0.1;
112
+ z-index: -1;
113
+ }
114
+
115
+ .leaf-1 {
116
+ top: 10%;
117
+ left: 5%;
118
+ transform: rotate(30deg);
119
+ width: 200px;
120
+ }
121
+
122
+ .leaf-2 {
123
+ bottom: 15%;
124
+ right: 5%;
125
+ transform: rotate(-20deg);
126
+ width: 250px;
127
+ }
128
+ </style>
129
+ </head>
130
+ <body class="min-h-screen">
131
+ <!-- Navigation -->
132
+ <nav class="bg-white shadow-sm py-4 px-6 flex justify-between items-center">
133
+ <div class="flex items-center space-x-2">
134
+ <i class="fas fa-leaf text-2xl text-green-600"></i>
135
+ <span class="text-xl font-bold text-green-600">AgriScan</span>
136
+ </div>
137
+ <div class="hidden md:flex space-x-6">
138
+ <a href="#" class="text-gray-700 hover:text-green-600 transition">Home</a>
139
+ <a href="#" class="text-gray-700 hover:text-green-600 transition">Diagnosis</a>
140
+ <a href="#" class="text-gray-700 hover:text-green-600 transition">Solutions</a>
141
+ <a href="#" class="text-gray-700 hover:text-green-600 transition">About</a>
142
+ </div>
143
+ <button class="md:hidden text-gray-700">
144
+ <i class="fas fa-bars text-xl"></i>
145
+ </button>
146
+ </nav>
147
+
148
+ <!-- Hero Section -->
149
+ <div class="relative overflow-hidden">
150
+ <div class="container mx-auto px-6 py-16 md:py-24 flex flex-col md:flex-row items-center">
151
+ <div class="md:w-1/2 mb-12 md:mb-0">
152
+ <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-6">
153
+ Smart <span class="text-green-600">Agricultural</span> Diagnosis
154
+ </h1>
155
+ <p class="text-lg text-gray-600 mb-8">
156
+ Upload images of your crops to detect diseases and pests instantly.
157
+ Get expert recommendations to protect your harvest.
158
+ </p>
159
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
160
+ <button id="uploadTrigger" class="bg-green-600 hover:bg-green-700 text-white font-medium py-3 px-6 rounded-lg transition flex items-center justify-center space-x-2 pulse-animation">
161
+ <i class="fas fa-camera"></i>
162
+ <span>Upload Image</span>
163
+ </button>
164
+ <button class="border border-green-600 text-green-600 hover:bg-green-50 font-medium py-3 px-6 rounded-lg transition flex items-center justify-center space-x-2">
165
+ <i class="fas fa-book"></i>
166
+ <span>Learn More</span>
167
+ </button>
168
+ </div>
169
+ </div>
170
+ <div class="md:w-1/2 flex justify-center">
171
+ <div class="relative w-full max-w-md">
172
+ <div class="glass-card rounded-2xl p-2 floating-animation">
173
+ <img src="https://images.unsplash.com/photo-1500382018108-84409b9278d0?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Farm field" class="rounded-xl w-full">
174
+ </div>
175
+ <div class="absolute -bottom-8 -left-8 bg-white p-4 rounded-xl shadow-lg w-40">
176
+ <div class="flex items-center space-x-2 mb-2">
177
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
178
+ <span class="text-xs font-medium">Healthy</span>
179
+ </div>
180
+ <p class="text-xs text-gray-600">Rice Field - 98% Healthy</p>
181
+ </div>
182
+ <div class="absolute -top-8 -right-8 bg-white p-4 rounded-xl shadow-lg w-40">
183
+ <div class="flex items-center space-x-2 mb-2">
184
+ <div class="w-3 h-3 rounded-full bg-red-500"></div>
185
+ <span class="text-xs font-medium">Disease</span>
186
+ </div>
187
+ <p class="text-xs text-gray-600">Corn Rust - 85% Match</p>
188
+ </div>
189
+ </div>
190
+ </div>
191
+ </div>
192
+
193
+ <!-- Leaf decorations -->
194
+ <img src="https://www.svgrepo.com/show/530597/leaf.svg" class="leaf-decoration leaf-1">
195
+ <img src="https://www.svgrepo.com/show/530597/leaf.svg" class="leaf-decoration leaf-2">
196
+ </div>
197
+
198
+ <!-- Upload Modal -->
199
+ <div id="uploadModal" class="fixed inset-0 z-50 flex items-center justify-center hidden modal-overlay">
200
+ <div class="bg-white rounded-xl shadow-2xl w-full max-w-md mx-4 overflow-hidden">
201
+ <div class="p-6">
202
+ <div class="flex justify-between items-center mb-4">
203
+ <h3 class="text-xl font-bold text-gray-800">Upload Crop Image</h3>
204
+ <button id="closeModal" class="text-gray-500 hover:text-gray-700">
205
+ <i class="fas fa-times"></i>
206
+ </button>
207
+ </div>
208
+
209
+ <div id="uploadArea" class="upload-area rounded-lg p-8 text-center cursor-pointer mb-4">
210
+ <input type="file" id="fileInput" accept="image/*" class="hidden">
211
+ <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-3"></i>
212
+ <p class="text-gray-600 mb-2">Drag & drop your image here</p>
213
+ <p class="text-sm text-gray-500 mb-4">or</p>
214
+ <button class="bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-6 rounded-lg transition">
215
+ Browse Files
216
+ </button>
217
+ <p class="text-xs text-gray-500 mt-4">Supports: JPG, PNG (Max 5MB)</p>
218
+ </div>
219
+
220
+ <div id="previewContainer" class="hidden">
221
+ <div class="border rounded-lg overflow-hidden mb-4 relative">
222
+ <img id="previewImage" class="w-full h-48 object-contain bg-gray-100">
223
+ <div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 text-white p-2 text-sm">
224
+ Selected Image Preview
225
+ </div>
226
+ </div>
227
+ <div class="flex justify-between items-center">
228
+ <button id="cancelUpload" class="text-gray-600 hover:text-gray-800 font-medium">
229
+ Cancel
230
+ </button>
231
+ <button id="analyzeBtn" class="bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-6 rounded-lg transition flex items-center space-x-2">
232
+ <span>Analyze Image</span>
233
+ <i class="fas fa-magnifying-glass"></i>
234
+ </button>
235
+ </div>
236
+ </div>
237
+ </div>
238
+ </div>
239
+ </div>
240
+
241
+ <!-- Analysis Modal -->
242
+ <div id="analysisModal" class="fixed inset-0 z-50 flex items-center justify-center hidden modal-overlay">
243
+ <div class="bg-white rounded-xl shadow-2xl w-full max-w-2xl mx-4 overflow-hidden">
244
+ <div class="p-6">
245
+ <div class="flex justify-between items-center mb-4">
246
+ <h3 class="text-xl font-bold text-gray-800">Analysis Results</h3>
247
+ <button id="closeAnalysisModal" class="text-gray-500 hover:text-gray-700">
248
+ <i class="fas fa-times"></i>
249
+ </button>
250
+ </div>
251
+
252
+ <div class="flex flex-col md:flex-row gap-6 mb-6">
253
+ <div class="md:w-1/2">
254
+ <div class="border rounded-lg overflow-hidden relative">
255
+ <img id="analysisPreview" class="w-full h-64 object-contain bg-gray-100">
256
+ <div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 text-white p-2 text-sm">
257
+ Uploaded Image Analysis
258
+ </div>
259
+ </div>
260
+ </div>
261
+ <div class="md:w-1/2">
262
+ <div class="bg-gray-50 p-4 rounded-lg h-full">
263
+ <h4 class="font-medium text-gray-800 mb-2">Crop Information</h4>
264
+ <div class="grid grid-cols-2 gap-2 text-sm mb-4">
265
+ <div class="text-gray-600">Crop Type:</div>
266
+ <div class="font-medium">Rice</div>
267
+ <div class="text-gray-600">Health Status:</div>
268
+ <div class="font-medium text-red-600">Affected</div>
269
+ <div class="text-gray-600">Confidence:</div>
270
+ <div class="font-medium">92%</div>
271
+ <div class="text-gray-600">Date:</div>
272
+ <div class="font-medium">Today</div>
273
+ </div>
274
+ <div class="border-t pt-3">
275
+ <h4 class="font-medium text-gray-800 mb-2">Image Details</h4>
276
+ <div class="grid grid-cols-2 gap-2 text-sm">
277
+ <div class="text-gray-600">File Name:</div>
278
+ <div class="font-medium truncate" id="fileNameDisplay"></div>
279
+ <div class="text-gray-600">File Size:</div>
280
+ <div class="font-medium" id="fileSizeDisplay"></div>
281
+ <div class="text-gray-600">Upload Time:</div>
282
+ <div class="font-medium" id="uploadTimeDisplay"></div>
283
+ </div>
284
+ </div>
285
+ </div>
286
+ </div>
287
+ </div>
288
+
289
+ <h4 class="font-medium text-gray-800 mb-3">Detected Issues</h4>
290
+ <div id="diseaseResults" class="space-y-3">
291
+ <!-- Results will be inserted here -->
292
+ </div>
293
+
294
+ <div class="mt-6 pt-4 border-t">
295
+ <h4 class="font-medium text-gray-800 mb-3">Recommended Solutions</h4>
296
+ <div class="bg-green-50 p-4 rounded-lg">
297
+ <div class="flex items-start space-x-3">
298
+ <i class="fas fa-lightbulb text-green-600 mt-1"></i>
299
+ <div>
300
+ <p class="text-sm text-gray-800">Apply fungicide containing azoxystrobin at 0.5-1.0 L/ha. Repeat after 15 days if necessary.</p>
301
+ </div>
302
+ </div>
303
+ </div>
304
+ </div>
305
+ </div>
306
+ </div>
307
+ </div>
308
+
309
+ <!-- Loading Modal -->
310
+ <div id="loadingModal" class="fixed inset-0 z-50 flex items-center justify-center hidden modal-overlay">
311
+ <div class="bg-white rounded-xl shadow-2xl p-8 text-center max-w-sm">
312
+ <div class="flex justify-center mb-6">
313
+ <div class="loading-spinner"></div>
314
+ </div>
315
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Analyzing Your Image</h3>
316
+ <p class="text-gray-600 mb-6">Our AI is examining your crop for diseases and pests. This may take a few moments.</p>
317
+ <div class="w-full bg-gray-200 rounded-full h-2">
318
+ <div id="progressBar" class="bg-green-600 h-2 rounded-full" style="width: 0%"></div>
319
+ </div>
320
+ </div>
321
+ </div>
322
+
323
+ <!-- Main Content -->
324
+ <div class="container mx-auto px-6 py-12">
325
+ <div class="text-center mb-16">
326
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Recent Diagnoses</h2>
327
+ <p class="text-gray-600 max-w-2xl mx-auto">
328
+ Below are some of the most common agricultural issues we've recently identified.
329
+ Upload your own images to get personalized analysis.
330
+ </p>
331
+ </div>
332
+
333
+ <div id="diseaseGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
334
+ <!-- Disease cards will be inserted here -->
335
+ </div>
336
+ </div>
337
+
338
+ <!-- Footer -->
339
+ <footer class="bg-gray-900 text-white py-12">
340
+ <div class="container mx-auto px-6">
341
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
342
+ <div>
343
+ <div class="flex items-center space-x-2 mb-4">
344
+ <i class="fas fa-leaf text-2xl text-green-400"></i>
345
+ <span class="text-xl font-bold">AgriScan</span>
346
+ </div>
347
+ <p class="text-gray-400">
348
+ Advanced agricultural diagnosis system to help farmers protect their crops.
349
+ </p>
350
+ </div>
351
+ <div>
352
+ <h4 class="text-lg font-semibold mb-4">Quick Links</h4>
353
+ <ul class="space-y-2">
354
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li>
355
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Diagnosis</a></li>
356
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Solutions</a></li>
357
+ <li><a href="#" class="text-gray-400 hover:text-white transition">About Us</a></li>
358
+ </ul>
359
+ </div>
360
+ <div>
361
+ <h4 class="text-lg font-semibold mb-4">Resources</h4>
362
+ <ul class="space-y-2">
363
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
364
+ <li><a href="#" class="text-gray-400 hover:text-white transition">FAQs</a></li>
365
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Research</a></li>
366
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li>
367
+ </ul>
368
+ </div>
369
+ <div>
370
+ <h4 class="text-lg font-semibold mb-4">Subscribe</h4>
371
+ <p class="text-gray-400 mb-4">
372
+ Get the latest agricultural tips and updates.
373
+ </p>
374
+ <div class="flex">
375
+ <input type="email" placeholder="Your email" class="bg-gray-800 text-white px-4 py-2 rounded-l-lg focus:outline-none w-full">
376
+ <button class="bg-green-600 hover:bg-green-700 px-4 py-2 rounded-r-lg">
377
+ <i class="fas fa-paper-plane"></i>
378
+ </button>
379
+ </div>
380
+ </div>
381
+ </div>
382
+ <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400">
383
+ <p>&copy; 2023 AgriScan. All rights reserved.</p>
384
+ </div>
385
+ </div>
386
+ </footer>
387
+
388
+ <script>
389
+ document.addEventListener('DOMContentLoaded', function() {
390
+ // DOM Elements
391
+ const uploadTrigger = document.getElementById('uploadTrigger');
392
+ const uploadModal = document.getElementById('uploadModal');
393
+ const closeModal = document.getElementById('closeModal');
394
+ const uploadArea = document.getElementById('uploadArea');
395
+ const fileInput = document.getElementById('fileInput');
396
+ const previewContainer = document.getElementById('previewContainer');
397
+ const previewImage = document.getElementById('previewImage');
398
+ const cancelUpload = document.getElementById('cancelUpload');
399
+ const analyzeBtn = document.getElementById('analyzeBtn');
400
+ const loadingModal = document.getElementById('loadingModal');
401
+ const progressBar = document.getElementById('progressBar');
402
+ const analysisModal = document.getElementById('analysisModal');
403
+ const closeAnalysisModal = document.getElementById('closeAnalysisModal');
404
+ const analysisPreview = document.getElementById('analysisPreview');
405
+ const diseaseResults = document.getElementById('diseaseResults');
406
+ const diseaseGrid = document.getElementById('diseaseGrid');
407
+
408
+ // Sample data for diseases
409
+ const sampleDiseases = [
410
+ {
411
+ name: "Rice Blast",
412
+ nameCn: "稻瘟病",
413
+ severity: "high",
414
+ severityText: "严重 / Severe",
415
+ description: "Fungal disease causing lesions on leaves, stems and panicles.",
416
+ descriptionCn: "真菌病害，导致叶片、茎秆和穗部出现病斑。",
417
+ image: "https://images.unsplash.com/photo-1591462653185-2ba301e3d859?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60",
418
+ solution: "Use resistant varieties and apply fungicides like tricyclazole."
419
+ },
420
+ {
421
+ name: "Corn Rust",
422
+ nameCn: "玉米锈病",
423
+ severity: "medium",
424
+ severityText: "中等 / Moderate",
425
+ description: "Orange pustules on leaves that reduce photosynthesis.",
426
+ descriptionCn: "叶片上出现橙色脓疱，降低光合作用。",
427
+ image: "https://images.unsplash.com/photo-1596422846543-75c6fc8cd896?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60",
428
+ solution: "Apply fungicides containing triazole or strobilurin."
429
+ },
430
+ {
431
+ name: "Wheat Scab",
432
+ nameCn: "小麦赤霉病",
433
+ severity: "high",
434
+ severityText: "严重 / Severe",
435
+ description: "Causes bleaching of spikelets and shriveled grains.",
436
+ descriptionCn: "导致小穗白化和籽粒皱缩。",
437
+ image: "https://images.unsplash.com/photo-1518977676601-b53f82aba655?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60",
438
+ solution: "Use resistant varieties and apply fungicides at flowering."
439
+ },
440
+ {
441
+ name: "Aphids",
442
+ nameCn: "蚜虫",
443
+ severity: "medium",
444
+ severityText: "中等 / Moderate",
445
+ description: "Small sap-sucking insects that transmit plant viruses.",
446
+ descriptionCn: "吸食汁液的小昆虫，传播植物病毒。",
447
+ image: "https://images.unsplash.com/photo-1586007553955-1c0a7a5b0b8e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60",
448
+ solution: "Use insecticidal soaps or neonicotinoid insecticides."
449
+ },
450
+ {
451
+ name: "Spider Mites",
452
+ nameCn: "红蜘蛛",
453
+ severity: "low",
454
+ severityText: "轻微 / Mild",
455
+ description: "Tiny mites that cause stippling and webbing on leaves.",
456
+ descriptionCn: "微小螨虫，导致叶片出现点刻和网状物。",
457
+ image: "https://images.unsplash.com/photo-1586007553955-1c0a7a5b0b8e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60",
458
+ solution: "Use miticides and increase humidity to discourage mites."
459
+ },
460
+ {
461
+ name: "Powdery Mildew",
462
+ nameCn: "白粉病",
463
+ severity: "low",
464
+ severityText: "轻微 / Mild",
465
+ description: "White powdery growth on leaves and stems.",
466
+ descriptionCn: "叶片和茎秆上出现白色粉状生长物。",
467
+ image: "https://images.unsplash.com/photo-1586007553955-1c0a7a5b0b8e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60",
468
+ solution: "Apply sulfur or potassium bicarbonate fungicides."
469
+ }
470
+ ];
471
+
472
+ // Initialize disease grid
473
+ function initDiseaseGrid() {
474
+ diseaseGrid.innerHTML = '';
475
+ sampleDiseases.forEach(disease => {
476
+ const severityClass = disease.severity === 'high' ? 'severity-high' :
477
+ disease.severity === 'medium' ? 'severity-medium' : 'severity-low';
478
+
479
+ const card = document.createElement('div');
480
+ card.className = `disease-card bg-white rounded-xl shadow-md overflow-hidden ${severityClass}`;
481
+ card.innerHTML = `
482
+ <div class="h-48 overflow-hidden">
483
+ <img src="${disease.image}" alt="${disease.name}" class="w-full h-full object-cover">
484
+ </div>
485
+ <div class="p-6">
486
+ <div class="flex justify-between items-start mb-2">
487
+ <h3 class="font-bold text-lg">${disease.name}</h3>
488
+ <span class="text-xs px-2 py-1 rounded-full ${
489
+ disease.severity === 'high' ? 'bg-red-100 text-red-800' :
490
+ disease.severity === 'medium' ? 'bg-yellow-100 text-yellow-800' : 'bg-green-100 text-green-800'
491
+ }">
492
+ ${disease.severityText}
493
+ </span>
494
+ </div>
495
+ <p class="text-gray-600 text-sm mb-4">${disease.description}</p>
496
+ <button class="text-green-600 hover:text-green-800 font-medium text-sm flex items-center">
497
+ View details
498
+ <i class="fas fa-chevron-right ml-1 text-xs"></i>
499
+ </button>
500
+ </div>
501
+ `;
502
+
503
+ card.addEventListener('click', () => {
504
+ showDiseaseDetails(disease);
505
+ });
506
+
507
+ diseaseGrid.appendChild(card);
508
+ });
509
+ }
510
+
511
+ // Show disease details in modal
512
+ function showDiseaseDetails(disease) {
513
+ diseaseResults.innerHTML = `
514
+ <div class="disease-card bg-white border border-gray-200 rounded-lg p-4 flex items-start ${
515
+ disease.severity === 'high' ? 'severity-high' :
516
+ disease.severity === 'medium' ? 'severity-medium' : 'severity-low'
517
+ }">
518
+ <div class="w-16 h-16 rounded-lg overflow-hidden mr-4">
519
+ <img src="${disease.image}" alt="${disease.name}" class="w-full h-full object-cover">
520
+ </div>
521
+ <div>
522
+ <div class="flex justify-between items-start mb-1">
523
+ <h4 class="font-bold">${disease.name} / ${disease.nameCn}</h4>
524
+ <span class="text-xs px-2 py-1 rounded-full ${
525
+ disease.severity === 'high' ? 'bg-red-100 text-red-800' :
526
+ disease.severity === 'medium' ? 'bg-yellow-100 text-yellow-800' : 'bg-green-100 text-green-800'
527
+ }">
528
+ ${disease.severityText}
529
+ </span>
530
+ </div>
531
+ <p class="text-sm text-gray-600 mb-2">${disease.description}</p>
532
+ <p class="text-sm text-gray-600">${disease.descriptionCn}</p>
533
+ </div>
534
+ </div>
535
+ `;
536
+
537
+ analysisPreview.src = disease.image;
538
+ analysisModal.classList.remove('hidden');
539
+ }
540
+
541
+ // Modal controls
542
+ uploadTrigger.addEventListener('click', () => {
543
+ uploadModal.classList.remove('hidden');
544
+ });
545
+
546
+ closeModal.addEventListener('click', () => {
547
+ uploadModal.classList.add('hidden');
548
+ previewContainer.classList.add('hidden');
549
+ uploadArea.classList.remove('hidden');
550
+ });
551
+
552
+ closeAnalysisModal.addEventListener('click', () => {
553
+ analysisModal.classList.add('hidden');
554
+ });
555
+
556
+ // File upload handling
557
+ uploadArea.addEventListener('click', () => {
558
+ fileInput.click();
559
+ });
560
+
561
+ uploadArea.addEventListener('dragover', (e) => {
562
+ e.preventDefault();
563
+ uploadArea.classList.add('active');
564
+ });
565
+
566
+ uploadArea.addEventListener('dragleave', () => {
567
+ uploadArea.classList.remove('active');
568
+ });
569
+
570
+ uploadArea.addEventListener('drop', (e) => {
571
+ e.preventDefault();
572
+ uploadArea.classList.remove('active');
573
+
574
+ if (e.dataTransfer.files.length) {
575
+ fileInput.files = e.dataTransfer.files;
576
+ handleFileSelect();
577
+ }
578
+ });
579
+
580
+ fileInput.addEventListener('change', handleFileSelect);
581
+
582
+ function handleFileSelect() {
583
+ if (fileInput.files && fileInput.files[0]) {
584
+ const reader = new FileReader();
585
+
586
+ reader.onload = function(e) {
587
+ previewImage.src = e.target.result;
588
+ uploadArea.classList.add('hidden');
589
+ previewContainer.classList.remove('hidden');
590
+ };
591
+
592
+ reader.readAsDataURL(fileInput.files[0]);
593
+ }
594
+ }
595
+
596
+ cancelUpload.addEventListener('click', () => {
597
+ previewContainer.classList.add('hidden');
598
+ uploadArea.classList.remove('hidden');
599
+ fileInput.value = '';
600
+ });
601
+
602
+ analyzeBtn.addEventListener('click', () => {
603
+ uploadModal.classList.add('hidden');
604
+ loadingModal.classList.remove('hidden');
605
+
606
+ // Simulate analysis progress
607
+ let progress = 0;
608
+ const interval = setInterval(() => {
609
+ progress += Math.random() * 10;
610
+ if (progress > 100) progress = 100;
611
+ progressBar.style.width = `${progress}%`;
612
+
613
+ if (progress === 100) {
614
+ clearInterval(interval);
615
+ setTimeout(() => {
616
+ loadingModal.classList.add('hidden');
617
+ showAnalysisResults();
618
+ }, 500);
619
+ }
620
+ }, 300);
621
+ });
622
+
623
+ function showAnalysisResults() {
624
+ // Randomly select a disease from the sample data
625
+ const randomDisease = sampleDiseases[Math.floor(Math.random() * sampleDiseases.length)];
626
+ showDiseaseDetails(randomDisease);
627
+ analysisPreview.src = previewImage.src;
628
+
629
+ // Display file information
630
+ const file = fileInput.files[0];
631
+ document.getElementById('fileNameDisplay').textContent = file.name;
632
+ document.getElementById('fileSizeDisplay').textContent = `${(file.size / 1024).toFixed(1)} KB`;
633
+ document.getElementById('uploadTimeDisplay').textContent = new Date().toLocaleTimeString();
634
+ }
635
+
636
+ // Initialize the page
637
+ initDiseaseGrid();
638
+ });
639
+ </script>
640
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Yango1/https-huggingface-co-spaces-yango1-cropspest" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
641
+ </html>