Upload 7 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
+static/img1.jpg filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -0,0 +1,20 @@
+# 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
+
+RUN apt-get update && apt-get install -y libgomp1
+
+
+# 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,181 @@
+from flask import Flask, render_template, request, jsonify
+import pandas as pd
+import plotly.express as px
+import plotly.graph_objects as go
+import plotly.io as pio
+import joblib
+import numpy as np
+
+app = Flask(__name__)
+
+url='https://drive.google.com/file/d/1_vd4HISZB2h2--CiXKezeWDXHHo2fY23/view?usp=sharing'
+df = pd.read_csv('https://drive.usercontent.google.com/download?id={}&export=download&authuser=0&confirm=t'.format(url.split('/')[-2]))
+
+for column in ['State', 'District', 'Crop', 'Season']:
+    df[column] = df[column].str.strip()
+
+# Load the model for predictions
+model_filename = 'lgb_model_cropforecastinghyperparamters__33333.pkl'
+model = joblib.load(model_filename)
+
+# Use a 2% sample for faster processing
+sampled_df = df.sample(frac=0.02, random_state=42)
+
+@app.route('/')
+def index():
+    states = sampled_df['State'].unique()
+    crops = sampled_df['Crop'].unique()
+    seasons = sampled_df['Season'].unique()
+    return render_template('index.html', states=states, crops=crops, seasons=seasons)
+
+@app.route('/filter_districts', methods=['POST'])
+def filter_districts():
+    state = request.form['state']
+    districts = sampled_df[sampled_df['State'] == state]['District'].unique()
+    return jsonify({'districts': list(districts)})
+
+@app.route('/predict', methods=['POST'])
+def predict():
+    state = request.form['state']
+    district = request.form['district']
+    crop_year = int(request.form['crop_year'])
+    season = request.form['season']
+    crop = request.form['crop']
+    area = float(request.form['area'])
+
+    # Prepare input for prediction
+    input_data = pd.DataFrame({
+        'State': [state],
+        'District': [district],
+        'Crop_Year': [crop_year],
+        'Season': [season],
+        'Crop': [crop],
+        'Area': [area]
+    })
+
+    # Ensure consistent categories with the original DataFrame
+    input_data['State'] = input_data['State'].astype(pd.CategoricalDtype(categories=df['State'].unique()))
+    input_data['District'] = input_data['District'].astype(pd.CategoricalDtype(categories=df['District'].unique()))
+    input_data['Season'] = input_data['Season'].astype(pd.CategoricalDtype(categories=df['Season'].unique()))
+    input_data['Crop'] = input_data['Crop'].astype(pd.CategoricalDtype(categories=df['Crop'].unique()))
+
+    # Make prediction
+    prediction = model.predict(input_data)[0]
+    prediction_tons = max(0, round(prediction, 2))  # Ensure prediction is non-negative
+
+    # Calculate production/area ratio
+    nearest_area = find_nearest_area(state, district)
+    production_ratio = round((prediction_tons / nearest_area), 2)
+    ratio_category = categorize_production_ratio(production_ratio)
+
+    # Generate updated graphs based on the selected state and district
+    pie_chart = generate_pie_chart(state, district, crop)
+    area_vs_production = generate_area_vs_production(state, district)
+    season_vs_production = generate_season_vs_production(state, district)
+    top_states_by_production = generate_top_states_plot()
+    yearly_violin_plot = generate_yearly_violin_plot()
+    crop_year_vs_production = generate_crop_year_vs_production(state, district)
+
+    # Create gauge chart for the production ratio
+    gauge_chart = generate_gauge_chart(production_ratio, ratio_category)
+
+    # Hardcoded suggestions based on production ratio
+    suggestions = generate_suggestions(ratio_category, crop, district)
+
+    return render_template('output.html',
+                           prediction=prediction_tons,
+                           ratio=production_ratio,
+                           pie_chart_html=pio.to_html(pie_chart, full_html=False),
+                           season_vs_production_html=pio.to_html(season_vs_production, full_html=False),
+                           area_vs_production_html=pio.to_html(area_vs_production, full_html=False),
+                           top_states_html=pio.to_html(top_states_by_production, full_html=False),
+                           yearly_violin_plot_html=pio.to_html(yearly_violin_plot, full_html=False),
+                           crop_year_vs_production_html=pio.to_html(crop_year_vs_production, full_html=False),
+                           gauge_chart_html=pio.to_html(gauge_chart, full_html=False),
+                           suggestions=suggestions)
+
+
+def find_nearest_area(state, district):
+    # Calculate the nearest similar area for the district using average
+    district_data = sampled_df[(sampled_df['State'] == state) & (sampled_df['District'] == district)]
+    return district_data['Area'].mean()
+
+def categorize_production_ratio(ratio):
+    if ratio <= 2:
+        return 'Very Low'
+    elif ratio <= 4:
+        return 'Low'
+    elif ratio <= 6:
+        return 'Normal'
+    elif ratio <= 8:
+        return 'High'
+    else:
+        return 'Very High'
+
+def generate_suggestions(category, crop, district):
+    suggestions = {
+        'Very Low': f"Increase soil nutrients and irrigation efficiency. Consider crop rotation strategies. {crop} is not suitable for {district} based on the given conditions and season. Try advanced farming methods or consider growing alternative crops that are better suited to this region.",
+        'Low': f"Optimize seed selection and planting techniques. {crop} is somewhat suitable for {district}, but production may be low. Monitor soil moisture regularly and apply precise farming techniques. Current strategies may need improvement for better yields.",
+        'Normal': f"Maintain current practices but focus on improving pest control and irrigation. {crop} is generally performing well in {district}. Production and profit depend heavily on farming practices and weather conditions, but there is potential for increased revenue.",
+        'High': f"Consider diversifying crops or expanding production. Explore more efficient harvesting methods to optimize yield and profitability. {crop} thrives in {district}, and with better mechanization or workforce management, you can further boost production and income potential.",
+        'Very High': f"{crop} is performing exceptionally well in {district}. Explore export opportunities to maximize profitability. Optimize production processes to sustain high yields while minimizing additional inputs. Consider expanding into new markets, and explore ways to reduce production costs, such as through precision farming or automation."
+    }
+    return suggestions.get(category, "No suggestions available.")
+
+
+def generate_gauge_chart(ratio, category):
+    colors = ["#ff0000", "#ff6666", "#ffa500", "#ffff00", "#32cd32"]
+    fig = go.Figure(go.Indicator(
+        mode="gauge+number+delta",
+        value=ratio,
+        title={'text': "Production Ratio"},
+        delta={'reference': 5},
+        gauge={'axis': {'range': [None, 10]},
+               'bar': {'color': "darkblue"},
+               'steps': [{'range': [0, 2], 'color': colors[0]},
+                         {'range': [2, 4], 'color': colors[1]},
+                         {'range': [4, 6], 'color': colors[2]},
+                         {'range': [6, 8], 'color': colors[3]},
+                         {'range': [8, 10], 'color': colors[4]}]}))
+    return fig
+
+def generate_pie_chart(state, district, crop):
+    filtered_data = sampled_df[(sampled_df['State'] == state) & (sampled_df['District'] == district)]
+    crop_data = filtered_data.groupby('Crop')['Production'].sum().reset_index()
+    crop_data['Percentage'] = (crop_data['Production'] / crop_data['Production'].sum()) * 100
+    crop_data = crop_data[crop_data['Percentage'] > 3]
+    fig = px.pie(crop_data, names='Crop', values='Production', title='Popular Crops in the Given Region')
+    return fig
+
+def generate_season_vs_production(state, district):
+    filtered_data = sampled_df[(sampled_df['State'] == state) & (sampled_df['District'] == district)]
+    fig = px.bar(filtered_data, x='Season', y='Production', title='Season vs Production (Sum for All Crops)')
+    fig.update_traces(marker_color='darkblue')
+    return fig
+
+def generate_area_vs_production(state, district):
+    filtered_data = sampled_df[(sampled_df['State'] == state) & (sampled_df['District'] == district)]
+    fig = px.density_heatmap(filtered_data, x='Area', y='Production', title='Area vs Production (Hexbin Plot)',
+                             range_x=[0, 10000], nbinsx=5)
+    return fig
+
+def generate_top_states_plot():
+    state_data = sampled_df.groupby('State')['Production'].sum().reset_index()
+    top_states = state_data.nlargest(10, 'Production')
+    fig = px.bar(top_states, x='State', y='Production', title='Top 10 States by Production (Overall)')
+    return fig
+
+def generate_yearly_violin_plot():
+    filtered_data = sampled_df[sampled_df['Crop_Year'] >= 2014]
+    fig = px.violin(filtered_data, x='Crop_Year', y='Production', title='Violin Plot: Overall Production (2014-2023)')
+    return fig
+
+def generate_crop_year_vs_production(state, district):
+    filtered_data = sampled_df[sampled_df['Crop_Year'] >= 2014]
+    fig = px.bar(filtered_data, x='Crop_Year', y='Production', title='Year vs Production Count (2014-2023)',
+                 labels={'Crop_Year': 'Year', 'Production': 'Production Count'})
+    fig.update_traces(marker_color='darkblue')
+    return fig
+
+if __name__ == '__main__':
+    app.run(port=7860,host='0.0.0.0')

