cngsm commited on
Commit
632ca9f
1 Parent(s): 9447d7c

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +34 -30
app.py CHANGED
@@ -1,8 +1,8 @@
1
  import gradio as gr
2
 
3
- # Função para exibir o mapa com a última localização
4
- def update_map():
5
- # A API de Geolocalização captura as coordenadas do dispositivo (celular)
6
  map_html = '''
7
  <!DOCTYPE html>
8
  <html lang="en">
@@ -23,35 +23,41 @@ def update_map():
23
  <h3>Localização Atual:</h3>
24
  <div id="map"></div>
25
  <script>
26
- // Função que obtém as coordenadas do dispositivo (celular)
27
- function getLocation() {
28
- if (navigator.geolocation) {
29
- navigator.geolocation.getCurrentPosition(function(position) {
30
- const lat = position.coords.latitude;
31
- const lng = position.coords.longitude;
32
- console.log("Localização obtida:", lat, lng); // Para depuração
33
 
34
- // Atualiza o mapa com as coordenadas obtidas
35
- const map = L.map('map').setView([lat, lng], 15);
 
 
36
 
37
- // Adiciona o tile do OpenStreetMap
38
- L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
39
- attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
40
- }).addTo(map);
41
 
42
- // Adiciona o marcador
43
- const marker = L.marker([lat, lng]).addTo(map);
44
- marker.bindPopup("Localização Atual: " + lat + ", " + lng).openPopup();
45
- }, function(error) {
46
- alert("Erro ao obter a localização: " + error.message); // Mensagem de erro
47
- console.log("Erro de geolocalização:", error); // Para depuração
48
- });
 
 
 
 
 
 
 
 
49
  } else {
50
  alert("Geolocalização não é suportada neste navegador.");
51
  }
52
  }
53
 
54
- // Chama a função para obter a localização do celular
55
  getLocation();
56
  </script>
57
  </body>
@@ -59,15 +65,13 @@ def update_map():
59
  '''
60
  return map_html
61
 
62
- # Cria uma interface Gradio
63
  iface = gr.Interface(
64
- fn=update_map, # Função que irá gerar o mapa
65
  inputs=[],
66
- outputs=gr.HTML(), # Exibe o HTML do mapa
67
- live=True, # Atualização ao vivo
68
  title="Monitoramento em Tempo Real com OSM e Leaflet",
69
- description="Veja a localização em tempo real com o OpenStreetMap",
70
  )
71
 
72
- # Inicia o servidor Gradio
73
  iface.launch(share=True)
 
1
  import gradio as gr
2
 
3
+ # Função para processar as coordenadas recebidas
4
+ def get_coordinates():
5
+ # Frontend cuidará de enviar as coordenadas via JavaScript
6
  map_html = '''
7
  <!DOCTYPE html>
8
  <html lang="en">
 
23
  <h3>Localização Atual:</h3>
24
  <div id="map"></div>
25
  <script>
26
+ // Função que obtém a localização e atualiza o mapa
27
+ function initializeMap(lat, lng) {
28
+ const map = L.map('map').setView([lat, lng], 15);
 
 
 
 
29
 
30
+ // Adiciona o tile do OpenStreetMap
31
+ L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
32
+ attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
33
+ }).addTo(map);
34
 
35
+ // Adiciona o marcador no mapa
36
+ const marker = L.marker([lat, lng]).addTo(map);
37
+ marker.bindPopup("Localização Atual: " + lat + ", " + lng).openPopup();
38
+ }
39
 
40
+ // Função para pegar a localização do navegador
41
+ function getLocation() {
42
+ if (navigator.geolocation) {
43
+ navigator.geolocation.getCurrentPosition(
44
+ function (position) {
45
+ const lat = position.coords.latitude;
46
+ const lng = position.coords.longitude;
47
+ console.log("Localização capturada: ", lat, lng);
48
+ initializeMap(lat, lng); // Atualiza o mapa
49
+ },
50
+ function (error) {
51
+ console.error("Erro ao capturar localização: ", error.message);
52
+ alert("Erro ao acessar a localização. Verifique as permissões.");
53
+ }
54
+ );
55
  } else {
56
  alert("Geolocalização não é suportada neste navegador.");
57
  }
58
  }
59
 
60
+ // Chama a função de localização automaticamente no carregamento da página
61
  getLocation();
62
  </script>
63
  </body>
 
65
  '''
66
  return map_html
67
 
68
+ # Configuração do Gradio
69
  iface = gr.Interface(
70
+ fn=get_coordinates,
71
  inputs=[],
72
+ outputs=gr.HTML(),
 
73
  title="Monitoramento em Tempo Real com OSM e Leaflet",
74
+ description="O site captura automaticamente a localização do idoso ao ser acessado.",
75
  )
76
 
 
77
  iface.launch(share=True)