add new ui

app.py

@@ -1,21 +1,21 @@
 """
-app.py — Animal Visto
+app.py — PawMap
 Build Small Hackathon · Backyard AI Track · Junho 2026
+Custom frontend via gradio.Server
 """
 import json
 import logging
 import os
+from pathlib import Path
 
-import gradio_client.utils as _gcu
-_orig = _gcu._json_schema_to_python_type
-def _safe(schema, defs=None):
-    if not isinstance(schema, dict): return "Any"
-    return _orig(schema, defs)
-_gcu._json_schema_to_python_type = _safe
+from gradio import Server
+from gradio.data_classes import FileData
+from fastapi.responses import HTMLResponse, JSONResponse
+from fastapi import Query
+from fastapi.staticfiles import StaticFiles
 
-import gradio as gr
 from core.ai import AnimalAI
-from core.database import Database
+from core.database import Database, DATA_DIR, PHOTOS_DIR
 from core.matcher import AnimalMatcher
 
 logging.basicConfig(level=logging.INFO)
@@ -23,252 +23,86 @@ db      = Database()
 ai      = AnimalAI()
 matcher = AnimalMatcher()
 
-C_GREEN   = "#388C59"
-C_GREEN_L = "#D9EBD9"
-C_TEXT    = "#212121"
-C_RED     = "#E53935"
-C_ORANGE  = "#FB8C00"
+app = Server()
 
-HEAD_HTML = """
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" crossorigin="anonymous">
-<script>
-(function() {
-  function updateGradioTextbox(elementId, value) {
-    var attempts = 0;
-    function tryUpdate() {
-      var container = document.getElementById(elementId);
-      if (!container) { if (attempts++ < 20) setTimeout(tryUpdate, 300); return; }
-      var tb = container.querySelector('textarea') || container.querySelector('input[type="text"]');
-      if (!tb) { if (attempts++ < 20) setTimeout(tryUpdate, 300); return; }
-      var proto = (tb.tagName === 'TEXTAREA') ? window.HTMLTextAreaElement.prototype : window.HTMLInputElement.prototype;
-      var setter = Object.getOwnPropertyDescriptor(proto, 'value').set;
-      setter.call(tb, value);
-      tb.dispatchEvent(new Event('input',  { bubbles: true }));
-      tb.dispatchEvent(new Event('change', { bubbles: true }));
-    }
-    tryUpdate();
-  }
-
-  function requestGPS() {
-    var icon = document.getElementById('gps-icon');
-    var text = document.getElementById('gps-text');
-    var btn  = document.getElementById('gps-btn');
-    if (!icon || !text || !btn) return;
-    if (!navigator.geolocation) { text.textContent = 'GPS nao disponivel'; return; }
-    btn.disabled = true;
-    btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Detectando...';
-    icon.innerHTML = '<i class="fa-solid fa-spinner fa-spin" style="color:#388C59"></i>';
-    text.textContent = 'Aguardando 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" style="color:#388C59"></i>';
-        text.innerHTML = '<strong>Localizacao:</strong> ' + lat + ', ' + lng;
-        btn.innerHTML  = '<i class="fa-solid fa-rotate"></i> Atualizar';
-        btn.disabled   = false;
-        btn.style.background = '#2d7a4a';
-        updateGradioTextbox('gps-coords', JSON.stringify({ lat: lat, lng: lng }));
-      },
-      function(err) {
-        icon.innerHTML = '<i class="fa-solid fa-triangle-exclamation" style="color:#E53935"></i>';
-        btn.innerHTML  = '<i class="fa-solid fa-location-dot"></i> Tentar novamente';
-        btn.disabled   = false;
-        btn.style.background = '#E53935';
-        var msgs = { 1:'Permissao negada.', 2:'Localizacao indisponivel.', 3:'Timeout GPS.' };
-        text.textContent = msgs[err.code] || 'Erro: ' + err.message;
-        updateGradioTextbox('gps-coords', JSON.stringify({}));
-      },
-      { enableHighAccuracy: true, timeout: 15000, maximumAge: 0 }
-    );
-  }
-
-  window.animalVistoRequestGPS = requestGPS;
+# Serve photos as static files at /photos/...
+PHOTOS_DIR.mkdir(parents=True, exist_ok=True)
+app.mount("/photos", StaticFiles(directory=str(PHOTOS_DIR)), name="photos")
 
-  document.addEventListener('click', function(e) {
-    var tabBtn = e.target.closest('.tab-nav button');
-    if (tabBtn && tabBtn.textContent.includes('Registrar')) setTimeout(requestGPS, 600);
-  });
 
-  function patchCameraInput() {
-    var el = document.getElementById('photo-upload');
-    if (!el) { setTimeout(patchCameraInput, 800); return; }
-    var inp = el.querySelector('input[type=file]');
-    if (inp) { inp.setAttribute('capture', 'environment'); inp.setAttribute('accept', 'image/*'); }
-    else setTimeout(patchCameraInput, 800);
-  }
-  setTimeout(patchCameraInput, 1500);
-})();
-</script>
-"""
+# ─── Frontend ─────────────────────────────────────────────────────────────────
 
