UI ADJUSTS

app.py

@@ -42,10 +42,15 @@ C_CARD    = "#F4F4F0"
 C_RED     = "#E53935"
 C_ORANGE  = "#FB8C00"
 
+# ─── Head HTML para carregar ícones ──────────────────────────────────────────
+# Esta é a forma correta de injetar bibliotecas externas no Gradio
+HEAD_HTML = """
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" crossorigin="anonymous">
+"""
+
 # ─── CSS ─────────────────────────────────────────────────────────────────────
 CSS = f"""
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
-@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');
 
 * {{ box-sizing: border-box; font-family: 'Inter', sans-serif; }}
 
@@ -54,7 +59,7 @@ CSS = f"""
     max-width: 480px !important;
     margin: 0 auto !important;
     padding: 0 !important;
-    background: #f8f9fa !important; /* Fundo levemente cinza para destacar os cards */
+    background: #f8f9fa !important;
     min-height: 100dvh;
 }}
 
@@ -179,7 +184,7 @@ footer {{ display: none !important; }}
     border: 1px solid #eaeaea !important;
     display: flex;
     flex-direction: column;
-    gap: 20px; /* Espaçamento entre os passos */
+    gap: 20px;
 }}
 .reg-label {{
     font-size: 14px;
@@ -256,23 +261,32 @@ footer {{ display: none !important; }}
 }}
 #status-card.ok  {{ background: #e8f5e9; color: #2e7d32; border-left: 4px solid {C_GREEN}; padding: 14px 16px; }}
 #status-card.err {{ background: #ffebee; color: #b71c1c; border-left: 4px solid {C_RED};   padding: 14px 16px; }}
-/* GPS box */
-#gps-box {{
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    background: {C_GREEN_L};
-    border-radius: 10px;
-    padding: 12px 14px;
-    font-size: 13px;
-    color: #2e7d32;
-    font-weight: 500;
-    border: 1px solid #c8e6c9;
-    transition: all 0.3s ease;
-}}
-#gps-box i.fa-pulse {{
-    animation: fa-pulse 1s infinite;
-}}
+
+    /* GPS box */
+    #gps-box {{
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        background: {C_GREEN_L};
+        border-radius: 10px;
+        padding: 12px 14px;
+        font-size: 13px;
+        color: #2e7d32;
+        font-weight: 500;
+        border: 1px solid #c8e6c9;
+        transition: all 0.3s ease;
+    }}
+    #gps-btn {{
+        transition: all 0.2s ease;
+    }}
+    #gps-btn:hover:not(:disabled) {{
+        transform: scale(1.05);
+        box-shadow: 0 2px 8px rgba(56, 140, 89, 0.4);
+    }}
+    #gps-btn:disabled {{
+        opacity: 0.7;
+        cursor: not-allowed;
+    }}
 
 /* Animals list */
 #animals-tab {{ padding: 0 0 80px; background: white; }}
