Spaces:

Typhoon-project
/

ML-predictor

Runtime error

App Files Files Community

philip-singer commited on Jul 3, 2025

Commit

7c4a1c8

verified ·

1 Parent(s): 41f9416

Upload 2 files

Browse files

Files changed (2) hide show

templates/prediction.html +121 -0
templates/result.html +76 -0

templates/prediction.html ADDED Viewed

	@@ -0,0 +1,121 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Trash Prediction</title>
+    <!-- Leaflet CSS -->
+    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
+    <link rel="stylesheet" href="static/prediction.css" />
+</head>
+<body>
+    <div class="main-layout">
+        <div id="map"></div>
+        <div class="container">
+            <h1>Trash Prediction</h1>
+            <form id="predictionForm">
+                <div>
+                    <label for="longitude">Longitude</label>
+                    <input type="number" step="any" id="longitude" name="longitude" required placeholder="e.g. 25.13">
+                </div>
+                <div>
+                    <label for="latitude">Latitude</label>
+                    <input type="number" step="any" id="latitude" name="latitude" required placeholder="e.g. 35.33">
+                </div>
+                <div>
+                    <label for="windSpeed">Wind Strength (1-10)</label>
+                    <input type="number" step="any" id="windSpeed" name="windSpeed" required placeholder="e.g. 5">
+                </div>
+                <div>
+                    <label for="windDirection">Wind Direction</label>
+                    <select id="windDirection" name="windDirection" required>
+                        <option value="">Select direction</option>
+                        <option value="N">North</option>
+                        <option value="NE">Northeast</option>
+                        <option value="E">East</option>
+                        <option value="SE">Southeast</option>
+                        <option value="S">South</option>
+                        <option value="SW">Southwest</option>
+                        <option value="W">West</option>
+                        <option value="NW">Northwest</option>
+                    </select>
+                </div>
+                <button type="submit">Predict Trash Amount</button>
+            </form>
+            <div class="result" id="resultBox"></div>
+        </div>
+    </div>
+    <!-- Leaflet JS -->
+    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
+    <script src="{{ url_for('static', filename='prediction.js') }}"></script>
+    <script>
+        // Initialize the map centered on Crete
+        var map = L.map('map', {
+            zoomControl: false,
+            attributionControl: false,
+            dragging: true,
+            scrollWheelZoom: true,
+            doubleClickZoom: false,
+            boxZoom: false,
+            keyboard: false,
+        }).setView([35.2401, 24.8093], 9); // Crete center
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            maxZoom: 18,
+        }).addTo(map);
+        // Optional: Add a marker for Crete center
+        // L.marker([35.2401, 24.8093]).addTo(map);
+        // Prevent map from being tab-focused
+        document.getElementById('map').setAttribute('tabindex', '-1');
+        // Form logic
+        document.getElementById('predictionForm').addEventListener('submit', async function(e) {
+            e.preventDefault();
+            const longitude = document.getElementById('longitude').value;
+            const latitude = document.getElementById('latitude').value;
+            const windSpeed = document.getElementById('windSpeed').value;
+            const windDirection = document.getElementById('windDirection').value;
+            // Show loading state
+            const resultBox = document.getElementById('resultBox');
+            resultBox.style.display = 'block';
+            resultBox.textContent = 'Predicting...';
+            try {
+                // Replace the URL below with your backend endpoint
+                const response = await fetch('/predict', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        longitude: parseFloat(longitude),
+                        latitude: parseFloat(latitude),
+                        wind_speed: parseFloat(windSpeed),
+                        wind_direction: windDirection
+                    })
+                });
+                if (!response.ok) throw new Error('Prediction failed');
+                const data = await response.json();
+                // Redirect to the result page with data in URL parameters
+                const params = new URLSearchParams({
+                    user_latitude: data.user_latitude,
+                    user_longitude: data.user_longitude,
+                    prediction: data.prediction,
+                    beach_latitude: data.nearest_beach.latitude,
+                    beach_longitude: data.nearest_beach.longitude,
+                    beach_orientation: data.nearest_beach.orientation,
+                    beach_sediment: data.nearest_beach.sediment
+                });
+                window.location.href = `/result?${params.toString()}`;
+            } catch (err) {
+                resultBox.textContent = 'Error: Unable to get prediction.';
+            }
+        });
+    </script>
+</body>
+</html>

templates/result.html ADDED Viewed

	@@ -0,0 +1,76 @@

+<!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="/" 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>