Atualizando app.py com chaves do Supabase e Roboflow

app.py

@@ -113,7 +113,88 @@ text_descriptions_longclip = {
 
 @app.route('/')
 def home():
-    return render_template('index.html')
+    supabase_url = os.environ.get('SUPABASE_URL')
+    supabase_key = os.environ.get('SUPABASE_ANON_KEY')
+    return render_template('index.html', supabase_url=supabase_url, supabase_key=supabase_key)
+
+def process_leaf_image(image_path, model_roboflow, long_model, long_preprocess, text_features, class_names, device):
+    # LÓGICA DE LIMPEZA DA PASTA
+    if os.path.exists(output_dir):
+        for filename in os.listdir(output_dir):
+            file_path = os.path.join(output_dir, filename)
+            try:
+                if os.path.isfile(file_path) or os.path.islink(file_path):
+                    os.unlink(file_path)
+                elif os.path.isdir(file_path):
+                    shutil.rmtree(file_path)
+            except Exception as e:
+                print(f'Falha ao deletar {file_path}. Motivo: {e}')
+    else:
+        os.makedirs(output_dir)
+
+    # 1. DETECÇÃO (ROBOFLOW)
+    image = Image.open(image_path)
+    predictions = model_roboflow.infer(image, confidence=0.65)[0]
+    detections = sv.Detections.from_inference(predictions)
+
+    img_width, img_height = image.size
+    padding_percentage = 0.20
+    min_dim_for_padding = 100
+
+    for i, xyxy in enumerate(detections.xyxy):
+        x_min_orig, y_min_orig, x_max_orig, y_max_orig = xyxy
+        bbox_width_orig = x_max_orig - x_min_orig
+        bbox_height_orig = y_max_orig - y_min_orig
+        final_x_min, final_y_min, final_x_max, final_y_max = x_min_orig, y_min_orig, x_max_orig, y_max_orig
+
+        if bbox_width_orig < min_dim_for_padding or bbox_height_orig < min_dim_for_padding:
+            pad_x = bbox_width_orig * padding_percentage
+            pad_y = bbox_height_orig * padding_percentage
+            final_x_min = max(0, x_min_orig - pad_x)
+            final_y_min = max(0, y_min_orig - pad_y)
+            final_x_max = min(img_width, x_max_orig + pad_x)
+            final_y_max = min(img_height, y_max_orig + pad_y)
+
+        final_x_min, final_y_min, final_x_max, final_y_max = int(final_x_min), int(final_y_min), int(final_x_max), int(final_y_max)
+        cropped_image = image.crop((final_x_min, final_y_min, final_x_max, final_y_max))
+        cropped_image.save(os.path.join(output_dir, f"recorte_{i}.jpg"))
+
+    # 2. CLASSIFICAÇÃO (LONGCLIP)
+    results_list = []
+    image_urls = []
+
+    for file_name in os.listdir(output_dir):
+        if file_name.startswith("recorte_") and file_name.endswith(".jpg"):
+            img_path = os.path.join(output_dir, file_name)
+            img_input = Image.open(img_path)
+            image_input = long_preprocess(img_input).unsqueeze(0).to(device)
+            
+            with torch.no_grad():
+                image_features = long_model.encode_image(image_input)
+                image_features /= image_features.norm(dim=-1, keepdim=True)
+                logits = (100.0 * image_features @ text_features.T)
+                probs = logits.softmax(dim=-1).cpu().numpy()[0]
+            
+            top_idx = np.argmax(probs)
+            predicted_class = class_names[top_idx]
+            top_prob = float(probs[top_idx])
+            
+            results_list.append(predicted_class)
+            image_urls.append({
+                "url": f"/static/outputs/{file_name}",
+                "classe": predicted_class,
+                "probabilidade": top_prob
+            })
+
+    contagem = Counter(results_list)
+    mais_frequente = contagem.most_common(1)[0][0] if results_list else "Nenhuma detecção encontrada"
+
+    return {
+        "contagem": dict(contagem),
+        "mais_frequente": mais_frequente,
+        "total": sum(contagem.values()),
+        "imagens": image_urls
+    }
 
 @app.route('/predict', methods=['POST'])
 def predict():
@@ -125,132 +206,76 @@ def predict():
         return jsonify({'error': 'Arquivo vazio selecionado'}), 400
         
     try:
-        # A imagem é recebida do site
         image_path = os.path.join(app.config['UPLOAD_FOLDER'], "temp_leaf.jpg")
         file.save(image_path)
 
-        # --- LÓGICA DE LIMPEZA DA PASTA ---
-        if os.path.exists(output_dir):
-            for filename in os.listdir(output_dir):
-                file_path = os.path.join(output_dir, filename)
-                try:
-                    if os.path.isfile(file_path) or os.path.islink(file_path):
-                        os.unlink(file_path)
-                    elif os.path.isdir(file_path):
-                        shutil.rmtree(file_path)
-                except Exception as e:
-                    print(f'Falha ao deletar {file_path}. Motivo: {e}')
-        else:
-            os.makedirs(output_dir)
-
-        # --- 1. DETECÇÃO (ROBOFLOW) ---
-        image = Image.open(image_path)
-
-        print("Iniciando detecção com Roboflow...")
         model_roboflow = get_model("bracol-validado-region-detect-oupfv/1")
-        predictions = model_roboflow.infer(image, confidence=0.65)[0]
-        detections = sv.Detections.from_inference(predictions)
-
-        # Salvar recortes com padding condicional
-        print(f"Salvando novos recortes com padding condicional em '{output_dir}'...")
-        
-        # Obter dimensões da imagem original
-        img_width, img_height = image.size
-        padding_percentage = 0.20  # 20% de padding
-        min_dim_for_padding = 100 # Dimensão mínima para aplicar padding
+        checkpoint_abs_path = os.path.join(long_clip_path, "checkpoints", "longclip-L.pt")
+        long_model, long_preprocess = load_longclip_model(checkpoint_abs_path, device)
+        text_features, class_names = get_text_features(long_model, text_descriptions_longclip, device)
 
-        for i, (xyxy, _, _, _, _, _) in enumerate(detections):
-            x_min_orig, y_min_orig, x_max_orig, y_max_orig = xyxy
+        result = process_leaf_image(
+            image_path, model_roboflow, long_model, long_preprocess, 
+            text_features, class_names, device
+        )
 
-            # Calcular largura e altura da caixa delimitadora original
-            bbox_width_orig = x_max_orig - x_min_orig
-            bbox_height_orig = y_max_orig - y_min_orig
+        return jsonify(result)
 
-            # Inicializar as coordenadas finais com as originais
-            final_x_min, final_y_min, final_x_max, final_y_max = x_min_orig, y_min_orig, x_max_orig, y_max_orig
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
 
-            # Verificar se o recorte é pequeno o suficiente para aplicar o padding
-            if bbox_width_orig < min_dim_for_padding or bbox_height_orig < min_dim_for_padding:
-                # Calcular o valor do padding
-                pad_x = bbox_width_orig * padding_percentage
-                pad_y = bbox_height_orig * padding_percentage
+@app.route('/predict_batch', methods=['POST'])
+def predict_batch():
+    if 'files' not in request.files:
+        return jsonify({'error': 'Nenhum arquivo enviado'}), 400
+    
+    files = request.files.getlist('files')
+    if not files or files[0].filename == '':
+        return jsonify({'error': 'Nenhum arquivo selecionado'}), 400
+        
+    try:
+        # Carregar modelos uma única vez para o lote inteiro
+        model_roboflow = get_model("bracol-validado-region-detect-oupfv/1")
+        checkpoint_abs_path = os.path.join(long_clip_path, "checkpoints", "longclip-L.pt")
+        long_model, long_preprocess = load_longclip_model(checkpoint_abs_path, device)
+        text_features, class_names = get_text_features(long_model, text_descriptions_longclip, device)
 
-                # Aplicar padding e garantir que as coordenadas não excedam os limites da imagem
-                final_x_min = max(0, x_min_orig - pad_x)
-                final_y_min = max(0, y_min_orig - pad_y)
-                final_x_max = min(img_width, x_max_orig + pad_x)
-                final_y_max = min(img_height, y_max_orig + pad_y)
+        batch_results = []
 
-            # Converter para inteiros, pois image.crop espera inteiros
-            final_x_min, final_y_min, final_x_max, final_y_max = int(final_x_min), int(final_y_min), int(final_x_max), int(final_y_max)
+        for idx, file in enumerate(files):
+            image_path = os.path.join(app.config['UPLOAD_FOLDER'], f"temp_leaf_batch_{idx}.jpg")
+            file.save(image_path)
 
-            cropped_image = image.crop((final_x_min, final_y_min, final_x_max, final_y_max))
+            result = process_leaf_image(
+                image_path, model_roboflow, long_model, long_preprocess, 
+                text_features, class_names, device
+            )
             
-            filename = f"recorte_{i}.jpg"
-            cropped_image.save(os.path.join(output_dir, filename))
+            batch_results.append({
+                "filename": file.filename,
+                "mais_frequente": result["mais_frequente"]
+            })
 
-        # --- 2. CLASSIFICAÇÃO (LONGCLIP) ---
-        checkpoint_abs_path = os.path.join(long_clip_path, "checkpoints", "longclip-L.pt")
-        long_model, long_preprocess = load_longclip_model(checkpoint_abs_path, device)
-        text_features, class_names = get_text_features(long_model, text_descriptions_longclip, device)
+        # Consolidar a contagem da doença principal de cada folha do lote
+        doencas_principais = [res["mais_frequente"] for res in batch_results if res["mais_frequente"] != "Nenhuma detecção encontrada"]
+        contagem_geral = Counter(doencas_principais)
+        
+        # Calcular porcentagens e garantir que todas as classes (doenças) apareçam no relatório
+        total_validas = len(doencas_principais)
+        estatisticas = {}
+        for doenca in class_names:
+            qtd = contagem_geral.get(doenca, 0)
+            pct = (qtd / total_validas * 100) if total_validas > 0 else 0
+            estatisticas[doenca] = {
+                "quantidade": qtd,
+                "porcentagem": round(pct, 1)
+            }
 
-        results_list = []
-        image_urls = []
-
-        print("\nIniciando classificação dos recortes com LongCLIP...")
-        for file_name in os.listdir(output_dir):
-            if file_name.startswith("recorte_") and file_name.endswith(".jpg"):
-                img_path = os.path.join(output_dir, file_name)
-                img_input = Image.open(img_path)
-                
-                image_input = long_preprocess(img_input).unsqueeze(0).to(device)
-                
-                with torch.no_grad():
-                    image_features = long_model.encode_image(image_input)
-                    image_features /= image_features.norm(dim=-1, keepdim=True)
-                    
-                    # Cálculo de similaridade de cosseno (LongCLIP)
-                    logits = (100.0 * image_features @ text_features.T)
-                    probs = logits.softmax(dim=-1).cpu().numpy()[0]
-                
-                top_idx = np.argmax(probs)
-                predicted_class = class_names[top_idx]
-                top_prob = float(probs[top_idx])
-                
-                results_list.append(predicted_class)
-                
-                image_urls.append({
-                    "url": f"/static/outputs/{file_name}",
-                    "classe": predicted_class,
-                    "probabilidade": top_prob
-                })
-                print(f"Arquivo {file_name}: {predicted_class} ({probs[top_idx]*100:.2f}%)")
-
-        # --- 3. RELATÓRIO FINAL ---
-        print("\n" + "="*30)
-        print("RELATÓRIO DE SAÚDE DO CAFEEIRO")
-        print("="*30)
-        contagem = Counter(results_list)
-
-        for doenca, qtd in contagem.items():
-            print(f"{doenca}: {qtd} ocorrência(s)")
-
-        if not results_list:
-            print("Nenhuma detecção encontrada para análise.")
-            return jsonify({
-                "contagem": {},
-                "mais_frequente": "Nenhuma detecção encontrada",
-                "total": 0,
-                "imagens": []
-            })
-            
-        mais_frequente = contagem.most_common(1)[0][0]
-            
         return jsonify({
-            "contagem": dict(contagem),
-            "mais_frequente": mais_frequente,
-            "total": sum(contagem.values()),
-            "imagens": image_urls
+            "estatisticas": estatisticas,
+            "detalhes": batch_results,
+            "total_folhas": len(files),
+            "folhas_com_deteccao": total_validas
         })
 
     except Exception as e:

requirements.txt

@@ -10,3 +10,4 @@ gunicorn
 ftfy
 regex
 tqdm
+supabase

static/script.js

@@ -16,6 +16,92 @@ document.addEventListener('DOMContentLoaded', () => {
     let selectedFile = null;
     let chartInstance = null;
 
+    // Tabs
+    const tabIndividual = document.getElementById('tab-individual');
+    const tabBatch = document.getElementById('tab-batch');
+    const wrapperIndividual = document.getElementById('wrapper-individual');
+    const wrapperBatch = document.getElementById('wrapper-batch');
+    const tabAppCafe = document.getElementById('tab-appcafe');
+    const wrapperAppCafe = document.getElementById('wrapper-appcafe');
+
+    // Supabase Auth Elements
+    const appcafeLoginForm = document.getElementById('appcafe-login-form');
+    const appcafeEmailInput = document.getElementById('appcafe-email');
+    const appcafePasswordInput = document.getElementById('appcafe-password');
+    const appcafeLoginBtn = document.getElementById('appcafe-login-btn');
+    const appcafeBtnText = appcafeLoginBtn?.querySelector('.btn-text');
+    const appcafeLoader = document.getElementById('appcafe-loader');
+    const appcafeError = document.getElementById('appcafe-error');
+    const appcafeLoginContainer = document.getElementById('appcafe-login-container');
+    const appcafeLoggedIn = document.getElementById('appcafe-logged-in');
+    const appcafeLogoutBtn = document.getElementById('appcafe-logout-btn');
+    const appcafePromo = document.querySelector('.appcafe-promo');
+
+    // Dashboard Buttons
+    const btnOlharFotos = document.getElementById('btn-olhar-fotos');
+    const btnMapaCalor = document.getElementById('btn-mapa-calor');
+    const btnDashboardIndividual = document.getElementById('btn-dashboard-individual');
+    const btnDashboardLote = document.getElementById('btn-dashboard-lote');
+
+    // Gallery Modal
+    const galleryModal = document.getElementById('gallery-modal');
+    const closeGalleryBtn = document.getElementById('close-gallery-btn');
+    const galleryContainer = document.getElementById('gallery-container');
+    const galleryLoader = document.getElementById('gallery-loader');
+    
+    // Gallery Filters
+    const filterDesc = document.getElementById('filter-desc');
+    const filterDateStart = document.getElementById('filter-date-start');
+    const filterDateEnd = document.getElementById('filter-date-end');
+    const clearFiltersBtn = document.getElementById('clear-filters-btn');
+    const galleryFilters = document.getElementById('gallery-filters');
+    let currentGalleryPictures = [];
+    let selectedGalleryPictures = new Map();
+
+    // Gallery Actions
+    const galleryActionBar = document.getElementById('gallery-action-bar');
+    const selectedCountText = document.getElementById('selected-count');
+    const btnCancelSelection = document.getElementById('btn-cancel-selection');
+    const btnAnalyzeSelected = document.getElementById('btn-analyze-selected');
+    const btnDeleteSelected = document.getElementById('btn-delete-selected');
+    const btnSelectAll = document.getElementById('select-all-btn');
+    const analyzeActionText = document.getElementById('analyze-action-text');
+    const analyzeActionLoader = document.getElementById('analyze-action-loader');
+    const analyzeActionHint = document.getElementById('analyze-action-hint');
+    
+    // Heatmap
+    let isHeatmapMode = false;
+    let diseaseDictionary = {}; // id_disease -> name
+    const heatmapModal = document.getElementById('heatmap-modal');
+    const closeHeatmapBtn = document.getElementById('close-heatmap-btn');
+    const heatmapDiseaseFilter = document.getElementById('heatmap-disease-filter');
+    const heatmapStyleFilter = document.getElementById('heatmap-style-filter');
+    let leafletMapInstance = null;
+    let currentHeatLayer = null;
+
+    let supabaseClient = null;
+    if (window.supabase && window.SUPABASE_URL && window.SUPABASE_ANON_KEY) {
+        supabaseClient = window.supabase.createClient(window.SUPABASE_URL, window.SUPABASE_ANON_KEY);
+    }
+
+    // Batch UI Elements
+    const batchUploadArea = document.getElementById('batch-upload-area');
+    const batchFileInput = document.getElementById('batch-file-input');
+    const batchImagePreview = document.getElementById('batch-image-preview');
+    const batchUploadContent = document.getElementById('batch-upload-content');
+    const batchAnalyzeBtn = document.getElementById('batch-analyze-btn');
+    const batchBtnText = document.getElementById('batch-btn-text');
+    const batchLoader = document.getElementById('batch-loader');
+
+    const batchResultsPlaceholder = document.getElementById('batch-results-placeholder');
+    const batchResultsContent = document.getElementById('batch-results-content');
+    const batchTotalLeaves = document.getElementById('batch-total-leaves');
+    const batchMainDisease = document.getElementById('batch-main-disease');
+    const batchChartCanvas = document.getElementById('batchResultsChart');
+
+    let selectedBatchFiles = [];
+    let batchChartInstance = null;
+
     // Theming Colors for the Chart
     const chartColors = [
         '#2f855a', // Green
@@ -121,7 +207,48 @@ document.addEventListener('DOMContentLoaded', () => {
         // Update Text
         mainDisease.textContent = data.mais_frequente;
         
-
+        // --- Save Result Logic ---
+        const saveContainer = document.getElementById('save-result-container-individual');
+        const saveBtn = document.getElementById('btn-save-result-individual');
+        const saveMsg = document.getElementById('save-result-msg-individual');
+        
+        if (selectedFile && selectedFile.supabasePictureId && data.mais_frequente !== "Nenhuma detecção encontrada" && supabaseClient) {
+            saveContainer.classList.remove('hidden');
+            saveBtn.style.display = 'inline-flex';
+            saveMsg.style.display = 'none';
+            
+            const newSaveBtn = saveBtn.cloneNode(true);
+            saveBtn.parentNode.replaceChild(newSaveBtn, saveBtn);
+            
+            newSaveBtn.addEventListener('click', async () => {
+                newSaveBtn.disabled = true;
+                newSaveBtn.innerHTML = '<i class="ph-duotone ph-spinner" style="animation: spin 1s linear infinite;"></i> Salvando...';
+                
+                try {
+                    const diseaseName = data.mais_frequente;
+                    // Find disease ID
+                    const { data: diseaseData, error: dError } = await supabaseClient.from('diseases').select('id').eq('name', diseaseName).single();
+                    if (dError || !diseaseData) throw new Error("Doença não encontrada no banco de dados.");
+                    
+                    // Update picture
+                    const { error: pError } = await supabaseClient.from('pictures').update({ id_disease: diseaseData.id }).eq('id', selectedFile.supabasePictureId);
+                    if (pError) throw new Error("Erro ao atualizar a foto.");
+                    
+                    newSaveBtn.style.display = 'none';
+                    saveMsg.innerHTML = '<i class="ph-fill ph-check-circle"></i> Resultado salvo com sucesso no banco de dados!';
+                    saveMsg.style.color = "#2f855a";
+                    saveMsg.style.display = 'block';
+                } catch (e) {
+                    newSaveBtn.disabled = false;
+                    newSaveBtn.innerHTML = '<i class="ph-bold ph-floppy-disk"></i> Tentar Novamente';
+                    saveMsg.textContent = e.message;
+                    saveMsg.style.color = "#e53e3e";
+                    saveMsg.style.display = 'block';
+                }
+            });
+        } else {
+            if (saveContainer) saveContainer.classList.add('hidden');
+        }
 
         // Render Chart
         renderChart(data.contagem);
@@ -204,4 +331,910 @@ document.addEventListener('DOMContentLoaded', () => {
             }
         });
     }
+
+    // --- BATCH LOGIC ---
+
+    // Tab Switching
+    tabIndividual.addEventListener('click', () => {
+        tabIndividual.classList.add('active');
+        tabBatch.classList.remove('active');
+        if (tabAppCafe) tabAppCafe.classList.remove('active');
+        
+        wrapperIndividual.classList.remove('hidden');
+        wrapperBatch.classList.add('hidden');
+        if (wrapperAppCafe) wrapperAppCafe.classList.add('hidden');
+    });
+
+    tabBatch.addEventListener('click', () => {
+        tabBatch.classList.add('active');
+        tabIndividual.classList.remove('active');
+        if (tabAppCafe) tabAppCafe.classList.remove('active');
+        
+        wrapperBatch.classList.remove('hidden');
+        wrapperIndividual.classList.add('hidden');
+        if (wrapperAppCafe) wrapperAppCafe.classList.add('hidden');
+    });
+
+    if (tabAppCafe) {
+        tabAppCafe.addEventListener('click', () => {
+            tabAppCafe.classList.add('active');
+            tabIndividual.classList.remove('active');
+            tabBatch.classList.remove('active');
+            
+            wrapperAppCafe.classList.remove('hidden');
+            wrapperIndividual.classList.add('hidden');
+            wrapperBatch.classList.add('hidden');
+            
+            checkSession();
+        });
+    }
+
+    // Drag and Drop for Batch
+    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+        batchUploadArea.addEventListener(eventName, preventDefaults, false);
+    });
+
+    ['dragenter', 'dragover'].forEach(eventName => {
+        batchUploadArea.addEventListener(eventName, () => batchUploadArea.classList.add('dragover'), false);
+    });
+
+    ['dragleave', 'drop'].forEach(eventName => {
+        batchUploadArea.addEventListener(eventName, () => batchUploadArea.classList.remove('dragover'), false);
+    });
+
+    batchUploadArea.addEventListener('drop', handleBatchDrop, false);
+    batchUploadArea.addEventListener('click', () => batchFileInput.click());
+    batchFileInput.addEventListener('change', handleBatchFileSelect);
+
+    function handleBatchDrop(e) {
+        const dt = e.dataTransfer;
+        handleBatchFiles(dt.files);
+    }
+
+    function handleBatchFileSelect(e) {
+        handleBatchFiles(e.target.files);
+    }
+
+    function handleBatchFiles(files) {
+        const validFiles = Array.from(files).filter(file => file.type.startsWith('image/'));
+        
+        if (validFiles.length > 0) {
+            selectedBatchFiles = validFiles;
+            
+            batchImagePreview.innerHTML = '';
+            validFiles.forEach(file => {
+                const reader = new FileReader();
+                reader.onload = (e) => {
+                    const img = document.createElement('img');
+                    img.src = e.target.result;
+                    batchImagePreview.appendChild(img);
+                };
+                reader.readAsDataURL(file);
+            });
+
+            batchImagePreview.classList.remove('hidden');
+            batchUploadContent.classList.add('hidden');
+            batchAnalyzeBtn.disabled = false;
+        } else {
+            alert('Por favor, selecione arquivos de imagem válidos.');
+        }
+    }
+
+    batchAnalyzeBtn.addEventListener('click', async () => {
+        if (selectedBatchFiles.length === 0) return;
+
+        // UI Loading State
+        batchAnalyzeBtn.disabled = true;
+        batchBtnText.innerHTML = '<i class="ph-bold ph-scan"></i> Analisando Lote...';
+        batchLoader.classList.remove('hidden');
+        batchResultsPlaceholder.querySelector('p').textContent = `Processando ${selectedBatchFiles.length} imagens (isso vai levar um tempo)...`;
+        batchResultsContent.classList.add('hidden');
+        batchResultsPlaceholder.classList.remove('hidden');
+
+        const formData = new FormData();
+        selectedBatchFiles.forEach(file => {
+            formData.append('files', file);
+        });
+
+        try {
+            const response = await fetch('/predict_batch', {
+                method: 'POST',
+                body: formData
+            });
+
+            if (!response.ok) {
+                const errData = await response.json();
+                throw new Error(errData.error || 'Erro na análise em lote.');
+            }
+
+            const data = await response.json();
+            updateBatchResults(data);
+        } catch (error) {
+            alert(error.message);
+            batchResultsPlaceholder.querySelector('p').textContent = 'Falha na análise em lote. Tente novamente.';
+        } finally {
+            batchAnalyzeBtn.disabled = false;
+            batchBtnText.innerHTML = '<i class="ph-bold ph-scan"></i> Analisar Lote';
+            batchLoader.classList.add('hidden');
+        }
+    });
+
+    function updateBatchResults(data) {
+        batchResultsPlaceholder.classList.add('hidden');
+        batchResultsContent.classList.remove('hidden');
+
+        // --- Save Result Logic para Lote ---
+        const saveContainer = document.getElementById('save-result-container-batch');
+        const saveBtn = document.getElementById('btn-save-result-batch');
+        const saveMsg = document.getElementById('save-result-msg-batch');
+
+        const hasSupabaseFiles = selectedBatchFiles && selectedBatchFiles.some(f => f.supabasePictureId);
+        
+        if (hasSupabaseFiles && data.detalhes && data.detalhes.length > 0 && supabaseClient) {
+            saveContainer.classList.remove('hidden');
+            saveBtn.style.display = 'inline-flex';
+            saveMsg.style.display = 'none';
+            
+            const newSaveBtn = saveBtn.cloneNode(true);
+            saveBtn.parentNode.replaceChild(newSaveBtn, saveBtn);
+            
+            newSaveBtn.addEventListener('click', async () => {
+                newSaveBtn.disabled = true;
+                newSaveBtn.innerHTML = '<i class="ph-duotone ph-spinner" style="animation: spin 1s linear infinite;"></i> Salvando...';
+                
+                try {
+                    const { data: allDiseases, error: dError } = await supabaseClient.from('diseases').select('id, name');
+                    if (dError) throw new Error("Erro ao buscar doenças.");
+                    
+                    const diseaseMap = {};
+                    allDiseases.forEach(d => { diseaseMap[d.name] = d.id; });
+                    
+                    let savedCount = 0;
+                    for (const result of data.detalhes) {
+                        if (result.mais_frequente === "Nenhuma detecção encontrada") continue;
+                        
+                        const diseaseId = diseaseMap[result.mais_frequente];
+                        if (!diseaseId) continue;
+                        
+                        const matchingFile = selectedBatchFiles.find(f => f.name === result.filename);
+                        if (matchingFile && matchingFile.supabasePictureId) {
+                            await supabaseClient.from('pictures').update({ id_disease: diseaseId }).eq('id', matchingFile.supabasePictureId);
+                            savedCount++;
+                        }
+                    }
+                    
+                    newSaveBtn.style.display = 'none';
+                    saveMsg.innerHTML = `<i class="ph-fill ph-check-circle"></i> ${savedCount} resultado(s) salvo(s) com sucesso!`;
+                    saveMsg.style.color = "#2f855a";
+                    saveMsg.style.display = 'block';
+                } catch (e) {
+                    newSaveBtn.disabled = false;
+                    newSaveBtn.innerHTML = '<i class="ph-bold ph-floppy-disk-back"></i> Tentar Novamente';
+                    saveMsg.textContent = e.message;
+                    saveMsg.style.color = "#e53e3e";
+                    saveMsg.style.display = 'block';
+                }
+            });
+        } else {
+            if (saveContainer) saveContainer.classList.add('hidden');
+        }
+
+        batchTotalLeaves.textContent = data.total_folhas;
+        
+        if (data.folhas_com_deteccao > 0) {
+            let mainDisease = "Nenhuma detectada";
+            let maxQtd = -1;
+            let maxPct = 0;
+            
+            for (const [doenca, stats] of Object.entries(data.estatisticas)) {
+                if (stats.quantidade > maxQtd) {
+                    maxQtd = stats.quantidade;
+                    maxPct = stats.porcentagem;
+                    mainDisease = doenca;
+                }
+            }
+            batchMainDisease.textContent = `${mainDisease} (${maxPct}%)`;
+        } else {
+            batchMainDisease.textContent = "Nenhuma detectada";
+        }
+
+        renderBatchChart(data.estatisticas);
+    }
+
+    function renderBatchChart(estatisticas) {
+        const labels = [];
+        const dataValues = [];
+
+        // Adiciona a porcentagem direto no label (Ex: Ferrugem (60.0%)) e usa o valor para plotar
+        for (const [doenca, stats] of Object.entries(estatisticas)) {
+            labels.push(`${doenca} (${stats.porcentagem}%)`);
+            dataValues.push(stats.porcentagem);
+        }
+
+        if (batchChartInstance) {
+            batchChartInstance.destroy();
+        }
+
+        batchChartInstance = new Chart(batchChartCanvas, {
+            type: 'doughnut',
+            data: {
+                labels: labels,
+                datasets: [{
+                    data: dataValues,
+                    backgroundColor: chartColors,
+                    borderWidth: 0,
+                    hoverOffset: 4
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: {
+                        position: 'right',
+                        labels: {
+                            color: '#4a5568',
+                            font: { family: "'Outfit', sans-serif", size: 10 },
+                            padding: 10,
+                            boxWidth: 12
+                        }
+                    },
+                    tooltip: {
+                        callbacks: {
+                            label: function(context) {
+                                let label = context.label || '';
+                                return ' ' + label;
+                            }
+                        },
+                        backgroundColor: 'rgba(255, 255, 255, 0.95)',
+                        titleColor: '#2d3748',
+                        bodyColor: '#2d3748',
+                        borderColor: 'rgba(47, 133, 90, 0.2)',
+                        borderWidth: 1,
+                        padding: 10,
+                        titleFont: { family: "'Outfit', sans-serif", size: 12, weight: 'bold' },
+                        bodyFont: { family: "'Outfit', sans-serif", size: 12 }
+                    }
+                },
+                cutout: '70%'
+            }
+        });
+    }
+
+    // --- SUPABASE AUTH LOGIC ---
+    async function checkSession() {
+        if (!supabaseClient) return;
+        const { data, error } = await supabaseClient.auth.getSession();
+        if (data && data.session) {
+            showLoggedInState(data.session.user);
+        } else {
+            showLoginState();
+        }
+    }
+
+    function showLoggedInState(user) {
+        if (appcafeLoginContainer) appcafeLoginContainer.classList.add('hidden');
+        if (appcafePromo) appcafePromo.classList.add('hidden');
+        if (appcafeLoggedIn) appcafeLoggedIn.classList.remove('hidden');
+        
+        const welcomeText = document.getElementById('welcome-user-text');
+        if (welcomeText && user) {
+            const name = user.user_metadata?.display_name || user.email.split('@')[0];
+            welcomeText.textContent = `Bem-vindo(a), ${name}`;
+        }
+    }
+
+    function showLoginState() {
+        if (appcafeLoginContainer) appcafeLoginContainer.classList.remove('hidden');
+        if (appcafePromo) appcafePromo.classList.remove('hidden');
+        if (appcafeLoggedIn) appcafeLoggedIn.classList.add('hidden');
+        if (appcafeError) appcafeError.style.display = 'none';
+        if (appcafeEmailInput) appcafeEmailInput.value = '';
+        if (appcafePasswordInput) appcafePasswordInput.value = '';
+    }
+
+    if (appcafeLoginForm) {
+        appcafeLoginForm.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            if (!supabaseClient) return;
+
+            const email = appcafeEmailInput.value;
+            const password = appcafePasswordInput.value;
+
+            // UI Loading State
+            appcafeLoginBtn.disabled = true;
+            if (appcafeBtnText) appcafeBtnText.textContent = 'Entrando...';
+            if (appcafeLoader) appcafeLoader.classList.remove('hidden');
+            if (appcafeError) appcafeError.style.display = 'none';
+
+            const { data, error } = await supabaseClient.auth.signInWithPassword({
+                email: email,
+                password: password,
+            });
+
+            appcafeLoginBtn.disabled = false;
+            if (appcafeBtnText) appcafeBtnText.textContent = 'Entrar';
+            if (appcafeLoader) appcafeLoader.classList.add('hidden');
+
+            if (error) {
+                if (appcafeError) {
+                    appcafeError.textContent = error.message === 'Invalid login credentials' ? 'E-mail ou senha incorretos.' : error.message;
+                    appcafeError.style.display = 'block';
+                }
+            } else {
+                showLoggedInState();
+            }
+        });
+    }
+
+    const appcafeForgotPassword = document.getElementById('appcafe-forgot-password');
+    if (appcafeForgotPassword) {
+        appcafeForgotPassword.addEventListener('click', async (e) => {
+            e.preventDefault();
+            if (!supabaseClient) return;
+            const email = appcafeEmailInput.value;
+            if (!email) {
+                alert('Por favor, preencha o campo de e-mail para recuperar a senha.');
+                return;
+            }
+            
+            try {
+                appcafeLoginBtn.disabled = true;
+                if (appcafeBtnText) appcafeBtnText.textContent = 'Enviando...';
+                const { error } = await supabaseClient.auth.resetPasswordForEmail(email);
+                if (error) throw error;
+                alert('E-mail de recuperação enviado! Verifique sua caixa de entrada.');
+            } catch (err) {
+                alert('Erro ao enviar e-mail: ' + err.message);
+            } finally {
+                appcafeLoginBtn.disabled = false;
+                if (appcafeBtnText) appcafeBtnText.textContent = 'Entrar';
+            }
+        });
+    }
+
+    if (appcafeLogoutBtn) {
+        appcafeLogoutBtn.addEventListener('click', async () => {
+            if (!supabaseClient) return;
+            await supabaseClient.auth.signOut();
+            showLoginState();
+        });
+    }
+
+    // Inicializa verificando a sessão caso inicie na tab (embora comece escondida)
+    checkSession();
+
+    // --- FILTER LOGIC ---
+    function renderGalleryCards(picturesList) {
+        galleryContainer.innerHTML = '';
+        if (picturesList && picturesList.length > 0) {
+            picturesList.forEach(pic => {
+                const isSelected = selectedGalleryPictures.has(pic.picture);
+                const card = document.createElement('div');
+                card.style = `background: #1e293b; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.5); display: flex; flex-direction: column; border: 2px solid ${isSelected ? 'var(--accent-primary)' : 'rgba(255,255,255,0.1)'}; transition: all 0.2s; cursor: pointer; position: relative; transform: ${isSelected ? 'scale(0.98)' : 'scale(1)'};`;
+                
+                // Overlay for selection checkmark
+                const checkOverlay = document.createElement('div');
+                checkOverlay.style = `position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; background: ${isSelected ? 'var(--accent-primary)' : 'rgba(0,0,0,0.5)'}; border: 2px solid white; display: flex; align-items: center; justify-content: center; z-index: 5; transition: background 0.2s;`;
+                checkOverlay.innerHTML = `<i class="ph-bold ph-check" style="color: white; font-size: 1.2rem; display: ${isSelected ? 'block' : 'none'};"></i>`;
+                
+                card.onmouseover = () => { if (!selectedGalleryPictures.has(pic.picture)) card.style.transform = "translateY(-5px)"; };
+                card.onmouseout = () => { if (!selectedGalleryPictures.has(pic.picture)) card.style.transform = "translateY(0)"; };
+                
+                card.addEventListener('click', () => {
+                    if (selectedGalleryPictures.has(pic.picture)) {
+                        selectedGalleryPictures.delete(pic.picture);
+                        card.style.border = "2px solid rgba(255,255,255,0.1)";
+                        card.style.transform = "translateY(0)";
+                        checkOverlay.style.background = "rgba(0,0,0,0.5)";
+                        checkOverlay.querySelector('i').style.display = "none";
+                    } else {
+                        selectedGalleryPictures.set(pic.picture, pic.id);
+                        card.style.border = "2px solid var(--accent-primary)";
+                        card.style.transform = "scale(0.98)";
+                        checkOverlay.style.background = "var(--accent-primary)";
+                        checkOverlay.querySelector('i').style.display = "block";
+                    }
+                    updateGalleryActionBar();
+                });
+                
+                const imgContainer = document.createElement('div');
+                imgContainer.style = "width: 100%; height: 220px; background: #0f172a; overflow: hidden; position: relative;";
+                
+                const img = document.createElement('img');
+                img.src = pic.picture;
+                img.alt = "Foto do Café";
+                img.style = "width: 100%; height: 100%; object-fit: cover;";
+                
+                const info = document.createElement('div');
+                info.style = "padding: 20px; display: flex; flex-direction: column; flex-grow: 1; justify-content: space-between;";
+                
+                const dateText = document.createElement('p');
+                const dataFormatada = new Date(pic.data).toLocaleDateString('pt-BR', { day: '2-digit', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit' });
+                dateText.innerHTML = `<i class="ph-bold ph-calendar-blank"></i> ${dataFormatada}`;
+                dateText.style = "margin: 0 0 8px 0; font-size: 0.85rem; color: #94a3b8; display: flex; align-items: center; gap: 6px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;";
+                
+                const descText = document.createElement('p');
+                descText.innerHTML = pic.description ? `"${pic.description}"` : '<em>Sem descrição fornecida.</em>';
+                descText.style = "margin: 0 0 10px 0; font-size: 1rem; color: #f8fafc; font-style: italic; line-height: 1.5;";
+                
+                let diseaseHtml = '';
+                if (pic.id_disease && diseaseDictionary[pic.id_disease]) {
+                    diseaseHtml = `<span style="background: rgba(47, 133, 90, 0.2); color: #48bb78; padding: 4px 8px; border-radius: 4px; font-size: 0.8rem; font-weight: bold; border: 1px solid rgba(47, 133, 90, 0.5); display: inline-block;"><i class="ph-bold ph-virus"></i> ${diseaseDictionary[pic.id_disease]}</span>`;
+                }
+
+                imgContainer.appendChild(img);
+                card.appendChild(checkOverlay);
+                info.appendChild(dateText);
+                info.appendChild(descText);
+                if (diseaseHtml) {
+                    const dWrap = document.createElement('div');
+                    dWrap.innerHTML = diseaseHtml;
+                    info.appendChild(dWrap);
+                }
+                card.appendChild(imgContainer);
+                card.appendChild(info);
+                
+                galleryContainer.appendChild(card);
+            });
+        } else {
+            galleryContainer.innerHTML = '<div style="grid-column: 1 / -1; text-align: center; padding: 60px 20px; background: rgba(255,255,255,0.05); border-radius: 12px; border: 1px dashed rgba(255,255,255,0.2);"><i class="ph-duotone ph-image-broken" style="font-size: 4rem; color: #64748b; margin-bottom: 15px;"></i><p style="color: #cbd5e1; font-size: 1.2rem; margin: 0;">Nenhuma foto encontrada.</p></div>';
+        }
+    }
+
+    function updateGalleryActionBar() {
+        const count = selectedGalleryPictures.size;
+        selectedCountText.textContent = count;
+        
+        if (count > 0) {
+            galleryActionBar.classList.remove('hidden');
+            btnAnalyzeSelected.disabled = false;
+            
+            if (isHeatmapMode) {
+                analyzeActionText.innerHTML = '<i class="ph-bold ph-map-trifold"></i> Gerar Mapa de Calor';
+                analyzeActionHint.textContent = `As ${count} imagens serão usadas no mapa.`;
+                if (btnDeleteSelected) btnDeleteSelected.style.display = 'none';
+            } else {
+                if (btnDeleteSelected) btnDeleteSelected.style.display = 'flex';
+                if (count === 1) {
+                    analyzeActionText.innerHTML = '<i class="ph-bold ph-image"></i> Análise Individual';
+                    analyzeActionHint.textContent = 'A imagem será enviada para a Análise Individual.';
+                } else {
+                    analyzeActionText.innerHTML = '<i class="ph-bold ph-images"></i> Análise em Lote';
+                    analyzeActionHint.textContent = `As ${count} imagens serão enviadas para Análise em Lote.`;
+                }
+            }
+        } else {
+            galleryActionBar.classList.add('hidden');
+            btnAnalyzeSelected.disabled = true;
+        }
+    }
+
+    // --- HEATMAP LOGIC ---
+    const baseMaps = {
+        dark: L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
+            attribution: '&copy; OpenStreetMap contributors &copy; CARTO',
+            subdomains: 'abcd',
+            maxZoom: 20
+        }),
+        osm: L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            maxZoom: 19,
+            attribution: '&copy; OpenStreetMap'
+        })
+    };
+
+    function openHeatmapModal() {
+        galleryModal.classList.add('hidden');
+        galleryModal.style.display = 'none';
+        
+        heatmapModal.classList.remove('hidden');
+        heatmapModal.style.display = 'flex';
+        
+        // Obter as imagens selecionadas
+        const selectedIds = Array.from(selectedGalleryPictures.values());
+        const selectedPics = currentGalleryPictures.filter(p => selectedIds.includes(p.id));
+        
+        if (!leafletMapInstance) {
+            leafletMapInstance = L.map('leaflet-map').setView([-14.235, -51.925], 4);
+            baseMaps.dark.addTo(leafletMapInstance);
+            
+            heatmapStyleFilter.addEventListener('change', (e) => {
+                if (e.target.value === 'dark') {
+                    leafletMapInstance.removeLayer(baseMaps.osm);
+                    baseMaps.dark.addTo(leafletMapInstance);
+                } else {
+                    leafletMapInstance.removeLayer(baseMaps.dark);
+                    baseMaps.osm.addTo(leafletMapInstance);
+                }
+            });
+            
+            heatmapDiseaseFilter.addEventListener('change', () => {
+                updateHeatmapLayer(selectedPics);
+            });
+            
+            // Adicionar Legenda
+            const legend = L.control({position: 'bottomright'});
+            legend.onAdd = function (map) {
+                const div = L.DomUtil.create('div', 'info legend');
+                div.style.backgroundColor = 'rgba(255, 255, 255, 0.9)';
+                div.style.padding = '10px';
+                div.style.borderRadius = '8px';
+                div.style.boxShadow = '0 0 15px rgba(0,0,0,0.2)';
+                div.style.color = '#333';
+                div.style.fontFamily = 'inherit';
+                div.innerHTML += '<strong style="display:block; margin-bottom: 5px;">Densidade de Focos</strong>';
+                div.innerHTML += '<i style="background: blue; width: 12px; height: 12px; display: inline-block; margin-right: 5px;"></i> Baixa<br>';
+                div.innerHTML += '<i style="background: lime; width: 12px; height: 12px; display: inline-block; margin-right: 5px;"></i> Média<br>';
+                div.innerHTML += '<i style="background: red; width: 12px; height: 12px; display: inline-block; margin-right: 5px;"></i> Alta<br>';
+                return div;
+            };
+            legend.addTo(leafletMapInstance);
+        }
+        
+        setTimeout(() => {
+            leafletMapInstance.invalidateSize();
+            updateHeatmapLayer(selectedPics);
+            
+            if (selectedPics.length > 0) {
+                const lats = selectedPics.map(p => p.lat).filter(Boolean);
+                const lngs = selectedPics.map(p => p.long).filter(Boolean);
+                if (lats.length > 0 && lngs.length > 0) {
+                    const bounds = [
+                        [Math.min(...lats), Math.min(...lngs)],
+                        [Math.max(...lats), Math.max(...lngs)]
+                    ];
+                    leafletMapInstance.fitBounds(bounds, { padding: [50, 50] });
+                }
+            }
+        }, 300);
+    }
+    
+    function updateHeatmapLayer(pics) {
+        if (currentHeatLayer) {
+            leafletMapInstance.removeLayer(currentHeatLayer);
+        }
+        
+        const filterVal = heatmapDiseaseFilter.value;
+        const heatData = [];
+        
+        pics.forEach(pic => {
+            if (pic.lat && pic.long) {
+                if (filterVal === 'all' || String(pic.id_disease) === filterVal) {
+                    heatData.push([pic.lat, pic.long, 1]);
+                }
+            }
+        });
+        
+        currentHeatLayer = L.heatLayer(heatData, {
+            radius: 25,
+            blur: 15,
+            maxZoom: 10,
+            gradient: {0.4: 'blue', 0.6: 'cyan', 0.7: 'lime', 0.8: 'yellow', 1.0: 'red'}
+        }).addTo(leafletMapInstance);
+    }
+
+    if (closeHeatmapBtn) {
+        closeHeatmapBtn.addEventListener('click', () => {
+            heatmapModal.classList.add('hidden');
+            heatmapModal.style.display = 'none';
+        });
+    }
+
+    async function urlToFile(url, filename, mimeType) {
+        const res = await fetch(url);
+        const buf = await res.arrayBuffer();
+        return new File([buf], filename, {type: mimeType});
+    }
+
+    if (btnSelectAll) {
+        btnSelectAll.addEventListener('click', () => {
+            // Select only what is currently rendered/filtered
+            const cards = galleryContainer.querySelectorAll('div > img'); // Hack to know there are cards
+            if (cards.length > 0) {
+                // Actually we just use currentGalleryPictures, but let's respect filters if we want.
+                // Re-run filter logic to get currently visible:
+                const descVal = filterDesc ? filterDesc.value.toLowerCase() : '';
+                const startVal = filterDateStart ? filterDateStart.value : ''; 
+                const endVal = filterDateEnd ? filterDateEnd.value : '';
+
+                const filtered = currentGalleryPictures.filter(pic => {
+                    const picDesc = (pic.description || '').toLowerCase();
+                    if (descVal && !picDesc.includes(descVal)) return false;
+
+                    if (startVal || endVal) {
+                        const picDateObj = new Date(pic.data);
+                        const year = picDateObj.getFullYear();
+                        const month = String(picDateObj.getMonth() + 1).padStart(2, '0');
+                        const day = String(picDateObj.getDate()).padStart(2, '0');
+                        const picDateStr = `${year}-${month}-${day}`;
+                        if (startVal && picDateStr < startVal) return false;
+                        if (endVal && picDateStr > endVal) return false;
+                    }
+                    return true;
+                });
+
+                filtered.forEach(pic => selectedGalleryPictures.set(pic.picture, pic.id));
+                applyGalleryFilters(); // Re-render to show selection styling
+                updateGalleryActionBar();
+            }
+        });
+    }
+
+    if (btnDeleteSelected) {
+        btnDeleteSelected.addEventListener('click', async () => {
+            if (selectedGalleryPictures.size === 0) return;
+            const confirmDelete = confirm(`Tem certeza que deseja apagar ${selectedGalleryPictures.size} foto(s)? Isso não pode ser desfeito.`);
+            if (!confirmDelete) return;
+
+            btnDeleteSelected.disabled = true;
+            btnDeleteSelected.innerHTML = '<i class="ph-duotone ph-spinner spin"></i> Apagando...';
+
+            try {
+                const idsToDelete = Array.from(selectedGalleryPictures.values());
+                const urlsToDelete = Array.from(selectedGalleryPictures.keys());
+
+                // 1. Delete from DB
+                const { error: dbError } = await supabaseClient.from('pictures').delete().in('id', idsToDelete);
+                if (dbError) throw new Error("Erro ao apagar do banco de dados: " + dbError.message);
+
+                // 2. Delete from Storage
+                const storagePaths = urlsToDelete.map(url => {
+                    // Extract filename from the end of publicUrl
+                    return url.split('/').pop();
+                });
+                const { error: stError } = await supabaseClient.storage.from('FotosCafe').remove(storagePaths);
+                if (stError) console.warn("Aviso: Falha ao apagar arquivos do storage", stError);
+
+                // Update UI state
+                currentGalleryPictures = currentGalleryPictures.filter(p => !idsToDelete.includes(p.id));
+                selectedGalleryPictures.clear();
+                
+                alert('Fotos apagadas com sucesso!');
+                applyGalleryFilters();
+                updateGalleryActionBar();
+                
+            } catch (err) {
+                alert(err.message);
+            } finally {
+                btnDeleteSelected.disabled = false;
+                btnDeleteSelected.innerHTML = '<i class="ph-bold ph-trash"></i> Excluir';
+            }
+        });
+    }
+
+    if (btnAnalyzeSelected) {
+        btnAnalyzeSelected.addEventListener('click', async () => {
+            if (isHeatmapMode) {
+                openHeatmapModal();
+                return;
+            }
+
+            const items = Array.from(selectedGalleryPictures.entries()); // [url, id]
+            if (items.length === 0) return;
+
+            btnAnalyzeSelected.disabled = true;
+            analyzeActionText.textContent = 'Baixando imagens...';
+            analyzeActionLoader.classList.remove('hidden');
+
+            try {
+                // Fechar modal
+                galleryModal.classList.add('hidden');
+                galleryModal.style.display = 'none';
+
+                // Baixar arquivos
+                const files = [];
+                for (let i = 0; i < items.length; i++) {
+                    const [url, picId] = items[i];
+                    const filename = `foto_appcafe_${picId}.jpg`;
+                    const file = await urlToFile(url, filename, 'image/jpeg');
+                    file.supabasePictureId = picId;
+                    files.push(file);
+                }
+
+                if (files.length === 1) {
+                    // Send to Individual Analysis
+                    tabIndividual.click();
+                    handleFile(files[0]);
+                    // Auto click analyze
+                    setTimeout(() => analyzeBtn.click(), 500);
+                } else {
+                    // Send to Batch Analysis
+                    tabBatch.click();
+                    handleBatchFiles(files);
+                    // Auto click analyze
+                    setTimeout(() => batchAnalyzeBtn.click(), 500);
+                }
+
+                // Limpar seleção apos enviar
+                selectedGalleryPictures.clear();
+                updateGalleryActionBar();
+                
+            } catch (error) {
+                console.error("Erro ao baixar imagens:", error);
+                alert("Ocorreu um erro ao preparar as imagens para análise. Tente novamente.");
+                galleryModal.classList.remove('hidden');
+                galleryModal.style.display = 'flex';
+            } finally {
+                btnAnalyzeSelected.disabled = false;
+                analyzeActionLoader.classList.add('hidden');
+            }
+        });
+    }
+
+    function applyGalleryFilters() {
+        if (!currentGalleryPictures) return;
+
+        const descVal = filterDesc ? filterDesc.value.toLowerCase() : '';
+        const startVal = filterDateStart ? filterDateStart.value : ''; 
+        const endVal = filterDateEnd ? filterDateEnd.value : '';
+        const filterDiseaseSelect = document.getElementById('filter-disease-select');
+        const diseaseVal = filterDiseaseSelect && !filterDiseaseSelect.parentElement.classList.contains('hidden') ? filterDiseaseSelect.value : 'all';
+
+        const filtered = currentGalleryPictures.filter(pic => {
+            const picDesc = (pic.description || '').toLowerCase();
+            if (descVal && !picDesc.includes(descVal)) return false;
+
+            if (startVal || endVal) {
+                const picDateObj = new Date(pic.data);
+                const year = picDateObj.getFullYear();
+                const month = String(picDateObj.getMonth() + 1).padStart(2, '0');
+                const day = String(picDateObj.getDate()).padStart(2, '0');
+                const picDateStr = `${year}-${month}-${day}`;
+
+                if (startVal && picDateStr < startVal) return false;
+                if (endVal && picDateStr > endVal) return false;
+            }
+            
+            if (diseaseVal !== 'all' && String(pic.id_disease) !== diseaseVal) {
+                return false;
+            }
+
+            return true;
+        });
+
+        renderGalleryCards(filtered);
+    }
+
+    if (filterDesc) filterDesc.addEventListener('input', applyGalleryFilters);
+    if (filterDateStart) filterDateStart.addEventListener('change', applyGalleryFilters);
+    if (filterDateEnd) filterDateEnd.addEventListener('change', applyGalleryFilters);
+    const filterDiseaseSelect = document.getElementById('filter-disease-select');
+    if (filterDiseaseSelect) filterDiseaseSelect.addEventListener('change', applyGalleryFilters);
+    
+    if (clearFiltersBtn) {
+        clearFiltersBtn.addEventListener('click', () => {
+            if (filterDesc) filterDesc.value = '';
+            if (filterDateStart) filterDateStart.value = '';
+            if (filterDateEnd) filterDateEnd.value = '';
+            if (filterDiseaseSelect) filterDiseaseSelect.value = 'all';
+            applyGalleryFilters();
+        });
+    }
+
+    // --- DASHBOARD ACTIONS ---
+    if (btnDashboardIndividual) {
+        btnDashboardIndividual.addEventListener('click', () => {
+            tabIndividual.click();
+        });
+    }
+
+    if (btnDashboardLote) {
+        btnDashboardLote.addEventListener('click', () => {
+            tabBatch.click();
+        });
+    }
+
+    if (btnMapaCalor) {
+        btnMapaCalor.addEventListener('click', async () => {
+            isHeatmapMode = true;
+            btnOlharFotos.click(); // Reuse gallery open logic but in heatmap mode
+        });
+    }
+
+    if (btnOlharFotos) {
+        btnOlharFotos.addEventListener('click', async (e) => {
+            if (!supabaseClient) return;
+            
+            // If click was explicitly from "Olhar Fotos", disable heatmap mode
+            if (e && e.isTrusted) {
+                isHeatmapMode = false;
+            }
+            
+            // Abre o modal
+            galleryModal.classList.remove('hidden');
+            galleryModal.style.display = 'flex'; 
+            galleryContainer.innerHTML = '';
+            galleryLoader.classList.remove('hidden');
+            
+            // Set gallery title
+            const galleryTitle = galleryModal.querySelector('h2');
+            if (isHeatmapMode) {
+                galleryTitle.innerHTML = '<i class="ph-bold ph-map-trifold"></i> Selecionar Fotos para Mapa de Calor';
+            } else {
+                galleryTitle.innerHTML = '<i class="ph-bold ph-images"></i> Suas Fotos';
+            }
+
+            try {
+                // Preload diseases if not loaded
+                if (Object.keys(diseaseDictionary).length === 0) {
+                    const { data: dData, error: dErr } = await supabaseClient.from('diseases').select('*');
+                    if (!dErr && dData) {
+                        dData.forEach(d => { diseaseDictionary[d.id] = d.name; });
+                        
+                        // Populate heatmap dropdown
+                        heatmapDiseaseFilter.innerHTML = '<option value="all" style="color: black;">Todas as Doenças</option>';
+                        dData.forEach(d => {
+                            heatmapDiseaseFilter.innerHTML += `<option value="${d.id}" style="color: black;">Apenas ${d.name}</option>`;
+                        });
+                    }
+                }
+
+                // Pega o ID do usuario logado
+                const { data: userData, error: userError } = await supabaseClient.auth.getUser();
+                if (userError || !userData?.user) throw new Error('Erro ao identificar usuário logado.');
+                
+                const userId = userData.user.id;
+
+                // Busca as fotos na tabela pictures
+                let query = supabaseClient.from('pictures').select('*').eq('id_user', userId);
+                if (isHeatmapMode) {
+                    query = query.not('id_disease', 'is', null);
+                }
+                
+                const { data: pictures, error: picError } = await query.order('data', { ascending: false });
+
+                if (picError) throw new Error(picError.message);
+
+                currentGalleryPictures = pictures || [];
+                galleryLoader.classList.add('hidden');
+
+                if (currentGalleryPictures.length > 0) {
+                    if (galleryFilters) galleryFilters.classList.remove('hidden');
+                    
+                    const filterDiseaseContainer = document.getElementById('filter-disease-container');
+                    const filterDiseaseSelectEl = document.getElementById('filter-disease-select');
+                    
+                    if (isHeatmapMode && filterDiseaseContainer && filterDiseaseSelectEl) {
+                        filterDiseaseContainer.classList.remove('hidden');
+                        filterDiseaseSelectEl.innerHTML = '<option value="all" style="color: black;">Todas as Doenças</option>';
+                        Object.entries(diseaseDictionary).forEach(([id, name]) => {
+                            filterDiseaseSelectEl.innerHTML += `<option value="${id}" style="color: black;">${name}</option>`;
+                        });
+                    } else if (filterDiseaseContainer) {
+                        filterDiseaseContainer.classList.add('hidden');
+                    }
+
+                    // Reset filters on fresh open
+                    if (filterDesc) filterDesc.value = '';
+                    if (filterDateStart) filterDateStart.value = '';
+                    if (filterDateEnd) filterDateEnd.value = '';
+                    if (filterDiseaseSelectEl) filterDiseaseSelectEl.value = 'all';
+                    
+                    // Reset selection
+                    selectedGalleryPictures.clear();
+                    updateGalleryActionBar();
+
+                    applyGalleryFilters();
+                } else {
+                    if (galleryFilters) galleryFilters.classList.add('hidden');
+                    selectedGalleryPictures.clear();
+                    updateGalleryActionBar();
+                    renderGalleryCards([]);
+                }
+
+            } catch (error) {
+                console.error("Erro ao buscar fotos:", error);
+                galleryLoader.classList.add('hidden');
+                galleryContainer.innerHTML = `<p style="color: #fc8181; grid-column: 1 / -1; text-align: center;">Erro ao carregar fotos: ${error.message}</p>`;
+            }
+        });
+    }
+
+    if (closeGalleryBtn) {
+        closeGalleryBtn.addEventListener('click', () => {
+            galleryModal.classList.add('hidden');
+            galleryModal.style.display = 'none';
+        });
+    }
+
 });

