Spaces:
Sleeping
Sleeping
| <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> | |
| <!-- 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 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> | |