Upload 12 files

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+final_crop_historic_data_pkjk.csv filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -0,0 +1,18 @@
+# Use an official Python runtime as a parent image
+FROM python:3.9-slim
+
+# Set the working directory
+WORKDIR /app
+
+# Copy the application files to the container
+COPY . /app
+
+# Install Python dependencies
+RUN pip install --no-cache-dir -r requirements.txt
+
+
+# Expose the Flask port (Hugging Face Spaces uses port 7860 by default)
+EXPOSE 7860
+
+# Command to run the Flask app
+CMD ["python", "app.py"]

app.py

@@ -0,0 +1,170 @@
+from flask import Flask, render_template, request
+import folium
+from folium.plugins import HeatMapWithTime, FeatureGroupSubGroup, HeatMap
+import pandas as pd
+import os
+
+app = Flask(__name__)
+
+# Load the dataset
+df = pd.read_csv('final_crop_historic_data_pkjk.csv')
+df.columns = ['State', 'District', 'Crop_Year', 'Season', 'Crop', 'Area', 'Production', 'Latitude', 'Longitude']
+
+
+@app.route('/')
+def home():
+    crop_options = df['Crop'].unique().tolist()
+    return render_template('index.html', map_html="", selected_map="Home", crop_options=crop_options, selected_crop=None)
+
+
+@app.route('/prodction_analysis', methods=['GET', 'POST'])
+def production_analysis():
+    crop_options = df['Crop'].unique().tolist()
+    selected_crop = request.form.get('crop_type') if request.method == 'POST' else None
+
+    if not selected_crop:
+        return render_template('index.html', map_html="", selected_map="Production Analysis",
+                               crop_options=crop_options, selected_crop=None)
+
+    crop_data = df[df['Crop'] == selected_crop]
+
+    if crop_data.empty:
+        return render_template('index.html', map_html="", selected_map="No Data Available",
+                               crop_options=crop_options, selected_crop=selected_crop)
+
+    time_index = crop_data['Crop_Year'].unique()
+    heatmap_data = [
+        [[row['Latitude'], row['Longitude']] for _, row in crop_data[crop_data['Crop_Year'] == year].iterrows()]
+        for year in time_index
+    ]
+
+    m = folium.Map(location=[20.5937, 78.9629], zoom_start=5)
+    heatmap = HeatMapWithTime(
+        heatmap_data,
+        index=[str(year) for year in time_index],
+        auto_play=True,
+        max_opacity=0.6
+    )
+    heatmap.add_to(m)
+
+    map_html = m._repr_html_()
+    return render_template('index.html', map_html=map_html, selected_map="Production Heatmap Analysis",
+                           crop_options=crop_options, selected_crop=selected_crop)
+
+
+@app.route('/heatmap_analysis')
+def heatmap_analysis():
+    global df  # Declare df as global
+    m = folium.Map(location=[20.5937, 78.9629], zoom_start=5)
+    fg = folium.FeatureGroup(name="Crops")
+    m.add_child(fg)
+    df_sampled = df.sample(frac=0.005, random_state=42)  # Use a different variable for sampled df
+    for crop in df_sampled['Crop'].unique():
+        subgroup = FeatureGroupSubGroup(fg, crop)
+        m.add_child(subgroup)
+        crop_data = df_sampled[df_sampled['Crop'] == crop]
+
+        heatmap_data = [[row['Latitude'], row['Longitude']] for _, row in crop_data.iterrows()]
+        HeatMap(heatmap_data).add_to(subgroup)
+
+    folium.LayerControl(collapsed=False).add_to(m)
+
+    map_html = m._repr_html_()
+    return render_template('analysis_base.html', map_html=map_html, selected_map="Crop Heatmap Analysis")
+
+
+@app.route('/season_analysis')
+def season_analysis():
+    global df  # Declare df as global
+
+    # Initialize the map centered over India with an appropriate zoom level
+    m = folium.Map(location=[20.5937, 78.9629], zoom_start=5)
+
+    # Sample a fraction of the dataframe for performance
+    df_sampled = df.sample(frac=0.005, random_state=42)
+
+    # Create a dictionary to store top 5 crops for each location
+    top_crops = {}
+
+    # Collect the top crops for each unique location (Latitude, Longitude)
+    for _, row in df_sampled.iterrows():
+        lat_lon = (row['Latitude'], row['Longitude'])
+        crop = row['Crop']
+        production = row['Production']
+
+        if lat_lon not in top_crops:
+            top_crops[lat_lon] = {'Season': row['Season'], 'Crops': {}, 'Area': row['Area']}
+
+        if crop not in top_crops[lat_lon]['Crops']:
+            top_crops[lat_lon]['Crops'][crop] = 0
+        top_crops[lat_lon]['Crops'][crop] += production
+
+    # Limit to top 5 crops for each location
+    for location, data in top_crops.items():
+        top_crops[location]['Crops'] = sorted(data['Crops'].items(), key=lambda x: x[1], reverse=True)[:5]
+
+    # Add scatter points for each unique location with a different color for each season
+    season_colors = {
+        'Kharif': 'orange',
+        'Rabi': 'green',
+        'Winter': 'blue',
+        'Autumn':'pink',
+        'Rabi':'brown',
+        'Summer':'yellow',
+        'Whole Year':'Red'
+    }
+
+    for (latitude, longitude), data in top_crops.items():
+        season = data['Season']
+        top_crop_list = data['Crops']
+        area = data['Area']
+
+        # Create a string for the top crops
+        top_crops_str = "<br>".join([f"{crop[0]}: {crop[1]}" for crop in top_crop_list])
+
+        # Add a scatter point to the map for each location
+        folium.CircleMarker(
+            location=[latitude, longitude],
+            radius=7,  # Fixed radius for scatter points
+            color=season_colors.get(season, 'gray'),  # Use season color or gray if not found
+            fill=True,
+            fill_color=season_colors.get(season, 'gray'),
+            fill_opacity=0.7,
+            tooltip=(f"Latitude: {latitude}<br>"
+                     f"Longitude: {longitude}<br>"
+                     f"Season: {season}<br>"
+                     f"Area: {area}<br>"
+                     f"Top 5 Crops:<br>{top_crops_str}")
+        ).add_to(m)
+
+    # Convert the map to HTML format for rendering
+    map_html = m._repr_html_()
+
+    # Render the map in the template
+    return render_template('analysis_base.html', map_html=map_html, selected_map="Season Analysis")
+
+
+@app.route('/crop_analysis')
+def crop_analysis():
+    global df  # Declare df as global
+    df_sampled = df.sample(frac=0.005, random_state=42)  # Use a different variable for sampled df
+    m = folium.Map(location=[20.5937, 78.9629], zoom_start=5)
+
+    for district in df_sampled['District'].unique():
+        district_data = df_sampled[df_sampled['District'] == district]
+        top_crops = district_data.groupby('Crop')['Production'].sum().nlargest(5).index.tolist()
+        lat, lon = district_data.iloc[0]['Latitude'], district_data.iloc[0]['Longitude']
+
+        folium.Marker(
+            location=[lat, lon],
+            popup=f"<b>District:</b> {district}<br><b>Top 5 Crops:</b> {', '.join(top_crops)}",
+            icon=folium.Icon(icon='arrow-up', color='green')
+        ).add_to(m)
+
+    map_html = m._repr_html_()
+    return render_template('analysis_base.html', map_html=map_html, selected_map="Geospatial Analysis")
+
+
+
+if __name__ == '__main__':
+    app.run(port=7860,host='0.0.0.0',debug=True)