@@ -321,78 +335,91 @@ footer {{ display: none !important; }}
 # ─── GPS JavaScript ───────────────────────────────────────────────────────────
 GPS_HTML = """
 <div id="gps-box">
-  <span id="gps-icon" style="font-size:18px"><i class="fa-solid fa-location-crosshairs fa-pulse"></i></span>
-  <span id="gps-text">Requesting location permission...</span>
+  <span id="gps-icon" style="font-size:18px"><i class="fa-solid fa-location-crosshairs"></i></span>
+  <span id="gps-text">Click the button to detect location</span>
+  <button id="gps-btn" style="margin-left:auto;background:#388C59;color:white;border:none;padding:6px 12px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;">
+    <i class="fa-solid fa-location-dot"></i> Get Location
+  </button>
 </div>
 <script>
 (function() {
-  console.log('GPS script loaded');
-  
   var icon = document.getElementById('gps-icon');
   var text = document.getElementById('gps-text');
+  var btn = document.getElementById('gps-btn');
   
   function setCoords(coords) {
-    console.log('Setting coords:', coords);
-    var tb = document.querySelector('#gps-coords textarea');
-    if (tb) {
-      var nativeSet = Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype, 'value').set;
-      nativeSet.call(tb, JSON.stringify(coords));
-      tb.dispatchEvent(new Event('input', { bubbles: true }));
-      console.log('Coords set successfully');
-    } else {
-      console.error('GPS coords textarea not found');
-    }
+    // Aguarda o Gradio renderizar o textarea
+    setTimeout(function() {
+      var tb = document.querySelector('#gps-coords textarea');
+      if (tb) {
+        var nativeSet = Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype, 'value').set;
+        nativeSet.call(tb, JSON.stringify(coords));
+        tb.dispatchEvent(new Event('input', { bubbles: true }));
+      }
+    }, 100);
   }
   
-  // Verificar se geolocation está disponível
-  if (!navigator.geolocation) {
-    console.error('Geolocation not supported');
-    icon.innerHTML = '<i class="fa-solid fa-triangle-exclamation"></i>';
-    text.textContent = 'GPS não disponível neste navegador.';
-    return;
+  function requestLocation() {
+    if (!navigator.geolocation) {
+      icon.innerHTML = '<i class="fa-solid fa-triangle-exclamation"></i>';
+      text.textContent = 'GPS not available in this browser';
+      btn.style.display = 'none';
+      return;
+    }
+    
+    btn.disabled = true;
+    btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Detecting...';
+    icon.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i>';
+    text.textContent = 'Waiting for GPS...';
+    
+    navigator.geolocation.getCurrentPosition(
+      function(pos) {
+        var lat = parseFloat(pos.coords.latitude.toFixed(5));
+        var lng = parseFloat(pos.coords.longitude.toFixed(5));
+        
+        icon.innerHTML = '<i class="fa-solid fa-check"></i>';
+        text.innerHTML = '<strong>Location detected:</strong> ' + lat + ', ' + lng;
+        btn.innerHTML = '<i class="fa-solid fa-rotate"></i> Update';
+        btn.disabled = false;
+        btn.style.background = '#2d7a4a';
+        
+        setCoords({ lat: lat, lng: lng });
+      },
+      function(err) {
+        icon.innerHTML = '<i class="fa-solid fa-triangle-exclamation"></i>';
+        btn.innerHTML = '<i class="fa-solid fa-location-dot"></i> Try Again';
+        btn.disabled = false;
+        btn.style.background = '#E53935';
+        
+        if (err.code === 1) {
+          text.innerHTML = '<strong>Permission denied.</strong> Enable location in browser settings.';
+        } else if (err.code === 2) {
+          text.innerHTML = '<strong>Location unavailable.</strong> Check if GPS is enabled.';
+        } else if (err.code === 3) {
+          text.innerHTML = '<strong>Timeout.</strong> GPS took too long to respond.';
+        } else {
+          text.textContent = 'Error: ' + err.message;
+        }
+        
+        setCoords({});
+      },
+      {
+        enableHighAccuracy: true,
+        timeout: 15000,
+        maximumAge: 0
+      }
+    );
   }
   
-  console.log('Requesting geolocation...');
+  // Evento de clique no botão
+  btn.addEventListener('click', requestLocation);
   
-  // Opções mais agressivas para forçar o pedido de permissão
-  var options = {
-    enableHighAccuracy: true,
-    timeout: 15000,
-    maximumAge: 0  // Força nova requisição sempre
-  };
-  
-  navigator.geolocation.getCurrentPosition(
-    function(pos) {
-      console.log('Position obtained:', pos);
-      var lat = parseFloat(pos.coords.latitude.toFixed(5));
-      var lng = parseFloat(pos.coords.longitude.toFixed(5));
-      icon.innerHTML = '<i class="fa-solid fa-location-dot"></i>';
-      text.innerHTML = '<i class="fa-solid fa-check"></i> Localização: ' + lat + ', ' + lng;
-      setCoords({ lat: lat, lng: lng });
-    },
-    function(err) {
-      console.error('Geolocation error:', err.code, err.message);
-      icon.innerHTML = '<i class="fa-solid fa-triangle-exclamation"></i>';
-      
-      // Mensagens mais específicas para cada tipo de erro
-      if (err.code === 1) {
-        // PERMISSION_DENIED
-        text.innerHTML = '<i class="fa-solid fa-xmark"></i> Permissão negada. Por favor, habilite a localização nas configurações do navegador.';
-      } else if (err.code === 2) {
-        // POSITION_UNAVAILABLE
-        text.innerHTML = '<i class="fa-solid fa-xmark"></i> Localização indisponível. Verifique se o GPS está ativo.';
-      } else if (err.code === 3) {
-        // TIMEOUT
-        text.innerHTML = '<i class="fa-solid fa-clock"></i> Tempo esgotado ao buscar localização. Tente novamente.';
-      } else {
-        text.innerHTML = '<i class="fa-solid fa-xmark"></i> Erro ao obter localização: ' + err.message;
-      }
-      
-      // Registra mesmo sem GPS (com coordenadas vazias)
-      setCoords({});
-    },
-    options
-  );
+  // Tenta automaticamente após 500ms (após Gradio carregar)
+  setTimeout(function() {
+    if (navigator.geolocation) {
+      requestLocation();
+    }
+  }, 500);
 })();
 </script>
 """
@@ -581,7 +608,7 @@ def get_stats_html():
 
 
 # ─── Gradio app ───────────────────────────────────────────────────────────────
-with gr.Blocks(css=CSS, theme=gr.themes.Base(), title="Spotted Animal") as demo:
+with gr.Blocks(css=CSS, head=HEAD_HTML, theme=gr.themes.Base(), title="Spotted Animal") as demo:
 
     # Top bar
     gr.HTML(