krushimitravit commited on
Commit
4df4df5
·
verified ·
1 Parent(s): 0169ea3

Upload 8 files

Browse files
.gitattributes CHANGED
@@ -33,3 +33,5 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
33
  *.zip filter=lfs diff=lfs merge=lfs -text
34
  *.zst filter=lfs diff=lfs merge=lfs -text
35
  *tfevents* filter=lfs diff=lfs merge=lfs -text
 
 
 
33
  *.zip filter=lfs diff=lfs merge=lfs -text
34
  *.zst filter=lfs diff=lfs merge=lfs -text
35
  *tfevents* filter=lfs diff=lfs merge=lfs -text
36
+ final_crop_data.csv filter=lfs diff=lfs merge=lfs -text
37
+ static/img1.jpg filter=lfs diff=lfs merge=lfs -text
Dockerfile ADDED
@@ -0,0 +1,19 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ # Use an official Python runtime as a parent image
2
+ FROM python:3.9-slim
3
+
4
+ # Set the working directory
5
+ WORKDIR /app
6
+
7
+ # Copy the application files to the container
8
+ COPY . /app
9
+
10
+ # Install Python dependencies
11
+ RUN pip install --no-cache-dir -r requirements.txt
12
+
13
+ RUN apt-get update && apt-get install -y libgomp1
14
+
15
+ # Expose the Flask port (Hugging Face Spaces uses port 7860 by default)
16
+ EXPOSE 7860
17
+
18
+ # Command to run the Flask app
19
+ CMD ["python", "app.py"]
app.py ADDED
@@ -0,0 +1,75 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ from flask import Flask, request, render_template, jsonify
2
+ import joblib
3
+ import pandas as pd
4
+
5
+ app = Flask(__name__)
6
+
7
+ # Load the trained LightGBM model
8
+ lgb_model = joblib.load('lgb_model_cropseason.pkl')
9
+
10
+ url='https://drive.google.com/file/d/1_vd4HISZB2h2--CiXKezeWDXHHo2fY23/view?usp=sharing'
11
+ data = pd.read_csv('https://drive.usercontent.google.com/download?id={}&export=download&authuser=0&confirm=t'.format(url.split('/')[-2]))
12
+
13
+ # Extract unique values for states, districts, crops, and seasons
14
+ unique_states = data['State'].unique()
15
+ unique_crops = data['Crop'].unique()
16
+
17
+ # Descriptions for each cropping season
18
+ season_descriptions = {
19
+ 'Kharif': 'Kharif season occurs from June to October, associated with the monsoon. Crops are usually sown at the start of the rainy season.',
20
+ 'Rabi': 'Rabi season spans from October to March, during the winter cropping season, with crops like wheat and barley.',
21
+ 'Summer': 'Summer season is from April to June, suitable for crops that need warmer temperatures.',
22
+ 'Winter': 'Winter cropping season occurs from November to February, including cold-weather crops.',
23
+ 'Whole Year': 'Crops can be grown throughout the year, without seasonal limitations.',
24
+ 'Autumn': 'Autumn season, from September to November, accommodates crops suited to a post-monsoon environment.'
25
+ }
26
+
27
+ @app.route('/')
28
+ def home():
29
+ return render_template('index.html', states=unique_states, crops=unique_crops, seasons=season_descriptions.keys())
30
+
31
+ @app.route('/filter_districts', methods=['POST'])
32
+ def filter_districts():
33
+ state = request.form.get('state')
34
+ filtered_districts = data[data['State'] == state]['District'].unique()
35
+ return jsonify({'districts': list(filtered_districts)})
36
+
37
+ @app.route('/predict', methods=['POST'])
38
+ def predict():
39
+ state = request.form.get('state')
40
+ district = request.form.get('district')
41
+ crop_year = int(request.form.get('crop_year'))
42
+ crop = request.form.get('crop')
43
+ area = float(request.form.get('area'))
44
+
45
+ input_data = pd.DataFrame({
46
+ 'State': [state],
47
+ 'District': [district],
48
+ 'Crop_Year': [crop_year],
49
+ 'Crop': [crop],
50
+ 'Area': [area]
51
+ })
52
+
53
+ input_data['State'] = input_data['State'].astype('category')
54
+ input_data['District'] = input_data['District'].astype('category')
55
+ input_data['Crop'] = input_data['Crop'].astype('category')
56
+
57
+ predicted_season = lgb_model.predict(input_data)[0]
58
+
59
+ # Debug: print the predicted season to console
60
+ print(f"Predicted Season: {predicted_season}")
61
+
62
+ # Ensure the predicted season is treated as a string for matching
63
+ predicted_season_str = str(predicted_season) # Ensure it's a stri
64
+
65
+ # Check if the predicted season is in the descriptions
66
+ if predicted_season in season_descriptions:
67
+ season_description = season_descriptions[predicted_season]
68
+ else:
69
+ season_description = 'No description available'
70
+
71
+ return render_template('index.html', states=unique_states, crops=unique_crops, seasons=season_descriptions.keys(),
72
+ predicted_season=predicted_season, season_description=season_description)
73
+
74
+ if __name__ == '__main__':
75
+ app.run(port=7860,host='0.0.0.0')
final_crop_data.csv ADDED
@@ -0,0 +1,3 @@
 
 
 
 
1
+ version https://git-lfs.github.com/spec/v1
2
+ oid sha256:83c54ae9f15d0d1aa3ddc838f73545f5cacad2f11013c3a011f4c0e72427c882
3
+ size 22400747
lgb_model_cropseason.pkl ADDED
@@ -0,0 +1,3 @@
 
 
 
 
1
+ version https://git-lfs.github.com/spec/v1
2
+ oid sha256:ec9b8113287f7e66b67af3f2674c85db73d6129adf0ead3abdf2bb1eb90ae83c
3
+ size 2560469
requirements.txt ADDED
@@ -0,0 +1,6 @@
 
 
 
 
 
 
 
