|
import gradio as gr |
|
|
|
|
|
def get_coordinates(): |
|
|
|
map_html = ''' |
|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Monitoramento em Tempo Real</title> |
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" /> |
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script> |
|
<style> |
|
#map { |
|
height: 400px; |
|
width: 100%; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<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: '© <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> |
|
</html> |
|
''' |
|
return map_html |
|
|
|
|
|
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) |
|
|