static/style.css

@@ -428,3 +428,78 @@ header {
 .crops-gallery::-webkit-scrollbar-thumb:hover {
     background: rgba(47, 133, 90, 0.7); 
 }
+
+/* Tabs Navigation */
+.tabs-container {
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
+    margin-bottom: 2rem;
+}
+
+.tab-btn {
+    background: var(--glass-bg);
+    border: 1px solid var(--glass-border);
+    padding: 0.75rem 1.5rem;
+    border-radius: 12px;
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--text-secondary);
+    cursor: pointer;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+}
+
+.tab-btn:hover {
+    background: rgba(255, 255, 255, 0.95);
+    transform: translateY(-2px);
+}
+
+.tab-btn.active {
+    background: var(--accent-primary);
+    color: white;
+    border-color: var(--accent-primary);
+    box-shadow: 0 4px 15px rgba(47, 133, 90, 0.2);
+}
+
+/* Batch Preview Grid */
+.batch-preview-grid {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 1rem;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+    gap: 8px;
+    overflow-y: auto;
+    background: rgba(255, 255, 255, 0.95);
+    border-radius: 16px;
+    align-items: flex-start;
+    align-content: flex-start;
+}
+
+.batch-preview-grid img {
+    width: 100%;
+    aspect-ratio: 1;
+    object-fit: cover;
+    border-radius: 8px;
+    border: 1px solid var(--glass-border);
+    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+}
+
+.batch-preview-grid::-webkit-scrollbar {
+    width: 6px;
+}
+.batch-preview-grid::-webkit-scrollbar-track {
+    background: transparent; 
+}
+.batch-preview-grid::-webkit-scrollbar-thumb {
+    background: rgba(47, 133, 90, 0.3); 
+    border-radius: 4px;
+}