final_crop_historic_data_pkjk.csv

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9cf39965597f1b461e1351928200036a07929f434420cc40e84d097f9226fc3a
+size 311198769

requirements.txt

@@ -0,0 +1,4 @@
+gunicorn
+flask
+pandas
+folium

templates/analysis_base.html

@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ selected_map }} - Crop Analysis</title>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
+    <style>
+        body {
+            padding: 0;
+            background-color: #f8f9fa;
+            min-height: 100vh;
+        }
+        
+        /* Hero Header */
+        .hero-header {
+            background-color: #1a5d3a;
+            color: white;
+            padding: 2rem 0 4rem 0;
+            box-shadow: 0 4px 20px rgba(26, 93, 58, 0.2);
+        }
+        
+        .navbar {
+            background-color: transparent;
+            padding: 1rem 3rem;
+        }
+        
+        .navbar-nav {
+            flex-direction: row;
+            justify-content: center;
+            width: 100%;
+            gap: 3rem;
+            list-style: none;
+            margin: 0;
+            padding: 0;
+        }
+        
+        .nav-item {
+            padding: 0;
+        }
+        
+        .nav-link {
+            color: white !important;
+            font-weight: 500;
+            font-size: 1rem;
+            padding: 0.5rem 1.5rem !important;
+            border-radius: 50px;
+            transition: all 0.3s ease;
+            border: 1px solid transparent;
+            text-decoration: none;
+            display: inline-block;
+        }
+        
+        .nav-link:hover {
+            background-color: #ffffff;
+            color: #198754 !important;
+            border-color: #198754;
+        }
+        
+        .nav-link i {
+            margin-right: 0.5rem;
+        }
+        
+        .main-container {
+            background: white;
+            border-radius: 12px;
+            padding: 25px;
+            max-height: 1500px;
+            max-width: 1700px;
+            margin: -3rem auto 20px auto;
+            border: 3px solid #2e7d32;
+            box-shadow: 0 6px 20px rgba(46, 125, 50, 0.15);
+        }
+        
+        .heading {
+            font-weight: bold;
+            color: #1b5e20;
+            margin-bottom: 20px;
+        }
+        
+        #map-container {
+            margin-top: 10px;
+            margin-bottom: 20px;
+            height: 600px;
+            border: 3px solid #2e7d32;
+            border-radius: 8px;
+            overflow: hidden;
+        }
+    </style>
+</head>
+<body>
+    <!-- Navbar with Heading -->
+    <nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #1a5d3a; padding: 1rem 3rem;">
+        <div class="container-fluid justify-content-center">
+            <h1 class="navbar-brand mb-0" style="font-size: 1.75rem; font-weight: 700;">Crop Production Analysis</h1>
+        </div>
+    </nav>
+
+    <!-- Hero Section with Navigation -->
+    <div class="hero-header">
+        <ul class="navbar-nav">
+            <li class="nav-item"><a class="nav-link" href="/prodction_analysis"><i class="bi bi-graph-up"></i> Production Analysis</a></li>
+            <li class="nav-item"><a class="nav-link" href="/heatmap_analysis"><i class="bi bi-map"></i> Heatmap Analysis</a></li>
+            <li class="nav-item"><a class="nav-link" href="/season_analysis"><i class="bi bi-calendar3"></i> Season Analysis</a></li>
+            <li class="nav-item"><a class="nav-link" href="/crop_analysis"><i class="bi bi-geo-alt"></i> Geospatial Analysis</a></li>
+        </ul>
+    </div>
+
+    <div class="main-container">
+        <h2 class="heading">{{ selected_map }}</h2>
+        <div id="map-container">
+            {{ map_html | safe }}
+        </div>
+    </div>
+
+    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
+</body>
+</html>

