Spaces:

Rajkhanke007
/

Pest_Outbreak_Prediction

Sleeping

App Files Files Community

Rajkhanke007 commited on Sep 20

Commit

b03cd41

verified ·

1 Parent(s): 2cd0882

Create templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +572 -0

templates/index.html ADDED Viewed

	@@ -0,0 +1,572 @@

+<!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>
+    @media (max-width: 480px) {
+      .container-custom {
+        padding: 0.2rem;
+        border-radius: 6px;
+        margin: 0.2rem;
+      }
+      .form-section {
+        padding: 0.5rem;
+        margin-bottom: 0.5rem;
+        border-radius: 0.3rem;
+      }
+      h1 {
+        font-size: 1.1rem;
+        margin-bottom: 0.5rem;
+      }
+      h4 {
+        font-size: 0.95rem;
+        margin-bottom: 0.5rem;
+      }
+      .weather-card {
+        padding: 0.5rem;
+        font-size: 0.85rem;
+        margin-bottom: 0.3rem;
+      }
+      .btn-success, .btn-primary {
+        font-size: 0.9rem;
+        padding: 0.4rem 0.7rem;
+        border-radius: 5px;
+      }
+      #map {
+        height: 140px;
+        border-radius: 0.3rem;
+      }
+      .form-control {
+        font-size: 0.9rem;
+        padding: 0.3rem 0.4rem;
+      }
+    }
+    @media (max-width: 768px) {
+      .container-custom {
+        padding: 0.5rem;
+        border-radius: 8px;
+        margin: 0.5rem;
+      }
+      .form-section {
+        padding: 1rem;
+        margin-bottom: 1rem;
+        border-radius: 0.5rem;
+      }
+      h1 {
+        font-size: 1.5rem;
+        margin-bottom: 1rem;
+      }
+      h4 {
+        font-size: 1.1rem;
+        margin-bottom: 1rem;
+      }
+      .weather-card {
+        padding: 0.75rem;
+        font-size: 0.95rem;
+        margin-bottom: 0.5rem;
+      }
+      .btn-success, .btn-primary {
+        font-size: 1rem;
+        padding: 0.5rem 1rem;
+        border-radius: 6px;
+      }
+      #map {
+        height: 220px;
+        border-radius: 0.5rem;
+      }
+      .grid {
+        display: block !important;
+      }
+      .flex {
+        flex-direction: column !important;
+        padding: 0 !important;
+      }
+      .form-control {
+        font-size: 1rem;
+        padding: 0.4rem 0.6rem;
+      }
+    }
+    body {
+      margin: 0;
+      padding: 0;
+      min-height: 100vh;
+      background: linear-gradient(120deg, #e8f5e9 0%, #f7f7f7 100%), url('https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=1200&q=80');
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center;
+    }
+    .container-custom {
+      max-width: 1200px;
+      margin: 2rem auto;
+      padding: 2rem 1rem;
+      background: rgba(255,255,255,0.95);
+      border-radius: 16px;
+      box-shadow: 0 8px 32px rgba(56,142,60,0.15), 0 1.5px 8px rgba(0,0,0,0.08);
+      border: 2px solid #81c784;
+      position: relative;
+      overflow: hidden;
+    }
+    #map {
+      height: 400px;
+      border-radius: 0.75rem;
+      box-shadow: 0 8px 16px rgba(0,0,0,0.1);
+    }
+    .form-section {
+      background: linear-gradient(120deg, #e0f7fa 0%, #f1f8e9 100%);
+      border-radius: 1rem;
+      box-shadow: 0 8px 24px rgba(56,142,60,0.10);
+      padding: 2rem;
+      margin-bottom: 2rem;
+      border: 1.5px solid #c8e6c9;
+      transition: transform 0.3s, box-shadow 0.3s;
+      position: relative;
+    }
+    .form-section:hover {
+      transform: translateY(-6px) scale(1.01);
+      box-shadow: 0 16px 32px rgba(56,142,60,0.18);
+      border-color: #388e3c;
+    }
+    h1 {
+      color: #388e3c;
+      text-align: center;
+      font-family: 'Merriweather', serif;
+      letter-spacing: 1px;
+      background: linear-gradient(to right, #a5d6a7, #388e3c);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      margin-bottom: 2rem;
+      text-shadow: 0 2px 8px rgba(56,142,60,0.10);
+    }
+    h4 {
+      color: #558b2f;
+      text-align: left;
+      font-family: 'Merriweather', serif;
+      margin-bottom: 1.5rem;
+      font-size: 1.5rem;
+      font-weight: 700;
+      letter-spacing: 0.5px;
+    }
+    /* Weather Card Styles */
+    .weather-card {
+      background: linear-gradient(120deg, #e8f5e9 0%, #fff 100%);
+      border-radius: 0.75rem;
+      box-shadow: 0 2px 8px rgba(56,142,60,0.10);
+      padding: 1.25rem;
+      text-align: center;
+      transition: transform 0.2s, box-shadow 0.2s;
+      border: 1px solid #c8e6c9;
+      font-family: 'Merriweather', serif;
+    }
+    .weather-card:hover {
+      transform: translateY(-4px) scale(1.03);
+      box-shadow: 0 8px 24px rgba(56,142,60,0.18);
+      border-color: #388e3c;
+    }
+    .weather-title {
+      font-weight: 700;
+      color: #388e3c;
+      margin-bottom: 0.5rem;
+      font-size: 1.1rem;
+      letter-spacing: 0.5px;
+    }
+    /* Soil properties table styling */
+    #soilPropertiesTable table {
+      width: 100%;
+      border-collapse: collapse;
+      font-family: 'Merriweather', serif;
+    }
+    #soilPropertiesTable th, #soilPropertiesTable td {
+      padding: 0.75rem;
+      border: 1px solid #c8e6c9;
+      text-align: center;
+    }
+    #soilPropertiesTable th {
+      background-color: #388e3c;
+      color: #fff;
+      font-weight: 700;
+      letter-spacing: 0.5px;
+    }
+    .btn-success {
+      background: linear-gradient(90deg, #81c784 0%, #388e3c 100%);
+      color: #fff !important;
+      border: none;
+      border-radius: 8px;
+      font-size: 1.25rem;
+      font-weight: 700;
+      box-shadow: 0 2px 8px rgba(56,142,60,0.10);
+      padding: 0.75rem 2.5rem;
+      transition: background 0.2s, transform 0.2s;
+      letter-spacing: 0.5px;
+      font-family: 'Merriweather', serif;
+      margin-top: 1rem;
+    }
+    .btn-success:hover {
+      background: linear-gradient(90deg, #388e3c 0%, #81c784 100%);
+      transform: scale(1.05);
+      box-shadow: 0 8px 24px rgba(56,142,60,0.18);
+    }
+    .btn-primary {
+      background: linear-gradient(90deg, #aed581 0%, #388e3c 100%);
+      color: #fff !important;
+      border: none;
+      border-radius: 8px;
+      font-size: 1.1rem;
+      font-weight: 600;
+      box-shadow: 0 2px 8px rgba(56,142,60,0.10);
+      padding: 0.5rem 1.5rem;
+      transition: background 0.2s, transform 0.2s;
+      font-family: 'Merriweather', serif;
+    }
+    .btn-primary:hover {
+      background: linear-gradient(90deg, #388e3c 0%, #aed581 100%);
+      transform: scale(1.05);
+      box-shadow: 0 8px 24px rgba(56,142,60,0.18);
+    }
+  </style>
+</head>
+<body>
+  <!-- Loader overlay -->
+  <div id="loaderOverlay" style="display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(255,255,255,0.7);z-index:9999;">
+    <div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);">
+      <div style="display:flex;flex-direction:column;align-items:center;">
+        <div class="spinner-border text-success" style="width:4rem;height:4rem;" role="status">
+          <span class="sr-only">Loading...</span>
+        </div>
+        <div style="margin-top:1rem;font-size:1.25rem;color:#388e3c;font-weight:600;">Generating Report...</div>
+      </div>
+    </div>
+  </div>
+  <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 and fetch location -->
+          <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>
+            <button type="button" id="fetchCurrentLocationBtn" class="btn btn-success shadow-md hover:shadow-lg transition duration-300 mt-2">
+              Fetch Current 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>
+      <!-- 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 class="mb-4">
+            <label for="language" class="form-label">Response Language</label>
+            <select class="form-control" id="language" name="language" required>
+                <option value="English">English</option>
+                <option value="Hindi">Hindi</option>
+                <option value="Bengali">Bengali</option>
+                <option value="Telugu">Telugu</option>
+                <option value="Marathi">Marathi</option>
+                <option value="Tamil">Tamil</option>
+                <option value="Gujarati">Gujarati</option>
+                <option value="Urdu">Urdu</option>
+                <option value="Kannada">Kannada</option>
+                <option value="Odia">Odia</option>
+                <option value="Malayalam">Malayalam</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);
+    }
+    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 current location using Geolocation API
+    document.getElementById('fetchCurrentLocationBtn').addEventListener('click', function(){
+      if (navigator.geolocation) {
+        navigator.geolocation.getCurrentPosition(function(position) {
+          const lat = position.coords.latitude;
+          const lon = position.coords.longitude;
+          document.getElementById('manual_lat').value = lat.toFixed(6);
+          document.getElementById('manual_lon').value = lon.toFixed(6);
+          const latlng = L.latLng(lat, lon);
+          map.setView(latlng, 13);
+          setMarker(latlng);
+        }, function(error) {
+          alert('Unable to fetch current location. Please allow location access and try again.');
+        });
+      } else {
+        alert('Geolocation is not supported by your browser.');
+      }
+    });
+    // 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));
+    }
+    // Loader logic for form submit
+    document.getElementById('farmForm').addEventListener('submit', function(e) {
+      document.getElementById('loaderOverlay').style.display = 'block';
+    });
+  </script>
+</body>
+</html>