templates/index.html

@@ -12,7 +12,17 @@
     <script src="https://unpkg.com/@phosphor-icons/web"></script>
     <!-- Chart.js -->
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
+    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
+    <script src="https://unpkg.com/leaflet.heat@0.2.0/dist/leaflet-heat.js"></script>
     <link rel="stylesheet" href="/static/style.css">
+    
+    <!-- Supabase JS -->
+    <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
+    <script>
+        window.SUPABASE_URL = "{{ supabase_url }}";
+        window.SUPABASE_ANON_KEY = "{{ supabase_key }}";
+    </script>
 </head>
 <body>
     <main class="container">
@@ -21,7 +31,13 @@
             <p class="subtitle"><i class="ph ph-brain"></i> CADIS: Coffee AI Disease System - Diagnóstico avançado de doenças em folhas de café</p>
         </header>
 
-        <div class="content-wrapper">
+        <div class="tabs-container">
+            <button class="tab-btn active" id="tab-individual"><i class="ph-bold ph-image"></i> Análise Individual</button>
+            <button class="tab-btn" id="tab-batch"><i class="ph-bold ph-images"></i> Análise em Lote</button>
+            <button class="tab-btn" id="tab-appcafe"><i class="ph-bold ph-device-mobile"></i> AppCafe</button>
+        </div>
+
+        <div class="content-wrapper" id="wrapper-individual">
             <!-- Left Side: Upload and Info -->
             <section class="upload-section glass-panel">
                 <div class="upload-area" id="upload-area">