templates/crop_analysis.html

@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Geospatial Analysis</title>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Outfit', sans-serif;
+            background-color: #f8f9fa;
+            min-height: 100vh;
+            padding: 0;
+            padding-bottom: 2rem;
+        }
+        
+        /* Hero Header */
+        .hero-header {
+            background-color: #1a5d3a;
+            color: white;
+            padding: 2rem 0 4rem 0;
+            box-shadow: 0 4px 20px rgba(26, 93, 58, 0.2);
+        }
+        
+        .navbar {
+            background-color: transparent;
+            padding: 1rem 3rem;
+        }
+        
+        .navbar-nav {
+            flex-direction: row;
+            justify-content: center;
+            width: 100%;
+            gap: 3rem;
+        }
+        
+        .nav-item {
+            padding: 0;
+        }
+        
+        .nav-link {
+            color: white !important;
+            font-weight: 500;
+            font-size: 1rem;
+            padding: 0.5rem 1.5rem !important;
+            border-radius: 50px;
+            transition: all 0.3s ease;
+            border: 1px solid transparent;
+        }
+        
+        .nav-link:hover {
+            background-color: #ffffff;
+            color: #198754 !important;
+            border-color: #198754;
+        }
+        
+        /* Main Container */
+        .main-container {
+            max-width: 1400px;
+            margin: -3rem auto 3rem auto;
+            padding: 0 1.5rem;
+        }
+        
+        .content-card {
+            background: #ffffff;
+            border-radius: 20px;
+            padding: 3rem;
+            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
+            border: none;
+        }
+        
+        .heading {
+            font-weight: 700;
+            color: #212529;
+            font-size: 2rem;
+            margin-bottom: 2rem;
+        }
+        
+        iframe {
+            width: 100%;
+            height: 600px;
+            border: 1px solid #dee2e6;
+            border-radius: 8px;
+        }
+    </style>
+</head>
+<body>
+    <!-- Navbar with Heading -->
+    <nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #1a5d3a; padding: 1rem 3rem;">
+        <div class="container-fluid justify-content-center">
+            <h1 class="navbar-brand mb-0" style="font-size: 1.75rem; font-weight: 700;">Crop Production Analysis</h1>
+        </div>
+    </nav>
+
+    <!-- Hero Section with Navigation -->
+    <div class="hero-header">
+        <div class="container">
+            <ul class="navbar-nav">
+                <li class="nav-item"><a class="nav-link" href="/prodction_analysis"><i class="bi bi-graph-up"></i> Production Analysis</a></li>
+                <li class="nav-item"><a class="nav-link" href="/heatmap_analysis"><i class="bi bi-map"></i> Heatmap Analysis</a></li>
+                <li class="nav-item"><a class="nav-link" href="/season_analysis"><i class="bi bi-calendar3"></i> Season Analysis</a></li>
+                <li class="nav-item"><a class="nav-link" href="/crop_analysis"><i class="bi bi-geo-alt"></i> Geospatial Analysis</a></li>
+            </ul>
+        </div>
+    </div>
+
+    <!-- Floating Content Card -->
+    <div class="main-container">
+        <div class="content-card">
+            <h2 class="heading">🌾 Geospatial Analysis</h2>
+            <iframe src="{{ map_url }}"></iframe>
+        </div>
+    </div>
+
+    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
+</body>
+</html>

