Spaces:

cngsm
/

localiza

Build error

App Files Files Community

cngsm commited on Dec 7, 2024

Commit

632ca9f

verified ·

1 Parent(s): 9447d7c

Update app.py

Browse files

Files changed (1) hide show

app.py +34 -30

app.py CHANGED Viewed

@@ -1,8 +1,8 @@
 import gradio as gr
-# Função para exibir o mapa com a última localização
-def update_map():
-    # A API de Geolocalização captura as coordenadas do dispositivo (celular)
     map_html = '''
     <!DOCTYPE html>
     <html lang="en">
@@ -23,35 +23,41 @@ def update_map():
         <h3>Localização Atual:</h3>
         <div id="map"></div>
         <script>
-            // Função que obtém as coordenadas do dispositivo (celular)
-            function getLocation() {
-                if (navigator.geolocation) {
-                    navigator.geolocation.getCurrentPosition(function(position) {
-                        const lat = position.coords.latitude;
-                        const lng = position.coords.longitude;
-                        console.log("Localização obtida:", lat, lng); // Para depuração
-                        // Atualiza o mapa com as coordenadas obtidas
-                        const map = L.map('map').setView([lat, lng], 15);
-                        // Adiciona o tile do OpenStreetMap
-                        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-                            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-                        }).addTo(map);
-                        // Adiciona o marcador
-                        const marker = L.marker([lat, lng]).addTo(map);
-                        marker.bindPopup("Localização Atual: " + lat + ", " + lng).openPopup();
-                    }, function(error) {
-                        alert("Erro ao obter a localização: " + error.message); // Mensagem de erro
-                        console.log("Erro de geolocalização:", error); // Para depuração
-                    });
                 } else {
                     alert("Geolocalização não é suportada neste navegador.");
                 }
             }
-            // Chama a função para obter a localização do celular
             getLocation();
         </script>
     </body>
@@ -59,15 +65,13 @@ def update_map():
     '''
     return map_html
-# Cria uma interface Gradio
 iface = gr.Interface(
-    fn=update_map,  # Função que irá gerar o mapa
     inputs=[],
-    outputs=gr.HTML(),  # Exibe o HTML do mapa
-    live=True,  # Atualização ao vivo
     title="Monitoramento em Tempo Real com OSM e Leaflet",
-    description="Veja a localização em tempo real com o OpenStreetMap",
 )
-# Inicia o servidor Gradio
 iface.launch(share=True)

 import gradio as gr
+# Função para processar as coordenadas recebidas
+def get_coordinates():
+    # Frontend cuidará de enviar as coordenadas via JavaScript
     map_html = '''
     <!DOCTYPE html>
     <html lang="en">
         <h3>Localização Atual:</h3>
         <div id="map"></div>
         <script>
+            // Função que obtém a localização e atualiza o mapa
+            function initializeMap(lat, lng) {
+                const map = L.map('map').setView([lat, lng], 15);
+                // Adiciona o tile do OpenStreetMap
+                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+                    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+                }).addTo(map);
+                // Adiciona o marcador no mapa
+                const marker = L.marker([lat, lng]).addTo(map);
+                marker.bindPopup("Localização Atual: " + lat + ", " + lng).openPopup();
+            }
+            // Função para pegar a localização do navegador
+            function getLocation() {
+                if (navigator.geolocation) {
+                    navigator.geolocation.getCurrentPosition(
+                        function (position) {
+                            const lat = position.coords.latitude;
+                            const lng = position.coords.longitude;
+                            console.log("Localização capturada: ", lat, lng);
+                            initializeMap(lat, lng); // Atualiza o mapa
+                        },
+                        function (error) {
+                            console.error("Erro ao capturar localização: ", error.message);
+                            alert("Erro ao acessar a localização. Verifique as permissões.");
+                        }
+                    );
                 } else {
                     alert("Geolocalização não é suportada neste navegador.");
                 }
             }
+            // Chama a função de localização automaticamente no carregamento da página
             getLocation();
         </script>
     </body>
     '''
     return map_html
+# Configuração do Gradio
 iface = gr.Interface(
+    fn=get_coordinates,
     inputs=[],
+    outputs=gr.HTML(),
     title="Monitoramento em Tempo Real com OSM e Leaflet",
+    description="O site captura automaticamente a localização do idoso ao ser acessado.",
 )
 iface.launch(share=True)