@@ -59,6 +75,14 @@
                         <div class="stat-card highlight">
                             <span class="stat-label"><i class="ph-bold ph-virus"></i> Doença Principal</span>
                             <span class="stat-value" id="main-disease">-</span>
+                            
+                            <!-- Botão Salvar Resultado -->
+                            <div id="save-result-container-individual" class="hidden" style="margin-top: 15px;">
+                                <button id="btn-save-result-individual" class="primary-btn" style="background-color: var(--accent-secondary); border-color: var(--accent-secondary); padding: 8px 16px; font-size: 0.9rem;">
+                                    <i class="ph-bold ph-floppy-disk"></i> Salvar Resultado
+                                </button>
+                                <p id="save-result-msg-individual" style="font-size: 0.85rem; color: var(--text-secondary); margin-top: 8px; display: none;"></p>
+                            </div>
                         </div>
                         <div class="stat-card highlight" style="display: flex; align-items: center; justify-content: center; padding: 10px;">
                             <p style="font-size: 0.85rem; color: #718096; margin: 0; text-align: center; line-height: 1.4;">
@@ -81,6 +105,194 @@
                 </div>
             </section>
         </div>
+
+        <div class="content-wrapper hidden" id="wrapper-batch">
+            <!-- Left Side: Batch Upload -->
+            <section class="upload-section glass-panel">
+                <div class="upload-area" id="batch-upload-area">
+                    <input type="file" id="batch-file-input" accept="image/*" multiple hidden>
+                    <div class="upload-content" id="batch-upload-content">
+                        <i class="ph-duotone ph-files upload-icon"></i>
+                        <h3>Selecione várias imagens</h3>
+                        <p>Arraste e solte ou clique aqui</p>
+                    </div>
+                    <div id="batch-image-preview" class="hidden batch-preview-grid"></div>
+                </div>
+                
+                <div class="upload-notice">
+                    <i class="ph-fill ph-info"></i>
+                    <p><strong>Lote:</strong> Selecione múltiplas folhas. O resultado será um resumo geral de todas as imagens processadas.</p>
+                </div>
+
+                <button id="batch-analyze-btn" class="primary-btn" disabled>
+                    <span class="btn-text" id="batch-btn-text"><i class="ph-bold ph-scan"></i> Analisar Lote</span>
+                    <span class="loader hidden" id="batch-loader"></span>
+                </button>
+            </section>
+
+            <!-- Right Side: Batch Results -->
+            <section class="results-section glass-panel" id="batch-results-panel">
+                <div class="results-placeholder" id="batch-results-placeholder">
+                    <div class="pulse-ring"><i class="ph-duotone ph-chart-pie" style="font-size: 2.5rem; color: var(--accent-primary);"></i></div>
+                    <p>Aguardando imagens para análise em lote...</p>
+                </div>
+
+                <div class="results-content hidden" id="batch-results-content">
+                    <h2><i class="ph-bold ph-chart-bar"></i> Resumo do Lote</h2>
+                    
+                    <div class="stats-grid">
+                        <div class="stat-card highlight">
+                            <span class="stat-label"><i class="ph-bold ph-leaf"></i> Folhas Analisadas</span>
+                            <span class="stat-value" id="batch-total-leaves">-</span>
+                        </div>
+                        <div class="stat-card highlight">
+                            <span class="stat-label"><i class="ph-bold ph-virus"></i> Principal Incidência</span>
+                            <span class="stat-value" id="batch-main-disease" style="font-size: 1.2rem;">-</span>
+                        </div>
+                    </div>
+
+                    <div style="background-color: white; border: 1px solid #e2e8f0; border-radius: 12px; padding: 25px; margin-bottom: 25px;">
+                        <h3 style="color: var(--text-secondary); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 15px; text-align: center;">Estatísticas Gerais</h3>
+                        <div style="height: 250px; position: relative;">
+                            <canvas id="batchResultsChart"></canvas>
+                        </div>
+                        
+                        <!-- Botão Salvar Resultados Lote -->
+                        <div id="save-result-container-batch" class="hidden" style="margin-top: 20px; text-align: center; border-top: 1px solid #e2e8f0; padding-top: 20px;">
+                            <button id="btn-save-result-batch" class="primary-btn" style="background-color: var(--accent-secondary); border-color: var(--accent-secondary); padding: 10px 20px;">
+                                <i class="ph-bold ph-floppy-disk-back"></i> Salvar Todos os Resultados
+                            </button>
+                            <p id="save-result-msg-batch" style="font-size: 0.85rem; color: var(--text-secondary); margin-top: 8px; display: none;"></p>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+
+        <div class="content-wrapper hidden" id="wrapper-appcafe" style="display: flex; justify-content: center; width: 100%;">
+            <section class="upload-section glass-panel" style="margin: 0 auto; max-width: 500px; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 400px;">
+                <div id="appcafe-login-container" style="width: 100%; text-align: center;">
+                    <h2 style="margin-bottom: 10px; display: flex; align-items: center; justify-content: center; gap: 8px;"><i class="ph-bold ph-user-circle"></i> Login AppCafe</h2>
+                    <p style="color: var(--text-secondary); margin-bottom: 20px; font-size: 0.95rem;">Faça login com sua conta do aplicativo para gerenciar suas análises.</p>
+                    
+                    <form id="appcafe-login-form" style="display: flex; flex-direction: column; gap: 15px;">
+                        <input type="email" id="appcafe-email" placeholder="Seu e-mail" required style="padding: 12px; border-radius: 8px; border: 1px solid #e2e8f0; font-family: inherit; font-size: 1rem; width: 100%;">
+                        <input type="password" id="appcafe-password" placeholder="Sua senha" required style="padding: 12px; border-radius: 8px; border: 1px solid #e2e8f0; font-family: inherit; font-size: 1rem; width: 100%;">
+                        
+                        <div style="display: flex; flex-direction: column; gap: 10px;">
+                            <button type="submit" class="primary-btn" id="appcafe-login-btn">
+                                <span class="btn-text">Entrar</span>
+                                <span class="loader hidden" id="appcafe-loader"></span>
+                            </button>
+                            <a href="#" id="appcafe-forgot-password" style="color: var(--text-secondary); font-size: 0.9rem; text-decoration: underline;">Esqueci minha senha</a>
+                        </div>
+                        <p id="appcafe-error" style="color: #e53e3e; font-size: 0.9rem; margin-top: 5px; display: none; text-align: center;"></p>
+                    </form>
+                </div>
+                
+                <div id="appcafe-logged-in" class="hidden" style="width: 100%; text-align: center;">
+                    <i class="ph-fill ph-check-circle" style="color: var(--accent-primary); font-size: 3rem; margin-bottom: 10px;"></i>
+                    <h2 id="welcome-user-text" style="margin-bottom: 10px;">Bem-vindo(a)!</h2>
+                    <p style="color: var(--text-secondary); margin-bottom: 25px;">Escolha o que você deseja fazer abaixo:</p>
+                    
+                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 25px;">
+                        <button id="btn-olhar-fotos" class="tab-btn" style="display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 20px 10px; height: auto;"><i class="ph-bold ph-images" style="font-size: 1.5rem;"></i> Olhar Fotos</button>
+                        <button id="btn-mapa-calor" class="tab-btn" style="display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 20px 10px; height: auto;"><i class="ph-bold ph-map-pin" style="font-size: 1.5rem;"></i> Mapa de Calor</button>
+                        <button id="btn-dashboard-individual" class="tab-btn" style="display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 20px 10px; height: auto;"><i class="ph-bold ph-image" style="font-size: 1.5rem;"></i> Análise Individual</button>
+                        <button id="btn-dashboard-lote" class="tab-btn" style="display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 20px 10px; height: auto;"><i class="ph-bold ph-files" style="font-size: 1.5rem;"></i> Análise em Lote</button>
+                    </div>
+
+                    <button id="appcafe-logout-btn" class="secondary-btn" style="width: 100%; border: 1px solid #e2e8f0; background: transparent;">Sair da Conta</button>
+                </div>
+                
+                <div class="appcafe-promo" style="margin-top: 30px; padding-top: 25px; border-top: 1px solid #e2e8f0; text-align: center; width: 100%;">
+                    <h3 style="margin-bottom: 12px;">Ainda não tem o AppCafe?</h3>
+                    <p style="color: var(--text-secondary); margin-bottom: 15px; font-size: 0.9rem; line-height: 1.5;">Utilize o nosso app para tirar fotos no campo, receber diagnósticos rápidos e manter um histórico seguro das suas análises.</p>
+                    <a href="#" style="display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; background-color: var(--accent-primary); color: white; text-decoration: none; border-radius: 8px; font-weight: 600; transition: opacity 0.2s;"><i class="ph-bold ph-download-simple"></i> Baixar AppCafe</a>
+                </div>
+            </section>
+        </div>
+
+        <!-- Fullscreen Gallery Modal for "Olhar Fotos" -->
+        <div id="gallery-modal" class="hidden" style="position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(15, 23, 42, 0.98); z-index: 1000; display: flex; flex-direction: column; overflow-y: auto; backdrop-filter: blur(10px);">
+            <div style="padding: 20px 40px; display: flex; justify-content: space-between; align-items: center; background: rgba(0,0,0,0.2); border-bottom: 1px solid rgba(255,255,255,0.1);">
+                <h2 style="color: white; margin: 0; display: flex; align-items: center; gap: 10px;"><i class="ph-bold ph-images"></i> Suas Fotos</h2>
+                <button id="close-gallery-btn" style="background: #e53e3e; border: none; color: white; font-size: 1.5rem; cursor: pointer; border-radius: 50%; width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 6px rgba(0,0,0,0.3); transition: transform 0.2s;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'"><i class="ph-bold ph-x"></i></button>
+            </div>
+            
+            <!-- Filters -->
+            <div id="gallery-filters" class="hidden" style="padding: 20px 40px; background: rgba(0,0,0,0.3); display: flex; gap: 15px; flex-wrap: wrap; align-items: flex-end; border-bottom: 1px solid rgba(255,255,255,0.05); justify-content: center;">
+                <div id="filter-disease-container" class="hidden" style="display: flex; flex-direction: column; gap: 5px;">
+                    <label style="color: #cbd5e1; font-size: 0.85rem; font-weight: 600;"><i class="ph-bold ph-virus"></i> Doença:</label>
+                    <select id="filter-disease-select" style="padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.1); color: white; min-width: 200px; font-family: inherit; cursor: pointer;">
+                        <option value="all" style="color: black;">Todas</option>
+                    </select>
+                </div>
+                <div style="display: flex; flex-direction: column; gap: 5px;">
+                    <label style="color: #cbd5e1; font-size: 0.85rem; font-weight: 600;"><i class="ph-bold ph-magnifying-glass"></i> Descrição:</label>
+                    <input type="text" id="filter-desc" placeholder="Buscar..." style="padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.1); color: white; min-width: 200px; font-family: inherit;">
+                </div>
+                <div style="display: flex; flex-direction: column; gap: 5px;">
+                    <label style="color: #cbd5e1; font-size: 0.85rem; font-weight: 600;"><i class="ph-bold ph-calendar"></i> Data Inicial:</label>
+                    <input type="date" id="filter-date-start" style="padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.1); color: white; font-family: inherit; color-scheme: dark;">
+                </div>
+                <div style="display: flex; flex-direction: column; gap: 5px;">
+                    <label style="color: #cbd5e1; font-size: 0.85rem; font-weight: 600;"><i class="ph-bold ph-calendar"></i> Data Final:</label>
+                    <input type="date" id="filter-date-end" style="padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.1); color: white; font-family: inherit; color-scheme: dark;">
+                </div>
+                <div style="display: flex; gap: 10px;">
+                    <button id="clear-filters-btn" style="padding: 10px 20px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.3); color: white; border-radius: 8px; cursor: pointer; transition: background 0.2s; font-weight: 600; display: flex; align-items: center; gap: 5px;" onmouseover="this.style.background='rgba(255,255,255,0.2)'" onmouseout="this.style.background='rgba(255,255,255,0.1)'"><i class="ph-bold ph-eraser"></i> Limpar</button>
+                    <button id="select-all-btn" style="padding: 10px 20px; background: rgba(66, 153, 225, 0.2); border: 1px solid rgba(66, 153, 225, 0.5); color: #63b3ed; border-radius: 8px; cursor: pointer; transition: all 0.2s; font-weight: 600; display: flex; align-items: center; gap: 5px;" onmouseover="this.style.background='rgba(66, 153, 225, 0.3)'" onmouseout="this.style.background='rgba(66, 153, 225, 0.2)'"><i class="ph-bold ph-check-square"></i> Selecionar Tudo</button>
+                </div>
+            </div>
+            <div id="gallery-container" style="padding: 40px; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); justify-content: center; gap: 30px; max-width: 1200px; margin: 0 auto; width: 100%; padding-bottom: 100px;">
+                <!-- Imagens serão injetadas aqui -->
+            </div>
+            <div id="gallery-loader" class="hidden" style="text-align: center; padding: 40px; color: white;">
+                <div class="pulse-ring" style="margin: 0 auto; display: block; border-color: rgba(255,255,255,0.5);"><i class="ph-duotone ph-spinner" style="font-size: 2.5rem; animation: spin 1s linear infinite; color: white;"></i></div>
+                <p style="margin-top: 15px; font-weight: 600; letter-spacing: 1px;">Carregando sua galeria...</p>
+            </div>
+            
+            <!-- Selection Action Bar -->
+            <div id="gallery-action-bar" class="hidden" style="position: sticky; bottom: 0; left: 0; width: 100%; background: rgba(15, 23, 42, 0.95); border-top: 1px solid rgba(255,255,255,0.1); padding: 15px 40px; display: flex; justify-content: space-between; align-items: center; z-index: 1010; backdrop-filter: blur(5px); margin-top: auto;">
+                <p style="color: white; margin: 0; font-weight: 600; font-size: 1.1rem;"><span id="selected-count" style="color: var(--accent-primary); font-size: 1.3rem;">0</span> foto(s) selecionada(s)</p>
+                <div style="display: flex; gap: 15px; align-items: center;">
+                    <span id="analyze-action-hint" style="color: #94a3b8; font-size: 0.9rem; margin-right: 10px;">Ações para seleção</span>
+                    <button id="btn-delete-selected" style="padding: 10px 20px; background: rgba(229, 62, 62, 0.2); border: 1px solid rgba(229, 62, 62, 0.5); color: #fc8181; border-radius: 8px; cursor: pointer; transition: all 0.2s; font-weight: 600; display: flex; align-items: center; gap: 5px;" onmouseover="this.style.background='rgba(229, 62, 62, 0.4)'" onmouseout="this.style.background='rgba(229, 62, 62, 0.2)'"><i class="ph-bold ph-trash"></i> Excluir</button>
+                    <button id="btn-cancel-selection" style="padding: 10px 20px; background: transparent; border: 1px solid rgba(255,255,255,0.3); color: white; border-radius: 8px; cursor: pointer; transition: background 0.2s; font-weight: 600;" onmouseover="this.style.background='rgba(255,255,255,0.1)'" onmouseout="this.style.background='transparent'">Cancelar</button>
+                    <button id="btn-analyze-selected" class="primary-btn" style="padding: 10px 20px; min-width: 200px; display: flex; justify-content: center;" disabled>
+                        <span class="btn-text" id="analyze-action-text"><i class="ph-bold ph-scan"></i> Analisar</span>
+                        <span class="loader hidden" id="analyze-action-loader"></span>
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Heatmap Modal -->
+        <div id="heatmap-modal" class="hidden" style="position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #0f172a; z-index: 2000; display: flex; flex-direction: column;">
+            <div style="padding: 20px 40px; display: flex; justify-content: space-between; align-items: center; background: rgba(0,0,0,0.3); border-bottom: 1px solid rgba(255,255,255,0.1);">
+                <h2 style="color: white; margin: 0; display: flex; align-items: center; gap: 10px;"><i class="ph-bold ph-map-trifold"></i> Mapa de Calor Analítico</h2>
+                <div style="display: flex; gap: 20px; align-items: center;">
+                    <div style="display: flex; flex-direction: column; gap: 5px;">
+                        <label style="color: #cbd5e1; font-size: 0.85rem; font-weight: 600;">Filtrar Doença:</label>
+                        <select id="heatmap-disease-filter" style="padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.1); color: white; font-family: inherit; cursor: pointer;">
+                            <option value="all" style="color: black;">Todas as Doenças</option>
+                        </select>
+                    </div>
+                    <div style="display: flex; flex-direction: column; gap: 5px;">
+                        <label style="color: #cbd5e1; font-size: 0.85rem; font-weight: 600;">Estilo do Mapa:</label>
+                        <select id="heatmap-style-filter" style="padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.1); color: white; font-family: inherit; cursor: pointer;">
+                            <option value="dark" style="color: black;">Simplificado (Escuro)</option>
+                            <option value="osm" style="color: black;">Detalhado (Satélite/Mapas)</option>
+                        </select>
+                    </div>
+                    <button id="close-heatmap-btn" style="background: #e53e3e; border: none; color: white; font-size: 1.5rem; cursor: pointer; border-radius: 50%; width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 6px rgba(0,0,0,0.3); transition: transform 0.2s; margin-left: 10px;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'"><i class="ph-bold ph-x"></i></button>
+                </div>
+            </div>
+            <div id="heatmap-container" style="flex-grow: 1; width: 100%; position: relative;">
+                <div id="leaflet-map" style="width: 100%; height: 100%; z-index: 1;"></div>
+            </div>
+        </div>
     </main>
 
     <script src="/static/script.js"></script>