templates/index.html

@@ -0,0 +1,211 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Crop Production Analysis</title>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Outfit', sans-serif;
+            background-color: #f8f9fa;
+            min-height: 100vh;
+            padding: 0;
+            
+        }
+        
+        /* Curved Bottom Hero Header */
+        .hero-header {
+            background-color: #1a5d3a;
+            color: white;
+            padding: 2rem 0 4rem 0;
+            
+            box-shadow: 0 4px 20px rgba(26, 93, 58, 0.2);
+        }
+        
+        .navbar {
+            background-color: transparent;
+            padding: 1rem 3rem;
+        }
+        
+        .navbar-nav {
+            flex-direction: row;
+            justify-content: center;
+            width: 100%;
+            gap: 3rem;
+        }
+        
+        .nav-item {
+            padding: 0;
+        }
+        
+        .nav-link {
+            color: white !important;
+            font-weight: 500;
+            font-size: 1rem;
+            padding: 0.5rem 1.5rem !important;
+            border-radius: 50px;
+            transition: all 0.3s ease;
+            border: 1px solid transparent;
+        }
+        
+        .nav-link:hover {
+            background-color: #ffffff;
+            color: #198754 !important;
+            border-color: #198754;
+        }
+        
+        /* Floating Card */
+        .main-container {
+            max-width: 1400px;
+            margin: -3rem auto 3rem auto;
+           
+        }
+        
+        .content-card {
+            background: #ffffff;
+            border-radius: 20px;
+            padding: 3rem;
+            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
+            border: 3px solid #198754;
+        }
+        
+        .heading {
+            font-weight: bold;
+            color: #1b5e20;
+            margin-bottom: 20px;
+        }
+        
+        /* Form Styles */
+        .form-group {
+            margin-bottom: 1.5rem;
+        }
+        
+        .form-group label {
+            font-weight: 500;
+            color: #212529;
+            margin-bottom: 0.5rem;
+            display: block;
+        }
+        
+        .form-control {
+            background-color: #f8f9fa;
+            border: 1px solid #dee2e6;
+            border-radius: 8px;
+            padding: 0.5rem 1rem;
+            font-family: 'Outfit', sans-serif;
+            font-weight: 400;
+            transition: all 0.3s ease;
+        }
+        
+        .form-control:focus {
+            background-color: #ffffff;
+            border-color: #198754;
+            box-shadow: 0 0 0 4px rgba(25, 135, 84, 0.1);
+            outline: none;
+        }
+        
+        /* Button Styles */
+        .btn-success {
+            background-color: #1a5d3a;
+            border: none;
+            border-radius: 8px;
+            padding: 0.75rem 2rem;
+            font-weight: 500;
+            font-size: 1rem;
+            color: white;
+            transition: all 0.3s ease;
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        
+        .btn-success:hover {
+            background-color: #143d2e;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(26, 93, 58, 0.3);
+        }
+        
+        .btn-success:focus {
+            box-shadow: 0 0 0 4px rgba(25, 135, 84, 0.2);
+        }
+        
+        /* Map Container */
+        #map-container {
+            margin-top: 2rem;
+            height: 500px;
+            border: 1px solid #dee2e6;
+            border-radius: 8px;
+            overflow: hidden;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+        }
+        
+        #map-container iframe {
+            width: 100%;
+            height: 100%;
+            border: none;
+        }
+    </style>
+</head>
+<body>
+    <!-- Navbar with Heading -->
+    <nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #1a5d3a; padding: 1rem 3rem;">
+        <div class="container-fluid justify-content-center">
+            <h1 class="navbar-brand mb-0" style="font-size: 1.75rem; font-weight: 700;">Crop Production Analysis</h1>
+        </div>
+    </nav>
+
+    <!-- Hero Section with Navigation -->
+    <div class="hero-header">
+        <div class="container">
+            <ul class="navbar-nav">
+                <li class="nav-item"><a class="nav-link" href="/prodction_analysis"><i class="bi bi-graph-up"></i> Production Analysis</a></li>
+                <li class="nav-item"><a class="nav-link" href="/heatmap_analysis"><i class="bi bi-map"></i> Heatmap Analysis</a></li>
+                <li class="nav-item"><a class="nav-link" href="/season_analysis"><i class="bi bi-calendar3"></i> Season Analysis</a></li>
+                <li class="nav-item"><a class="nav-link" href="/crop_analysis"><i class="bi bi-geo-alt"></i> Geospatial Analysis</a></li>
+            </ul>
+        </div>
+    </div>
+
+    <!-- Floating Content Card -->
+    <div class="main-container">
+        <div class="content-card">
+            
+            <form method="POST" action="/prodction_analysis">
+                <h1 class="heading">Crop Production Analysis</h1>
+                <div class="form-group">
+                    <label for="crop_type">Select Crop Type:</label>
+                    <select class="form-control" id="crop_type" name="crop_type">
+                        <option value="">Select Crop</option>
+                        {% for crop in crop_options %}
+                        <option value="{{ crop }}" {% if crop == selected_crop %}selected{% endif %}>{{ crop }}</option>
+                        {% endfor %}
+                    </select>
+                </div>
+                <button type="submit" class="btn btn-success">
+                    <i class="bi bi-search"></i>
+                    Analyze
+                </button>
+            </form>
+
+            <div id="map-container">
+                {{ map_html | safe }}
+            </div>
+        </div>
+    </div>
+
+    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
+</body>
+</html>

