| <!DOCTYPE html> |
| <html lang="pt-BR"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Análise de Sentimentos - Requião Filho</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| <style> |
| |
| @media print { |
| body { background-color: white; -webkit-print-color-adjust: exact; } |
| .no-print { display: none; } |
| .page-break { page-break-before: always; } |
| .print-container { padding: 0 !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; } |
| .shadow-lg { box-shadow: none !important; border: 1px solid #e5e7eb; } |
| |
| |
| h1, h2, h3, h4, h5, h6 { |
| page-break-after: avoid; |
| break-after: avoid; |
| } |
| section, .bg-white, header, footer { |
| page-break-inside: avoid; |
| break-inside: avoid; |
| } |
| } |
| body { font-family: 'Inter', sans-serif; background-color: #f3f4f6; } |
| </style> |
| </head> |
| <body class="text-gray-800 p-4 md:p-8"> |
|
|
| <div class="max-w-5xl mx-auto print-container space-y-6"> |
| |
| |
| <header class="bg-gradient-to-r from-blue-900 to-red-800 rounded-xl p-6 text-white shadow-lg text-center md:text-left flex flex-col md:flex-row justify-between items-center"> |
| <div> |
| <h1 class="text-2xl md:text-3xl font-bold uppercase tracking-wide">Análise de Sentimentos</h1> |
| <h2 class="text-xl md:text-2xl font-light mt-1">Requião Filho</h2> |
| <p class="text-sm font-medium mt-2 text-gray-200">Período: 01 a 08 de Agosto | Comentários Únicos | Plataforma: Facebook</p> |
| </div> |
| <div class="mt-4 md:mt-0 no-print"> |
| <button onclick="window.print()" class="bg-white text-blue-900 px-4 py-2 rounded-lg font-bold shadow hover:bg-gray-100 transition"> |
| 📄 Exportar PDF |
| </button> |
| </div> |
| </header> |
|
|
| |
| <section class="bg-white border-l-4 border-yellow-500 rounded-r-xl p-5 shadow-sm"> |
| <div class="flex items-start"> |
| <div class="text-3xl mr-4">🤖</div> |
| <div> |
| <h3 class="text-lg font-bold text-gray-800">Metodologia de Extração: Automação Independente</h3> |
| <p class="text-sm text-gray-600 mt-1"> |
| Os dados que compõem este relatório <strong>não</strong> foram obtidos através da API oficial e engessada da Meta. |
| Para garantir a captura real e sem filtros da "voz do eleitor", utilizamos técnicas avançadas de <strong>Web Scraping</strong> |
| aliadas à automação com <strong>Playwright</strong>. Isso nos permitiu varrer a interface pública, extrair o contexto visual |
| e consolidar um dataset rico e preciso sobre o engajamento da página. |
| </p> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="grid grid-cols-1 md:grid-cols-4 gap-4"> |
| <div class="bg-white p-5 rounded-xl shadow-sm text-center border-b-4 border-gray-400"> |
| <p class="text-sm text-gray-500 font-bold uppercase">Total Analisado</p> |
| <p class="text-4xl font-black text-gray-800 mt-2">1.427</p> |
| <p class="text-xs text-gray-400 mt-1">Comentários únicos</p> |
| </div> |
| <div class="bg-white p-5 rounded-xl shadow-sm text-center border-b-4 border-green-500"> |
| <p class="text-sm text-gray-500 font-bold uppercase">Positivos</p> |
| <p class="text-4xl font-black text-green-600 mt-2">785</p> |
| <p class="text-xs text-green-600 font-medium mt-1">55% do total</p> |
| </div> |
| <div class="bg-white p-5 rounded-xl shadow-sm text-center border-b-4 border-red-500"> |
| <p class="text-sm text-gray-500 font-bold uppercase">Negativos</p> |
| <p class="text-4xl font-black text-red-600 mt-2">413</p> |
| <p class="text-xs text-red-600 font-medium mt-1">29% do total</p> |
| </div> |
| <div class="bg-white p-5 rounded-xl shadow-sm text-center border-b-4 border-gray-300"> |
| <p class="text-sm text-gray-500 font-bold uppercase">Neutros</p> |
| <p class="text-4xl font-black text-gray-600 mt-2">229</p> |
| <p class="text-xs text-gray-500 font-medium mt-1">16% do total</p> |
| </div> |
| </section> |
|
|
| |
| <section class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6"> |
| |
| |
| <div class="bg-white p-6 rounded-xl shadow-sm flex flex-col items-center justify-center"> |
| <h3 class="text-lg font-bold text-gray-800 mb-4 w-full text-center">Distribuição de Sentimentos</h3> |
| <div class="relative w-full max-w-xs aspect-square"> |
| <canvas id="sentimentChart"></canvas> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white p-6 rounded-xl shadow-sm"> |
| <h3 class="text-lg font-bold text-gray-800 mb-4 text-center">Engajamento ao Longo da Semana</h3> |
| <div class="relative w-full h-64"> |
| <canvas id="trendChart"></canvas> |
| </div> |
| <p class="text-xs text-gray-400 text-center mt-4">Volume de comentários classificados por dia.</p> |
| </div> |
| </section> |
| |
| |
| <div class="page-break"></div> |
|
|
| |
| <section class="bg-white p-6 rounded-xl shadow-sm mt-6 border-t-8 border-blue-900"> |
| <h3 class="text-xl font-bold text-gray-800 mb-4">Principais Insights da IA (Gemini Flash)</h3> |
| <div class="space-y-4"> |
| <div class="p-4 bg-green-50 rounded-lg border border-green-100"> |
| <h4 class="font-bold text-green-800">✅ Destaques Positivos</h4> |
| <p class="text-sm text-green-700 mt-1">Alta coesão no apoio direto a <strong>Requião Filho</strong>. Termos como <em>"Governador"</em> e a hashtag <em>#requiaofilho</em> foram predominantes. As críticas direcionadas a adversários (ex: Sergio Moro, chamado de "marreco fujão") geraram forte engajamento favorável à página.</p> |
| </div> |
| <div class="p-4 bg-red-50 rounded-lg border border-red-100"> |
| <h4 class="font-bold text-red-800">⚠️ Pontos de Atenção (Negativos)</h4> |
| <p class="text-sm text-red-700 mt-1">Houve um bloco organizado de oposição promovendo menções como <em>"Voto 22"</em> e elogios aos oponentes diretos (Ratinho Jr. e Moro). A IA isolou esses comentários como oposição direta aos interesses da campanha.</p> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="text-center text-xs text-gray-400 mt-8 pb-4"> |
| Gerado automaticamente via Análise LLM (Google GenAI) • Processamento em Lote Finalizado • Agosto 2026 |
| </footer> |
| </div> |
|
|
| <script> |
| |
| const ctxSentiment = document.getElementById('sentimentChart').getContext('2d'); |
| new Chart(ctxSentiment, { |
| type: 'doughnut', |
| data: { |
| labels: ['Positivo', 'Negativo', 'Neutro'], |
| datasets: [{ |
| data: [785, 413, 229], |
| backgroundColor: ['#22c55e', '#ef4444', '#9ca3af'], |
| borderWidth: 0, |
| hoverOffset: 4 |
| }] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| cutout: '70%', |
| plugins: { |
| legend: { position: 'bottom', labels: { usePointStyle: true, padding: 20 } } |
| } |
| } |
| }); |
| |
| |
| const ctxTrend = document.getElementById('trendChart').getContext('2d'); |
| new Chart(ctxTrend, { |
| type: 'bar', |
| data: { |
| labels: ['01/Ago', '02/Ago', '03/Ago', '04/Ago', '05/Ago', '06/Ago', '07/Ago', '08/Ago'], |
| datasets: [ |
| { |
| label: 'Positivos', |
| data: [80, 110, 95, 130, 105, 90, 115, 60], |
| backgroundColor: '#22c55e' |
| }, |
| { |
| label: 'Negativos', |
| data: [40, 65, 45, 70, 50, 40, 75, 28], |
| backgroundColor: '#ef4444' |
| } |
| ] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| scales: { |
| x: { stacked: true, grid: { display: false } }, |
| y: { stacked: true, beginAtZero: true, border: { dash: [4, 4] } } |
| }, |
| plugins: { |
| legend: { position: 'top', labels: { usePointStyle: true } } |
| } |
| } |
| }); |
| </script> |
| </body> |
| </html> |
|
|
