|
|
<!DOCTYPE html> |
|
|
<html lang="pt-BR"> |
|
|
<head> |
|
|
<meta charset="UTF-8" /> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> |
|
|
<title>Matriz de Confusão</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
|
|
<style> |
|
|
body { |
|
|
background: linear-gradient(135deg, #1a1a1a 0%, #2d3748 100%); |
|
|
color: #e2e8f0; |
|
|
font-family: 'Poppins', sans-serif; |
|
|
background-attachment: fixed; |
|
|
} |
|
|
#center { |
|
|
@apply max-w-6xl mx-auto p-8 bg-gradient-to-br from-gray-800/40 to-gray-900/40 backdrop-blur-lg rounded-2xl shadow-2xl text-white mt-10 border border-gray-600/30; |
|
|
} |
|
|
#title { |
|
|
@apply text-5xl font-extrabold text-center mb-2 bg-gradient-to-r from-blue-100 to-purple-100 bg-clip-text text-transparent; |
|
|
text-shadow: 0 0 15px rgba(147, 197, 253, 0.2); |
|
|
} |
|
|
#breadcrumps ol { |
|
|
@apply flex text-sm mb-8 space-x-2 text-gray-300; |
|
|
list-style: none; |
|
|
} |
|
|
#breadcrumps a { |
|
|
@apply hover:text-blue-300 transition-all duration-300 flex items-center; |
|
|
} |
|
|
#breadcrumps a:hover i { |
|
|
@apply text-blue-300; |
|
|
} |
|
|
.info { |
|
|
@apply text-sm text-gray-300 mt-3 mb-1 flex items-start; |
|
|
} |
|
|
.info i { |
|
|
@apply mr-2 mt-0.5 text-lg; |
|
|
} |
|
|
.true-positive .info i { @apply text-green-400; } |
|
|
.false-positive .info i { @apply text-yellow-400; } |
|
|
.true-negative .info i { @apply text-blue-400; } |
|
|
.false-negative .info i { @apply text-red-400; } |
|
|
label { |
|
|
@apply block mt-2 text-white font-semibold; |
|
|
} |
|
|
input[type="text"] { |
|
|
@apply border border-gray-500 rounded-lg px-4 py-2 bg-gray-700/70 text-white focus:outline-none focus:ring-4 focus:ring-blue-500/50 transition-all duration-200 w-full shadow-inner; |
|
|
} |
|
|
button { |
|
|
@apply mt-6 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-bold py-4 px-10 rounded-2xl transition-all duration-300 shadow-lg hover:shadow-xl transform hover:scale-105 flex justify-center items-center gap-2; |
|
|
} |
|
|
.cf { |
|
|
@apply mt-8 text-sm text-gray-400; |
|
|
} |
|
|
.cf a { |
|
|
@apply text-blue-300 hover:underline hover:text-blue-200 transition-colors; |
|
|
} |
|
|
.matrix { |
|
|
@apply mt-8 w-full border border-gray-600 rounded-lg overflow-hidden; |
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); |
|
|
} |
|
|
.matrix th, .matrix td { |
|
|
@apply p-4; |
|
|
} |
|
|
.matrix-header { |
|
|
@apply bg-gradient-to-r from-gray-700 to-gray-800 text-white text-center font-bold text-base uppercase tracking-wider; |
|
|
} |
|
|
.matrix-cell { |
|
|
@apply text-center font-bold text-2xl relative transition-all duration-300; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.matrix-cell:hover { |
|
|
@apply transform scale-110 z-10 cursor-pointer; |
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); |
|
|
} |
|
|
#cell_tp { @apply bg-gradient-to-br from-green-700/80 to-green-900/80 text-green-50 border-r border-b border-green-500/30; } |
|
|
#cell_fp { @apply bg-gradient-to-br from-yellow-700/80 to-yellow-900/80 text-yellow-50 border-l border-b border-yellow-500/30; } |
|
|
#cell_tn { @apply bg-gradient-to-br from-blue-700/80 to-blue-900/80 text-blue-50 border-l border-t border-blue-500/30; } |
|
|
#cell_fn { @apply bg-gradient-to-br from-red-700/80 to-red-900/80 text-red-50 border-r border-t border-red-500/30; } |
|
|
.metric-card { |
|
|
@apply p-6 bg-gradient-to-b from-gray-800/70 to-gray-900/70 backdrop-blur-sm rounded-xl shadow-lg border border-gray-600/30 text-center transition-all duration-300 hover:shadow-xl hover:scale-105 relative overflow-hidden; |
|
|
} |
|
|
.metric-card::before { |
|
|
content: ''; |
|
|
@apply absolute inset-0 rounded-xl opacity-0 hover:opacity-10 transition-opacity duration-300; |
|
|
background: radial-gradient(circle at center, rgba(255, 255, 255, 0.1) 0%, transparent 70%); |
|
|
} |
|
|
.metric-title { |
|
|
@apply font-bold text-blue-300 text-sm uppercase tracking-widest mb-2 opacity-90; |
|
|
} |
|
|
.metric-value { |
|
|
@apply text-4xl md:text-5xl font-extrabold bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent; |
|
|
} |
|
|
.instructions { |
|
|
@apply mt-10 p-6 bg-gray-800/40 rounded-xl text-gray-200 text-sm leading-relaxed border border-gray-600/30; |
|
|
} |
|
|
.instructions h3 { |
|
|
@apply flex items-center font-bold text-white text-lg mb-3; |
|
|
} |
|
|
.instructions ul { |
|
|
@apply list-disc list-inside ml-6 space-y-2 mb-4; |
|
|
} |
|
|
.instructions p { |
|
|
@apply mt-3; |
|
|
} |
|
|
.tooltip { |
|
|
@apply relative inline-block; |
|
|
} |
|
|
.tooltip .tooltiptext { |
|
|
visibility: hidden; |
|
|
width: 250px; |
|
|
background-color: #1e293b; |
|
|
color: #e2e8f0; |
|
|
text-align: center; |
|
|
border-radius: 10px; |
|
|
padding: 12px; |
|
|
position: absolute; |
|
|
z-index: 10; |
|
|
bottom: 125%; |
|
|
left: 50%; |
|
|
margin-left: -125px; |
|
|
opacity: 0; |
|
|
transition: opacity 0.3s, transform 0.3s; |
|
|
font-size: 14px; |
|
|
border: 1px solid #334155; |
|
|
box-shadow: 0 8px 25px rgba(0,0,0,0.3); |
|
|
backdrop-filter: blur(10px); |
|
|
} |
|
|
.tooltip .tooltiptext::after { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
top: 100%; |
|
|
left: 50%; |
|
|
margin-left: -7px; |
|
|
border-width: 7px; |
|
|
border-style: solid; |
|
|
border-color: #1e293b transparent transparent transparent; |
|
|
} |
|
|
.tooltip:hover .tooltiptext { |
|
|
visibility: visible; |
|
|
opacity: 1; |
|
|
transform: translateY(-5px); |
|
|
} |
|
|
footer { |
|
|
@apply bg-gray-800/40 backdrop-blur-sm text-gray-400 py-8 text-center text-sm mt-16 border-t border-gray-600/30; |
|
|
} |
|
|
.fade-in { |
|
|
animation: fadeIn 0.8s ease-out; |
|
|
} |
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(20px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
.form-row { |
|
|
@apply mb-6; |
|
|
} |
|
|
.form-container { |
|
|
@apply bg-gradient-to-br from-gray-800/50 to-gray-900/50 p-8 rounded-2xl shadow-xl border border-gray-700/40; |
|
|
} |
|
|
.header-img { |
|
|
@apply w-full max-w-md mx-auto mb-6 rounded-xl overflow-hidden shadow-2xl; |
|
|
} |
|
|
.header-img img { |
|
|
@apply w-full h-auto; |
|
|
} |
|
|
.card-glow { |
|
|
@apply relative; |
|
|
} |
|
|
.card-glow::after { |
|
|
content: ''; |
|
|
@apply absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 blur-xl; |
|
|
background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%); |
|
|
} |
|
|
.metric-card:hover .metric-value { |
|
|
@apply scale-105 transition-transform duration-300; |
|
|
} |
|
|
.input-group { |
|
|
@apply relative mb-6; |
|
|
} |
|
|
.input-group label { |
|
|
@apply absolute -top-2 left-3 bg-gray-800/50 px-2 text-xs font-medium text-blue-300 z-10 rounded-full; |
|
|
} |
|
|
.input-group input { |
|
|
@apply rounded-xl; |
|
|
} |
|
|
|
|
|
.matrix thead th:first-child { |
|
|
@apply rounded-tl-lg; |
|
|
} |
|
|
.matrix thead th:last-child { |
|
|
@apply rounded-tr-lg; |
|
|
} |
|
|
.matrix tbody td:first-child { |
|
|
@apply font-semibold; |
|
|
} |
|
|
.matrix tr:first-child td { |
|
|
@apply border-t-0; |
|
|
} |
|
|
.matrix tr td { |
|
|
@apply border-t border-gray-600/30; |
|
|
} |
|
|
.matrix tr:first-child td:first-child { |
|
|
@apply rounded-tl-none; |
|
|
} |
|
|
|
|
|
#cell_tp:hover { background: linear-gradient(135deg, #166534, #15803d); } |
|
|
#cell_fp:hover { background: linear-gradient(135deg, #7c2d12, #92400e); } |
|
|
#cell_tn:hover { background: linear-gradient(135deg, #1e3a8a, #1e40af); } |
|
|
#cell_fn:hover { background: linear-gradient(135deg, #7f1d1d, #991b1b); } |
|
|
|
|
|
|
|
|
.floating { |
|
|
animation: float 3s ease-in-out infinite; |
|
|
} |
|
|
@keyframes float { |
|
|
0% { transform: translateY(0px) rotate(0deg); } |
|
|
50% { transform: translateY(-10px) rotate(1deg); } |
|
|
100% { transform: translateY(0px) rotate(0deg); } |
|
|
} |
|
|
|
|
|
|
|
|
::-webkit-scrollbar { |
|
|
width: 10px; |
|
|
} |
|
|
::-webkit-scrollbar-track { |
|
|
background: #1a1a1a; |
|
|
} |
|
|
::-webkit-scrollbar-thumb { |
|
|
background: #4a5568; |
|
|
border-radius: 10px; |
|
|
} |
|
|
::-webkit-scrollbar-thumb:hover { |
|
|
background: #67728c; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-900 text-gray-100 min-h-screen"> |
|
|
|
|
|
<header class="bg-gradient-to-r from-gray-900/90 to-gray-800/90 backdrop-blur-sm text-white py-12 shadow-2xl relative overflow-hidden"> |
|
|
<div class="absolute inset-0 bg-gradient-to-r from-blue-900/5 to-purple-900/5"></div> |
|
|
<div class="container mx-auto text-center relative z-10"> |
|
|
<div class="flex justify-center mb-4 floating"> |
|
|
<div class="w-20 h-20 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center shadow-2xl"> |
|
|
<i class="fas fa-project-diagram text-4xl text-white"></i> |
|
|
</div> |
|
|
</div> |
|
|
<h1 class="text-5xl font-bold bg-gradient-to-r from-blue-100 via-purple-100 to-blue-100 bg-clip-text text-transparent mb-4"> |
|
|
Matriz de Confusão |
|
|
</h1> |
|
|
<p class="mt-3 text-blue-100/80 text-lg max-w-4xl mx-auto leading-relaxed px-4"> |
|
|
Analise com precisão o desempenho do seu modelo de classificação. Insira os valores e obtenha métricas essenciais com visualização intuitiva e inteligente. |
|
|
</p> |
|
|
<div class="mt-6 bg-gradient-to-r from-blue-600/20 to-purple-600/20 backdrop-blur-sm max-w-md mx-auto py-3 px-6 rounded-full text-sm font-medium text-blue-100/90 border border-blue-500/20"> |
|
|
<i class="fas fa-info-circle mr-2"></i> Ferramenta essencial para cientistas de dados e entusiastas de Machine Learning |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div id="center" class="transition-all duration-700 ease-in-out"> |
|
|
|
|
|
|
|
|
<div id="breadcrumps" class="mt-6"> |
|
|
<ol itemscope itemtype="http://schema.org/BreadcrumbList" class="flex items-center justify-center"> |
|
|
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> |
|
|
<a itemprop="item" href="#" class="flex items-center hover:text-blue-300 transition-colors group"> |
|
|
<span class="w-6 h-6 bg-blue-600/30 rounded-full flex items-center justify-center mr-2 group-hover:bg-blue-600/50 transition-colors"> |
|
|
<i class="fas fa-database text-xs text-blue-300"></i> |
|
|
</span> |
|
|
<span itemprop="name">Análise de Dados</span> |
|
|
</a> |
|
|
<meta itemprop="position" content="1" /> |
|
|
</li> |
|
|
<span class="mx-2 opacity-50"><i class="fas fa-chevron-right"></i></span> |
|
|
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> |
|
|
<a itemprop="item" href="#" class="flex items-center hover:text-purple-300 transition-colors group"> |
|
|
<span class="w-6 h-6 bg-purple-600/30 rounded-full flex items-center justify-center mr-2 group-hover:bg-purple-600/50 transition-colors"> |
|
|
<i class="fas fa-project-diagram text-xs text-purple-300"></i> |
|
|
</span> |
|
|
<span itemprop="name">Matriz de Confusão</span> |
|
|
</a> |
|
|
<meta itemprop="position" content="2" /> |
|
|
</li> |
|
|
</ol> |
|
|
</div> |
|
|
|
|
|
<div class="form-container mt-8"> |
|
|
|
|
|
<h2 class="text-3xl font-bold text-center bg-gradient-to-r from-blue-100 to-purple-100 bg-clip-text text-transparent mb-8 flex items-center justify-center"> |
|
|
<i class="fas fa-edit mr-3 text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-400"></i>Entrada de Dados |
|
|
</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
|
|
|
|
|
<div class="true-positive"> |
|
|
<div class="input-group"> |
|
|
<label for="confusion_matrix_tp">Positivo Verdadeiro (PV)</label> |
|
|
<div class="relative"> |
|
|
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none"> |
|
|
<i class="fas fa-check-circle text-green-400"></i> |
|
|
</div> |
|
|
<input type="text" id="confusion_matrix_tp" name="tp" value="70" |
|
|
class="pl-12 pr-4 py-3 bg-gray-700/80 border border-gray-500 rounded-xl focus:ring-4 focus:ring-green-500/30 transition-all duration-200 w-full" |
|
|
spellcheck="false" /> |
|
|
</div> |
|
|
</div> |
|
|
<p class="info mt-2 ml-2"> |
|
|
<i class="fas fa-info-circle"></i> |
|
|
<span><strong>PV (Positivo Verdadeiro):</strong> casos corretamente identificados como positivos.</span> |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="false-positive"> |
|
|
<div class="input-group"> |
|
|
<label for="confusion_matrix_fp">Falso Positivo (FP)</label> |
|
|
<div class="relative"> |
|
|
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none"> |
|
|
<i class="fas fa-exclamation-triangle text-yellow-400"></i> |
|
|
</div> |
|
|
<input type="text" id="confusion_matrix_fp" name="fp" value="5" |
|
|
class="pl-12 pr-4 py-3 bg-gray-700/80 border border-gray-500 rounded-xl focus:ring-4 focus:ring-yellow-500/30 transition-all duration-200 w-full" |
|
|
spellcheck="false" /> |
|
|
</div> |
|
|
</div> |
|
|
<p class="info mt-2 ml-2"> |
|
|
<i class="fas fa-info-circle"></i> |
|
|
<span><strong>FP (Falso Positivo):</strong> casos negativos erroneamente classificados como positivos (Erro Tipo I).</span> |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="true-negative"> |
|
|
<div class="input-group"> |
|
|
<label for="confusion_matrix_tn">Negativo Verdadeiro (NV)</label> |
|
|
<div class="relative"> |
|
|
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none"> |
|
|
<i class="fas fa-check-circle text-blue-400"></i> |
|
|
</div> |
|
|
<input type="text" id="confusion_matrix_tn" name="tn" value="15" |
|
|
class="pl-12 pr-4 py-3 bg-gray-700/80 border border-gray-500 rounded-xl focus:ring-4 focus:ring-blue-500/30 transition-all duration-200 w-full" |
|
|
spellcheck="false" /> |
|
|
</div> |
|
|
</div> |
|
|
<p class="info mt-2 ml-2"> |
|
|
<i class="fas fa-info-circle"></i> |
|
|
<span><strong>NV (Negativo Verdadeiro):</strong> casos corretamente identificados como negativos.</span> |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="false-negative"> |
|
|
<div class="input-group"> |
|
|
<label for="confusion_matrix_fn">Falso Negativo (FN)</label> |
|
|
<div class="relative"> |
|
|
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none"> |
|
|
<i class="fas fa-times-circle text-red-400"></i> |
|
|
</div> |
|
|
<input type="text" id="confusion_matrix_fn" name="fn" value="10" |
|
|
class="pl-12 pr-4 py-3 bg-gray-700/80 border border-gray-500 rounded-xl focus:ring-4 focus:ring-red-500/30 transition-all duration-200 w-full" |
|
|
spellcheck="false" /> |
|
|
</div> |
|
|
</div> |
|
|
<p class="info mt-2 ml-2"> |
|
|
<i class="fas fa-info-circle"></i> |
|
|
<span><strong>FN (Falso Negativo):</strong> casos positivos erroneamente classificados como negativos (Erro Tipo II).</span> |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="text-center mt-10"> |
|
|
<button type="button" id="analyzeBtn" class="group"> |
|
|
<i class="fas fa-magic mr-3 transform group-hover:rotate-12 transition-transform"></i> |
|
|
<span class="uppercase font-semibold tracking-wide">Gerar Análise</span> |
|
|
<i class="fas fa-wand-sparkles ml-2 transform group-hover:scale-110 transition-transform"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="cf mt-8 text-center border-t border-gray-700/50 pt-6"> |
|
|
<span class="opacity-80 block mb-4">Aprofunde sua análise com:</span> |
|
|
<div class="flex flex-wrap justify-center gap-4"> |
|
|
<a href="#" class="hover:text-blue-300 transition-all duration-300 inline-flex items-center bg-blue-600/20 hover:bg-blue-600/30 px-4 py-2 rounded-full border border-blue-500/20 hover:border-blue-500/40"> |
|
|
<i class="fas fa-chart-line mr-2"></i> Curva ROC |
|
|
</a> |
|
|
<a href="#" class="hover:text-purple-300 transition-all duration-300 inline-flex items-center bg-purple-600/20 hover:bg-purple-600/30 px-4 py-2 rounded-full border border-purple-500/20 hover:border-purple-500/40"> |
|
|
<i class="fas fa-fingerprint mr-2"></i> F1-Score |
|
|
</a> |
|
|
<a href="#" class="hover:text-green-300 transition-all duration-300 inline-flex items-center bg-green-600/20 hover:bg-green-600/30 px-4 py-2 rounded-full border border-green-500/20 hover:border-green-500/40"> |
|
|
<i class="fas fa-heartbeat mr-2"></i> Sensibilidade/Specificidade |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="matrixContainer" class="mt-12 hidden fade-in"> |
|
|
<h3 class="text-3xl font-bold text-center bg-gradient-to-r from-blue-100 to-purple-100 bg-clip-text text-transparent mb-8 flex items-center justify-center"> |
|
|
<i class="fas fa-th-large mr-3 text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-400"></i>Matriz de Confusão Visual |
|
|
</h3> |
|
|
<div class="flex justify-center"> |
|
|
<table class="matrix text-white text-center min-w-full max-w-2xl"> |
|
|
<thead class="bg-gradient-to-r from-gray-800 to-gray-800/90"> |
|
|
<tr> |
|
|
<th class="matrix-header" style="width: 25%;"></th> |
|
|
<th class="matrix-header" style="width: 37.5%;">Previsto: SIM</th> |
|
|
<th class="matrix-header" style="width: 37.5%;">Previsto: NÃO</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody> |
|
|
<tr> |
|
|
<td class="matrix-header">Real: SIM</td> |
|
|
<td id="cell_tp" class="matrix-cell text-3xl font-extrabold">PV</td> |
|
|
<td id="cell_fn" class="matrix-cell text-3xl font-extrabold">FN</td> |
|
|
</tr> |
|
|
<tr> |
|
|
<td class="matrix-header">Real: NÃO</td> |
|
|
<td id="cell_fp" class="matrix-cell text-3xl font-extrabold">FP</td> |
|
|
<td id="cell_tn" class="matrix-cell text-3xl font-extrabold">NV</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="metricsContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mt-12 hidden fade-in"> |
|
|
<div class="tooltip metric-card group"> |
|
|
<div class="metric-title">ACURÁCIA</div> |
|
|
<div id="accuracy" class="metric-value">--</div> |
|
|
<div class="tooltiptext">Proporção geral de acertos. (PV + NV) / Total</div> |
|
|
</div> |
|
|
<div class="tooltip metric-card group"> |
|
|
<div class="metric-title">PRECISÃO</div> |
|
|
<div id="precision" class="metric-value">--</div> |
|
|
<div class="tooltiptext">Qualidade das previsões positivas. PV / (PV + FP)</div> |
|
|
</div> |
|
|
<div class="tooltip metric-card group"> |
|
|
<div class="metric-title">SENSIBILIDADE</div> |
|
|
<div id="recall" class="metric-value">--</div> |
|
|
<div class="tooltiptext">Capacidade de detectar positivos. PV / (PV + FN)</div> |
|
|
</div> |
|
|
<div class="tooltip metric-card group"> |
|
|
<div class="metric-title">ESPECIFICIDADE</div> |
|
|
<div id="specificity" class="metric-value">--</div> |
|
|
<div class="tooltiptext">Capacidade de detectar negativos. NV / (NV + FP)</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="insightsContainer" class="mt-10 hidden fade-in"> |
|
|
<h3 class="text-2xl font-bold text-center bg-gradient-to-r from-green-100 to-blue-100 bg-clip-text text-transparent mb-6"> |
|
|
<i class="fas fa-chart-pie mr-3"></i>Insights do Modelo |
|
|
</h3> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
<div class="bg-gradient-to-br from-green-900/30 to-green-800/30 p-5 rounded-xl border border-green-700/30"> |
|
|
<h4 class="font-bold text-green-300 mb-3 flex items-center"> |
|
|
<i class="fas fa-check-circle mr-3"></i> Forças do Modelo |
|
|
</h4> |
|
|
<ul id="strengths" class="text-gray-200 text-sm space-y-2 ml-2"></ul> |
|
|
</div> |
|
|
<div class="bg-gradient-to-br from-orange-900/30 to-orange-800/30 p-5 rounded-xl border border-orange-700/30"> |
|
|
<h4 class="font-bold text-orange-300 mb-3 flex items-center"> |
|
|
<i class="fas fa-exclamation-triangle mr-3"></i> Áreas de Melhoria |
|
|
</h4> |
|
|
<ul id="improvements" class="text-gray-200 text-sm space-y-2 ml-2"></ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="instructions mt-14"> |
|
|
<h3><i class="fas fa-lightbulb mr-3 text-yellow-400"></i>Guia de Utilização</h3> |
|
|
<ul> |
|
|
<li><strong>PV (Positivo Verdadeiro):</strong> Casos que são positivos e foram corretamente identificados como positivos pelo modelo.</li> |
|
|
<li><strong>FP (Falso Positivo):</strong> Casos que são negativos mas foram erroneamente classificados como positivos (Alarme falso).</li> |
|
|
<li><strong>NV (Negativo Verdadeiro):</strong> Casos que são negativos e foram corretamente identificados como negativos pelo modelo.</li> |
|
|
<li><strong>FN (Falso Negativo):</strong> Casos que são positivos mas foram erroneamente classificados como negativos (Erro grave).</li> |
|
|
</ul> |
|
|
<p class="mt-4">Após preencher os valores, clique em <strong class="text-blue-300">"Gerar Análise"</strong> para visualizar a matriz e as métricas de desempenho do seu modelo.</p> |
|
|
<div class="mt-5 p-4 bg-blue-900/30 rounded-lg border border-blue-800/40"> |
|
|
<p class="flex items-start"> |
|
|
<i class="fas fa-star text-yellow-400 mr-3 mt-1"></i> <strong>Dica Profissional:</strong> Priorize a redução de Falsos Negativos em aplicações médicas ou de segurança, mesmo que isso aumente os Falsos Positivos. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
<footer class="mt-20"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<p class="mb-4 md:mb-0"> |
|
|
© 2023 Matriz de Confusão | Feito com |
|
|
<i class="fas fa-heart text-red-500 mx-1"></i> |
|
|
para cientistas de dados e estudantes |
|
|
</p> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="text-gray-400 hover:text-blue-300 transition-colors"> |
|
|
<i class="fab fa-github text-xl"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-blue-300 transition-colors"> |
|
|
<i class="fab fa-linkedin text-xl"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-blue-300 transition-colors"> |
|
|
<i class="fab fa-twitter text-xl"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-6 text-gray-500 text-xs"> |
|
|
<p>Para fins educacionais e análise de modelos de classificação binária</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
document.getElementById('analyzeBtn').addEventListener('click', function () { |
|
|
|
|
|
const tp = parseFloat(document.getElementById('confusion_matrix_tp').value) || 0; |
|
|
const fp = parseFloat(document.getElementById('confusion_matrix_fp').value) || 0; |
|
|
const tn = parseFloat(document.getElementById('confusion_matrix_tn').value) || 0; |
|
|
const fn = parseFloat(document.getElementById('confusion_matrix_fn').value) || 0; |
|
|
|
|
|
|
|
|
document.getElementById('cell_tp').textContent = tp; |
|
|
document.getElementById('cell_fp').textContent = fp; |
|
|
document.getElementById('cell_tn').textContent = tn; |
|
|
document.getElementById('cell_fn').textContent = fn; |
|
|
|
|
|
|
|
|
const matrixContainer = document.getElementById('matrixContainer'); |
|
|
const metricsContainer = document.getElementById('metricsContainer'); |
|
|
const insightsContainer = document.getElementById('insightsContainer'); |
|
|
|
|
|
matrixContainer.classList.remove('hidden'); |
|
|
metricsContainer.classList.remove('hidden'); |
|
|
insightsContainer.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
void matrixContainer.offsetWidth; |
|
|
matrixContainer.classList.add('fade-in'); |
|
|
metricsContainer.classList.add('fade-in'); |
|
|
insightsContainer.classList.add('fade-in'); |
|
|
|
|
|
|
|
|
const total = tp + fp + tn + fn; |
|
|
const accuracy = total > 0 ? (tp + tn) / total : 0; |
|
|
const precision = (tp + fp) > 0 ? tp / (tp + fp) : 0; |
|
|
const recall = (tp + fn) > 0 ? tp / (tp + fn) : 0; |
|
|
const specificity = (tn + fp) > 0 ? tn / (tn + fp) : 0; |
|
|
|
|
|
|
|
|
document.getElementById('accuracy').textContent = accuracy.toFixed(3); |
|
|
document.getElementById('precision').textContent = precision.toFixed(3); |
|
|
document.getElementById('recall').textContent = recall.toFixed(3); |
|
|
document.getElementById('specificity').textContent = specificity.toFixed(3); |
|
|
|
|
|
|
|
|
const strengthsList = document.getElementById('strengths'); |
|
|
const improvementsList = document.getElementById('improvements'); |
|
|
|
|
|
|
|
|
strengthsList.innerHTML = ''; |
|
|
improvementsList.innerHTML = ''; |
|
|
|
|
|
|
|
|
if (accuracy > 0.85) { |
|
|
const li = document.createElement('li'); |
|
|
li.innerHTML = '<i class="fas fa-check text-green-400 mr-2"></i> Modelo com alta acurácia geral'; |
|
|
strengthsList.appendChild(li); |
|
|
} else { |
|
|
const li = document.createElement('li'); |
|
|
li.innerHTML = '<i class="fas fa-arrow-down text-orange-400 mr-2"></i> Acurácia pode ser melhorada'; |
|
|
improvementsList.appendChild(li); |
|
|
} |
|
|
|
|
|
if (recall > 0.8) { |
|
|
const li = document.createElement('li'); |
|
|
li.innerHTML = '<i class="fas fa-check text-green-400 mr-2"></i> Boa detecção de casos positivos'; |
|
|
strengthsList.appendChild(li); |
|
|
} else { |
|
|
const li = document.createElement('li'); |
|
|
li.innerHTML = '<i class="fas fa-arrow-down text-orange-400 mr-2"></i> Poucos casos positivos estão sendo identificados'; |
|
|
improvementsList.appendChild(li); |
|
|
} |
|
|
|
|
|
if (specificity > 0.8) { |
|
|
const li = document.createElement('li'); |
|
|
li.innerHTML = '<i class="fas fa-check text-green-400 mr-2"></i> Boa detecção de casos negativos'; |
|
|
strengthsList.appendChild(li); |
|
|
} else { |
|
|
const li = document.createElement('li'); |
|
|
li.innerHTML = '<i class="fas fa-arrow-down text-orange-400 mr-2"></i> Muitos casos negativos estão sendo mal classificados'; |
|
|
improvementsList.appendChild(li); |
|
|
} |
|
|
|
|
|
if (precision > 0.8) { |
|
|
const li = document.createElement('li'); |
|
|
li.innerHTML = '<i class="fas fa-check text-green-400 mr-2"></i> Alta confiança nas previsões positivas'; |
|
|
strengthsList.appendChild(li); |
|
|
} else { |
|
|
const li = document.createElement('li'); |
|
|
li.innerHTML = '<i class="fas fa-arrow-down text-orange-400 mr-2"></i> Muitos falsos positivos reduzem a confiança'; |
|
|
improvementsList.appendChild(li); |
|
|
} |
|
|
|
|
|
|
|
|
if (strengthsList.children.length === 0) { |
|
|
const li = document.createElement('li'); |
|
|
li.innerHTML = '<i class="fas fa-check text-green-400 mr-2"></i> Modelo apresentando desempenho básico'; |
|
|
strengthsList.appendChild(li); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const cells = document.querySelectorAll('.matrix-cell'); |
|
|
cells.forEach(cell => { |
|
|
cell.addEventListener('mouseenter', function() { |
|
|
this.style.transform = 'scale(1.1) translateY(-5px)'; |
|
|
}); |
|
|
|
|
|
cell.addEventListener('mouseleave', function() { |
|
|
this.style.transform = 'scale(1) translateY(0)'; |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-qwensite.hf.space/logo.svg" alt="qwensite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-qwensite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >QwenSite</a> - 🧬 <a href="https://enzostvs-qwensite.hf.space?remix=alexandremoraisdarosa/matriz-confusao" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