templates/prediction_analysis.html

@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Production Analysis</title>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Outfit', sans-serif;
+            background-color: #f8f9fa;
+            min-height: 100vh;
+            padding: 0;
+            padding-bottom: 2rem;
+        }
+        
+        /* Hero Header */
+        .hero-header {
+            background-color: #1a5d3a;
+            color: white;
+            padding: 2rem 0 4rem 0;
+            box-shadow: 0 4px 20px rgba(26, 93, 58, 0.2);
+        }
+        
+        .navbar {
+            background-color: transparent;
+            padding: 1rem 3rem;
+        }
+        
+        .navbar-nav {
+            flex-direction: row;
+            justify-content: center;
+            width: 100%;
+            gap: 3rem;
+        }
+        
+        .nav-item {
+            padding: 0;
+        }
+        
+        .nav-link {
+            color: white !important;
+            font-weight: 500;
+            font-size: 1rem;
+            padding: 0.5rem 1.5rem !important;
+            border-radius: 50px;
+            transition: all 0.3s ease;
+            border: 1px solid transparent;
+        }
+        
+        .nav-link:hover {
+            background-color: #ffffff;
+            color: #198754 !important;
+            border-color: #198754;
+        }
+        
+        /* Main Container */
+        .main-container {
+            max-width: 1400px;
+            margin: -3rem auto 3rem auto;
+            padding: 0 1.5rem;
+        }
+        
+        .content-card {
+            background: #ffffff;
+            border-radius: 20px;
+            padding: 3rem;
+            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
+            border: none;
+        }
+        
+        .heading {
+            font-weight: 700;
+            color: #212529;
+            font-size: 2rem;
+            margin-bottom: 2rem;
+        }
+        
+        iframe {
+            width: 100%;
+            height: 600px;
+            border: 1px solid #dee2e6;
+            border-radius: 8px;
+        }
+    </style>
+</head>
+<body>
+    <!-- Navbar with Heading -->
+    <nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #1a5d3a; padding: 1rem 3rem;">
+        <div class="container-fluid justify-content-center">
+            <h1 class="navbar-brand mb-0" style="font-size: 1.75rem; font-weight: 700;">Crop Production Analysis</h1>
+        </div>
+    </nav>
+
+    <!-- Hero Section with Navigation -->
+    <div class="hero-header">
+        <div class="container">
+            <ul class="navbar-nav">
+                <li class="nav-item"><a class="nav-link" href="/prodction_analysis"><i class="bi bi-graph-up"></i> Production Analysis</a></li>
+                <li class="nav-item"><a class="nav-link" href="/heatmap_analysis"><i class="bi bi-map"></i> Heatmap Analysis</a></li>
+                <li class="nav-item"><a class="nav-link" href="/season_analysis"><i class="bi bi-calendar3"></i> Season Analysis</a></li>
+                <li class="nav-item"><a class="nav-link" href="/crop_analysis"><i class="bi bi-geo-alt"></i> Geospatial Analysis</a></li>
+            </ul>
+        </div>
+    </div>
+
+    <!-- Floating Content Card -->
+    <div class="main-container">
+        <div class="content-card">
+            <h2 class="heading">📊 Production Analysis</h2>
+            <iframe src="{{ map_url }}"></iframe>
+        </div>
+    </div>
+
+    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
+</body>
+</html>