-CSS = """
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
-* { box-sizing: border-box; font-family: 'Inter', sans-serif; }
-.gradio-container { max-width: 480px !important; margin: 0 auto !important; padding: 0 !important; background: #f8f9fa !important; min-height: 100dvh; }
-footer { display: none !important; }
-#top-bar { background: #388C59; color: white; padding: 14px 16px 12px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
-#top-bar h1 { margin: 0; font-size: 18px; font-weight: 700; }
-#top-bar small { font-size: 12px; opacity: .75; }
-.tabs > .tab-nav { background: #fff; border-top: 1px solid #eee; border-bottom: none !important; display: flex; position: sticky; bottom: 0; z-index: 100; box-shadow: 0 -2px 10px rgba(0,0,0,.08); padding: 0; gap: 0; }
-.tabs > .tab-nav button { flex: 1 !important; padding: 10px 4px 8px !important; border-radius: 0 !important; border: none !important; background: transparent !important; color: #999 !important; font-size: 13px !important; font-weight: 500 !important; border-top: 3px solid transparent !important; }
-.tabs > .tab-nav button.selected { color: #388C59 !important; border-top: 3px solid #388C59 !important; font-weight: 700 !important; }
-.filter-row { display: flex; gap: 6px; padding: 10px 12px; overflow-x: auto; scrollbar-width: none; background: white; border-bottom: 1px solid #f0f0f0; }
-.filter-row button { border-radius: 20px !important; border: 1.5px solid #ddd !important; background: white !important; color: #212121 !important; font-size: 13px !important; padding: 5px 14px !important; white-space: nowrap; font-weight: 500 !important; min-width: unset !important; }
-.filter-row button:hover { background: #388C59 !important; border-color: #388C59 !important; color: white !important; }
-#register-tab { padding: 16px 16px 80px; }
-.form-card { background: #ffffff !important; border-radius: 16px !important; padding: 20px 16px !important; box-shadow: 0 4px 14px rgba(0,0,0,0.06) !important; border: 1px solid #eaeaea !important; }
-.reg-label { font-size: 14px; font-weight: 600; color: #212121; margin: 12px 0 8px; display: flex; align-items: center; gap: 8px; }
-.reg-label i { color: #388C59; }
-#photo-upload { border: 2px dashed #cfcfcf !important; border-radius: 12px !important; background: #f9f9f9 !important; min-height: 180px; }
-#submit-btn { margin-top: 10px !important; width: 100% !important; background: #388C59 !important; border: none !important; border-radius: 12px !important; font-size: 16px !important; font-weight: 600 !important; padding: 14px !important; color: white !important; }
-#status-card { margin-top: 16px; border-radius: 12px; font-size: 14px; line-height: 1.5; }
-#status-card.ok  { background: #e8f5e9; color: #2e7d32; border-left: 4px solid #388C59; padding: 14px 16px; }
-#status-card.err { background: #ffebee; color: #b71c1c; border-left: 4px solid #E53935; padding: 14px 16px; }
-#gps-coords { display: none !important; }
-#animals-tab { padding: 0 0 80px; background: white; }
-.animal-card { display: flex; align-items: center; gap: 12px; background: white; border-radius: 12px; padding: 14px 16px; margin: 8px 12px; box-shadow: 0 2px 8px rgba(0,0,0,.07); border: 1px solid #f0f0f0; }
-.animal-thumb { width: 52px; height: 52px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 24px; overflow: hidden; background: #eee; }
-.animal-info { flex: 1; min-width: 0; }
-.animal-name { font-weight: 600; font-size: 14px; color: #212121; }
-.animal-meta { font-size: 12px; color: #888; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.animal-badge { background: #D9EBD9; color: #388C59; border-radius: 20px; padding: 3px 9px; font-size: 12px; font-weight: 700; flex-shrink: 0; }
-.animal-badge.urgent { background: #ffebee; color: #E53935; }
-.section-header { padding: 14px 16px 6px; font-size: 13px; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: .5px; }
-"""
+@app.get("/", response_class=HTMLResponse)
+async def homepage():
+    html_path = Path(__file__).parent / "index.html"
+    return html_path.read_text(encoding="utf-8")
 
-GPS_HTML = """
-<div id="gps-box" style="display:flex;align-items:center;gap:10px;background:#D9EBD9;border-radius:10px;padding:12px 14px;font-size:13px;color:#2e7d32;font-weight:500;border:1px solid #c8e6c9;">
-  <span id="gps-icon" style="font-size:18px"><i class="fa-solid fa-location-crosshairs"></i></span>
-  <span id="gps-text" style="flex:1">Toque para detectar localizacao</span>
-  <button id="gps-btn" onclick="window.animalVistoRequestGPS && window.animalVistoRequestGPS()"
-    style="background:#388C59;color:white;border:none;padding:6px 14px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;">
-    <i class="fa-solid fa-location-dot"></i> Localizar
-  </button>
-</div>
-"""
 
+# ─── Data APIs ────────────────────────────────────────────────────────────────
 
-def build_map_html(species="all", timeframe="all"):
-    import base64 as _b64
+@app.get("/api/map-data")
+async def get_map_data(
+    species: str = Query("all"),
+    timeframe: str = Query("all"),
+):
     data = db.get_map_data(species, timeframe)