1
+ gunicorn
2
+ flask
3
+ pandas
4
+ joblib==1.4.2
5
+ scikit-learn==1.5.2
6
+ lightgbm
static/img1.jpg ADDED

Git LFS Details

  • SHA256: c8ff94abaff6924d4eacc0b8bfea07c18ee7ad337d5e1b9cb2c3e0ae1b282d48
  • Pointer size: 131 Bytes
  • Size of remote file: 242 kB
static/style.css ADDED
@@ -0,0 +1,406 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* ============================================
2
+ OPTIMAL CROP SEASON PREDICTION - STYLE GUIDE
3
+ Nature-Professional Theme
4
+ ============================================ */
5
+
6
+ /* ============================================
7
+ 1. CSS VARIABLES - COLOR SYSTEM
8
+ ============================================ */
9
+ :root {
10
+ /* Primary Colors */
11
+ --color-deep-green: #1a5d3a;
12
+ --color-accent-green: #198754;
13
+ --color-darker-accent: #143d2e;
14
+
15
+ /* Neutral Colors */
16
+ --color-background: #f8f9fa;
17
+ --color-surface: #ffffff;
18
+ --color-text-dark: #212529;
19
+ --color-text-muted: #6c757d;
20
+ --color-border: #dee2e6;
21
+
22
+ /* Semantic Colors */
23
+ --color-success: #198754;
24
+ --color-success-light: #e8f5e9;
25
+
26
+ /* Spacing */
27
+ --spacing-xs: 0.5rem;
28
+ --spacing-sm: 1rem;
29
+ --spacing-md: 1.5rem;
30
+ --spacing-lg: 2rem;
31
+ --spacing-xl: 3rem;
32
+
33
+ /* Border Radius */
34
+ --radius-sm: 8px;
35
+ --radius-md: 12px;
36
+ --radius-lg: 20px;
37
+ --radius-pill: 50px;
38
+
39
+ /* Shadows */
40
+ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
41
+ --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
42
+ --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.08);
43
+ --shadow-focus: 0 0 0 4px rgba(25, 135, 84, 0.1);
44
+ }
45
+
46
+ /* ============================================
47
+ 2. GLOBAL STYLES
48
+ ============================================ */
49
+ * {
50
+ margin: 0;
51
+ padding: 0;
52
+ box-sizing: border-box;
53
+ }
54
+
55
+ body {
56
+ font-family: 'Outfit', sans-serif;
57
+ font-weight: 400;
58
+ background-color: var(--color-background);
59
+ color: var(--color-text-dark);
60
+ line-height: 1.6;
61
+ min-height: 100vh;
62
+ }
63
+
64
+ /* ============================================
65
+ 3. TYPOGRAPHY
66
+ ============================================ */
67
+ h1,
68
+ h2,
69
+ h3,
70
+ h4,
71
+ h5,
72
+ h6 {
73
+ font-weight: 700;
74
+ color: var(--color-text-dark);
75
+ line-height: 1.2;
76
+ }
77
+
78
+ h1 {
79
+ font-size: 2.5rem;
80
+ font-weight: 700;
81
+ }
82
+
83
+ h2 {
84
+ font-size: 2rem;
85
+ font-weight: 600;
86
+ }
87
+
88
+ h4 {
89
+ font-size: 1.25rem;
90
+ font-weight: 600;
91
+ }
92
+
93
+ label {
94
+ font-weight: 500;
95
+ color: var(--color-text-dark);
96
+ margin-bottom: var(--spacing-xs);
97
+ display: block;
98
+ }
99
+
100
+ /* ============================================
101
+ 4. HEADER - CURVED BOTTOM HERO
102
+ ============================================ */
103
+ .hero-header {
104
+ background: var(--color-deep-green);
105
+ color: white;
106
+ padding: var(--spacing-xl) var(--spacing-md) 5rem;
107
+ border-bottom-left-radius: 50% 20px;
108
+ border-bottom-right-radius: 50% 20px;
109
+ text-align: center;
110
+ position: relative;
111
+ margin-bottom: 3rem;
112
+ }
113
+
114
+ .hero-header h1 {
115
+ color: white;
116
+ margin-bottom: var(--spacing-sm);
117
+ font-size: 2.5rem;
118
+ }
119
+
120
+ .hero-header p {
121
+ color: rgba(255, 255, 255, 0.9);
122
+ font-size: 1.1rem;
123
+ font-weight: 300;
124
+ max-width: 600px;
125
+ margin: 0 auto;
126
+ }
127
+
128
+ /* ============================================
129
+ 5. CARDS
130
+ ============================================ */
131
+ .card-floating {
132
+ background: var(--color-surface);
133
+ border-radius: var(--radius-lg);
134
+ box-shadow: var(--shadow-lg);
135
+ padding: var(--spacing-xl);
136
+ position: relative;
137
+ z-index: 10;
138
+ border: 3px solid var(--color-accent-green);
139
+ }
140
+
141
+ .card-image {
142
+ background: var(--color-surface);
143
+ border-radius: var(--radius-lg);
144
+ box-shadow: var(--shadow-md);
145
+ overflow: hidden;
146
+ height: 100%;
147
+ display: flex;
148
+ align-items: center;
149
+ justify-content: center;
150
+ }
151
+
152
+ .card-image img {
153
+ width: 100%;
154
+ height: 100%;
155
+ object-fit: cover;
156
+ }
157
+
158
+ /* ============================================
159
+ 6. FORM ELEMENTS
160
+ ============================================ */
161
+ .form-group {
162
+ margin-bottom: var(--spacing-md);
163
+ }
164
+
165
+ .form-label-icon {
166
+ display: flex;
167
+ align-items: center;
168
+ gap: var(--spacing-xs);
169
+ margin-bottom: var(--spacing-xs);
170
+ font-weight: 500;
171
+ color: var(--color-text-dark);
172
+ }
173
+
174
+ .form-label-icon i {
175
+ color: var(--color-accent-green);
176
+ font-size: 1.1rem;
177
+ }
178
+
179
+ .form-control {
180
+ width: 100%;
181
+ padding: 0.75rem 1rem;
182
+ background: var(--color-background);
183
+ border: 1px solid var(--color-border);
184
+ border-radius: var(--radius-sm);
185
+ font-family: 'Outfit', sans-serif;
186
+ font-size: 1rem;
187
+ color: var(--color-text-dark);
188
+ transition: all 0.3s ease;
189
+ }
190
+
191
+ .form-control:focus {
192
+ outline: none;
193
+ background: var(--color-surface);
194
+ border-color: var(--color-accent-green);
195
+ box-shadow: var(--shadow-focus);
196
+ }
197
+
198
+ .form-control::placeholder {
199
+ color: var(--color-text-muted);
200
+ }
201
+
202
+ /* ============================================
203
+ 7. BUTTONS
204
+ ============================================ */
205
+ .btn {
206
+ padding: 0.875rem 2rem;
207
+ font-family: 'Outfit', sans-serif;
208
+ font-weight: 500;
209
+ font-size: 1rem;
210
+ border: none;
211
+ border-radius: var(--radius-sm);
212
+ cursor: pointer;
213
+ transition: all 0.3s ease;
214
+ display: inline-flex;
215
+ align-items: center;
216
+ gap: var(--spacing-xs);
217
+ text-decoration: none;
218
+ }
219
+
220
+ .btn-primary {
221
+ background: var(--color-deep-green);
222
+ color: white;
223
+ }
224
+
225
+ .btn-primary:hover {
226
+ background: var(--color-darker-accent);
227
+ transform: translateY(-2px);
228
+ box-shadow: var(--shadow-md);
229
+ }
230
+
231
+ .btn-primary:active {
232
+ transform: translateY(0);
233
+ }
234
+
235
+ .btn-block {
236
+ width: 100%;
237
+ justify-content: center;
238
+ }
239
+
240
+ .btn i {
241
+ font-size: 1.2rem;
242
+ }
243
+
244
+ /* ============================================
245
+ 8. RESULT BOX
246
+ ============================================ */
247
+ .result-box {
248
+ margin-top: var(--spacing-lg);
249
+ padding: var(--spacing-lg);
250
+ background: var(--color-success-light);
251
+ border: 2px solid var(--color-accent-green);
252
+ border-radius: var(--radius-md);
253
+ box-shadow: var(--shadow-sm);
254
+ }
255
+
256
+ .result-box h4 {
257
+ color: var(--color-deep-green);
258
+ margin-bottom: var(--spacing-sm);
259
+ display: flex;
260
+ align-items: center;
261
+ gap: var(--spacing-sm);
262
+ }
263
+
264
+ .result-box h4 i {
265
+ color: var(--color-accent-green);
266
+ }
267
+
268
+ .season-badge {
269
+ display: inline-block;
270
+ padding: 0.5rem 1.5rem;
271
+ background: var(--color-accent-green);
272
+ color: white;
273
+ border-radius: var(--radius-pill);
274
+ font-weight: 600;
275
+ font-size: 1.1rem;
276
+ margin-left: var(--spacing-sm);
277
+ }
278
+
279
+ .result-box p {
280
+ color: var(--color-text-dark);
281
+ line-height: 1.8;
282
+ margin-top: var(--spacing-sm);
283
+ }
284
+
285
+ /* ============================================
286
+ 9. PROCESS VISUAL (3-STEP)
287
+ ============================================ */
288
+ .process-steps {
289
+ display: flex;
290
+ justify-content: center;
291
+ gap: var(--spacing-xl);
292
+ margin-bottom: var(--spacing-xl);
293
+ padding: 0 var(--spacing-md);
294
+ }
295
+
296
+ .process-step {
297
+ text-align: center;
298
+ flex: 1;
299
+ max-width: 200px;
300
+ }
301
+
302
+ .process-icon {
303
+ width: 80px;
304
+ height: 80px;
305
+ background: var(--color-surface);
306
+ border-radius: 50%;
307
+ display: flex;
308
+ align-items: center;
309
+ justify-content: center;
310
+ margin: 0 auto var(--spacing-sm);
311
+ box-shadow: var(--shadow-md);
312
+ transition: all 0.3s ease;
313
+ }
314
+
315
+ .process-icon i {
316
+ font-size: 2rem;
317
+ color: var(--color-accent-green);
318
+ }
319
+
320
+ .process-step:hover .process-icon {
321
+ transform: translateY(-5px);
322
+ box-shadow: var(--shadow-lg);
323
+ }
324
+
325
+ .process-step h5 {
326
+ font-size: 1rem;
327
+ font-weight: 600;
328
+ color: var(--color-text-dark);
329
+ margin-bottom: 0.25rem;
330
+ }
331
+
332
+ .process-step p {
333
+ font-size: 0.875rem;
334
+ color: var(--color-text-muted);
335
+ font-weight: 300;
336
+ }
337
+
338
+ /* ============================================
339
+ 10. UTILITIES
340
+ ============================================ */
341
+ .container-custom {
342
+ max-width: 1200px;
343
+ margin: 0 auto;
344
+ padding: 0 var(--spacing-md);
345
+ }
346
+
347
+ .mt-4 {
348
+ margin-top: var(--spacing-lg);
349
+ }
350
+
351
+ .mb-4 {
352
+ margin-bottom: var(--spacing-lg);
353
+ }
354
+
355
+ /* ============================================
356
+ 11. RESPONSIVE DESIGN
357
+ ============================================ */
358
+ @media (max-width: 768px) {
359
+ .hero-header h1 {
360
+ font-size: 2rem;
361
+ }
362
+
363
+ .hero-header p {
364
+ font-size: 1rem;
365
+ }
366
+
367
+ .card-floating {
368
+ padding: var(--spacing-lg);
369
+ }
370
+
371
+ .process-steps {
372
+ flex-direction: column;
373
+ gap: var(--spacing-md);
374
+ }
375
+
376
+ .process-step {
377
+ max-width: 100%;
378
+ }
379
+
380
+ .btn {
381
+ padding: 0.75rem 1.5rem;
382
+ }
383
+ }
384
+
385
+ /* ============================================
386
+ 12. ANIMATIONS
387
+ ============================================ */
388
+ @keyframes fadeIn {
389
+ from {
390
+ opacity: 0;
391
+ transform: translateY(20px);
392
+ }
393
+
394
+ to {
395
+ opacity: 1;
396
+ transform: translateY(0);
397
+ }
398
+ }
399
+
400
+ .card-floating {
401
+ animation: fadeIn 0.6s ease-out;
402
+ }
403
+
404
+ .result-box {
405
+ animation: fadeIn 0.4s ease-out;
406
+ }
templates/index.html ADDED
@@ -0,0 +1,173 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Optimal Crop Season Prediction</title>
7
+
8
+ <!-- Google Fonts - Outfit -->
9
+ <link rel="preconnect" href="https://fonts.googleapis.com">
10
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
+ <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
12
+
13
+ <!-- Bootstrap CSS -->
14
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
15
+
16
+ <!-- Bootstrap Icons -->
17
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
18
+
19
+ <!-- Custom CSS -->
20
+ <link rel="stylesheet" href="/static/style.css">
21
+
22
+ <!-- jQuery -->
23
+ <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
24
+ </head>
25
+ <body>
26
+
27
+ <!-- Curved Bottom Hero Header -->
28
+ <header class="hero-header">
29
+ <h1><i class="bi bi-calendar-check"></i> Optimal Crop Season Prediction</h1>
30
+ <p>Predict the best cropping season for your agricultural needs using advanced analytics</p>
31
+ </header>
32
+
33
+ <!-- Process Steps Visual -->
34
+
35
+
36
+ <!-- Main Content -->
37
+ <div class="container-custom">
38
+ <div class="row g-4">
39
+ <!-- Form Card -->
40
+ <div class="col-lg-7">
41
+ <div class="card-floating">
42
+ <h2 class="mb-4">Crop Season Predictor</h2>
43
+
44
+ <form id="prediction-form" method="POST" action="/predict">
45
+ <!-- State Selection -->
46
+ <div class="form-group">
47
+ <label class="form-label-icon">
48
+ <i class="bi bi-map"></i>
49
+ <span>State</span>
50
+ </label>
51
+ <select id="state" name="state" class="form-control" required>
52
+ <option value="">Select State</option>
53
+ {% for state in states %}
54
+ <option value="{{ state }}">{{ state }}</option>
55
+ {% endfor %}
56
+ </select>
57
+ </div>
58
+
59
+ <!-- District Selection -->
60
+ <div class="form-group">
61
+ <label class="form-label-icon">
62
+ <i class="bi bi-pin-map-fill"></i>
63
+ <span>District</span>
64
+ </label>
65
+ <select id="district" name="district" class="form-control" required>
66
+ <option value="">Select District</option>
67
+ </select>
68
+ </div>
69
+
70
+ <!-- Crop Year -->
71
+ <div class="form-group">
72
+ <label class="form-label-icon">
73
+ <i class="bi bi-calendar3"></i>
74
+ <span>Cropping Year (2024 & onwards)</span>
75
+ </label>
76
+ <input type="number" id="crop_year" name="crop_year" class="form-control" min="2000" placeholder="e.g., 2024" required>
77
+ </div>
78
+
79
+ <!-- Crop Type -->
80
+ <div class="form-group">
81
+ <label class="form-label-icon">
82
+ <i class="bi bi-flower3"></i>
83
+ <span>Crop Type</span>
84
+ </label>
85
+ <select id="crop" name="crop" class="form-control" required>
86
+ {% for crop in crops %}
87
+ <option value="{{ crop }}">{{ crop }}</option>
88
+ {% endfor %}
89
+ </select>
90
+ </div>
91
+
92
+ <!-- Area -->
93
+ <div class="form-group">
94
+ <label class="form-label-icon">
95
+ <i class="bi bi-rulers"></i>
96
+ <span>Area (in hectares)</span>
97
+ </label>
98
+ <input type="number" id="area" name="area" class="form-control" step="0.01" placeholder="e.g., 10.5" required>
99
+ </div>
100
+
101
+ <!-- Submit Button -->
102
+ <button type="submit" class="btn btn-primary btn-block">
103
+ <i class="bi bi-search"></i>
104
+ Predict Season
105
+ </button>
106
+ </form>
107
+
108
+ <!-- Results Display -->
109
+ {% if predicted_season %}
110
+ <div class="result-box">
111
+ <h4>
112
+ <i class="bi bi-check-circle-fill"></i>
113
+ Predicted Optimal Cropping Season:
114
+ <span class="season-badge" id="predicted-season">{{ predicted_season }}</span>
115
+ </h4>
116
+ <p id="season-description">{{ season_description }}</p>
117
+ </div>
118
+ {% endif %}
119
+ </div>
120
+ </div>
121
+
122
+ <!-- Image Card -->
123
+ <div class="col-lg-5">
124
+ <div class="card-image">
125
+ <img src="/static/img1.jpg" alt="Agricultural Field" class="img-fluid">
126
+ </div>
127
+ </div>
128
+ </div>
129
+ </div>
130
+
131
+ <!-- JavaScript -->
132
+ <script>
133
+ $(document).ready(function(){
134
+ // District filtering based on state selection
135
+ $('#state').change(function(){
136
+ const state = $(this).val();
137
+ $.ajax({
138
+ url: '/filter_districts',
139
+ method: 'POST',
140
+ data: { state: state },
141
+ success: function(response) {
142
+ $('#district').empty().append('<option value="">Select District</option>');
143
+ response.districts.forEach(function(district) {
144
+ $('#district').append('<option value="'+district+'">'+district+'</option>');
145
+ });
146
+ }
147
+ });
148
+ });
149
+
150
+ // Hardcoded descriptions for each season
151
+ const seasonDescriptions = {
152
+ 'Kharif': 'Kharif season occurs from June to October, associated with the monsoon. Crops are usually sown at the start of the rainy season.',
153
+ 'Rabi': 'Rabi season spans from October to March, during the winter cropping season, with crops like wheat and barley.',
154
+ 'Summer': 'Summer season is from April to June, suitable for crops that need warmer temperatures.',
155
+ 'Winter': 'Winter cropping season occurs from November to February, including cold-weather crops.',
156
+ 'Whole Year': 'Crops can be grown throughout the year, without seasonal limitations.',
157
+ 'Autumn': 'Autumn season, from September to November, accommodates crops suited to a post-monsoon environment.'
158
+ };
159
+
160
+ // Show description based on predicted season
161
+ const predictedSeasonElement = document.getElementById('predicted-season');
162
+ if (predictedSeasonElement) {
163
+ const predictedSeason = predictedSeasonElement.innerText.trim();
164
+ const descriptionElement = document.getElementById('season-description');
165
+ if (descriptionElement && predictedSeason) {
166
+ descriptionElement.innerText = seasonDescriptions[predictedSeason] || 'No description available';
167
+ }
168
+ }
169
+ });
170
+ </script>
171
+
172
+ </body>
173
+ </html>