Spaces:

rajkhanke
/

Pest_Outbreak_prediction

Running

App Files Files Community

Pest_Outbreak_prediction / templates /index.html

rajkhanke

Update templates/index.html

c086a6f verified 24 days ago

raw

history blame contribute delete

16.4 kB

	<!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>


	<!-- 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>