-    # Base64 evita conflito de aspas e escaping no srcdoc
-    data_b64 = _b64.b64encode(json.dumps(data, ensure_ascii=False).encode()).decode()
-    # Leaflet via cdnjs (mais estável que unpkg no HuggingFace)
-    inner = (
-        '<!DOCTYPE html><html><head>'
-        '<meta charset="utf-8"/>'
-        '<meta name="viewport" content="width=device-width,initial-scale=1"/>'
-        '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css"/>'
-        '<style>body{margin:0;padding:0;}#map{height:100vh;width:100%;}'
-        '.popup-photo{width:100%;height:80px;object-fit:cover;border-radius:6px;margin-bottom:6px;}'
-        '</style></head><body>'
-        '<div id="map"></div>'
-        '<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js"></script>'
-        '<script>'
-        'var animals=JSON.parse(atob("' + data_b64 + '"));'
-        'var map=L.map("map").setView([-23.0316,-46.9785],13);'
-        'L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",{attribution:"OSM",maxZoom:19}).addTo(map);'
-        'if(!animals.length){'
-        '  var info=L.control({position:"topright"});'
-        '  info.onAdd=function(){var d=L.DomUtil.create("div");d.style="background:white;padding:8px 12px;border-radius:8px;font-size:13px;color:#888;";d.innerHTML="Nenhum avistamento ainda";return d;};'
-        '  info.addTo(map);'
-        '}'
-        'animals.forEach(function(a){'
-        '  var color=a.days_since>30?"#E53935":a.count>1?"#FB8C00":"#388C59";'
-        '  var em=a.species==="dog"?"D":"G";'
-        '  var badge=a.count>1?"<span style=\'position:absolute;top:-5px;right:-5px;background:white;color:"+color+";border:1.5px solid "+color+";border-radius:10px;min-width:16px;height:16px;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;\'>"+a.count+"</span>":"";'
-        '  var ico=L.divIcon({html:"<div style=\'position:relative;background:"+color+";width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:white;box-shadow:0 2px 8px rgba(0,0,0,.3);border:2.5px solid white;\'>"+em+badge+"</div>",className:"",iconSize:[38,38],iconAnchor:[19,19],popupAnchor:[0,-22]});'
-        '  var sp=a.species==="dog"?"Cao":"Gato";'
-        '  var urg=a.days_since>30?"<br><small style=\'color:#E53935\'>Nao visto ha "+a.days_since+" dias</small>":"";'
-        '  var popup="<b>"+sp+" #"+a.id+"</b>"+(a.desc?"<br><small>"+a.desc+"</small>":"")+"<br><small>"+a.count+"x - "+a.last_seen+"</small>"+urg;'
-        '  L.marker([a.lat,a.lng],{icon:ico}).addTo(map).bindPopup(popup,{maxWidth:220});'
-        '});'
-        '</script></body></html>'
-    )
-    # srcdoc: só escapa & e " (NÃO escapa < e > para não quebrar o HTML)
-    srcdoc = inner.replace('&', '&amp;').replace('"', '&quot;')
-    return f'<iframe srcdoc="{srcdoc}" style="width:100%;height:500px;border:none;"></iframe>'
+    for item in data:
+        pp = item.get("last_photo") or ""
+        item["photo_url"] = f"/photos/{pp}" if pp else ""
+        item.pop("last_photo", None)
+    return JSONResponse(content=data)
 
 
-def build_animals_html():
+@app.get("/api/animals")
+async def get_animals():
     animals = db.get_recent_animals(limit=30)
-    if not animals:
-        return '<div style="padding:40px 16px;text-align:center;color:#aaa;"><div style="font-size:48px">🐾</div><div style="font-size:15px;font-weight:500;margin-top:12px;">Nenhum animal registrado ainda</div></div>'
-    cards = []
     for a in animals:
-        try:
-            desc = json.loads(a.get("description") or "{}")
-        except Exception:
-            desc = {}
-        is_dog   = a["species"] == "dog"
-        em       = "🐕" if is_dog else "🐈"
-        sp_pt    = "Cao" if is_dog else "Gato"
-        urgent   = a.get("days_since", 0) > 30
-        color    = C_RED if urgent else C_GREEN
-        badge_cls = "animal-badge urgent" if urgent else "animal-badge"
-        breed    = desc.get("breed_estimate", "raca desconhecida")
-        color_coat = desc.get("primary_color", "")
-        meta     = f"{breed}{' · ' + color_coat if color_coat else ''}"
-        count    = a["sighting_count"]
-        last_seen = a.get("last_seen_short", "")
-        photo_url = a.get("last_photo_url") or ""
-        if photo_url:
-            thumb = f'<img src="{photo_url}" style="width:52px;height:52px;border-radius:10px;object-fit:cover;" onerror="this.parentElement.innerHTML=\'{em}\'">'
-        else:
-            thumb = em
-        urgent_icon = '<i class="fa-solid fa-triangle-exclamation"></i> ' if urgent else ''
-        cards.append(f'''
-        <div class="animal-card">
-          <div class="animal-thumb">{thumb}</div>
-          <div class="animal-info">
-            <div class="animal-name">{sp_pt} #{a["id"]}</div>
-            <div class="animal-meta">{meta}</div>
-            <div class="animal-meta" style="color:{color};">{urgent_icon}Visto {count}x · ultimo: {last_seen}</div>
-          </div>
-          <div class="{badge_cls}">{count}x</div>
-        </div>''')
-    total_a = db.total_animals()
-    total_s = db.total_sightings()
-    return f'<div class="section-header">🐾 {total_a} animais · {total_s} avistamentos</div>' + "".join(cards)
+        pp = a.get("last_photo_path") or ""
+        a["photo_url"] = f"/photos/{pp}" if pp else ""
+        a.pop("last_photo_path", None)
+        a.pop("embedding", None)
+    return JSONResponse(content=animals)
+
+
+@app.get("/api/animal/{animal_id}")
+async def get_animal(animal_id: int):
+    detail = db.get_animal_detail(animal_id)
+    if not detail:
+        return JSONResponse(content={"error": "not found"}, status_code=404)
+    for s in detail.get("sightings", []):
+        pp = s.get("photo_path") or ""
+        s["photo_url"] = f"/photos/{pp}" if pp else ""
+    return JSONResponse(content=detail)
 
 
-def build_confirmation_html(animal_id, is_new, count, species, photo_url=""):
-    em    = "🐕" if species == "dog" else "🐈"
-    sp_pt = "cao" if species == "dog" else "gato"
-    title = f"Novo {sp_pt} registrado!" if is_new else f"{em} Animal reconhecido!"
-    sub   = "1o avistamento — obrigada por registrar!" if is_new else f"Este {sp_pt} ja foi avistado <b>{count}x</b> na regiao."
-    photo_html = f'<img src="{photo_url}" style="width:100%;max-height:160px;object-fit:cover;border-radius:8px;margin-bottom:8px;" onerror="this.style.display=\'none\'">' if photo_url else ""
-    return f'''
-    <div id="status-card" class="ok">
-      {photo_html}
-      <div style="font-size:24px;margin-bottom:6px;color:#388C59;">✅ {em}</div>
-      <div style="font-weight:700;font-size:15px;">{title}</div>
-      <div>{sub}</div>
-      <div style="font-size:12px;margin-top:6px;color:#555;">ID #{animal_id} · Avistamento salvo</div>
-    </div>'''
+# ─── ML API (queued via Gradio) ───────────────────────────────────────────────
 
