Upload 2 files

app.py

@@ -0,0 +1,339 @@
+import requests
+import json
+from flask import Flask, render_template, request, jsonify, Response
+from google import genai
+import markdown
+
+app = Flask(__name__)
+
+# Replace with your actual Gemini API key
+client = genai.Client(api_key="AIzaSyBtXV2xJbrWVV57B5RWy_meKXOA59HFMeY")
+
+def validate_coordinates(lat, lon):
+    """Validate and convert latitude and longitude to float."""
+    try:
+        return float(lat), float(lon)
+    except (TypeError, ValueError):
+        return None, None
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/get_weather_data', methods=['GET'])
+def get_weather_data():
+    """
+    Fetch weather data using Open-Meteo's forecast endpoint:
+      - daily: temperature_2m_max (max_temp), temperature_2m_min (min_temp), precipitation_sum (rain)
+      - hourly: relative_humidity_2m, soil_moisture_3_to_9cm, cloudcover, windspeed_10m
+      - current_weather: for current temperature and wind speed
+    """
+    lat = request.args.get('lat')
+    lon = request.args.get('lon')
+    lat, lon = validate_coordinates(lat, lon)
+    if lat is None or lon is None:
+        return jsonify({"error": "Invalid coordinates"}), 400
+
+    try:
+        forecast_url = "https://api.open-meteo.com/v1/forecast"
+        forecast_params = {
+            "latitude": lat,
+            "longitude": lon,
+            "current_weather": "true",
+            "daily": "temperature_2m_max,temperature_2m_min,precipitation_sum",
+            "hourly": "relative_humidity_2m,soil_moisture_3_to_9cm,cloudcover,windspeed_10m",
+            "timezone": "auto"
+        }
+        resp = requests.get(forecast_url, params=forecast_params)
+        resp.raise_for_status()
+        data = resp.json()
+
+        daily   = data.get("daily", {})
+        hourly  = data.get("hourly", {})
+        current = data.get("current_weather", {})
+
+        # Daily data
+        max_temp = daily.get("temperature_2m_max", [None])[0]
+        min_temp = daily.get("temperature_2m_min", [None])[0]
+        rain     = daily.get("precipitation_sum", [None])[0]
+
+        # Hourly data (averages)
+        humidity_list     = hourly.get("relative_humidity_2m", [])
+        soil_list         = hourly.get("soil_moisture_3_to_9cm", [])
+        cloud_list        = hourly.get("cloudcover", [])
+        wind_list         = hourly.get("windspeed_10m", [])
+
+        avg_humidity      = sum(humidity_list)/len(humidity_list) if humidity_list else None
+        avg_soil_moisture = sum(soil_list)/len(soil_list) if soil_list else None
+        avg_cloud_cover   = sum(cloud_list)/len(cloud_list) if cloud_list else None
+
+        # Current weather
+        current_temp = current.get("temperature")
+        wind_speed   = current.get("windspeed")
+
+        weather = {
+            "max_temp": max_temp,
+            "min_temp": min_temp,
+            "rainfall": rain,
+            "humidity": avg_humidity,
+            "soil_moisture": avg_soil_moisture,
+            "current_temp": current_temp,
+            "wind_speed": wind_speed,
+            "cloud_cover": avg_cloud_cover
+        }
+        return jsonify(weather)
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+@app.route('/get_soil_properties', methods=['GET'])
+def get_soil_properties():
+    """Fetch soil properties using SoilGrids API and map to user-friendly names."""
+    lat = request.args.get('lat')
+    lon = request.args.get('lon')
+    lat, lon = validate_coordinates(lat, lon)
+    if lat is None or lon is None:
+        return jsonify({"error": "Invalid coordinates"}), 400
+
+    try:
+        prop_url = "https://rest.isric.org/soilgrids/v2.0/properties/query"
+        prop_params = {
+            "lon": str(lon),
+            "lat": str(lat),
+            "property": [
+                "bdod", "cec", "cfvo", "clay", "nitrogen",
+                "ocd", "phh2o", "sand", "silt",
+                "soc", "wv0010", "wv0033", "wv1500"
+            ],
+            "depth": "5-15cm",
+            "value": "mean"
+        }
+        headers = {"accept": "application/json"}
+        response = requests.get(prop_url, params=prop_params, headers=headers)
+        response.raise_for_status()
+        prop_data = response.json()
+
+        table_data = []
+        PARAMETER_NAMES = {
+            "bdod": "Bulk Density",
+            "cec": "CEC",
+            "cfvo": "Field Capacity",
+            "clay": "Clay",
+            "nitrogen": "Nitrogen",
+            "ocd": "Organic Carbon Density",
+            "phh2o": "pH",
+            "sand": "Sand",
+            "silt": "Silt",
+            "soc": "Soil Organic Carbon",
+            "wv0010": "Volumetric Water Content (0-10cm)",
+            "wv0033": "Volumetric Water Content (10-33cm)",
+            "wv1500": "Volumetric Water Content (1500)"
+        }
+        for layer in prop_data.get('properties', {}).get('layers', []):
+            parameter = layer.get('name')
+            display_name = PARAMETER_NAMES.get(parameter, parameter)
+            value = layer.get('depths', [{}])[0].get('values', {}).get('mean')
+            if value is None:
+                continue
+            if parameter in ["wv0010", "wv0033", "wv1500"]:
+                final_value = value / 10.0
+                unit = layer.get('unit_measure', {}).get("target_units", "")
+            elif parameter in ["phh2o"]:
+                final_value = value / 10.0
+                unit = layer.get('unit_measure', {}).get("mapped_units", "").replace("*10", "").strip()
+            else:
+                final_value = value
+                unit = layer.get('unit_measure', {}).get("mapped_units", "")
+            table_data.append([display_name, final_value, unit])
+
+        return jsonify({"soil_properties": table_data})
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+def call_gemini_api(input_data):
+    """
+    Enhanced prompt: We request a visually appealing Markdown report WITHOUT
+    showing raw CSS code blocks. Instead, we want a descriptive layout.
+
+    NOTE: We instruct the model to produce headings, paragraphs, and a table
+    in a color-rich, well-spaced manner, but NOT to display raw CSS code.
+    """
+    prompt = f"""
+Create a visually appealing, farmer-friendly pest outbreak report in Markdown with the following:
+
+1. A large, centered heading: "Pest Outbreak Dashboard Report".
+2. A short paragraph indicating location (latitude: {input_data.get('latitude')}, longitude: {input_data.get('longitude')}), location as per lat,long(like just ex dont consider it as hardoced nagpur,india so kike fetch from lat,long) and the crop/farm context.
+3. Several subheadings (e.g., "Agricultural Inputs", "Pest Outbreak Analysis", "Best Agricultural Practices", "Insights") with short paragraphs.
+4. A colorfully styled table (no raw CSS code blocks) with:
+   - Pest Name
+   - Predicted Outbreak Month(s)
+   - Severity
+   - Precautionary Measures
+5. Provide bullet points for best practices. 
+6. Use a friendly color scheme, with subtle hovers or highlights for rows, and consistent fonts.
+7. Avoid printing any raw code blocks. 
+8. Incorporate the weather, soil, and agricultural data (like sowing date, irrigation method) into the narrative but do not list them as raw parameters.
+9. do not give off topic insitruction only pest outbreka report i want okay, and dotn use special characters and justified text
+Important details from the user:
+- Crop Type: {input_data.get('crop_type')}
+- Sowing Date: {input_data.get('sowing_date')}
+- Harvest Date: {input_data.get('harvest_date')}
+- Current Growth Stage: {input_data.get('growth_stage')}
+- Irrigation Frequency: {input_data.get('irrigation_freq')}
+- Irrigation Method: {input_data.get('irrigation_method')}
+- Soil Type: {input_data.get('soil_type')}
+
+- Max Temp: {input_data.get('max_temp')}
+- Min Temp: {input_data.get('min_temp')}
+- Current Temp: {input_data.get('current_temp')}
+- Humidity: {input_data.get('humidity')}
+- Rainfall: {input_data.get('rain')}
+- Soil Moisture: {input_data.get('soil_moisture')}
+- Wind Speed: {input_data.get('wind_speed')}
+- Cloud Cover: {input_data.get('cloud_cover')}
+10. also i want specific reocmmendation on pest control (seprate than precuatuonary measure below it in bullet pooints),best agriculktual practices,not generlaized one , but speicifc as perstudiyng each input paprmaetenrindetial okay,poepr sltying tbale should be rendered porpelry etc.. porper bold heaidng ,big fotn,left allgiemnd jsutified text
+11.again order first title the lat,long,location derive form lat long(ex : nagpur,india) then below it agiruclturla oinput parmeter analysis, then pest tbale then pest avidnaces practice in dpeth 10-12 with bueet pint safter that spciific agrficulturla best practices as per input parameters, after the damage of predicted pest some contnest and more dept contnext this shoudl be order
+"""
+    response = client.models.generate_content(
+        model="gemini-2.0-flash",
+        contents=prompt,
+    )
+    return response.text
+
+@app.route('/predict', methods=['POST'])
+def predict():
+    form_data = request.form.to_dict()
+    report_md = call_gemini_api(form_data)
+
+    # Convert raw markdown to HTML
+    report_html = markdown.markdown(report_md)
+
+    # Inject advanced, colorful styling into the final HTML
+    html_output = f"""<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Pest Outbreak Dashboard Report</title>
+  <!-- Tailwind for utility classes -->
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
+  <style>
+    /* Overall page background with a subtle gradient */
+    body {{
+      margin: 0;
+      padding: 2rem;
+      background: linear-gradient(120deg, #f7f7f7 0%, #e3f2fd 100%);
+      font-family: 'Segoe UI', Tahoma, sans-serif;
+    }}
+
+    .report-container {{
+      max-width: 1000px;
+      margin: 0 auto;
+      background-color: #ffffff;
+      border-radius: 8px;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+      padding: 2rem;
+      transition: transform 0.3s ease, box-shadow 0.3s ease;
+    }}
+    .report-container:hover {{
+      transform: translateY(-4px);
+      box-shadow: 0 12px 24px rgba(0,0,0,0.15);
+    }}
+
+    /* Gradient heading for H1 */
+    .report-container h1 {{
+      text-align: center;
+      font-size: 2rem;
+      margin-bottom: 1.5rem;
+      color: #ffffff;
+      background: linear-gradient(to right, #81c784, #388e3c);
+      padding: 1rem;
+      border-radius: 6px;
+      box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+    }}
+
+    /* Secondary headings (H2, H3) */
+    .report-container h2, 
+    .report-container h3 {{
+      margin-top: 1.5rem;
+      margin-bottom: 0.75rem;
+      color: #2c3e50;
+      text-align: left;
+    }}
+
+    /* Paragraphs */
+    .report-container p {{
+      margin-bottom: 1rem;
+      color: #555555;
+      text-align: justify;
+      line-height: 1.6;
+    }}
+
+    /* Lists */
+    .report-container ul, 
+    .report-container ol {{
+      margin-left: 1.5rem;
+      margin-bottom: 1rem;
+      color: #555555;
+    }}
+
+    /* Table styling */
+    .report-container table {{
+      width: 100%;
+      border-collapse: collapse;
+      margin: 1.5rem 0;
+    }}
+    .report-container thead tr {{
+      background: linear-gradient(to right, #81c784, #388e3c);
+      color: #ffffff;
+    }}
+    .report-container th, 
+    .report-container td {{
+      border: 1px solid #ddd;
+      padding: 12px 15px;
+      text-align: left;
+      transition: background-color 0.2s ease;
+    }}
+    .report-container tbody tr:hover {{
+      background-color: #f9f9f9;
+    }}
+
+    /* Responsive table for smaller screens */
+    @media (max-width: 768px) {{
+      .report-container table, 
+      .report-container thead, 
+      .report-container tbody, 
+      .report-container th, 
+      .report-container td, 
+      .report-container tr {{
+        display: block;
+        width: 100%;
+      }}
+      .report-container thead tr {{
+        display: none;
+      }}
+      .report-container td {{
+        border: none;
+        border-bottom: 1px solid #ddd;
+        position: relative;
+        padding-left: 50%;
+        text-align: left;
+      }}
+      .report-container td:before {{
+        content: attr(data-label);
+        position: absolute;
+        left: 15px;
+        font-weight: bold;
+      }}
+    }}
+  </style>
+</head>
+<body>
+  <div class="report-container">
+    {report_html}
+  </div>
+</body>
+</html>"""
+    return Response(html_output, mimetype="text/html")
+
+
+if __name__ == '__main__':
+    app.run(debug=True)