templates/production_heatmap.html

@@ -0,0 +1,183 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Production Heatmap</title>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Outfit', sans-serif;
+            background-color: #f8f9fa;
+            min-height: 100vh;
+            padding: 0;
+            padding-bottom: 2rem;
+        }
+        
+        /* Hero Header */
+        .hero-header {
+            background-color: #1a5d3a;
+            color: white;
+            padding: 2rem 0 4rem 0;
+            box-shadow: 0 4px 20px rgba(26, 93, 58, 0.2);
+        }
+        
+        .navbar {
+            background-color: transparent;
+            padding: 1rem 3rem;
+        }
+        
+        .navbar-nav {
+            flex-direction: row;
+            justify-content: center;
+            width: 100%;
+            gap: 3rem;
+        }
+        
+        .nav-item {
+            padding: 0;
+        }
+        
+        .nav-link {
+            color: white !important;
+            font-weight: 500;
+            font-size: 1rem;
+            padding: 0.5rem 1.5rem !important;
+            border-radius: 50px;
+            transition: all 0.3s ease;
+            border: 1px solid transparent;
+        }
+        
+        .nav-link:hover {
+            background-color: #ffffff;
+            color: #198754 !important;
+            border-color: #198754;
+        }
+        
+        /* Main Container */
+        .main-container {
+            max-width: 1400px;
+            margin: -3rem auto 3rem auto;
+            padding: 0 1.5rem;
+        }
+        
+        .content-card {
+            background: #ffffff;
+            border-radius: 20px;
+            padding: 3rem;
+            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
+            border: none;
+        }
+        
+        .heading {
+            font-weight: 700;
+            color: #212529;
+            font-size: 2rem;
+            margin-bottom: 2rem;
+        }
+        
+        .scrollable {
+            max-height: 300px;
+            overflow-y: auto;
+            padding: 1rem;
+            background: #f8f9fa;
+            border: 1px solid #dee2e6;
+            border-radius: 8px;
+            margin-bottom: 1.5rem;
+        }
+        
+        label {
+            color: #212529;
+            font-weight: 500;
+            font-size: 1rem;
+        }
+        
+        input[type="checkbox"] {
+            accent-color: #198754;
+            margin-right: 8px;
+            width: 18px;
+            height: 18px;
+            cursor: pointer;
+        }
+        
+        input[type="submit"] {
+            background-color: #1a5d3a;
+            color: white;
+            border: none;
+            padding: 0.75rem 2rem;
+            border-radius: 8px;
+            font-size: 1rem;
+            font-weight: 500;
+            font-family: 'Outfit', sans-serif;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+        
+        input[type="submit"]:hover {
+            background-color: #143d2e;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(26, 93, 58, 0.3);
+        }
+        
+        iframe {
+            width: 100%;
+            height: 600px;
+            border: 1px solid #dee2e6;
+            border-radius: 8px;
+            margin-top: 1.5rem;
+        }
+    </style>
+</head>
+<body>
+    <!-- Navbar with Heading -->
+    <nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #1a5d3a; padding: 1rem 3rem;">
+        <div class="container-fluid justify-content-center">
+            <h1 class="navbar-brand mb-0" style="font-size: 1.75rem; font-weight: 700;">Crop Production Analysis</h1>
+        </div>
+    </nav>
+
+    <!-- Hero Section with Navigation -->
+    <div class="hero-header">
+        <div class="container">
+            <ul class="navbar-nav">
+                <li class="nav-item"><a class="nav-link" href="/prodction_analysis"><i class="bi bi-graph-up"></i> Production Analysis</a></li>
+                <li class="nav-item"><a class="nav-link" href="/heatmap_analysis"><i class="bi bi-map"></i> Heatmap Analysis</a></li>
+                <li class="nav-item"><a class="nav-link" href="/season_analysis"><i class="bi bi-calendar3"></i> Season Analysis</a></li>
+                <li class="nav-item"><a class="nav-link" href="/crop_analysis"><i class="bi bi-geo-alt"></i> Geospatial Analysis</a></li>
+            </ul>
+        </div>
+    </div>
+
+    <!-- Floating Content Card -->
+    <div class="main-container">
+        <div class="content-card">
+            <h2 class="heading">🗺️ Production Heatmap</h2>
+            <form method="get">
+                <div class="scrollable">
+                    <label>Select Crops:</label><br><br>
+                    {% for crop in crops %}
+                        <input type="checkbox" name="crops" value="{{ crop }}" {% if crop in selected_crops %}checked{% endif %}>
+                        {{ crop }}<br>
+                    {% endfor %}
+                </div>
+                <input type="submit" value="Update Heatmap">
+            </form>
+            <iframe src="{{ map_url }}"></iframe>
+        </div>
+    </div>
+
+    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
+</body>
+</html>

templates/seasonal_analysis.html

@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Season Analysis</title>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Outfit', sans-serif;
+            background-color: #f8f9fa;
+            min-height: 100vh;
+            padding: 0;
+            padding-bottom: 2rem;
+        }
+        
+        /* Hero Header */
+        .hero-header {
+            background-color: #1a5d3a;
+            color: white;
+            padding: 2rem 0 4rem 0;
+            box-shadow: 0 4px 20px rgba(26, 93, 58, 0.2);
+        }
+        
+        .navbar {
+            background-color: transparent;
+            padding: 1rem 3rem;
+        }
+        
+        .navbar-nav {
+            flex-direction: row;
+            justify-content: center;
+            width: 100%;
+            gap: 3rem;
+        }
+        
+        .nav-item {
+            padding: 0;
+        }
+        
+        .nav-link {
+            color: white !important;
+            font-weight: 500;
+            font-size: 1rem;
+            padding: 0.5rem 1.5rem !important;
+            border-radius: 50px;
+            transition: all 0.3s ease;
+            border: 1px solid transparent;
+        }
+        
+        .nav-link:hover {
+            background-color: #ffffff;
+            color: #198754 !important;
+            border-color: #198754;
+        }
+        
+        /* Main Container */
+        .main-container {
+            max-width: 1200px;
+            margin: -3rem auto 3rem auto;
+            padding: 0 1.5rem;
+        }
+        
+        .content-card {
+            background: #ffffff;
+            border-radius: 20px;
+            padding: 3rem;
+            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
+            border: none;
+            text-align: center;
+        }
+        
+        .heading {
+            font-weight: 700;
+            color: #212529;
+            font-size: 2rem;
+            margin-bottom: 2rem;
+        }
+        
+        img {
+            max-width: 100%;
+            height: auto;
+            border: 1px solid #dee2e6;
+            border-radius: 8px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+        }
+    </style>
+</head>
+<body>
+    <!-- Navbar with Heading -->
+    <nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #1a5d3a; padding: 1rem 3rem;">
+        <div class="container-fluid justify-content-center">
+            <h1 class="navbar-brand mb-0" style="font-size: 1.75rem; font-weight: 700;">Crop Production Analysis</h1>
+        </div>
+    </nav>
+
+    <!-- Hero Section with Navigation -->
+    <div class="hero-header">
+        <div class="container">
+            <ul class="navbar-nav">
+                <li class="nav-item"><a class="nav-link" href="/prodction_analysis"><i class="bi bi-graph-up"></i> Production Analysis</a></li>
+                <li class="nav-item"><a class="nav-link" href="/heatmap_analysis"><i class="bi bi-map"></i> Heatmap Analysis</a></li>
+                <li class="nav-item"><a class="nav-link" href="/season_analysis"><i class="bi bi-calendar3"></i> Season Analysis</a></li>
+                <li class="nav-item"><a class="nav-link" href="/crop_analysis"><i class="bi bi-geo-alt"></i> Geospatial Analysis</a></li>
+            </ul>
+        </div>
+    </div>
+
+    <!-- Floating Content Card -->
+    <div class="main-container">
+        <div class="content-card">
+            <h2 class="heading">🌿 Season Analysis</h2>
+            <img src="{{ image_url }}" alt="Season Analysis">
+        </div>
+    </div>
+
+    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
+</body>
+</html>