+@app.api(name="process_sighting")
+def process_sighting(
+    image_path: FileData,
+    gps_json: str = "",
+    notes: str = "",
+) -> dict:
+    from PIL import Image as PILImage
+
+    img = PILImage.open(image_path["path"]).convert("RGB")
 
-def process_sighting(image, gps_json, notes, progress=gr.Progress()):
-    if image is None:
-        return gr.update(), '<div id="status-card" class="err">Tire uma foto do animal antes de registrar.</div>'
-    progress(0.15, desc="Analisando imagem...")
     try:
         coords = json.loads(gps_json) if gps_json and gps_json.strip() else {}
     except Exception:
         coords = {}
+
     lat = round(float(coords["lat"]), 5) if coords.get("lat") else None
     lng = round(float(coords["lng"]), 5) if coords.get("lng") else None
-    progress(0.40, desc="Identificando com Nemotron...")
-    description = ai.analyze_image(image)
+
+    description = ai.analyze_image(img)
     embedding   = ai.get_embedding(description)
-    progress(0.70, desc="Verificando avistamentos anteriores...")
-    candidates = db.get_all_animals_with_embeddings()
-    match      = matcher.find_match(embedding, candidates)
+    candidates  = db.get_all_animals_with_embeddings()
+    match       = matcher.find_match(embedding, candidates)
+
     if match:
         animal_id, _score = match
-        photo_path = db.save_photo(image, animal_id=animal_id)
-        photo_url  = db.photo_url(photo_path) or ""
+        photo_path = db.save_photo(img, animal_id=animal_id)
         db.add_sighting(animal_id, photo_path, lat, lng, notes)
         db.update_animal(animal_id)
         animal  = db.get_animal(animal_id)
@@ -276,68 +110,30 @@ def process_sighting(image, gps_json, notes, progress=gr.Progress()):
         species = animal["species"]
         is_new  = False
     else:
-        animal_id = db.create_animal(description, embedding)
-        photo_path = db.save_photo(image, animal_id=animal_id)
-        photo_url  = db.photo_url(photo_path) or ""
+        animal_id  = db.create_animal(description, embedding)
+        photo_path = db.save_photo(img, animal_id=animal_id)
         db.add_sighting(animal_id, photo_path, lat, lng, notes)
         count   = 1
         species = description.get("species", "dog")
         is_new  = True
-    progress(1.0, desc="Salvo!")
-    return gr.update(value=build_map_html()), build_confirmation_html(animal_id, is_new, count, species, photo_url)
-
-
-with gr.Blocks(css=CSS, head=HEAD_HTML, theme=gr.themes.Base(), title="Animal Visto 🐾") as demo:
-
-    gr.HTML('<div id="top-bar"><h1>🐾 Animal Visto</h1><small>Vinhedo, SP</small></div>')
-
-    species_st   = gr.State("all")
-    timeframe_st = gr.State("all")
 
