Spaces:

Typhoon-project
/

ML-predictor

Runtime error

App Files Files Community

ML-predictor / templates /result.html

philip-singer

Update templates/result.html

c6d75e0 verified about 1 year ago

Raw

History Blame Contribute Delete

2.64 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Prediction Result</title>
	<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
	<link rel="stylesheet" href="{{ url_for('static', filename='prediction.css') }}">
	<style>
	/* Style overrides for the result page */
	.result-box {
	background: rgba(255, 255, 255, 0.7);
	border-radius: 14px;
	padding: 1.5rem;
	margin-bottom: 1.5rem;
	text-align: left;
	}
	.result-box h2 {
	margin-top: 0;
	color: #185a9d;
	border-bottom: 2px solid #b2dfdb;
	padding-bottom: 0.5rem;
	margin-bottom: 1rem;
	}
	.result-box p {
	font-size: 1.1rem;
	color: #333;
	}
	</style>
	</head>
	<body>

	<div id="map"></div>
	<div class="container">
	<h1>Prediction Result</h1>

	<div class="result-box">
	<h2>Predicted Trash Amount</h2>
	<p style="font-size: 24px; font-weight: bold;">{{ prediction \| round(2) }} kg</p>
	</div>

	<div class="result-box">
	<h2>Nearest Beach Details</h2>
	<p><strong>Location:</strong> ({{ nearest_beach.latitude }}, {{ nearest_beach.longitude }})</p>
	<p><strong>Orientation:</strong> {{ nearest_beach.orientation }}</p>
	<p><strong>Sediment Type:</strong> {{ nearest_beach.sediment }}</p>
	</div>

	<a href="/predicter" class="button-link">Make another prediction</a>
	</div>

	<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
	<script>
	// Data passed from Flask
	const userLat = {{ user_latitude }};
	const userLon = {{ user_longitude }};
	const beachLat = {{ nearest_beach.latitude }};
	const beachLon = {{ nearest_beach.longitude }};
	const prediction = {{ prediction \| round(2) }};

	// Initialize map
	const map = L.map('map').setView([userLat, userLon], 13);
	L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

	// Add a marker for the user's input location
	L.marker([userLat, userLon]).addTo(map)
	.bindPopup(`<b>Your Location</b><br>Predicted Trash: ${prediction} kg`).openPopup();

	// Optional: Add a marker for the nearest beach
	L.marker([beachLat, beachLon]).addTo(map)
	.bindPopup(`<b>Nearest Beach</b>`);

	</script>

	</body>
	</html>