Spaces:

sikeaditya
/

crop_market_analysis

Sleeping

App Files Files Community

sikeaditya commited on 18 days ago

Commit

9979333

verified ·

1 Parent(s): e1e6422

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +644 -639

templates/index.html CHANGED Viewed

@@ -1,640 +1,645 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>कृषी बाजार विश्लेषण | Crop Market Analysis</title>
-    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
-    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
-    <style>
-        :root {
-            --primary-color: #4CAF50;
-            --secondary-color: #45a049;
-            --background-color: #f9f9f9;
-            --text-color: #333;
-            --card-shadow: 0 2px 4px rgba(0,0,0,0.1);
-            --border-radius: 8px;
-        }
-        body {
-            background-color: var(--background-color);
-            color: var(--text-color);
-            font-family: 'Arial', sans-serif;
-            line-height: 1.6;
-        }
-        .container {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 20px;
-        }
-        .header {
-            text-align: center;
-            margin-bottom: 30px;
-            padding: 20px 0;
-        }
-        .header h1 {
-            color: var(--primary-color);
-            font-weight: bold;
-            margin: 0;
-            font-size: 2.5rem;
-        }
-        .language-toggle {
-            position: fixed;
-            top: 20px;
-            right: 20px;
-            z-index: 1000;
-        }
-        .form-section {
-            background: white;
-            padding: 25px;
-            border-radius: var(--border-radius);
-            box-shadow: var(--card-shadow);
-            margin-bottom: 30px;
-        }
-        .chart-container {
-            background: white;
-            padding: 25px;
-            border-radius: var(--border-radius);
-            box-shadow: var(--card-shadow);
-            margin-bottom: 30px;
-        }
-        .insights-container {
-            background: white;
-            padding: 25px;
-            border-radius: var(--border-radius);
-            box-shadow: var(--card-shadow);
-            margin-bottom: 30px;
-            border-left: 5px solid var(--primary-color);
-        }
-        .insights-container h3 {
-            color: var(--primary-color);
-            margin-bottom: 20px;
-        }
-        .loading {
-            display: none;
-            text-align: center;
-            padding: 20px;
-            background: rgba(255, 255, 255, 0.9);
-            position: fixed;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            border-radius: var(--border-radius);
-            box-shadow: var(--card-shadow);
-            z-index: 1000;
-        }
-        .btn-custom {
-            background-color: var(--primary-color);
-            color: white;
-            border: none;
-            padding: 8px 16px;
-            border-radius: 4px;
-            transition: background-color 0.3s ease;
-        }
-        .btn-custom:hover {
-            background-color: var(--secondary-color);
-            color: white;
-        }
-        .form-control {
-            border-radius: 4px;
-            border: 1px solid #ddd;
-            padding: 8px 12px;
-            height: auto;
-        }
-        .form-control:focus {
-            border-color: var(--primary-color);
-            box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25);
-        }
-        label {
-            font-weight: 500;
-            margin-bottom: 8px;
-            color: var(--text-color);
-        }
-        #barChart, #lineChart, #boxChart {
-            width: 100%;
-            margin-bottom: 20px;
-        }
-        #aiInsights {
-            line-height: 1.8;
-            font-size: 1.1rem;
-        }
-        .alert {
-            border-radius: var(--border-radius);
-            padding: 15px 20px;
-            margin-bottom: 20px;
-        }
-        .spinner-border {
-            width: 3rem;
-            height: 3rem;
-            color: var(--primary-color);
-        }
-        #marketData {
-        height: 100px; /* Set the height to a fixed value */
-        overflow-y:scroll; /* Add vertical scrolling */
-        }
-        .insights-container {
-            background: white;
-            padding: 25px;
-            border-radius: 8px;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-            margin-bottom: 30px;
-        }
-        .insights-header {
-            background: #4CAF50;
-            color: white;
-            padding: 15px 20px;
-            border-radius: 8px 8px 0 0;
-            margin: -25px -25px 20px -25px;
-        }
-        .insights-header h3 {
-            margin: 0;
-            color: white;
-        }
-        .insight-section {
-            background: #f8f9fa;
-            border-radius: 8px;
-            padding: 20px;
-            margin-bottom: 20px;
-            border-left: 4px solid #4CAF50;
-        }
-        .insight-section h4 {
-            color: #2E7D32;
-            margin-bottom: 15px;
-            font-size: 1.2rem;
-            font-weight: bold;
-        }
-        .insight-card {
-            background: white;
-            border-radius: 6px;
-            padding: 15px;
-            margin-bottom: 15px;
-            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-        }
-        .insight-card h5 {
-            color: #1B5E20;
-            margin-bottom: 10px;
-            font-size: 1.1rem;
-        }
-        .insight-list {
-            list-style: none;
-            padding-left: 0;
-            margin-bottom: 0;
-        }
-        .insight-list li {
-            position: relative;
-            padding-left: 20px;
-            margin-bottom: 8px;
-            line-height: 1.5;
-        }
-        .insight-list li:before {
-            content: "•";
-            color: #4CAF50;
-            font-size: 1.2em;
-            position: absolute;
-            left: 0;
-            top: -2px;
-        }
-        .price-highlight {
-            color: #2E7D32;
-            font-weight: bold;
-        }
-        .percentage-up {
-            color: #2E7D32;
-            font-weight: bold;
-        }
-        .percentage-down {
-            color: #c62828;
-            font-weight: bold;
-        }
-        .action-box {
-            background: #E8F5E9;
-            border-radius: 6px;
-            padding: 15px;
-            margin-top: 20px;
-            border: 1px dashed #4CAF50;
-        }
-        .action-box h5 {
-            color: #2E7D32;
-            margin-bottom: 10px;
-            font-size: 1.1rem;
-        }
-        .action-list {
-            list-style: none;
-            padding-left: 0;
-            margin-bottom: 0;
-        }
-        .action-list li {
-            position: relative;
-            padding-left: 25px;
-            margin-bottom: 8px;
-            line-height: 1.5;
-        }
-        .action-list li:before {
-            content: "✓";
-            color: #4CAF50;
-            position: absolute;
-            left: 0;
-            font-weight: bold;
-        }
-        /* Responsive adjustments */
-        @media (max-width: 768px) {
-            .insights-container {
-                padding: 15px;
-            }
-            .insights-header {
-                padding: 12px 15px;
-                margin: -15px -15px 15px -15px;
-            }
-            .insight-section {
-                padding: 15px;
-            }
-        }
-        @media (max-width: 768px) {
-            .container {
-                padding: 10px;
-            }
-            .header h1 {
-                font-size: 2rem;
-            }
-            .form-row {
-                flex-direction: column;
-            }
-            .form-group {
-                margin-bottom: 15px;
-            }
-            .language-toggle {
-                position: static;
-                text-align: center;
-                margin-bottom: 20px;
-            }
-            .btn-custom {
-                width: 100%;
-            }
-            .insights-container {
-                padding: 15px;
-            }
-            #aiInsights {
-                font-size: 1rem;
-            }
-        }
-        select {
-    max-height: 200px; /* Adjust height as needed */
-    overflow-y: auto;
-}
-    </style>
-</head>
-<body>
-    <div class="language-toggle">
-        <button class="btn btn-custom" onclick="toggleLanguage()" id="langToggle">
-            भाषा बदला | Change Language
-        </button>
-    </div>
-    <div class="container">
-        <div class="header">
-            <h1 class="en">Crop Market Analysis</h1>
-            <h1 class="mr" style="display:none;">कृषी बाजार विश्लेषण</h1>
-        </div>
-        <div class="form-section">
-            <form id="filterForm">
-                <div class="form-row">
-                    <div class="form-group col-md-3">
-                        <label for="state" class="label-state">State</label>
-                        <select class="form-control" id="state" name="state">
-                            <option value="">Select State</option>
-                            {% for state in states %}
-                            <option value="{{ state }}">{{ state }}</option>
-                            {% endfor %}
-                        </select>
-                    </div>
-                    <div class="form-group col-md-3">
-                        <label for="district" class="label-district">District</label>
-                        <select class="form-control" id="district" name="district" disabled>
-                            <option value="">Select District</option>
-                        </select>
-                    </div>
-                    <div class="form-group col-md-3">
-                        <label for="market" class="label-market">Market</label>
-                        <select class="form-control" id="market" name="market" disabled>
-                            <option value="">Select Market</option>
-                        </select>
-                    </div>
-                    <div class="form-group col-md-3">
-                        <label for="commodity" class="label-commodity">Commodity</label>
-                        <select class="form-control" id="commodity" name="commodity" disabled>
-                            <option value="">Select Commodity</option>
-                        </select>
-                    </div>
-                </div>
-            </form>
-        </div>
-        <div class="loading" id="loadingIndicator">
-            <div class="spinner-border" role="status">
-                <span class="sr-only">Loading...</span>
-            </div>
-        </div>
-        <div class="chart-container">
-            <div id="barChart"></div>
-            <div id="lineChart"></div>
-            <div id="boxChart"></div>
-        </div>
-        <!-- Add this after the chart-container div -->
-        <div class="market-data-container">
-            <div class="row">
-                <div class="col-md-12 mb-4">
-                    <div class="card">
-                        <div class="card-header">
-                            <h4 class="en">Market Statistics</h4>
-                            <h4 class="mr" style="display:none;">बाजार आकडेवारी</h4>
-                        </div>
-                        <div class="card-body">
-                            <div class="row">
-                                <div class="col-md-3">
-                                    <div class="stat-item">
-                                        <h6 class="en">Total Commodities</h6>
-                                        <h6 class="mr" style="display:none;">एकूण पिके</h6>
-                                        <span id="totalCommodities"></span>
-                                    </div>
-                                </div>
-                                <div class="col-md-3">
-                                    <div class="stat-item">
-                                        <h6 class="en">Average Price</h6>
-                                        <h6 class="mr" style="display:none;">सरासरी किंमत</h6>
-                                        <span id="avgPrice"></span>
-                                    </div>
-                                </div>
-                                <div class="col-md-3">
-                                    <div class="stat-item">
-                                        <h6 class="en">Price Range</h6>
-                                        <h6 class="mr" style="display:none;">किंमत श्रेणी</h6>
-                                        <span id="priceRange"></span>
-                                    </div>
-                                </div>
-                                <div class="col-md-3">
-                                    <div class="stat-item">
-                                        <h6 class="en">Total Markets</h6>
-                                        <h6 class="mr" style="display:none;">एकूण बाजार</h6>
-                                        <span id="totalMarkets"></span>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="row">
-                <div class="col-md-6 mb-4">
-                    <div class="card">
-                        <div class="card-header">
-                            <h4 class="en">Top 5 Cheapest Crops</h4>
-                            <h4 class="mr" style="display:none;">सर्वात स्वस्त 5 पिके</h4>
-                        </div>
-                        <div class="card-body" id="cheapestCrops">
-                        </div>
-                    </div>
-                </div>
-                <div class="col-md-6 mb-4">
-                    <div class="card">
-                        <div class="card-header">
-                            <h4 class="en">Top 5 Costliest Crops</h4>
-                            <h4 class="mr" style="display:none;">सर्वात महाग 5 पिके</h4>
-                        </div>
-                        <div class="card-body" id="costliestCrops">
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="card mb-4">
-                <div class="card-header">
-                    <h4 class="en">Market Data</h4>
-                    <h4 class="mr" style="display:none;">बाजार माहिती</h4>
-                </div>
-                <div class="card-body" id="marketData">
-                </div>
-            </div>
-        </div>
-        <div class="insights-container">
-            <div id="aiInsights"></div>
-        </div>
-    </div>
-    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
-    <script>
-        let currentLang = 'en';
-        function updateLabels(translations) {
-            if (currentLang === 'mr') {
-                Object.keys(translations).forEach(key => {
-                    $(`.label-${key}`).text(translations[key]);
-                });
-                $('.en').hide();
-                $('.mr').show();
-            } else {
-                $('.label-state').text('State');
-                $('.label-district').text('District');
-                $('.label-market').text('Market');
-                $('.label-commodity').text('Commodity');
-                $('.en').show();
-                $('.mr').hide();
-            }
-        }
-        function toggleLanguage() {
-            currentLang = currentLang === 'en' ? 'mr' : 'en';
-            $('#langToggle').text(currentLang === 'en' ? 'भाषा बदला | Change Language' : 'भाषा बदला | Change Language');
-            updateContent();
-        }
-        function showLoading() {
-            $('#loadingIndicator').show();
-        }
-        function hideLoading() {
-            $('#loadingIndicator').hide();
-        }
-        function enableSelect(selectId) {
-            $(`#${selectId}`).prop('disabled', false);
-        }
-        function disableSelect(selectId) {
-            $(`#${selectId}`).prop('disabled', true);
-        }
-        function updateContent() {
-            showLoading();
-            const formData = new FormData($('#filterForm')[0]);
-            formData.append('language', currentLang);
-            $.ajax({
-                url: '/filter_data',
-                method: 'POST',
-                data: formData,
-                processData: false,
-                contentType: false,
-                success: function(response) {
-                if (response.success) {
-                    // Update plots
-                    if (response.plots.bar) $('#barChart').html(response.plots.bar);
-                    if (response.plots.line) $('#lineChart').html(response.plots.line);
-                    if (response.plots.box) $('#boxChart').html(response.plots.box);
-                    // Update market statistics
-                    $('#totalCommodities').text(response.market_stats.total_commodities);
-                    $('#avgPrice').text(response.market_stats.avg_modal_price);
-                    $('#priceRange').text(response.market_stats.price_range);
-                    $('#totalMarkets').text(response.market_stats.total_markets);
-                    // Update tables
-                    $('#marketData').html(response.market_html);
-                    $('#cheapestCrops').html(response.cheapest_html);
-                    $('#costliestCrops').html(response.costliest_html);
-                    // Only show insights section if state and district are selected
-                    if (response.hasStateDistrict) {
-                        $('.insights-container').show();
-                        $('#aiInsights').html(response.insights);
-                    } else {
-                        $('.insights-container').hide();
-                        $('#aiInsights').html('');
-                    }
-                    // Update translations
-                    updateLabels(response.translations);
-                    console.log(response.translations);
-                } else {
-                    const message = currentLang === 'en' ?
-                        'Please select both state and district to view analysis' :
-                        'कृपया विश्लेषण पाहण्यासाठी राज्य आणि जिल्हा निवडा';
-                    alert(message);
-                }
-                hideLoading();
-            },
-                error: function() {
-                    alert(currentLang === 'en' ? 'Error loading data' : 'माहिती लोड करताना त्रुटी');
-                    hideLoading();
-                }
-            });
-        }
-        // Cascade dropdowns
-        $('#state').change(function() {
-            const state = $(this).val();
-            // Reset and disable dependent dropdowns
-            $('#district, #market, #commodity').html('<option value="">Select</option>').prop('disabled', true);
-            if (state) {
-                showLoading();
-                $.post('/get_districts', { state: state }, function(districts) {
-                    $('#district').html('<option value="">Select District</option>');
-                    districts.forEach(district => {
-                        $('#district').append(`<option value="${district}">${district}</option>`);
-                    });
-                    enableSelect('district');
-                    hideLoading();
-                });
-            }
-            updateContent();
-        });
-        $('#district').change(function() {
-            const district = $(this).val();
-            // Reset and disable dependent dropdowns
-            $('#market, #commodity').html('<option value="">Select</option>').prop('disabled', true);
-            if (district) {
-                showLoading();
-                $.post('/get_markets', { district: district }, function(markets) {
-                    $('#market').html('<option value="">Select Market</option>');
-                    markets.forEach(market => {
-                        $('#market').append(`<option value="${market}">${market}</option>`);
-                    });
-                    enableSelect('market');
-                    hideLoading();
-                });
-            }
-            updateContent();
-        });
-        $('#market').change(function() {
-            const market = $(this).val();
-            // Reset commodity dropdown
-            $('#commodity').html('<option value="">Select</option>').prop('disabled', true);
-            if (market) {
-                showLoading();
-                $.post('/get_commodities', { market: market }, function(commodities) {
-                    $('#commodity').html('<option value="">Select Commodity</option>');
-                    commodities.forEach(commodity => {
-                        $('#commodity').append(`<option value="${commodity}">${commodity}</option>`);
-                    });
-                    enableSelect('commodity');
-                    hideLoading();
-                });
-            }
-            updateContent();
-        });
-        $('#commodity').change(function() {
-            updateContent();
-        });
-        // Initial setup
-        $(document).ready(function() {
-            $('.insights-container').hide();
-            updateContent();
-        });
-    </script>
-</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>कृषी बाजार विश्लेषण | Crop Market Analysis</title>
+  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+  <style>
+    :root {
+      --primary-color: #4CAF50;
+      --secondary-color: #45a049;
+      --background-color: #f9f9f9;
+      --text-color: #333;
+      --card-shadow: 0 2px 4px rgba(0,0,0,0.1);
+      --border-radius: 8px;
+    }
+    body {
+      background-color: var(--background-color);
+      color: var(--text-color);
+      font-family: 'Arial', sans-serif;
+      line-height: 1.6;
+    }
+    .container {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 20px;
+    }
+    .header {
+      text-align: center;
+      margin-bottom: 30px;
+      padding: 20px 0;
+    }
+    .header h1 {
+      color: var(--primary-color);
+      font-weight: bold;
+      margin: 0;
+      font-size: 2.5rem;
+    }
+    .language-toggle {
+      position: fixed;
+      top: 20px;
+      right: 20px;
+      z-index: 1000;
+    }
+    .form-section {
+      background: white;
+      padding: 25px;
+      border-radius: var(--border-radius);
+      box-shadow: var(--card-shadow);
+      margin-bottom: 30px;
+    }
+    .chart-container {
+      background: white;
+      padding: 25px;
+      border-radius: var(--border-radius);
+      box-shadow: var(--card-shadow);
+      margin-bottom: 30px;
+    }
+    .insights-container {
+      background: white;
+      padding: 25px;
+      border-radius: var(--border-radius);
+      box-shadow: var(--card-shadow);
+      margin-bottom: 30px;
+      border-left: 5px solid var(--primary-color);
+    }
+    .insights-container h3 {
+      color: var(--primary-color);
+      margin-bottom: 20px;
+    }
+    .loading {
+      display: none;
+      text-align: center;
+      padding: 20px;
+      background: rgba(255, 255, 255, 0.9);
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      border-radius: var(--border-radius);
+      box-shadow: var(--card-shadow);
+      z-index: 1000;
+    }
+    .btn-custom {
+      background-color: var(--primary-color);
+      color: white;
+      border: none;
+      padding: 8px 16px;
+      border-radius: 4px;
+      transition: background-color 0.3s ease;
+    }
+    .btn-custom:hover {
+      background-color: var(--secondary-color);
+      color: white;
+    }
+    .form-control {
+      border-radius: 4px;
+      border: 1px solid #ddd;
+      padding: 8px 12px;
+      height: auto;
+    }
+    .form-control:focus {
+      border-color: var(--primary-color);
+      box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25);
+    }
+    label {
+      font-weight: 500;
+      margin-bottom: 8px;
+      color: var(--text-color);
+    }
+    #barChart, #lineChart, #boxChart {
+      width: 100%;
+      margin-bottom: 20px;
+    }
+    #aiInsights {
+      line-height: 1.8;
+      font-size: 1.1rem;
+    }
+    .alert {
+      border-radius: var(--border-radius);
+      padding: 15px 20px;
+      margin-bottom: 20px;
+    }
+    .spinner-border {
+      width: 3rem;
+      height: 3rem;
+      color: var(--primary-color);
+    }
+    #marketData {
+      height: 100px; /* Set the height to a fixed value */
+      overflow-y: scroll; /* Add vertical scrolling */
+    }
+    .insights-container {
+      background: white;
+      padding: 25px;
+      border-radius: 8px;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+      margin-bottom: 30px;
+    }
+    .insights-header {
+      background: #4CAF50;
+      color: white;
+      padding: 15px 20px;
+      border-radius: 8px 8px 0 0;
+      margin: -25px -25px 20px -25px;
+    }
+    .insights-header h3 {
+      margin: 0;
+      color: white;
+    }
+    .insight-section {
+      background: #f8f9fa;
+      border-radius: 8px;
+      padding: 20px;
+      margin-bottom: 20px;
+      border-left: 4px solid #4CAF50;
+    }
+    .insight-section h4 {
+      color: #2E7D32;
+      margin-bottom: 15px;
+      font-size: 1.2rem;
+      font-weight: bold;
+    }
+    .insight-card {
+      background: white;
+      border-radius: 6px;
+      padding: 15px;
+      margin-bottom: 15px;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+    }
+    .insight-card h5 {
+      color: #1B5E20;
+      margin-bottom: 10px;
+      font-size: 1.1rem;
+    }
+    .insight-list {
+      list-style: none;
+      padding-left: 0;
+      margin-bottom: 0;
+    }
+    .insight-list li {
+      position: relative;
+      padding-left: 20px;
+      margin-bottom: 8px;
+      line-height: 1.5;
+    }
+    .insight-list li:before {
+      content: "•";
+      color: #4CAF50;
+      font-size: 1.2em;
+      position: absolute;
+      left: 0;
+      top: -2px;
+    }
+    .price-highlight {
+      color: #2E7D32;
+      font-weight: bold;
+    }
+    .percentage-up {
+      color: #2E7D32;
+      font-weight: bold;
+    }
+    .percentage-down {
+      color: #c62828;
+      font-weight: bold;
+    }
+    .action-box {
+      background: #E8F5E9;
+      border-radius: 6px;
+      padding: 15px;
+      margin-top: 20px;
+      border: 1px dashed #4CAF50;
+    }
+    .action-box h5 {
+      color: #2E7D32;
+      margin-bottom: 10px;
+      font-size: 1.1rem;
+    }
+    .action-list {
+      list-style: none;
+      padding-left: 0;
+      margin-bottom: 0;
+    }
+    .action-list li {
+      position: relative;
+      padding-left: 25px;
+      margin-bottom: 8px;
+      line-height: 1.5;
+    }
+    .action-list li:before {
+      content: "✓";
+      color: #4CAF50;
+      position: absolute;
+      left: 0;
+      font-weight: bold;
+    }
+    /* Responsive adjustments */
+    @media (max-width: 768px) {
+      .insights-container {
+        padding: 15px;
+      }
+      .insights-header {
+        padding: 12px 15px;
+        margin: -15px -15px 15px -15px;
+      }
+      .insight-section {
+        padding: 15px;
+      }
+    }
+    @media (max-width: 768px) {
+      .container {
+        padding: 10px;
+      }
+      .header h1 {
+        font-size: 2rem;
+      }
+      .form-row {
+        flex-direction: column;
+      }
+      .form-group {
+        margin-bottom: 15px;
+      }
+      .language-toggle {
+        position: static;
+        text-align: center;
+        margin-bottom: 20px;
+      }
+      .btn-custom {
+        width: 100%;
+      }
+      .insights-container {
+        padding: 15px;
+      }
+      #aiInsights {
+        font-size: 1rem;
+      }
+    }
+    select {
+      max-height: 200px; /* Adjust height as needed */
+      overflow-y: auto;
+    }
+  </style>
+</head>
+<body>
+  <div class="language-toggle">
+    <button class="btn btn-custom" onclick="toggleLanguage()" id="langToggle">
+      भाषा बदला | Change Language
+    </button>
+  </div>
+  <div class="container">
+    <div class="header">
+      <h1 class="en">Crop Market Analysis</h1>
+      <h1 class="mr" style="display:none;">कृषी बाजार विश्लेषण</h1>
+    </div>
+    <div class="form-section">
+      <form id="filterForm">
+        <div class="form-row">
+          <div class="form-group col-md-3">
+            <label for="state" class="label-state">State</label>
+            <select class="form-control" id="state" name="state">
+              <option value="">Select State</option>
+              {% for state in states %}
+              <option value="{{ state }}">{{ state }}</option>
+              {% endfor %}
+            </select>
+          </div>
+          <div class="form-group col-md-3">
+            <label for="district" class="label-district">District</label>
+            <select class="form-control" id="district" name="district" disabled>
+              <option value="">Select District</option>
+            </select>
+          </div>
+          <div class="form-group col-md-3">
+            <label for="market" class="label-market">Market</label>
+            <select class="form-control" id="market" name="market" disabled>
+              <option value="">Select Market</option>
+            </select>
+          </div>
+          <div class="form-group col-md-3">
+            <label for="commodity" class="label-commodity">Commodity</label>
+            <select class="form-control" id="commodity" name="commodity" disabled>
+              <option value="">Select Commodity</option>
+            </select>
+          </div>
+        </div>
+      </form>
+    </div>
+    <div class="loading" id="loadingIndicator">
+      <div class="spinner-border" role="status">
+        <span class="sr-only">Loading...</span>
+      </div>
+    </div>
+    <div class="chart-container">
+      <div id="barChart"></div>
+      <div id="lineChart"></div>
+      <div id="boxChart"></div>
+    </div>
+    <div class="market-data-container">
+      <div class="row">
+        <div class="col-md-12 mb-4">
+          <div class="card">
+            <div class="card-header">
+              <h4 class="en">Market Statistics</h4>
+              <h4 class="mr" style="display:none;">बाजार आकडेवारी</h4>
+            </div>
+            <div class="card-body">
+              <div class="row">
+                <div class="col-md-3">
+                  <div class="stat-item">
+                    <h6 class="en">Total Commodities</h6>
+                    <h6 class="mr" style="display:none;">एकूण पिके</h6>
+                    <span id="totalCommodities"></span>
+                  </div>
+                </div>
+                <div class="col-md-3">
+                  <div class="stat-item">
+                    <h6 class="en">Average Price</h6>
+                    <h6 class="mr" style="display:none;">सरासरी किंमत</h6>
+                    <span id="avgPrice"></span>
+                  </div>
+                </div>
+                <div class="col-md-3">
+                  <div class="stat-item">
+                    <h6 class="en">Price Range</h6>
+                    <h6 class="mr" style="display:none;">किंमत श्रेणी</h6>
+                    <span id="priceRange"></span>
+                  </div>
+                </div>
+                <div class="col-md-3">
+                  <div class="stat-item">
+                    <h6 class="en">Total Markets</h6>
+                    <h6 class="mr" style="display:none;">एकूण बाजार</h6>
+                    <span id="totalMarkets"></span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-6 mb-4">
+          <div class="card">
+            <div class="card-header">
+              <h4 class="en">Top 5 Cheapest Crops</h4>
+              <h4 class="mr" style="display:none;">सर्वात स्वस्त 5 पिके</h4>
+            </div>
+            <div class="card-body" id="cheapestCrops">
+            </div>
+          </div>
+        </div>
+        <div class="col-md-6 mb-4">
+          <div class="card">
+            <div class="card-header">
+              <h4 class="en">Top 5 Costliest Crops</h4>
+              <h4 class="mr" style="display:none;">सर्वात महाग 5 पिके</h4>
+            </div>
+            <div class="card-body" id="costliestCrops">
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="card mb-4">
+        <div class="card-header">
+          <h4 class="en">Market Data</h4>
+          <h4 class="mr" style="display:none;">बाजार माहिती</h4>
+        </div>
+        <div class="card-body" id="marketData">
+        </div>
+      </div>
+    </div>
+    <div class="insights-container">
+      <div id="aiInsights"></div>
+    </div>
+  </div>
+  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+  <script>
+    let currentLang = 'en';
+    // Update label texts based on translations from the server
+    function updateLabels(translations) {
+      if (currentLang === 'mr') {
+        Object.keys(translations).forEach(key => {
+          $(.label-${key}).text(translations[key]);
+        });
+        $('.en').hide();
+        $('.mr').show();
+      } else {
+        $('.label-state').text('State');
+        $('.label-district').text('District');
+        $('.label-market').text('Market');
+        $('.label-commodity').text('Commodity');
+        $('.en').show();
+        $('.mr').hide();
+      }
+    }
+    // Toggle the language and update content
+    function toggleLanguage() {
+      currentLang = currentLang === 'en' ? 'mr' : 'en';
+      $('#langToggle').text(currentLang === 'en' ? 'भाषा बदला | Change Language' : 'भाषा बदला | Change Language');
+      updateContent();
+    }
+    // Show and hide the loading indicator
+    function showLoading() {
+      $('#loadingIndicator').show();
+    }
+    function hideLoading() {
+      $('#loadingIndicator').hide();
+    }
+    // Enable/disable a select element by its id
+    function enableSelect(selectId) {
+      $(#${selectId}).prop('disabled', false);
+    }
+    function disableSelect(selectId) {
+      $(#${selectId}).prop('disabled', true);
+    }
+    // Update content by sending the form data (with language info) to the backend
+    function updateContent() {
+      showLoading();
+      const formData = new FormData($('#filterForm')[0]);
+      formData.append('language', currentLang);
+      $.ajax({
+        url: '/filter_data',
+        method: 'POST',
+        data: formData,
+        processData: false,
+        contentType: false,
+        success: function(response) {
+          if (response.success) {
+            // Update plots
+            if (response.plots.bar) $('#barChart').html(response.plots.bar);
+            if (response.plots.line) $('#lineChart').html(response.plots.line);
+            if (response.plots.box) $('#boxChart').html(response.plots.box);
+            // Update market statistics
+            $('#totalCommodities').text(response.market_stats.total_commodities);
+            $('#avgPrice').text(response.market_stats.avg_modal_price);
+            $('#priceRange').text(response.market_stats.price_range);
+            $('#totalMarkets').text(response.market_stats.total_markets);
+            // Update tables
+            $('#marketData').html(response.market_html);
+            $('#cheapestCrops').html(response.cheapest_html);
+            $('#costliestCrops').html(response.costliest_html);
+            // Show insights only if state and district are selected
+            if (response.hasStateDistrict) {
+              $('.insights-container').show();
+              $('#aiInsights').html(response.insights);
+            } else {
+              $('.insights-container').hide();
+              $('#aiInsights').html('');
+            }
+            // Update translations for labels
+            updateLabels(response.translations);
+            console.log(response.translations);
+          } else {
+            const message = currentLang === 'en' ?
+              'Please select both state and district to view analysis' :
+              'कृपया विश्लेषण पाहण्यासाठी राज्य आणि जिल्हा निवडा';
+            alert(message);
+          }
+          hideLoading();
+        },
+        error: function() {
+          alert(currentLang === 'en' ? 'Error loading data' : 'माहिती लोड करताना त्रुटी');
+          hideLoading();
+        }
+      });
+    }
+    // Cascade dropdowns
+    $('#state').change(function() {
+      const state = $(this).val();
+      // Reset and disable dependent dropdowns
+      $('#district, #market, #commodity').html('<option value="">Select</option>').prop('disabled', true);
+      if (state) {
+        showLoading();
+        $.post('/get_districts', { state: state }, function(districts) {
+          $('#district').html('<option value="">Select District</option>');
+          districts.forEach(district => {
+            $('#district').append(<option value="${district}">${district}</option>);
+          });
+          enableSelect('district');
+          hideLoading();
+        });
+      }
+      updateContent();
+    });
+    $('#district').change(function() {
+      const district = $(this).val();
+      // Reset and disable dependent dropdowns
+      $('#market, #commodity').html('<option value="">Select</option>').prop('disabled', true);
+      if (district) {
+        showLoading();
+        $.post('/get_markets', { district: district }, function(markets) {
+          $('#market').html('<option value="">Select Market</option>');
+          markets.forEach(market => {
+            $('#market').append(<option value="${market}">${market}</option>);
+          });
+          enableSelect('market');
+          hideLoading();
+        });
+      }
+      updateContent();
+    });
+    $('#market').change(function() {
+      const market = $(this).val();
+      // Reset commodity dropdown
+      $('#commodity').html('<option value="">Select</option>').prop('disabled', true);
+      if (market) {
+        showLoading();
+        $.post('/get_commodities', { market: market }, function(commodities) {
+          $('#commodity').html('<option value="">Select Commodity</option>');
+          commodities.forEach(commodity => {
+            $('#commodity').append(<option value="${commodity}">${commodity}</option>);
+          });
+          enableSelect('commodity');
+          hideLoading();
+        });
+      }
+      updateContent();
+    });
+    $('#commodity').change(function() {
+      updateContent();
+    });
+    // Initial setup
+    $(document).ready(function() {
+      $('.insights-container').hide();
+      updateContent();
+    });
+  </script>
+</body>
 </html>