-    with gr.Tabs(elem_classes="tabs"):
-
-        with gr.Tab("🗺️ Mapa"):
-            with gr.Row(elem_classes="filter-row"):
-                btn_all   = gr.Button("Todos",       elem_classes="filter-row")
-                btn_dogs  = gr.Button("🐕 Caes",     elem_classes="filter-row")
-                btn_cats  = gr.Button("🐈 Gatos",    elem_classes="filter-row")
-                btn_today = gr.Button("Hoje",          elem_classes="filter-row secondary")
-                btn_week  = gr.Button("Esta semana",   elem_classes="filter-row secondary")
-            map_html = gr.HTML(build_map_html(), elem_id="map-container")
-
-        with gr.Tab("📷 Registrar", elem_id="register-tab"):
-            with gr.Column(elem_classes="form-card"):
-                gr.HTML('<div class="reg-label"><i class="fa-solid fa-location-dot"></i> Passo 1: Localizacao</div>')
-                gr.HTML(GPS_HTML)
-                gps_coords = gr.Textbox(value="", elem_id="gps-coords", interactive=True, visible=False, label="gps-coords")
-                gr.HTML('<div class="reg-label"><i class="fa-solid fa-camera"></i> Passo 2: Foto do Animal</div>')
-                photo_input = gr.Image(label="", type="pil", sources=["upload", "webcam"], interactive=True, show_label=False, elem_id="photo-upload")
-                gr.HTML('<div class="reg-label"><i class="fa-solid fa-file-signature"></i> Passo 3: Observacoes (opcional)</div>')
-                notes_input = gr.Textbox(label="", placeholder="Ex.: parece ferido, tem coleira...", lines=2, max_lines=4, show_label=False)
-                submit_btn = gr.Button("Registrar avistamento", variant="primary", elem_id="submit-btn")
-            status_html = gr.HTML("")
-
-        with gr.Tab("🐾 Avistados", elem_id="animals-tab"):
-            refresh_btn     = gr.Button("Atualizar lista", size="sm", variant="secondary")
-            animals_display = gr.HTML(build_animals_html())
+    return {
+        "animal_id": animal_id,
+        "is_new": is_new,
+        "count": count,
+        "species": species,
+        "photo_url": f"/photos/{photo_path}" if photo_path else "",
+        "description": description,
+    }
 
-    submit_btn.click(process_sighting, inputs=[photo_input, gps_coords, notes_input], outputs=[map_html, status_html])
-    btn_all.click(lambda: (build_map_html("all","all"),"all","all"), outputs=[map_html, species_st, timeframe_st])
-    btn_dogs.click(lambda t: (build_map_html("dog",t),"dog",t), inputs=[timeframe_st], outputs=[map_html, species_st, timeframe_st])
-    btn_cats.click(lambda t: (build_map_html("cat",t),"cat",t), inputs=[timeframe_st], outputs=[map_html, species_st, timeframe_st])
-    btn_today.click(lambda s: (build_map_html(s,"today"),s,"today"), inputs=[species_st], outputs=[map_html, species_st, timeframe_st])
-    btn_week.click(lambda s: (build_map_html(s,"week"),s,"week"), inputs=[species_st], outputs=[map_html, species_st, timeframe_st])
-    refresh_btn.click(build_animals_html, outputs=[animals_display])
-    demo.load(build_map_html, outputs=[map_html])
 
+# ─── Launch ───────────────────────────────────────────────────────────────────
 
 if __name__ == "__main__":
-    import gradio.blocks as _gb_mod
-    _orig_gai = _gb_mod.Blocks.get_api_info
-    def _safe_get_api_info(self):
-        try: return _orig_gai(self)
-        except Exception as _e: logging.warning(f"get_api_info: {_e}"); return {}
-    _gb_mod.Blocks.get_api_info = _safe_get_api_info
-    from core.database import DATA_DIR, PHOTOS_DIR
+    DATA_DIR.mkdir(parents=True, exist_ok=True)
     PHOTOS_DIR.mkdir(parents=True, exist_ok=True)
-    demo.launch(server_name="0.0.0.0", server_port=int(os.environ.get("PORT", 7860)), show_error=True, show_api=False, allowed_paths=[str(DATA_DIR)])
+    app.launch(
+        server_name="0.0.0.0",
+        server_port=int(os.environ.get("PORT", 7860)),
+        show_error=True,
+    )

index.html

