Spaces:
Runtime error
Runtime error
| ```html | |
| <html> | |
| <head> | |
| <title>Tree Counter</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| } | |
| .container { | |
| width: 80%; | |
| margin: 40px auto; | |
| text-align: center; | |
| } | |
| .button { | |
| background-color: #4CAF50; | |
| color: #fff; | |
| padding: 10px 20px; | |
| border: none; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| } | |
| .button:hover { | |
| background-color: #3e8e41; | |
| } | |
| #google-earth-map { | |
| height: 500px; | |
| width: 100%; | |
| border: 1px solid #ccc; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>Tree Counter</h1> | |
| <button class="button" id="upload-button">Upload Image</button> | |
| <button class="button" id="crop-button" style="display: none;">Crop Image</button> | |
| <div id="result"></div> | |
| <div id="google-earth-map"></div> | |
| </div> | |
| <script> | |
| const uploadButton = document.getElementById('upload-button'); | |
| const cropButton = document.getElementById('crop-button'); | |
| const resultDiv = document.getElementById('result'); | |
| const googleEarthMap = document.getElementById('google-earth-map'); | |
| uploadButton.addEventListener('click', (e) => { | |
| e.preventDefault(); | |
| const input = document.createElement('input'); | |
| input.type = 'file'; | |
| input.accept = 'image/*'; | |
| input.onchange = (e) => { | |
| const image = e.target.files[0]; | |
| const formData = new FormData(); | |
| formData.append('image', image); | |
| fetch('/upload_image', { | |
| method: 'POST', | |
| body: formData | |
| }) | |
| .then((response) => response.json()) | |
| .then((data) => { | |
| if (data.message.includes('too large')) { | |
| cropButton.style.display = 'inline-block'; | |
| } else { | |
| resultDiv.innerText = data.message; | |
| } | |
| }); | |
| }; | |
| input.click(); | |
| }); | |
| cropButton.addEventListener('click', (e) => { | |
| e.preventDefault(); | |
| const input = document.createElement('input'); | |
| input.type = 'file'; | |
| input.accept = 'image/*'; | |
| input.onchange = (e) => { | |
| const image = e.target.files[0]; | |
| const formData = new FormData(); | |
| formData.append('image', image); | |
| fetch('/crop_image', { | |
| method: 'POST', | |
| body: formData | |
| }) | |
| .then((response) => response.json()) | |
| .then((data) => { | |
| resultDiv.innerText = data.message; | |
| }); | |
| }; | |
| input.click(); | |
| }); | |
| // Initialize Google Earth map | |
| const googleEarthOptions = { | |
| zoom: 4, | |
| center: { lat: 37.7749, lng: -122.4194 }, | |
| mapTypeId: 'satellite' | |
| }; | |
| const googleEarthMapInstance = new google.maps.Map(googleEarthMap, googleEarthOptions); | |
| // Add event listener to Google Earth map | |
| googleEarthMapInstance.addListener('click', (e) => { | |
| const lat = e.latLng.lat(); | |
| const lng = e.latLng.lng(); | |
| console.log(`Clicked at (${lat}, ${lng})`); | |
| }); | |
| </script> | |
| <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script> | |
| </body> | |
| </html> | |
| ``` | |