Spaces:

Hudda
/

Tree_counter_object_detection

Runtime error

App Files Files Community

Hudda commited on Sep 22, 2024

Commit

f0bebf2

verified ·

1 Parent(s): c455cc5

Create index.html

Browse files

Files changed (1) hide show

index.html +112 -0

index.html ADDED Viewed

	@@ -0,0 +1,112 @@

+```html
+<!DOCTYPE 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>
+```