@@ -0,0 +1,579 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+  <meta charset="utf-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
+  <title>PawMap 🐾</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css"/>
+  <link rel="preconnect" href="https://fonts.googleapis.com"/>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;1,14..32,400&display=swap" rel="stylesheet"/>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+    :root {
+      --green:      #388C59;
+      --green-dark: #2d7249;
+      --green-pale: #D9EBD9;
+      --green-soft: #EDF6EE;
+      --orange:     #FB8C00;
+      --red:        #E53935;
+      --text:       #1A1A1A;
+      --text-muted: #888;
+      --border:     #EBEBEB;
+      --bg:         #F4F6F4;
+      --white:      #FFFFFF;
+      --nav-h:      62px;
+      --header-h:   54px;
+      --filter-h:   48px;
+    }
+
+    html, body {
+      height: 100%;
+      font-family: 'Inter', system-ui, sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      overflow: hidden;
+      -webkit-tap-highlight-color: transparent;
+    }
+
+    /* ── App shell ── */
+    #app {
+      display: flex;
+      flex-direction: column;
+      height: 100dvh;
+      max-width: 480px;
+      margin: 0 auto;
+      position: relative;
+      background: var(--white);
+      box-shadow: 0 0 40px rgba(0,0,0,.12);
+    }
+
+    /* ── Header ── */
+    #header {
+      height: var(--header-h);
+      background: var(--green);
+      color: #fff;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 16px;
+      flex-shrink: 0;
+      z-index: 200;
+    }
+    #header .logo {
+      font-size: 17px;
+      font-weight: 700;
+      letter-spacing: -.3px;
+    }
+    .icon-btn {
+      background: transparent;
+      border: none;
+      color: #fff;
+      cursor: pointer;
+      width: 36px;
+      height: 36px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 18px;
+      transition: background .15s;
+    }
+    .icon-btn:hover { background: rgba(255,255,255,.15); }
+    .icon-btn svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
+
+    /* ── Filter chips ── */
+    #filter-row {
+      height: var(--filter-h);
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 0 14px;
+      overflow-x: auto;
+      scrollbar-width: none;
+      background: var(--white);
+      border-bottom: 1px solid var(--border);
+      flex-shrink: 0;
+      z-index: 100;
+    }
+    #filter-row::-webkit-scrollbar { display: none; }
+
+    .chip {
+      border-radius: 20px;
+      border: 1.5px solid var(--border);
+      background: var(--white);
+      color: var(--text-muted);
+      font-size: 13px;
+      font-weight: 500;
+      padding: 5px 14px;
+      white-space: nowrap;
+      cursor: pointer;
+      font-family: inherit;
+      transition: all .15s;
+      flex-shrink: 0;
+    }
+    .chip:hover { border-color: var(--green); color: var(--green); }
+    .chip.active {
+      background: var(--green);
+      border-color: var(--green);
+      color: #fff;
+      font-weight: 600;
+    }
+
+    /* ── Screen system ── */
+    .screen {
+      display: none;
+      flex: 1;
+      flex-direction: column;
+      overflow: hidden;
+      position: relative;
+    }
+    .screen.active { display: flex; }
+
+    /* ── Map screen ── */
+    #map {
+      flex: 1;
+      width: 100%;
+      z-index: 1;
+    }
+    .leaflet-control-zoom {
+      border: none !important;
+      box-shadow: 0 2px 12px rgba(0,0,0,.15) !important;
+    }
+    .leaflet-control-zoom a {
+      border-radius: 8px !important;
+      border: none !important;
+      font-weight: 600 !important;
+      color: var(--text) !important;
+    }
+
+    /* ── Floating sighting card ── */
+    #sighting-card {
+      position: absolute;
+      bottom: 14px;
+      left: 14px;
+      right: 14px;
+      background: var(--white);
+      border-radius: 16px;
+      padding: 14px 16px;
+      box-shadow: 0 4px 24px rgba(0,0,0,.14);
+      z-index: 400;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      transition: opacity .2s, transform .2s;
+    }
+    #sighting-card.hidden {
+      opacity: 0;
+      pointer-events: none;
+      transform: translateY(8px);
+    }
+    #sighting-card .card-photo {
+      width: 52px;
+      height: 52px;
+      border-radius: 50%;
+      object-fit: cover;
+      flex-shrink: 0;
+      background: var(--bg);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 24px;
+      overflow: hidden;
+    }
+    #sighting-card .card-photo img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+    #sighting-card .card-info { flex: 1; min-width: 0; }
+    #sighting-card .card-top {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      margin-bottom: 3px;
+    }
+    .badge {
+      background: var(--green-pale);
+      color: var(--green);
+      border-radius: 20px;
+      padding: 2px 10px;
+      font-size: 11px;
+      font-weight: 700;
+    }
+    .badge.urgent { background: #ffebee; color: var(--red); }
+    .badge.orange { background: #fff3e0; color: var(--orange); }
+    #sighting-card .card-time { font-size: 11px; color: var(--text-muted); }
+    #sighting-card .card-location {
+      font-weight: 600;
+      font-size: 13px;
+      color: var(--text);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    #sighting-card .card-sub {
+      font-size: 12px;
+      color: var(--text-muted);
+      margin-top: 1px;
+    }
+    .btn-ficha {
+      background: var(--green);
+      color: #fff;
+      border: none;
+      border-radius: 10px;
+      padding: 8px 14px;
+      font-size: 12px;
+      font-weight: 600;
+      white-space: nowrap;
+      cursor: pointer;
+      font-family: inherit;
+      flex-shrink: 0;
+      transition: background .15s;
+    }
+    .btn-ficha:hover { background: var(--green-dark); }
+
+    /* ── Bottom nav ── */
+    #bottom-nav {
+      height: var(--nav-h);
+      background: var(--white);
+      border-top: 1px solid var(--border);
+      display: flex;
+      align-items: stretch;
+      flex-shrink: 0;
+      z-index: 500;
+    }
+    .nav-btn {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 3px;
+      background: transparent;
+      border: none;
+      border-top: 2.5px solid transparent;
+      color: var(--text-muted);
+      font-size: 11px;
+      font-weight: 500;
+      cursor: pointer;
+      font-family: inherit;
+      transition: all .15s;
+      padding-bottom: 4px;
+    }
+    .nav-btn.active {
+      color: var(--green);
+      border-top-color: var(--green);
+      font-weight: 700;
+    }
+    .nav-icon { font-size: 20px; line-height: 1; }
+
+    /* ── Register & Sightings screens (placeholder) ── */
+    .screen-placeholder {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 12px;
+      color: var(--text-muted);
+      padding: 40px 24px;
+      text-align: center;
+    }
+    .screen-placeholder .ph-icon { font-size: 56px; opacity: .35; }
+    .screen-placeholder h2 { font-size: 16px; font-weight: 600; color: var(--text); }
+    .screen-placeholder p { font-size: 13px; line-height: 1.5; }
+
+    /* ── Empty map state ── */
+    #map-empty {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background: var(--white);
+      border-radius: 12px;
+      padding: 14px 20px;
+      font-size: 13px;
+      color: var(--text-muted);
+      box-shadow: 0 2px 12px rgba(0,0,0,.1);
+      z-index: 500;
+      display: none;
+      pointer-events: none;
+    }
+
+    /* ── Loading pulse ── */
+    @keyframes pulse { 0%,100%{opacity:.4} 50%{opacity:1} }
+    .loading { animation: pulse 1.4s ease-in-out infinite; }
+  </style>
+</head>
+<body>
+<div id="app">
+
+  <!-- ══ HEADER ══ -->
+  <header id="header">
+    <button class="icon-btn" id="menu-btn" aria-label="Menu">
+      <svg viewBox="0 0 24 24"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
+    </button>
+    <span class="logo">PawMap</span>
+    <button class="icon-btn" id="options-btn" aria-label="Opções">
+      <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="1.5" fill="#fff" stroke="none"/><circle cx="12" cy="12" r="1.5" fill="#fff" stroke="none"/><circle cx="12" cy="19" r="1.5" fill="#fff" stroke="none"/></svg>
+    </button>
+  </header>
+
+  <!-- ══ FILTER ROW ══ (only for map screen) -->
+  <div id="filter-row">
+    <button class="chip active" data-species="all">Todos</button>
+    <button class="chip" data-species="dog">🐕 Cães</button>
+    <button class="chip" data-species="cat">🐈 Gatos</button>
+    <button class="chip" data-timeframe="today">Hoje</button>
+    <button class="chip" data-timeframe="week">Esta Semana</button>
+  </div>
+
+  <!-- ══ MAP SCREEN ══ -->
+  <div id="screen-map" class="screen active">
+    <div id="map"></div>
+    <div id="map-empty">Nenhum avistamento ainda 🐾</div>
+
+    <!-- Floating card -->
+    <div id="sighting-card" class="hidden">
+      <div class="card-photo" id="card-photo">🐾</div>
+      <div class="card-info">
+        <div class="card-top">
+          <span class="badge" id="card-badge">Cão</span>
+          <span class="card-time" id="card-time"></span>
+        </div>
+        <div class="card-location" id="card-location">Avistamento registrado</div>
+        <div class="card-sub" id="card-sub"></div>
+      </div>
+      <button class="btn-ficha" id="card-btn">Ver ficha</button>
+    </div>
+  </div>
+
+  <!-- ══ REGISTER SCREEN ══ -->
+  <div id="screen-register" class="screen">
+    <div class="screen-placeholder">
+      <div class="ph-icon">📷</div>
+      <h2>Registrar Avistamento</h2>
+      <p>Tire uma foto do animal para que a IA identifique a espécie, cor e porte — e salve o avistamento no mapa.</p>
+      <p style="margin-top:8px;font-size:12px;opacity:.6;">Em construção — próxima tela</p>
+    </div>
+  </div>
+
+  <!-- ══ SIGHTINGS SCREEN ══ -->
+  <div id="screen-sightings" class="screen">
+    <div class="screen-placeholder">
+      <div class="ph-icon">👁️</div>
+      <h2>Animais Avistados</h2>
+      <p>Veja todos os animais catalogados na região e acompanhe sua trajetória ao longo do tempo.</p>
+      <p style="margin-top:8px;font-size:12px;opacity:.6;">Em construção — próxima tela</p>
+    </div>
+  </div>
+
+  <!-- ══ BOTTOM NAV ══ -->
+  <nav id="bottom-nav">
+    <button class="nav-btn active" data-screen="map">
+      <span class="nav-icon">🗺️</span>
+      <span>Mapa</span>
+    </button>
+    <button class="nav-btn" data-screen="register">
+      <span class="nav-icon">📷</span>
+      <span>Registrar</span>
+    </button>
+    <button class="nav-btn" data-screen="sightings">
+      <span class="nav-icon">👁️</span>
+      <span>Avistados</span>
+    </button>
+  </nav>
+
+</div><!-- #app -->
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js"></script>
+<script>
+(function () {
+  'use strict';
+
+  // ── State ──────────────────────────────────────────────────────────────────
+  let currentSpecies   = 'all';
+  let currentTimeframe = 'all';
+  let map, markersLayer;
+  let mapData = [];
+  let activeAnimal = null;
+
+  // ── Navigation ─────────────────────────────────────────────────────────────
+  const filterRow = document.getElementById('filter-row');
+
+  function showScreen(name) {
+    document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));
+    document.getElementById('screen-' + name).classList.add('active');
+    document.querySelectorAll('.nav-btn').forEach(b => b.classList.remove('active'));
+    document.querySelector(`.nav-btn[data-screen="${name}"]`).classList.add('active');
+
+    // Show/hide filter row only on map
+    filterRow.style.display = name === 'map' ? 'flex' : 'none';
+
+    // Leaflet needs a size refresh after being hidden
+    if (name === 'map' && map) setTimeout(() => map.invalidateSize(), 60);
+  }
+
+  document.querySelectorAll('.nav-btn').forEach(btn => {
+    btn.addEventListener('click', () => showScreen(btn.dataset.screen));
+  });
+
+  // ── Map init ───────────────────────────────────────────────────────────────
+  function initMap() {
+    map = L.map('map', {
+      zoomControl: false,
+      attributionControl: true,
+    }).setView([-23.0316, -46.9785], 13);
+
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      attribution: '© <a href="https://openstreetmap.org">OSM</a>',
+      maxZoom: 19,
+    }).addTo(map);
+
+    markersLayer = L.layerGroup().addTo(map);
+
+    L.control.zoom({ position: 'bottomright' }).addTo(map);
+
+    // Close card on map click
+    map.on('click', () => hideCard());
+  }
+
+  // ── Marker builder ─────────────────────────────────────────────────────────
+  function makeIcon(animal) {
+    const isDog   = animal.species === 'dog';
+    const urgent  = animal.days_since > 30;
+    const color   = urgent ? '#E53935' : isDog ? '#388C59' : '#FB8C00';
+    const countBadge = animal.count > 1
+      ? `<span style="position:absolute;top:-5px;right:-5px;background:#fff;color:${color};border:1.5px solid ${color};border-radius:10px;min-width:16px;height:16px;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 3px;">${animal.count}</span>`
+      : '';
+
+    return L.divIcon({
+      html: `<div style="position:relative;background:${color};width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:0 3px 10px rgba(0,0,0,.25);border:2.5px solid #fff;">${isDog ? '🐕' : '🐈'}${countBadge}</div>`,
+      className: '',
+      iconSize: [42, 42],
+      iconAnchor: [21, 21],
+      popupAnchor: [0, -26],
+    });
+  }
+
+  // ── Render markers ───────────────────────────────���─────────────────────────
+  function renderMarkers(data) {
+    markersLayer.clearLayers();
+    const emptyEl = document.getElementById('map-empty');
+
+    const withCoords = data.filter(a => a.lat && a.lng);
+
+    if (!withCoords.length) {
+      emptyEl.style.display = 'block';
+      hideCard();
+      return;
+    }
+    emptyEl.style.display = 'none';
+
+    withCoords.forEach(animal => {
+      const marker = L.marker([animal.lat, animal.lng], { icon: makeIcon(animal) });
+      marker.on('click', e => {
+        e.originalEvent.stopPropagation();
+        showCard(animal);
+      });
+      markersLayer.addLayer(marker);
+    });
+
+    // Show most recent in card
+    showCard(withCoords[0]);
+  }
+
+  // ── Floating card ──────────────────────────────────────────────────────────
+  function showCard(animal) {
+    activeAnimal = animal;
+    const card   = document.getElementById('sighting-card');
+    const isDog  = animal.species === 'dog';
+    const urgent = animal.days_since > 30;
+
+    // Photo
+    const photoEl = document.getElementById('card-photo');
+    if (animal.photo_url) {
+      photoEl.innerHTML = `<img src="${animal.photo_url}" alt="foto" style="width:52px;height:52px;border-radius:50%;object-fit:cover;" onerror="this.outerHTML='<span style=font-size:26px>${isDog ? '🐕' : '🐈'}</span>'">`;
+    } else {
+      photoEl.innerHTML = `<span style="font-size:26px;">${isDog ? '🐕' : '🐈'}</span>`;
+    }
+
+    // Badge
+    const badgeEl = document.getElementById('card-badge');
+    badgeEl.textContent = isDog ? 'Cão' : 'Gato';
+    badgeEl.className   = 'badge' + (urgent ? ' urgent' : (!isDog ? ' orange' : ''));
+
+    // Time
+    const timeEl = document.getElementById('card-time');
+    timeEl.textContent = animal.days_since === 0
+      ? 'Hoje'
+      : animal.days_since === 1
+        ? 'Ontem'
+        : `${animal.days_since}d atrás`;
+
+    // Location / desc
+    const locEl = document.getElementById('card-location');
+    locEl.textContent = animal.desc || (isDog ? 'Cão avistado na área' : 'Gato avistado na área');
+
+    const subEl = document.getElementById('card-sub');
+    subEl.textContent = `${animal.count} avistamento${animal.count !== 1 ? 's' : ''} · último: ${animal.last_seen}`;
+
+    card.classList.remove('hidden');
+  }
+
+  function hideCard() {
+    document.getElementById('sighting-card').classList.add('hidden');
+    activeAnimal = null;
+  }
+
+  document.getElementById('card-btn').addEventListener('click', () => {
+    if (activeAnimal) {
+      // TODO: navigate to animal profile screen
+      alert(`Animal #${activeAnimal.id} — tela de perfil em breve!`);
+    }
+  });
+
+  // ── Load data ──────────────────────────────────────────────────────────────
+  async function loadMapData() {
+    try {
+      const url  = `/api/map-data?species=${currentSpecies}&timeframe=${currentTimeframe}`;
+      const data = await fetch(url).then(r => r.json());
+      mapData = data;
+      renderMarkers(data);
+    } catch (err) {
+      console.error('Erro ao carregar mapa:', err);
+    }
+  }
+
+  // ── Filter chips ───────────────────────────────────────────────────────────
+  document.querySelectorAll('.chip[data-species]').forEach(btn => {
+    btn.addEventListener('click', () => {
+      document.querySelectorAll('.chip[data-species]').forEach(b => b.classList.remove('active'));
+      btn.classList.add('active');
+      currentSpecies = btn.dataset.species;
+      loadMapData();
+    });
+  });
+
+  document.querySelectorAll('.chip[data-timeframe]').forEach(btn => {
+    btn.addEventListener('click', () => {
+      const isActive = btn.classList.contains('active');
+      document.querySelectorAll('.chip[data-timeframe]').forEach(b => b.classList.remove('active'));
+      if (!isActive) {
+        btn.classList.add('active');
+        currentTimeframe = btn.dataset.timeframe;
+      } else {
+        currentTimeframe = 'all';
+      }
+      loadMapData();
+    });
+  });
+
+  // ── Boot ───────────────────────────────────────────────────────────────────
+  initMap();
+  loadMapData();
+})();
+</script>
+</body>
+</html>

requirements.txt

@@ -1,8 +1,7 @@
-gradio==4.44.0
-gradio_client==1.3.0
-huggingface_hub==0.23.4
-starlette<0.28.0
+gradio>=6.0.0
+huggingface_hub>=0.23.4
 pillow>=10.0.0
 sentence-transformers>=2.7.0
 numpy>=1.26.0
 openai>=1.0.0
+httpx[socks]