Hugging Face's logo

Spaces:
cngsm
/
localiza
Sleeping

App Files Community
cngsm commited on
Commit
9447d7c
·
verified ·
1 Parent(s): 67675b7

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +73 -71
app.py CHANGED
@@ -1,71 +1,73 @@
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">
9
- <head>
10
- <meta charset="UTF-8">
11
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
12
- <title>Monitoramento em Tempo Real</title>
13
- <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
14
- <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
15
- <style>
16
- #map {
17
- height: 400px;
18
- width: 100%;
19
- }
20
- </style>
21
- </head>
22
- <body>
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
-
33
- // Atualiza o mapa com as coordenadas obtidas
34
- const map = L.map('map').setView([lat, lng], 15);
35
-
36
- // Adiciona o tile do OpenStreetMap
37
- L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
38
- attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
39
- }).addTo(map);
40
-
41
- // Adiciona o marcador
42
- const marker = L.marker([lat, lng]).addTo(map);
43
- marker.bindPopup("Localização Atual: " + lat + ", " + lng).openPopup();
44
- }, function(error) {
45
- alert("Erro ao obter a localização: " + error.message);
46
- });
47
- } else {
48
- alert("Geolocalização não é suportada neste navegador.");
49
- }
50
- }
51
-
52
- // Chama a função para obter a localização do celular
53
- getLocation();
54
- </script>
55
- </body>
56
- </html>
57
- '''
58
- return map_html
59
-
60
- # Cria uma interface Gradio
61
- iface = gr.Interface(
62
- fn=update_map, # Função que irá gerar o mapa
63
- inputs=[],
64
- outputs=gr.HTML(), # Exibe o HTML do mapa
65
- live=True, # Atualização ao vivo
66
- title="Monitoramento em Tempo Real com OSM e Leaflet",
67
- description="Veja a localização em tempo real com o OpenStreetMap",
68
- )
69
-
70
- # Inicia o servidor Gradio
71
- iface.launch(share=True)
 
 
 
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">
9
+ <head>
10
+ <meta charset="UTF-8">
11
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
12
+ <title>Monitoramento em Tempo Real</title>
13
+ <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
14
+ <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
15
+ <style>
16
+ #map {
17
+ height: 400px;
18
+ width: 100%;
19
+ }
20
+ </style>
21
+ </head>
22
+ <body>
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>
58
+ </html>
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)