templates/index.html

@@ -0,0 +1,372 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Pest Outbreak Prediction System</title>
+  <!-- Bootstrap CSS (for grid utilities) -->
+  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
+  <!-- Tailwind CSS CDN for advanced styling -->
+  <script src="https://cdn.tailwindcss.com"></script>
+  <!-- Leaflet CSS for map -->
+  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
+  <!-- Leaflet Control Geocoder CSS for search bar -->
+  <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
+  <style>
+    body {
+      background: #f2f2f2; /* light grey to match final report page */
+      margin: 0;
+      padding: 0;
+    }
+    .container-custom {
+      max-width: 1200px;
+      margin: 2rem auto;
+      padding: 1rem;
+      background: #ffffff;
+      border-radius: 8px;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+    }
+    #map {
+      height: 400px;
+      border-radius: 0.75rem;
+      box-shadow: 0 8px 16px rgba(0,0,0,0.1);
+    }
+    .form-section {
+      background: #ffffff;
+      border-radius: 0.75rem;
+      box-shadow: 0 8px 16px rgba(0,0,0,0.1);
+      padding: 2rem;
+      margin-bottom: 1.5rem;
+      transition: transform 0.3s ease, box-shadow 0.3s ease;
+    }
+    .form-section:hover {
+      transform: translateY(-4px);
+      box-shadow: 0 12px 24px rgba(0,0,0,0.15);
+    }
+    h1, h4 {
+      color: #2e7d32;
+      text-align: center;
+    }
+    /* Weather Card Styles */
+    .weather-card {
+      background: #ffffff;
+      border-radius: 0.5rem;
+      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+      padding: 1rem;
+      text-align: center;
+      transition: transform 0.2s;
+    }
+    .weather-card:hover {
+      transform: translateY(-4px);
+    }
+    .weather-title {
+      font-weight: 600;
+      color: #2e7d32;
+      margin-bottom: 0.5rem;
+    }
+    /* Soil properties table styling */
+    #soilPropertiesTable table {
+      width: 100%;
+      border-collapse: collapse;
+    }
+    #soilPropertiesTable th, #soilPropertiesTable td {
+      padding: 0.75rem;
+      border: 1px solid #e2e8f0;
+      text-align: center;
+    }
+    #soilPropertiesTable th {
+      background-color: #81c784;
+      color: #fff;
+    }
+  </style>
+</head>
+<body>
+  <div class="container container-custom py-8">
+    <h1 class="text-4xl font-bold mb-8">Pest Outbreak Prediction System</h1>
+    <!-- The form submits to /predict to generate a detailed pest outbreak report -->
+    <form id="farmForm" action="/predict" method="post">
+      <!-- Map & Manual Inputs -->
+      <div class="form-section">
+        <h4 class="text-2xl font-semibold mb-4">Select Farm Location</h4>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <!-- Left: Satellite map with search bar -->
+          <div>
+            <div id="map"></div>
+          </div>
+          <!-- Right: Manual lat/lon input -->
+          <div class="flex flex-col justify-center space-y-4 p-4">
+            <div>
+              <label class="font-medium" for="manual_lat">Latitude:</label>
+              <input type="number" step="0.000001" id="manual_lat" class="form-control" placeholder="Enter latitude" />
+            </div>
+            <div>
+              <label class="font-medium" for="manual_lon">Longitude:</label>
+              <input type="number" step="0.000001" id="manual_lon" class="form-control" placeholder="Enter longitude" />
+            </div>
+            <button type="button" id="updateLocationBtn" class="btn btn-primary shadow-md hover:shadow-lg transition duration-300">
+              Update Location
+            </button>
+          </div>
+        </div>
+        <!-- Hidden fields to store final lat/lon -->
+        <input type="hidden" id="latitude" name="latitude" />
+        <input type="hidden" id="longitude" name="longitude" />
+      </div>
+
+      <!-- Weather Data Display -->
+      <div class="form-section">
+        <h4 class="text-2xl font-semibold mb-4">Weather Data</h4>
+        <div id="weatherDataContainer" class="grid grid-cols-1 md:grid-cols-4 gap-4">
+          <div class="col-span-full text-center text-gray-600">
+            Weather data will appear here after you select or update a location.
+          </div>
+        </div>
+      </div>
+
+      <!-- Soil Data Section -->
+      <div class="form-section" id="soilPropertiesTable">
+        <h4 class="text-2xl font-semibold mb-4">Soil Nutrient Parameters</h4>
+        <div id="soilTableContainer">
+          <p class="text-center text-gray-600">Fetching soil data...</p>
+        </div>
+      </div>
+
+      <!-- Additional Agricultural Inputs -->
+      <div class="form-section">
+        <h4 class="text-2xl font-semibold mb-4">Additional Agricultural Inputs</h4>
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div>
+            <label class="font-medium" for="crop_type">Crop Type:</label>
+            <select class="form-control" id="crop_type" name="crop_type">
+              <option value="rice">Rice</option>
+              <option value="wheat">Wheat</option>
+              <option value="maize">Maize</option>
+              <option value="cotton">Cotton</option>
+              <option value="sugarcane">Sugarcane</option>
+              <option value="soybean">Soybean</option>
+              <option value="millet">Millet</option>
+              <option value="pulses">Pulses</option>
+              <option value="potato">Potato</option>
+              <option value="tomato">Tomato</option>
+              <option value="onion">Onion</option>
+              <option value="garlic">Garlic</option>
+              <option value="groundnut">Groundnut</option>
+              <option value="barley">Barley</option>
+              <option value="jute">Jute</option>
+              <option value="tea">Tea</option>
+              <option value="coffee">Coffee</option>
+              <option value="sorghum">Sorghum</option>
+              <option value="turmeric">Turmeric</option>
+              <option value="ginger">Ginger</option>
+            </select>
+          </div>
+          <div>
+            <label class="font-medium" for="sowing_date">Plant Sowing Date:</label>
+            <input type="date" class="form-control" id="sowing_date" name="sowing_date" />
+          </div>
+          <div>
+            <label class="font-medium" for="harvest_date">Expected Harvest Date:</label>
+            <input type="date" class="form-control" id="harvest_date" name="harvest_date" />
+          </div>
+          <div>
+            <label class="font-medium" for="growth_stage">Current Growth Stage:</label>
+            <select class="form-control" id="growth_stage" name="growth_stage">
+              <option value="sowing">Sowing</option>
+              <option value="germination">Germination</option>
+              <option value="vegetative">Vegetative</option>
+              <option value="flowering">Flowering</option>
+              <option value="fruiting">Fruiting</option>
+              <option value="harvest">Harvest</option>
+            </select>
+          </div>
+          <div>
+            <label class="font-medium" for="irrigation_freq">Irrigation Frequency:</label>
+            <select class="form-control" id="irrigation_freq" name="irrigation_freq">
+              <option value="daily">Daily</option>
+              <option value="alternate">Alternate Day</option>
+              <option value="twice_week">Twice a Week</option>
+              <option value="weekly">Weekly</option>
+            </select>
+          </div>
+          <div>
+            <label class="font-medium" for="irrigation_method">Irrigation Method:</label>
+            <select class="form-control" id="irrigation_method" name="irrigation_method">
+              <option value="drip">Drip</option>
+              <option value="sprinkler">Sprinkler</option>
+              <option value="flood">Flood</option>
+              <option value="manual">Manual</option>
+            </select>
+          </div>
+          <div>
+            <label class="font-medium" for="soil_type">Soil Type:</label>
+            <select class="form-control" id="soil_type" name="soil_type">
+              <option value="red">Red</option>
+              <option value="black">Black</option>
+              <option value="clay">Clay</option>
+              <option value="sandy">Sandy</option>
+              <option value="loamy">Loamy</option>
+            </select>
+          </div>
+        </div>
+      </div>
+
+      <!-- Hidden Fields for passing Weather data to Gemini -->
+      <input type="hidden" id="max_temp_hidden" name="max_temp" />
+      <input type="hidden" id="min_temp_hidden" name="min_temp" />
+      <input type="hidden" id="current_temp_hidden" name="current_temp" />
+      <input type="hidden" id="humidity_hidden" name="humidity" />
+      <input type="hidden" id="rainfall_hidden" name="rain" />
+      <input type="hidden" id="soil_moisture_hidden" name="soil_moisture" />
+      <input type="hidden" id="wind_speed_hidden" name="wind_speed" />
+      <input type="hidden" id="cloud_cover_hidden" name="cloud_cover" />
+
+      <div class="form-section text-center">
+        <button type="submit" class="btn btn-success btn-lg shadow-xl transform hover:scale-105 transition duration-300">
+          Predict Pest Outbreak
+        </button>
+      </div>
+    </form>
+  </div>
+
+  <!-- Scripts -->
+  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
+  <!-- Leaflet JS -->
+  <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
+  <!-- Leaflet Control Geocoder JS for search -->
+  <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
+  <script>
+    // Initialize the map using Esri's World Imagery (satellite view)
+    var map = L.map('map').setView([20.5937, 78.9629], 5);
+    L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
+      attribution: 'Tiles © Esri',
+      maxZoom: 18,
+    }).addTo(map);
+
+    // Explicitly define the geocoder provider using Nominatim
+    var geocoder = L.Control.Geocoder.nominatim();
+
+    // Add geocoder (search bar) to the map with the provider
+    L.Control.geocoder({
+      geocoder: geocoder,
+      defaultMarkGeocode: false
+    })
+    .on('markgeocode', function(e) {
+      var bbox = e.geocode.bbox;
+      var center = e.geocode.center;
+      map.fitBounds(bbox);
+      setMarker(center);
+    })
+    .addTo(map);
+
+    var marker;
+    function setMarker(latlng) {
+      if (marker) {
+        marker.setLatLng(latlng);
+      } else {
+        marker = L.marker(latlng).addTo(map);
+      }
+      // Update both hidden and manual fields
+      document.getElementById('latitude').value = latlng.lat.toFixed(6);
+      document.getElementById('longitude').value = latlng.lng.toFixed(6);
+      document.getElementById('manual_lat').value = latlng.lat.toFixed(6);
+      document.getElementById('manual_lon').value = latlng.lng.toFixed(6);
+
+      // Fetch weather and soil data
+      fetchWeatherData(latlng.lat, latlng.lng);
+      fetchSoilProperties(latlng.lat, latlng.lng);
+    }
+
+    map.on('click', function(e) {
+      setMarker(e.latlng);
+    });
+
+    // Update location using manual input
+    document.getElementById('updateLocationBtn').addEventListener('click', function(){
+      const lat = parseFloat(document.getElementById('manual_lat').value);
+      const lon = parseFloat(document.getElementById('manual_lon').value);
+      if(!isNaN(lat) && !isNaN(lon)){
+        const latlng = L.latLng(lat, lon);
+        map.setView(latlng, 10);
+        setMarker(latlng);
+      } else {
+        alert("Please enter valid latitude and longitude values.");
+      }
+    });
+
+    // Fetch weather data from backend (/get_weather_data)
+    function fetchWeatherData(lat, lng) {
+      fetch(`/get_weather_data?lat=${lat}&lon=${lng}`)
+        .then(response => response.json())
+        .then(data => {
+          // Update the weather card container
+          const container = document.getElementById('weatherDataContainer');
+          container.innerHTML = `
+            <div class="weather-card">
+              <div class="weather-title">Max Temp</div>
+              <div>${data.max_temp !== null ? data.max_temp + " °C" : "Not available"}</div>
+            </div>
+            <div class="weather-card">
+              <div class="weather-title">Min Temp</div>
+              <div>${data.min_temp !== null ? data.min_temp + " °C" : "Not available"}</div>
+            </div>
+            <div class="weather-card">
+              <div class="weather-title">Current Temp</div>
+              <div>${data.current_temp !== null ? data.current_temp + " °C" : "Not available"}</div>
+            </div>
+            <div class="weather-card">
+              <div class="weather-title">Humidity</div>
+              <div>${data.humidity !== null ? data.humidity.toFixed(1) + " %" : "Not available"}</div>
+            </div>
+            <div class="weather-card">
+              <div class="weather-title">Rain</div>
+              <div>${data.rainfall !== null ? data.rainfall + " mm" : "Not available"}</div>
+            </div>
+            <div class="weather-card">
+              <div class="weather-title">Soil Moisture</div>
+              <div>${data.soil_moisture !== null ? data.soil_moisture.toFixed(1) + " %" : "Not available"}</div>
+            </div>
+            <div class="weather-card">
+              <div class="weather-title">Wind Speed</div>
+              <div>${data.wind_speed !== null ? data.wind_speed + " km/h" : "Not available"}</div>
+            </div>
+            <div class="weather-card">
+              <div class="weather-title">Cloud Cover</div>
+              <div>${data.cloud_cover !== null ? data.cloud_cover.toFixed(1) + " %" : "Not available"}</div>
+            </div>
+          `;
+
+          // Also store these values in hidden fields so they pass to Gemini
+          document.getElementById('max_temp_hidden').value       = data.max_temp       ?? "";
+          document.getElementById('min_temp_hidden').value       = data.min_temp       ?? "";
+          document.getElementById('current_temp_hidden').value   = data.current_temp   ?? "";
+          document.getElementById('humidity_hidden').value       = data.humidity       ?? "";
+          document.getElementById('rainfall_hidden').value       = data.rainfall       ?? "";
+          document.getElementById('soil_moisture_hidden').value  = data.soil_moisture  ?? "";
+          document.getElementById('wind_speed_hidden').value     = data.wind_speed     ?? "";
+          document.getElementById('cloud_cover_hidden').value    = data.cloud_cover    ?? "";
+        })
+        .catch(error => console.error('Error fetching weather data:', error));
+    }
+
+    // Fetch soil properties from backend (/get_soil_properties)
+    function fetchSoilProperties(lat, lng) {
+      fetch(`/get_soil_properties?lat=${lat}&lon=${lng}`)
+        .then(response => response.json())
+        .then(data => {
+          if(data.soil_properties) {
+            let tableHTML = "<table><thead><tr><th>Parameter</th><th>Value</th><th>Unit</th></tr></thead><tbody>";
+            data.soil_properties.forEach(function(item) {
+              tableHTML += `<tr><td>${item[0]}</td><td>${item[1]}</td><td>${item[2]}</td></tr>`;
+            });
+            tableHTML += "</tbody></table>";
+            document.getElementById("soilTableContainer").innerHTML = tableHTML;
+          } else {
+            document.getElementById("soilTableContainer").innerHTML = "<p class='text-center text-gray-600'>No soil data available.</p>";
+          }
+        })
+        .catch(error => console.error('Error fetching soil properties:', error));
+    }
+  </script>
+</body>
+</html>