lgb_model_cropforecastinghyperparamters__33333.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:572294da95026ba0d4067408bd2cfcf2a5816a87be18c02e53597516feaa1bff
+size 270332

requirements.txt

@@ -0,0 +1,7 @@
+flask
+pandas
+plotly
+numpy
+joblib==1.4.2
+scikit-learn==1.5.2
+lightgbm

templates/index.html

@@ -0,0 +1,378 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Crop Yield Prediction</title>
+    <!-- Fonts -->
+    <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">
+    <!-- Bootstrap -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Icons -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
+
+    <style>
+        :root {
+            --primary-green: #1a5d3a;
+            --accent-green: #198754;
+            --darker-accent: #143d2e;
+            --light-bg: #f8f9fa;
+            --surface: #ffffff;
+            --text-dark: #212529;
+            --text-muted: #6c757d;
+            --border: #dee2e6;
+        }
+
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+
+        body {
+            font-family: 'Outfit', sans-serif;
+            background-color: var(--light-bg);
+            color: var(--text-dark);
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+        }
+
+        /* --- Hero Header Section --- */
+        .hero-header {
+            background-color: var(--primary-green);
+            color: white;
+            padding: 4rem 1rem 7rem;
+            text-align: center;
+            border-bottom-left-radius: 60px;
+            border-bottom-right-radius: 60px;
+            position: relative;
+        }
+
+        .hero-icon {
+            font-size: 3rem;
+            margin-bottom: 1rem;
+            display: block;
+        }
+
+        .hero-title {
+            font-weight: 700;
+            font-size: 2.5rem;
+            margin-bottom: 0.5rem;
+        }
+
+        .hero-subtitle {
+            font-weight: 300;
+            opacity: 0.9;
+            font-size: 1.1rem;
+        }
+
+        /* --- Main Card --- */
+        .main-container {
+            margin-top: -5rem;
+            padding-bottom: 3rem;
+            display: flex;
+            justify-content: center;
+            padding-left: 15px;
+            padding-right: 15px;
+        }
+
+        .prediction-card {
+            background: var(--surface);
+            border-radius: 20px;
+            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
+            width: 100%;
+            max-width: 900px;
+            padding: 3rem;
+            position: relative;
+        }
+
+        /* --- 3-Step Process Icons --- */
+        .process-steps {
+            display: flex;
+            justify-content: center;
+            gap: 4rem;
+            margin-bottom: 3rem;
+            text-align: center;
+        }
+
+        .step-item {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            color: var(--text-dark);
+        }
+
+        .step-icon {
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            border: 1px solid #e9ecef;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.2rem;
+            color: var(--primary-green);
+            margin-bottom: 0.5rem;
+            background: #fff;
+        }
+
+        .step-title {
+            font-weight: 600;
+            font-size: 0.9rem;
+            margin-bottom: 0px;
+        }
+
+        .step-desc {
+            font-size: 0.75rem;
+            color: var(--text-muted);
+        }
+
+        /* --- Form Styles --- */
+        .form-label {
+            font-weight: 600;
+            font-size: 0.85rem;
+            margin-bottom: 0.5rem;
+            color: var(--text-dark);
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+        }
+
+        .form-control,
+        .form-select {
+            padding: 0.85rem 1rem;
+            border: 1px solid var(--border);
+            border-radius: 8px;
+            background-color: var(--light-bg);
+            font-family: 'Outfit', sans-serif;
+            font-size: 1rem;
+            color: var(--text-dark);
+            transition: all 0.2s ease;
+        }
+
+        .form-control:focus,
+        .form-select:focus {
+            border-color: var(--accent-green);
+            box-shadow: 0 0 0 4px rgba(25, 135, 84, 0.1);
+            background-color: white;
+            outline: none;
+        }
+
+        /* --- Predict Button --- */
+        .btn-predict {
+            width: 100%;
+            background-color: var(--primary-green);
+            color: white;
+            border: none;
+            padding: 1rem;
+            border-radius: 8px;
+            font-weight: 600;
+            font-size: 1.1rem;
+            margin-top: 2rem;
+            transition: background 0.3s;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.5rem;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .btn-predict:hover {
+            background-color: var(--darker-accent);
+            color: white;
+            transform: translateY(-2px);
+            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
+        }
+
+        /* --- Footer --- */
+        .footer {
+            margin-top: auto;
+            text-align: center;
+            padding: 2rem;
+            color: #adb5bd;
+            font-size: 0.8rem;
+        }
+
+        /* --- Loading Overlay --- */
+        #loadingOverlay {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(255, 255, 255, 0.95);
+            z-index: 9999;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .spinner-border {
+            color: var(--primary-green);
+            width: 3rem;
+            height: 3rem;
+        }
+
+        /* --- Responsive --- */
+        @media (max-width: 768px) {
+            .hero-title {
+                font-size: 1.75rem;
+            }
+
+            .prediction-card {
+                padding: 1.5rem;
+            }
+
+            .process-steps {
+                gap: 2rem;
+            }
+
+            .step-icon {
+                width: 40px;
+                height: 40px;
+                font-size: 1rem;
+            }
+
+            .hero-header {
+                border-bottom-left-radius: 40px;
+                border-bottom-right-radius: 40px;
+            }
+        }
+    </style>
+</head>
+
+<body>
+
+    <!-- Hero Header -->
+    <div class="hero-header">
+        <i class="bi bi-graph-up-arrow hero-icon"></i>
+        <h1 class="hero-title">Crop Yield Prediction</h1>
+        <p class="hero-subtitle">AI-powered yield forecasting for smarter farming decisions</p>
+    </div>
+
+    <!-- Main Content -->
+    <div class="main-container">
+        <div class="prediction-card">
+
+            <!-- Steps -->
+            <div class="process-steps">
+                <div class="step-item">
+                    <div class="step-icon"><i class="bi bi-geo-alt"></i></div>
+                    <div class="step-title">1. Location</div>
+                    <div class="step-desc">Select your region</div>
+                </div>
+                <div class="step-item">
+                    <div class="step-icon"><i class="bi bi-flower1"></i></div>
+                    <div class="step-title">2. Crop Info</div>
+                    <div class="step-desc">Enter crop details</div>
+                </div>
+                <div class="step-item">
+                    <div class="step-icon"><i class="bi bi-bar-chart-line"></i></div>
+                    <div class="step-title">3. Predict</div>
+                    <div class="step-desc">Get yield forecast</div>
+                </div>
+            </div>
+
+            <!-- Form -->
+            <form id="prediction-form" method="POST" action="/predict">
+                <div class="row g-4">
+                    <div class="col-md-6">
+                        <label for="state" class="form-label"><i class="bi bi-geo-alt me-1"></i>State</label>
+                        <select id="state" name="state" class="form-select" required>
+                            <option value="">Select State</option>
+                            {% for state in states %}
+                            <option value="{{ state }}">{{ state }}</option>
+                            {% endfor %}
+                        </select>
+                    </div>
+
+                    <div class="col-md-6">
+                        <label for="district" class="form-label"><i class="bi bi-pin-map me-1"></i>District</label>
+                        <select id="district" name="district" class="form-select" required>
+                            <option value="">Select District</option>
+                        </select>
+                    </div>
+
+                    <div class="col-md-6">
+                        <label for="crop_year" class="form-label"><i class="bi bi-calendar3 me-1"></i>Crop Year (2024
+                            onwards)</label>
+                        <input type="number" id="crop_year" name="crop_year" class="form-control" min="2024"
+                            placeholder="e.g., 2024" required>
+                    </div>
+
+                    <div class="col-md-6">
+                        <label for="season" class="form-label"><i class="bi bi-cloud-sun me-1"></i>Season</label>
+                        <select id="season" name="season" class="form-select" required>
+                            {% for season in seasons %}
+                            <option value="{{ season }}">{{ season }}</option>
+                            {% endfor %}
+                        </select>
+                    </div>
+
+                    <div class="col-md-6">
+                        <label for="crop" class="form-label"><i class="bi bi-flower2 me-1"></i>Crop</label>
+                        <select id="crop" name="crop" class="form-select" required>
+                            {% for crop in crops %}
+                            <option value="{{ crop }}">{{ crop }}</option>
+                            {% endfor %}
+                        </select>
+                    </div>
+
+                    <div class="col-md-6">
+                        <label for="area" class="form-label"><i class="bi bi-rulers me-1"></i>Area (in Acres)</label>
+                        <input type="number" id="area" name="area" class="form-control" step="0.01"
+                            placeholder="e.g., 10.5" required>
+                    </div>
+                </div>
+
+                <button type="submit" class="btn-predict">
+                    <i class="bi bi-stars"></i> Predict Crop Yield
+                </button>
+            </form>
+        </div>
+    </div>
+
+    <!-- Footer -->
+    <div class="footer">
+        &copy; 2025 Crop Yield Prediction | Powered by AI
+    </div>
+
+    <!-- Loading Overlay -->
+    <div id="loadingOverlay">
+        <div class="spinner-border" role="status"></div>
+        <p class="text-muted mt-3">Analyzing crop data...</p>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script>
+        $(document).ready(function () {
+            // Dynamic district loading
+            $('#state').change(function () {
+                const state = $(this).val();
+                $.ajax({
+                    url: '/filter_districts',
+                    method: 'POST',
+                    data: { state: state },
+                    success: function (response) {
+                        $('#district').empty().append('<option value="">Select District</option>');
+                        response.districts.forEach(function (district) {
+                            $('#district').append('<option value="' + district + '">' + district + '</option>');
+                        });
+                    }
+                });
+            });
+
+            // Show loading overlay on form submit
+            $('#prediction-form').on('submit', function () {
+                document.getElementById('loadingOverlay').style.display = 'flex';
+            });
+        });
+    </script>
+</body>
+
+</html>

templates/output.html

@@ -0,0 +1,412 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Prediction Results | Crop Yield</title>
+    <!-- Fonts -->
+    <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">
+    <!-- Bootstrap -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Icons -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
+
+    <style>
+        :root {
+            --primary-green: #1a5d3a;
+            --accent-green: #198754;
+            --darker-accent: #143d2e;
+            --light-bg: #f8f9fa;
+            --surface: #ffffff;
+            --text-dark: #212529;
+            --text-muted: #6c757d;
+            --border: #dee2e6;
+        }
+
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+
+        body {
+            font-family: 'Outfit', sans-serif;
+            background-color: var(--light-bg);
+            color: var(--text-dark);
+            min-height: 100vh;
+        }
+
+        /* --- Hero Header Section --- */
+        .hero-header {
+            background-color: var(--primary-green);
+            color: white;
+            padding: 3rem 1rem 7rem;
+            text-align: center;
+            border-bottom-left-radius: 60px;
+            border-bottom-right-radius: 60px;
+            position: relative;
+        }
+
+        .hero-icon {
+            font-size: 2.5rem;
+            margin-bottom: 0.75rem;
+            display: block;
+        }
+
+        .hero-title {
+            font-weight: 700;
+            font-size: 2rem;
+            margin-bottom: 0.5rem;
+        }
+
+        .hero-subtitle {
+            font-weight: 300;
+            opacity: 0.9;
+            font-size: 1rem;
+        }
+
+        /* --- Main Content --- */
+        .main-container {
+            margin-top: -5rem;
+            padding: 0 1rem 3rem;
+            max-width: 1100px;
+            margin-left: auto;
+            margin-right: auto;
+        }
+
+        /* --- Prediction Summary Card --- */
+        .summary-card {
+            background: var(--surface);
+            border-radius: 20px;
+            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
+            padding: 2rem;
+            margin-bottom: 2rem;
+            position: relative;
+            z-index: 10;
+        }
+
+        .summary-header {
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+            margin-bottom: 1.5rem;
+            padding-bottom: 1rem;
+            border-bottom: 2px solid var(--primary-green);
+        }
+
+        .summary-header i {
+            font-size: 1.75rem;
+            color: var(--primary-green);
+        }
+
+        .summary-header h2 {
+            font-size: 1.5rem;
+            font-weight: 700;
+            color: var(--text-dark);
+            margin: 0;
+        }
+
+        .stat-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 1.5rem;
+        }
+
+        .stat-box {
+            background: linear-gradient(135deg, #f0fdf4 0%, #fff 100%);
+            border: 1px solid #e9ecef;
+            border-radius: 12px;
+            padding: 1.5rem;
+            text-align: center;
+            transition: transform 0.2s;
+        }
+
+        .stat-box:hover {
+            transform: translateY(-2px);
+            border-color: var(--accent-green);
+        }
+
+        .stat-icon {
+            width: 50px;
+            height: 50px;
+            border-radius: 12px;
+            background: var(--primary-green);
+            color: white;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.25rem;
+            margin: 0 auto 1rem;
+        }
+
+        .stat-value {
+            font-size: 2rem;
+            font-weight: 700;
+            color: var(--primary-green);
+            line-height: 1;
+            margin-bottom: 0.5rem;
+        }
+
+        .stat-label {
+            font-size: 0.85rem;
+            color: var(--text-muted);
+            font-weight: 500;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+        }
+
+        /* --- Graph Cards --- */
+        .graph-card {
+            background: var(--surface);
+            border-radius: 20px;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
+            padding: 1.5rem;
+            margin-bottom: 1.5rem;
+        }
+
+        .graph-header {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            margin-bottom: 1rem;
+        }
+
+        .graph-header i {
+            color: var(--accent-green);
+            font-size: 1.25rem;
+        }
+
+        .graph-header h4 {
+            font-size: 1.1rem;
+            font-weight: 600;
+            color: var(--text-dark);
+            margin: 0;
+        }
+
+        /* --- Suggestions Card --- */
+        .suggestions-card {
+            background: var(--surface);
+            border-radius: 20px;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
+            padding: 2rem;
+            margin-bottom: 1.5rem;
+            border-left: 5px solid var(--accent-green);
+        }
+
+        .suggestions-header {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            margin-bottom: 1rem;
+        }
+
+        .suggestions-header i {
+            color: var(--accent-green);
+            font-size: 1.5rem;
+        }
+
+        .suggestions-header h4 {
+            font-size: 1.25rem;
+            font-weight: 600;
+            color: var(--primary-green);
+            margin: 0;
+        }
+
+        .suggestions-content {
+            font-size: 1rem;
+            line-height: 1.7;
+            color: var(--text-dark);
+        }
+
+        /* --- Back Button --- */
+        .btn-back {
+            background-color: var(--primary-green);
+            color: white;
+            border: none;
+            padding: 0.85rem 2rem;
+            border-radius: 8px;
+            font-weight: 600;
+            font-size: 1rem;
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+            text-decoration: none;
+            transition: all 0.3s;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+        }
+
+        .btn-back:hover {
+            background-color: var(--darker-accent);
+            color: white;
+            transform: translateY(-2px);
+            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
+        }
+
+        /* --- Footer --- */
+        .footer {
+            text-align: center;
+            padding: 2rem;
+            color: #adb5bd;
+            font-size: 0.8rem;
+        }
+
+        /* --- Responsive --- */
+        @media (max-width: 768px) {
+            .hero-title {
+                font-size: 1.5rem;
+            }
+
+            .summary-card,
+            .graph-card,
+            .suggestions-card {
+                padding: 1.5rem;
+            }
+
+            .stat-value {
+                font-size: 1.5rem;
+            }
+
+            .hero-header {
+                border-bottom-left-radius: 40px;
+                border-bottom-right-radius: 40px;
+            }
+        }
+    </style>
+</head>
+
+<body>
+
+    <!-- Hero Header -->
+    <div class="hero-header">
+        <i class="bi bi-bar-chart-line hero-icon"></i>
+        <h1 class="hero-title">Prediction Results</h1>
+        <p class="hero-subtitle">AI-generated yield forecast and insights</p>
+    </div>
+
+    <!-- Main Content -->
+    <div class="main-container">
+
+        <!-- Prediction Summary -->
+        <div class="summary-card">
+            <div class="summary-header">
+                <i class="bi bi-clipboard-data"></i>
+                <h2>Yield Prediction Summary</h2>
+            </div>
+            <div class="stat-grid">
+                <div class="stat-box">
+                    <div class="stat-icon"><i class="bi bi-box-seam"></i></div>
+                    <div class="stat-value">{{ prediction }}</div>
+                    <div class="stat-label">Predicted Production (tons)</div>
+                </div>
+                <div class="stat-box">
+                    <div class="stat-icon"><i class="bi bi-percent"></i></div>
+                    <div class="stat-value">{{ ratio }}</div>
+                    <div class="stat-label">Production-to-Area Ratio</div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Gauge Chart -->
+        <div class="graph-card">
+            <div class="graph-header">
+                <i class="bi bi-speedometer2"></i>
+                <h4>Production Ratio Gauge Chart</h4>
+            </div>
+            {{ gauge_chart_html|safe }}
+        </div>
+
+        <!-- AI Suggestions -->
+        <div class="suggestions-card">
+            <div class="suggestions-header">
+                <i class="bi bi-lightbulb"></i>
+                <h4>AI-Driven Suggestions</h4>
+            </div>
+            <div class="suggestions-content">
+                {{ suggestions }}
+            </div>
+        </div>
+
+        <!-- Charts Grid -->
+        <div class="row">
+            <div class="col-lg-6">
+                <div class="graph-card">
+                    <div class="graph-header">
+                        <i class="bi bi-pie-chart"></i>
+                        <h4>Crop Distribution</h4>
+                    </div>
+                    {{ pie_chart_html|safe }}
+                </div>
+            </div>
+            <div class="col-lg-6">
+                <div class="graph-card">
+                    <div class="graph-header">
+                        <i class="bi bi-graph-up"></i>
+                        <h4>Year vs Production (2000-2023)</h4>
+                    </div>
+                    {{ crop_year_vs_production_html|safe }}
+                </div>
+            </div>
+        </div>
+
+        <div class="row">
+            <div class="col-lg-6">
+                <div class="graph-card">
+                    <div class="graph-header">
+                        <i class="bi bi-cloud-sun"></i>
+                        <h4>Season vs Production</h4>
+                    </div>
+                    {{ season_vs_production_html|safe }}
+                </div>
+            </div>
+            <div class="col-lg-6">
+                <div class="graph-card">
+                    <div class="graph-header">
+                        <i class="bi bi-rulers"></i>
+                        <h4>Area vs Production</h4>
+                    </div>
+                    {{ area_vs_production_html|safe }}
+                </div>
+            </div>
+        </div>
+
+        <div class="row">
+            <div class="col-lg-6">
+                <div class="graph-card">
+                    <div class="graph-header">
+                        <i class="bi bi-trophy"></i>
+                        <h4>Top 10 States by Production</h4>
+                    </div>
+                    {{ top_states_html|safe }}
+                </div>
+            </div>
+            <div class="col-lg-6">
+                <div class="graph-card">
+                    <div class="graph-header">
+                        <i class="bi bi-bar-chart-steps"></i>
+                        <h4>Violin Plot: Production (2014-2023)</h4>
+                    </div>
+                    {{ yearly_violin_plot_html|safe }}
+                </div>
+            </div>
+        </div>
+
+        <!-- Back Button -->
+        <div class="text-center mt-4">
+            <a href="/" class="btn-back">
+                <i class="bi bi-arrow-left"></i> Make New Prediction
+            </a>
+        </div>
+    </div>
+
+    <!-- Footer -->
+    <div class="footer">
+        &copy; 2025 Crop Yield Prediction | Powered by AI
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+
+</html>