Hugging Face's logo

Spaces:
rajkhanke
/
market_price_analyzer
Sleeping

App Files Community
6

Update templates/index.html

#2
by sikeaditya - opened
base: refs/heads/main
←
from: refs/pr/2
Discussion Files changed
+787
-224
Files changed (1) hide show
  1. templates/index.html +787 -224
templates/index.html CHANGED
@@ -1,224 +1,787 @@
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>Crop Financial Market Analysis & Prediction</title>
7
- <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
8
- <style>
9
- body {
10
- background-color: #f9f9f9;
11
- }
12
- .container {
13
- margin-top: 30px;
14
- }
15
- h1 {
16
- color: #4CAF50;
17
- text-align: center;
18
- font-weight: bold;
19
- }
20
- .form-row {
21
- margin-bottom: 20px;
22
- }
23
- .table-container {
24
- border: 1px solid #4CAF50;
25
- border-radius: 8px;
26
- padding: 15px;
27
- background-color: #fff;
28
- max-height: 400px;
29
- overflow-y: auto;
30
- width: 100%;
31
- }
32
- .table-container table {
33
- width: 100%;
34
- margin-bottom: 0;
35
- }
36
- .result-section {
37
- margin-top: 30px;
38
- }
39
- .bordered-table {
40
- border: 1px solid #4CAF50;
41
- background-color: #fff;
42
- }
43
- .bold-header {
44
- font-weight: bold;
45
- color: #333;
46
- }
47
- th {
48
- background-color: #4CAF50;
49
- color: white;
50
- }
51
- .chart-container {
52
- display: flex;
53
- justify-content: space-between;
54
- margin-top: 20px;
55
- }
56
- .chart {
57
- width: 48%;
58
- }
59
- </style>
60
- </head>
61
- <body>
62
- <div class="container">
63
- <h1>Crop Financial Market Analysis & Prediction</h1>
64
- <form id="filterForm">
65
- <div class="form-row">
66
- <div class="form-group col-md-3">
67
- <label for="state">State</label>
68
- <select class="form-control" id="state" name="state">
69
- <option value="">Select State</option>
70
- {% for state in states %}
71
- <option value="{{ state }}">{{ state }}</option>
72
- {% endfor %}
73
- </select>
74
- </div>
75
- <div class="form-group col-md-3">
76
- <label for="district">District</label>
77
- <select class="form-control" id="district" name="district">
78
- <option value="">Select District</option>
79
- </select>
80
- </div>
81
- <div class="form-group col-md-3">
82
- <label for="market">Market</label>
83
- <select class="form-control" id="market" name="market">
84
- <option value="">Select Market</option>
85
- </select>
86
- </div>
87
- <div class="form-group col-md-3">
88
- <label for="commodity">Commodity</label>
89
- <select class="form-control" id="commodity" name="commodity">
90
- <option value="">Select Commodity</option>
91
- </select>
92
- </div>
93
- </div>
94
- </form>
95
-
96
- <div class="result-section">
97
- <div class="table-container">
98
- <h3 class="bold-header">Market Data as of {{ today }}</h3>
99
- <div class="bordered-table">
100
- <table class="table table-bordered table-hover">
101
- <thead>
102
- <tr>
103
- <th>State</th>
104
- <th>District</th>
105
- <th>Market</th>
106
- <th>Commodity</th>
107
- <th>Variety</th>
108
- <th>Grade</th>
109
- <th>Arrival Date</th>
110
- <th>Min Price</th>
111
- <th>Max Price</th>
112
- <th>Modal Price</th>
113
- </tr>
114
- </thead>
115
- <tbody id="marketData">
116
- <!-- Market data will be populated here via AJAX -->
117
- </tbody>
118
- </table>
119
- </div>
120
- </div>
121
-
122
- <div class="result-section">
123
- <h3 class="bold-header">Top 5 Cheapest Crops</h3>
124
- <div class="bordered-table">
125
- <table class="table table-bordered table-hover">
126
- <thead>
127
- <tr>
128
- <th>Commodity</th>
129
- <th>Modal Price</th>
130
- </tr>
131
- </thead>
132
- <tbody id="cheapestCrops">
133
- <!-- Cheapest crops data will be populated here -->
134
- </tbody>
135
- </table>
136
- </div>
137
- </div>
138
-
139
- <div class="result-section">
140
- <h3 class="bold-header">Top 5 Costliest Crops</h3>
141
- <div class="bordered-table">
142
- <table class="table table-bordered table-hover">
143
- <thead>
144
- <tr>
145
- <th>Commodity</th>
146
- <th>Modal Price</th>
147
- </tr>
148
- </thead>
149
- <tbody id="costliestCrops">
150
- <!-- Costliest crops data will be populated here -->
151
- </tbody>
152
- </table>
153
- </div>
154
- </div>
155
- </div>
156
- </div>
157
-
158
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
159
- <script>
160
- // Fetch districts based on state selection
161
- $('#state').change(function() {
162
- let state = $(this).val();
163
- $.ajax({
164
- url: '/get_districts',
165
- method: 'POST',
166
- data: { state: state },
167
- success: function(districts) {
168
- $('#district').empty().append('<option value="">Select District</option>');
169
- districts.forEach(function(district) {
170
- $('#district').append('<option value="' + district + '">' + district + '</option>');
171
- });
172
- }
173
- });
174
- });
175
-
176
- // Fetch markets based on district selection
177
- $('#district').change(function() {
178
- let district = $(this).val();
179
- $.ajax({
180
- url: '/get_markets',
181
- method: 'POST',
182
- data: { district: district },
183
- success: function(markets) {
184
- $('#market').empty().append('<option value="">Select Market</option>');
185
- markets.forEach(function(market) {
186
- $('#market').append('<option value="' + market + '">' + market + '</option>');
187
- });
188
- }
189
- });
190
- });
191
-
192
- // Fetch commodities based on market selection
193
- $('#market').change(function() {
194
- let market = $(this).val();
195
- $.ajax({
196
- url: '/get_commodities',
197
- method: 'POST',
198
- data: { market: market },
199
- success: function(commodities) {
200
- $('#commodity').empty().append('<option value="">Select Commodity</option>');
201
- commodities.forEach(function(commodity) {
202
- $('#commodity').append('<option value="' + commodity + '">' + commodity + '</option>');
203
- });
204
- }
205
- });
206
- });
207
-
208
- // Filter data and update table upon form change
209
- $('#filterForm select').change(function() {
210
- let formData = $('#filterForm').serialize();
211
- $.ajax({
212
- url: '/filter_data',
213
- method: 'POST',
214
- data: formData,
215
- success: function(data) {
216
- $('#marketData').html(data.market_html);
217
- $('#cheapestCrops').html(data.cheapest_html);
218
- $('#costliestCrops').html(data.costliest_html);
219
- }
220
- });
221
- });
222
- </script>
223
- </body>
224
- </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>Crop Market Analysis</title>
7
+ <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
8
+ <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
9
+ <style>
10
+ :root {
11
+ --primary-color: #4CAF50;
12
+ --secondary-color: #45a049;
13
+ --background-color: #f9f9f9;
14
+ --text-color: #333;
15
+ --card-shadow: 0 2px 4px rgba(0,0,0,0.1);
16
+ --border-radius: 8px;
17
+ }
18
+
19
+ body {
20
+ background-color: var(--background-color);
21
+ color: var(--text-color);
22
+ font-family: 'Arial', sans-serif;
23
+ line-height: 1.6;
24
+ }
25
+
26
+ .container {
27
+ max-width: 1200px;
28
+ margin: 0 auto;
29
+ padding: 20px;
30
+ }
31
+
32
+ .header {
33
+ text-align: center;
34
+ margin-bottom: 30px;
35
+ padding: 20px 0;
36
+ }
37
+
38
+ .header h1 {
39
+ color: var(--primary-color);
40
+ font-weight: bold;
41
+ margin: 0;
42
+ font-size: 2.5rem;
43
+ }
44
+
45
+ .form-section {
46
+ background: white;
47
+ padding: 25px;
48
+ border-radius: var(--border-radius);
49
+ box-shadow: var(--card-shadow);
50
+ margin-bottom: 30px;
51
+ }
52
+
53
+ .chart-container {
54
+ background: white;
55
+ padding: 25px;
56
+ border-radius: var(--border-radius);
57
+ box-shadow: var(--card-shadow);
58
+ margin-bottom: 30px;
59
+ }
60
+
61
+ .insights-container {
62
+ background: white;
63
+ padding: 25px;
64
+ border-radius: var(--border-radius);
65
+ box-shadow: var(--card-shadow);
66
+ margin-bottom: 30px;
67
+ border-left: 5px solid var(--primary-color);
68
+ }
69
+
70
+ .insights-container h3 {
71
+ color: var(--primary-color);
72
+ margin-bottom: 20px;
73
+ }
74
+
75
+ .loading {
76
+ display: none;
77
+ text-align: center;
78
+ padding: 20px;
79
+ background: rgba(255, 255, 255, 0.9);
80
+ position: fixed;
81
+ top: 50%;
82
+ left: 50%;
83
+ transform: translate(-50%, -50%);
84
+ border-radius: var(--border-radius);
85
+ box-shadow: var(--card-shadow);
86
+ z-index: 1000;
87
+ }
88
+
89
+ .btn-custom {
90
+ background-color: var(--primary-color);
91
+ color: white;
92
+ border: none;
93
+ padding: 8px 16px;
94
+ border-radius: 4px;
95
+ transition: background-color 0.3s ease;
96
+ }
97
+
98
+ .btn-custom:hover {
99
+ background-color: var(--secondary-color);
100
+ color: white;
101
+ }
102
+
103
+ .form-control {
104
+ border-radius: 4px;
105
+ border: 1px solid #ddd;
106
+ padding: 8px 12px;
107
+ height: auto;
108
+ }
109
+
110
+ .form-control:focus {
111
+ border-color: var(--primary-color);
112
+ box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25);
113
+ }
114
+
115
+ label {
116
+ font-weight: 500;
117
+ margin-bottom: 8px;
118
+ color: var(--text-color);
119
+ }
120
+
121
+ #barChart, #lineChart, #boxChart {
122
+ width: 100%;
123
+ margin-bottom: 20px;
124
+ }
125
+
126
+ #aiInsights {
127
+ line-height: 1.8;
128
+ font-size: 1.1rem;
129
+ }
130
+
131
+ .alert {
132
+ border-radius: var(--border-radius);
133
+ padding: 15px 20px;
134
+ margin-bottom: 20px;
135
+ }
136
+
137
+ .spinner-border {
138
+ width: 3rem;
139
+ height: 3rem;
140
+ color: var(--primary-color);
141
+ }
142
+
143
+ #marketData {
144
+ height: 600px;
145
+ overflow-y: scroll;
146
+ }
147
+
148
+ .table-responsive{
149
+ height: 600px;
150
+ }
151
+
152
+ .insights-header {
153
+ background: #4CAF50;
154
+ color: white;
155
+ padding: 15px 20px;
156
+ border-radius: 8px 8px 0 0;
157
+ margin: -25px -25px 20px -25px;
158
+ }
159
+
160
+ .insights-header h3 {
161
+ margin: 0;
162
+ color: white;
163
+ }
164
+
165
+ .insight-section {
166
+ background: #f8f9fa;
167
+ border-radius: 8px;
168
+ padding: 20px;
169
+ margin-bottom: 20px;
170
+ border-left: 4px solid #4CAF50;
171
+ }
172
+
173
+ .insight-section h4 {
174
+ color: #2E7D32;
175
+ margin-bottom: 15px;
176
+ font-size: 1.2rem;
177
+ font-weight: bold;
178
+ }
179
+
180
+ .insight-card {
181
+ background: white;
182
+ border-radius: 6px;
183
+ padding: 15px;
184
+ margin-bottom: 15px;
185
+ box-shadow: 0 1px 3px rgba(0,0,0,0.1);
186
+ }
187
+
188
+ .insight-card h5 {
189
+ color: #1B5E20;
190
+ margin-bottom: 10px;
191
+ font-size: 1.1rem;
192
+ }
193
+
194
+ .insight-list {
195
+ list-style: none;
196
+ padding-left: 0;
197
+ margin-bottom: 0;
198
+ }
199
+
200
+ .insight-list li {
201
+ position: relative;
202
+ padding-left: 20px;
203
+ margin-bottom: 8px;
204
+ line-height: 1.5;
205
+ }
206
+
207
+ .insight-list li:before {
208
+ content: "•";
209
+ color: #4CAF50;
210
+ font-size: 1.2em;
211
+ position: absolute;
212
+ left: 0;
213
+ top: -2px;
214
+ }
215
+
216
+ .price-highlight {
217
+ color: #2E7D32;
218
+ font-weight: bold;
219
+ }
220
+
221
+ .percentage-up {
222
+ color: #2E7D32;
223
+ font-weight: bold;
224
+ }
225
+
226
+ .percentage-down {
227
+ color: #c62828;
228
+ font-weight: bold;
229
+ }
230
+
231
+ .action-box {
232
+ background: #E8F5E9;
233
+ border-radius: 6px;
234
+ padding: 15px;
235
+ margin-top: 20px;
236
+ border: 1px dashed #4CAF50;
237
+ }
238
+
239
+ .action-box h5 {
240
+ color: #2E7D32;
241
+ margin-bottom: 10px;
242
+ font-size: 1.1rem;
243
+ }
244
+
245
+ .action-list {
246
+ list-style: none;
247
+ padding-left: 0;
248
+ margin-bottom: 0;
249
+ }
250
+
251
+ .action-list li {
252
+ position: relative;
253
+ padding-left: 25px;
254
+ margin-bottom: 8px;
255
+ line-height: 1.5;
256
+ }
257
+
258
+ .action-list li:before {
259
+ content: "✓";
260
+ color: #4CAF50;
261
+ position: absolute;
262
+ left: 0;
263
+ font-weight: bold;
264
+ }
265
+
266
+ @media (max-width: 768px) {
267
+ .insights-container {
268
+ padding: 15px;
269
+ }
270
+
271
+ .insights-header {
272
+ padding: 12px 15px;
273
+ margin: -15px -15px 15px -15px;
274
+ }
275
+
276
+ .insight-section {
277
+ padding: 15px;
278
+ }
279
+ }
280
+ @media (max-width: 768px) {
281
+ .container {
282
+ padding: 10px;
283
+ }
284
+
285
+ .header h1 {
286
+ font-size: 2rem;
287
+ }
288
+
289
+ .form-row {
290
+ flex-direction: column;
291
+ }
292
+
293
+ .form-group {
294
+ margin-bottom: 15px;
295
+ }
296
+
297
+ .btn-custom {
298
+ width: 100%;
299
+ }
300
+
301
+ .insights-container {
302
+ padding: 15px;
303
+ }
304
+
305
+ #aiInsights {
306
+ font-size: 1rem;
307
+ }
308
+ }
309
+ .language-selector {
310
+ margin-top: 10px;
311
+ }
312
+
313
+ .lang-btn {
314
+ font-size: 0.85rem;
315
+ padding: 0.25rem 0.5rem;
316
+ margin: 0 2px;
317
+ border-radius: 4px;
318
+ }
319
+
320
+ .lang-btn.active {
321
+ background-color: #4CAF50;
322
+ color: white;
323
+ }
324
+
325
+ .current-language-indicator {
326
+ font-size: 0.8rem;
327
+ color: #555;
328
+ margin: 5px 0 15px 0;
329
+ }
330
+
331
+ /* For mobile responsiveness */
332
+ @media (max-width: 768px) {
333
+ .language-selector .btn-group {
334
+ display: flex;
335
+ flex-wrap: wrap;
336
+ justify-content: center;
337
+ }
338
+
339
+ .lang-btn {
340
+ margin: 2px;
341
+ flex: 0 0 auto;
342
+ }
343
+ }
344
+ select {
345
+ max-height: 200px;
346
+ overflow-y: auto;
347
+ }
348
+
349
+ .audio-player-container {
350
+ background: #e8f5e9;
351
+ padding: 12px;
352
+ border-radius: 8px;
353
+ margin: 10px 0 0 20px;
354
+ display: inline-block;
355
+ vertical-align: middle;
356
+ }
357
+
358
+ .audio-player-container h4 {
359
+ color: #2E7D32;
360
+ margin: 0 0 8px 0;
361
+ font-size: 0.9rem;
362
+ font-weight: bold;
363
+ }
364
+
365
+ .audio-player-container audio {
366
+ height: 35px;
367
+ vertical-align: middle;
368
+ }
369
+
370
+ #playAudioBtn {
371
+ background-color: #4CAF50;
372
+ color: white;
373
+ border: none;
374
+ margin-left: 5px;
375
+ font-size: 0.85em;
376
+ }
377
+
378
+ #playAudioBtn:hover {
379
+ background-color: #45a049;
380
+ }
381
+
382
+ @media (max-width: 768px) {
383
+ .insights-header {
384
+ display: flex;
385
+ flex-direction: column;
386
+ }
387
+
388
+ .audio-player-container {
389
+ margin: 10px 0 0 0;
390
+ width: 100%;
391
+ }
392
+
393
+ .audio-player-container audio {
394
+ width: 100%;
395
+ }
396
+
397
+ #playAudioBtn {
398
+ display: block;
399
+ width: 100%;
400
+ margin: 5px 0 0 0;
401
+ }
402
+ }
403
+
404
+ /* Add FontAwesome for play/pause icons */
405
+ .fa {
406
+ display: inline-block;
407
+ font: normal normal normal 14px/1 FontAwesome;
408
+ font-size: inherit;
409
+ text-rendering: auto;
410
+ -webkit-font-smoothing: antialiased;
411
+ -moz-osx-font-smoothing: grayscale;
412
+ }
413
+ .fa-play:before {
414
+ content: "\f04b";
415
+ }
416
+ .fa-pause:before {
417
+ content: "\f04c";
418
+ }
419
+ </style>
420
+ </head>
421
+ <body>
422
+ <div class="container">
423
+ <div class="header">
424
+ <h1>Crop Market Analysis</h1>
425
+ </div>
426
+
427
+ <div class="form-section">
428
+ <form id="filterForm">
429
+ <div class="form-row">
430
+ <div class="form-group col-md-3">
431
+ <label for="state">State</label>
432
+ <select class="form-control" id="state" name="state">
433
+ <option value="">Select State</option>
434
+ {% for state in states %}
435
+ <option value="{{ state }}">{{ state }}</option>
436
+ {% endfor %}
437
+ </select>
438
+ </div>
439
+ <div class="form-group col-md-3">
440
+ <label for="district">District</label>
441
+ <select class="form-control" id="district" name="district" disabled>
442
+ <option value="">Select District</option>
443
+ </select>
444
+ </div>
445
+ <div class="form-group col-md-3">
446
+ <label for="market">Market</label>
447
+ <select class="form-control" id="market" name="market" disabled>
448
+ <option value="">Select Market</option>
449
+ </select>
450
+ </div>
451
+ <div class="form-group col-md-3">
452
+ <label for="commodity">Commodity</label>
453
+ <select class="form-control" id="commodity" name="commodity" disabled>
454
+ <option value="">Select Commodity</option>
455
+ </select>
456
+ </div>
457
+ </div>
458
+ <div class="language-selector">
459
+ <div class="card">
460
+ <div class="card-body">
461
+ <h5 class="card-title">Select Language for AI Insights</h5>
462
+ <div class="btn-group" role="group" aria-label="Language selection">
463
+ <button type="button" class="btn btn-sm lang-btn active" data-lang="English">English</button>
464
+ <button type="button" class="btn btn-sm lang-btn" data-lang="Hindi">हिन्दी</button>
465
+ <button type="button" class="btn btn-sm lang-btn" data-lang="Tamil">தமிழ்</button>
466
+ <button type="button" class="btn btn-sm lang-btn" data-lang="Telugu">తెలుగు</button>
467
+ <button type="button" class="btn btn-sm lang-btn" data-lang="Marathi">मराठी</button>
468
+ <button type="button" class="btn btn-sm lang-btn" data-lang="Bengali">বাংলা</button>
469
+ <button type="button" class="btn btn-sm lang-btn" data-lang="Gujarati">ગુજરાતી</button>
470
+ <button type="button" class="btn btn-sm lang-btn" data-lang="Kannada">ಕನ್ನಡ</button>
471
+ <button type="button" class="btn btn-sm lang-btn" data-lang="Malayalam">മലയാളം</button>
472
+ <button type="button" class="btn btn-sm lang-btn" data-lang="Punjabi">ਪੰਜਾਬੀ</button>
473
+ </div>
474
+ <div class="current-language-indicator mt-2">
475
+ Current language: <span id="currentLanguage">English</span>
476
+ </div>
477
+ </div>
478
+ </div>
479
+ </div>
480
+ </form>
481
+ </div>
482
+
483
+ <div class="loading" id="loadingIndicator">
484
+ <div class="spinner-border" role="status">
485
+ <span class="sr-only">Loading...</span>
486
+ </div>
487
+ </div>
488
+
489
+ <div class="chart-container">
490
+ <div id="barChart"></div>
491
+ <div id="lineChart"></div>
492
+ <div id="boxChart"></div>
493
+ </div>
494
+ <div class="market-data-container">
495
+ <div class="row">
496
+ <div class="col-md-12 mb-4">
497
+ <div class="card">
498
+ <div class="card-header">
499
+ <h4>Market Statistics</h4>
500
+ </div>
501
+ <div class="card-body">
502
+ <div class="row">
503
+ <div class="col-md-3">
504
+ <div class="stat-item">
505
+ <h6>Total Commodities</h6>
506
+ <span id="totalCommodities"></span>
507
+ </div>
508
+ </div>
509
+ <div class="col-md-3">
510
+ <div class="stat-item">
511
+ <h6>Average Price</h6>
512
+ <span id="avgPrice"></span>
513
+ </div>
514
+ </div>
515
+ <div class="col-md-3">
516
+ <div class="stat-item">
517
+ <h6>Price Range</h6>
518
+ <span id="priceRange"></span>
519
+ </div>
520
+ </div>
521
+ <div class="col-md-3">
522
+ <div class="stat-item">
523
+ <h6>Total Markets</h6>
524
+ <span id="totalMarkets"></span>
525
+ </div>
526
+ </div>
527
+ </div>
528
+ </div>
529
+ </div>
530
+ </div>
531
+ </div>
532
+
533
+ <div class="row">
534
+ <div class="col-md-6 mb-4">
535
+ <div class="card">
536
+ <div class="card-header">
537
+ <h4>Top 5 Cheapest Crops</h4>
538
+ </div>
539
+ <div class="card-body" id="cheapestCrops">
540
+ </div>
541
+ </div>
542
+ </div>
543
+ <div class="col-md-6 mb-4">
544
+ <div class="card">
545
+ <div class="card-header">
546
+ <h4>Top 5 Costliest Crops</h4>
547
+ </div>
548
+ <div class="card-body" id="costliestCrops">
549
+ </div>
550
+ </div>
551
+ </div>
552
+ </div>
553
+
554
+ <div class="card mb-4">
555
+ <div class="card-header">
556
+ <h4>Market Data</h4>
557
+ </div>
558
+ <div class="card-body" id="marketData">
559
+ </div>
560
+ </div>
561
+ </div>
562
+ <div class="insights-container">
563
+ <div id="aiInsights"></div>
564
+ </div>
565
+ </div>
566
+
567
+ <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
568
+ <script>
569
+ // Add this to your JavaScript
570
+ function updateAudioPlayer(audioPath) {
571
+ if (audioPath) {
572
+ $('#audioPlayerContainer').show();
573
+ $('#insightsAudio').attr('src', audioPath);
574
+ } else {
575
+ $('#audioPlayerContainer').hide();
576
+ }
577
+ }
578
+ function showLoading() {
579
+ $('#loadingIndicator').show();
580
+ }
581
+
582
+ function hideLoading() {
583
+ $('#loadingIndicator').hide();
584
+ }
585
+
586
+ function enableSelect(selectId) {
587
+ $(`#${selectId}`).prop('disabled', false);
588
+ }
589
+
590
+ function disableSelect(selectId) {
591
+ $(`#${selectId}`).prop('disabled', true);
592
+ }
593
+
594
+ function updateContent() {
595
+ showLoading();
596
+ const formData = new FormData($('#filterForm')[0]);
597
+
598
+ $.ajax({
599
+ url: '/filter_data',
600
+ method: 'POST',
601
+ data: formData,
602
+ processData: false,
603
+ contentType: false,
604
+ success: function(response) {
605
+ if (response.success) {
606
+ if (response.plots.bar) $('#barChart').html(response.plots.bar);
607
+ if (response.plots.line) $('#lineChart').html(response.plots.line);
608
+ if (response.plots.box) $('#boxChart').html(response.plots.box);
609
+
610
+ $('#totalCommodities').text(response.market_stats.total_commodities);
611
+ $('#avgPrice').text(response.market_stats.avg_modal_price);
612
+ $('#priceRange').text(response.market_stats.price_range);
613
+ $('#totalMarkets').text(response.market_stats.total_markets);
614
+
615
+ $('#marketData').html(response.market_html);
616
+ $('#cheapestCrops').html(response.cheapest_html);
617
+ $('#costliestCrops').html(response.costliest_html);
618
+
619
+ if (response.hasStateDistrict) {
620
+ $('.insights-container').show();
621
+ $('#aiInsights').html(response.insights);
622
+ } else {
623
+ $('.insights-container').hide();
624
+ $('#aiInsights').html('');
625
+ }
626
+ } else {
627
+ alert('Please select both state and district to view analysis');
628
+ }
629
+ hideLoading();
630
+ },
631
+ error: function() {
632
+ alert('Error loading data');
633
+ hideLoading();
634
+ }
635
+ });
636
+ }
637
+
638
+ $('#state').change(function() {
639
+ const state = $(this).val();
640
+ $('#district, #market, #commodity').html('<option value="">Select</option>').prop('disabled', true);
641
+
642
+ if (state) {
643
+ showLoading();
644
+ $.post('/get_districts', { state: state }, function(districts) {
645
+ $('#district').html('<option value="">Select District</option>');
646
+ districts.forEach(district => {
647
+ $('#district').append(`<option value="${district}">${district}</option>`);
648
+ });
649
+ enableSelect('district');
650
+ hideLoading();
651
+ });
652
+ }
653
+ updateContent();
654
+ });
655
+
656
+ $('#district').change(function() {
657
+ const district = $(this).val();
658
+ $('#market, #commodity').html('<option value="">Select</option>').prop('disabled', true);
659
+
660
+ if (district) {
661
+ showLoading();
662
+ $.post('/get_markets', { district: district }, function(markets) {
663
+ $('#market').html('<option value="">Select Market</option>');
664
+ markets.forEach(market => {
665
+ $('#market').append(`<option value="${market}">${market}</option>`);
666
+ });
667
+ enableSelect('market');
668
+ hideLoading();
669
+ });
670
+ }
671
+ updateContent();
672
+ });
673
+
674
+ $('#market').change(function() {
675
+ const market = $(this).val();
676
+ $('#commodity').html('<option value="">Select</option>').prop('disabled', true);
677
+
678
+ if (market) {
679
+ showLoading();
680
+ $.post('/get_commodities', { market: market }, function(commodities) {
681
+ $('#commodity').html('<option value="">Select Commodity</option>');
682
+ commodities.forEach(commodity => {
683
+ $('#commodity').append(`<option value="${commodity}">${commodity}</option>`);
684
+ });
685
+ enableSelect('commodity');
686
+ hideLoading();
687
+ });
688
+ }
689
+ updateContent();
690
+ });
691
+
692
+ $('#commodity').change(function() {
693
+ updateContent();
694
+ });
695
+
696
+ $(document).ready(function() {
697
+ $('.insights-container').hide();
698
+ updateContent();
699
+ });
700
+
701
+ // Language handling
702
+ let currentLanguage = "English";
703
+
704
+ $('.lang-btn').click(function() {
705
+ $('.lang-btn').removeClass('active');
706
+ $(this).addClass('active');
707
+ currentLanguage = $(this).data('lang');
708
+ $('#currentLanguage').text(currentLanguage);
709
+
710
+ // If state and district are selected, update the content to reflect the new language
711
+ if ($('#state').val() && $('#district').val()) {
712
+ updateContent();
713
+ }
714
+ });
715
+
716
+ // Modify the updateContent function to include language
717
+ function updateContent() {
718
+ showLoading();
719
+ const formData = new FormData($('#filterForm')[0]);
720
+
721
+ // Add language to form data
722
+ formData.append('language', currentLanguage);
723
+
724
+ $.ajax({
725
+ url: '/filter_data',
726
+ method: 'POST',
727
+ data: formData,
728
+ processData: false,
729
+ contentType: false,
730
+ success: function(response) {
731
+ if (response.success) {
732
+ if (response.plots.bar) $('#barChart').html(response.plots.bar);
733
+ if (response.plots.line) $('#lineChart').html(response.plots.line);
734
+ if (response.plots.box) $('#boxChart').html(response.plots.box);
735
+
736
+ $('#totalCommodities').text(response.market_stats.total_commodities);
737
+ $('#avgPrice').text(response.market_stats.avg_modal_price);
738
+ $('#priceRange').text(response.market_stats.price_range);
739
+ $('#totalMarkets').text(response.market_stats.total_markets);
740
+
741
+ $('#marketData').html(response.market_html);
742
+ $('#cheapestCrops').html(response.cheapest_html);
743
+ $('#costliestCrops').html(response.costliest_html);
744
+
745
+ if (response.hasStateDistrict) {
746
+ $('.insights-container').show();
747
+ $('#aiInsights').html(response.insights);
748
+ } else {
749
+ $('.insights-container').hide();
750
+ $('#aiInsights').html('');
751
+ }
752
+ } else {
753
+ alert('Please select both state and district to view analysis');
754
+ }
755
+ hideLoading();
756
+ },
757
+ error: function() {
758
+ alert('Error loading data');
759
+ hideLoading();
760
+ }
761
+ });
762
+ }
763
+ // Add this in the <head> section after the jQuery import
764
+
765
+ $(document).on('click', '#playAudioBtn', function() {
766
+ const audioPlayer = document.getElementById('insightsAudio');
767
+
768
+ if (audioPlayer) {
769
+ if (audioPlayer.paused) {
770
+ audioPlayer.play();
771
+ $(this).html('<i class="fa fa-pause"></i> Pause Audio');
772
+ } else {
773
+ audioPlayer.pause();
774
+ $(this).html('<i class="fa fa-play"></i> Play Audio');
775
+ }
776
+ }
777
+ });
778
+
779
+ // Reset play button text when audio ends
780
+ $(document).on('ended', '#insightsAudio', function() {
781
+ $('#playAudioBtn').html('<i class="fa fa-play"></i> Play Audio');
782
+ });
783
+ </script>
784
+ <script src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"></script>
785
+
786
+ </body>
787
+ </html>