Add 2 files

index.html

@@ -6,101 +6,181 @@
   <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=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
   <style>
     body {
-      background-color: #ffffff;
-      color: #000000;
-      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+      background: linear-gradient(135deg, #000000 0%, #001833 100%);
+      color: #ffffff;
+      font-family: 'Inter', sans-serif;
+      background-attachment: fixed;
     }
     #center {
-      @apply max-w-4xl mx-auto p-6 bg-blue-950 rounded-lg shadow-xl text-white mt-8;
+      @apply max-w-6xl mx-auto p-8 bg-blue-950/30 backdrop-blur-lg rounded-2xl shadow-2xl text-white mt-10 border border-blue-800/30;
     }
     #title {
-      @apply text-4xl font-extrabold text-center mb-2 text-white;
-      text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
+      @apply text-5xl font-extrabold text-center mb-2 bg-gradient-to-r from-white to-blue-200 bg-clip-text text-transparent;
+      text-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
     }
     #breadcrumps ol {
-      @apply flex text-sm mb-6 space-x-2 text-gray-300;
+      @apply flex text-sm mb-8 space-x-2 text-gray-300;
+      list-style: none;
     }
     #breadcrumps a {
-      @apply hover:text-white transition-colors;
+      @apply hover:text-white 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;
+      @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-medium;
+      @apply block mt-2 text-white font-semibold;
     }
     input[type="text"] {
-      @apply border border-gray-600 rounded px-3 py-1 bg-gray-800 text-white focus:outline-none focus:ring-2 focus:ring-blue-500;
+      @apply border border-gray-600 rounded-lg px-4 py-2 bg-gray-800/70 text-white focus:outline-none focus:ring-3 focus:ring-blue-500 transition-all duration-200 w-full;
     }
     button {
-      @apply mt-4 bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded transition-colors duration-200 shadow-md;
-    }
-    button:hover {
-      @apply transform scale-105;
+      @apply mt-6 bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white font-bold py-3 px-8 rounded-xl transition-all duration-300 shadow-lg hover:shadow-xl transform hover:scale-105;
     }
     .cf {
-      @apply mt-4 text-sm text-gray-400;
+      @apply mt-6 text-sm text-gray-400;
     }
     .cf a {
-      @apply text-blue-300 hover:underline;
+      @apply text-blue-300 hover:underline hover:text-blue-200 transition-colors;
     }
     .matrix {
-      @apply mt-6 grid grid-cols-2 gap-0 border border-gray-500 text-center text-lg font-bold;
-      box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.1);
+      @apply mt-8 w-full border border-blue-700 rounded-lg overflow-hidden;
+      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
     }
-    .matrix-cell {
-      @apply p-4 border border-gray-600 flex flex-col justify-center items-center;
+    .matrix th, .matrix td {
+      @apply p-4;
     }
     .matrix-header {
-      @apply bg-gray-800 text-white py-2 font-semibold;
+      @apply bg-blue-900/80 text-white text-center font-bold text-base uppercase tracking-wider;
+    }
+    .matrix-cell {
+      @apply text-center font-bold text-lg relative;
+      transition: all 0.3s ease;
+    }
+    .matrix-cell:hover {
+      @apply transform scale-105 z-10;
     }
+    #cell_tp { @apply bg-green-900/40 text-green-100; }
+    #cell_fp { @apply bg-yellow-900/40 text-yellow-100; }
+    #cell_tn { @apply bg-blue-900/40 text-blue-100; }
+    #cell_fn { @apply bg-red-900/40 text-red-100; }
     .metric-card {
-      @apply mt-6 p-4 bg-gray-800 rounded-lg shadow border border-gray-700;
+      @apply p-6 bg-gradient-to-b from-gray-900/80 to-gray-800/80 backdrop-blur-sm rounded-xl shadow-lg border border-gray-700/50 text-center transition-all duration-300 hover:shadow-xl;
     }
     .metric-title {
-      @apply font-bold text-blue-300 text-sm uppercase tracking-wider;
+      @apply font-bold text-blue-300 text-sm uppercase tracking-widest mb-2 opacity-90;
     }
     .metric-value {
-      @apply text-2xl font-extrabold text-white;
+      @apply text-3xl md:text-4xl font-extrabold bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent;
     }
     .instructions {
-      @apply mt-8 p-5 bg-gray-800 rounded-lg text-gray-200 text-sm leading-relaxed border border-gray-700;
+      @apply mt-10 p-6 bg-black/30 rounded-xl text-gray-200 text-sm leading-relaxed border border-gray-700/50;
     }
     .instructions h3 {
-      @apply font-bold text-white text-lg mb-2;
+      @apply flex items-center font-bold text-white text-lg mb-3;
     }
     .instructions ul {
-      @apply list-disc list-inside ml-4 space-y-1 mb-3;
+      @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: 220px;
+      background-color: #1e293b;
+      color: #e2e8f0;
+      text-align: center;
+      border-radius: 6px;
+      padding: 8px;
+      position: absolute;
+      z-index: 1;
+      bottom: 125%;
+      left: 50%;
+      margin-left: -110px;
+      opacity: 0;
+      transition: opacity 0.3s;
+      font-size: 14px;
+      border: 1px solid #334155;
+      box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+    }
+    .tooltip .tooltiptext::after {
+      content: "";
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      margin-left: -5px;
+      border-width: 5px;
+      border-style: solid;
+      border-color: #1e293b transparent transparent transparent;
+    }
+    .tooltip:hover .tooltiptext {
+      visibility: visible;
+      opacity: 1;
+    }
+    footer {
+      @apply bg-blue-950/30 backdrop-blur-sm text-gray-400 py-6 text-center text-sm mt-16 border-t border-blue-800/30;
+    }
+    .fade-in {
+      animation: fadeIn 0.6s ease-in-out;
+    }
+    @keyframes fadeIn {
+      from { opacity: 0; transform: translateY(10px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    .form-row {
+      @apply mb-6;
+    }
+    .form-container {
+      @apply bg-gradient-to-br from-gray-900/50 to-gray-800/50 p-8 rounded-2xl shadow-xl border border-gray-700/50;
     }
   </style>
 </head>
-<body class="bg-white text-black">
+<body class="bg-black text-white">
 
   <!-- Header -->
-  <header class="bg-blue-950 text-white py-6 shadow-md">
+  <header class="bg-blue-950/80 backdrop-blur-sm text-white py-8 shadow-lg">
     <div class="container mx-auto text-center">
-      <h1 class="text-3xl font-bold"><i class="fas fa-project-diagram mr-2"></i>Aplicativo de Matriz de Confusão</h1>
-      <p class="mt-2 text-blue-200">Analise o desempenho do seu modelo de classificação com precisão</p>
+      <h1 class="text-4xl font-bold"><i class="fas fa-project-diagram mr-3"></i>Aplicativo de Matriz de Confusão</h1>
+      <p class="mt-3 text-blue-200 text-lg max-w-3xl mx-auto leading-relaxed">
+        Analise o desempenho do seu modelo de classificação com precisão e facilidade. Insira os valores e obtenha métricas essenciais em segundos.
+      </p>
     </div>
   </header>
 
   <!-- Main Content -->
-  <div id="center" class="transition-all duration-300 ease-in-out">
+  <div id="center" class="transition-all duration-500 ease-in-out">
     
     <!-- Breadcrumb -->
-    <div id="breadcrumps">
-      <ol itemscope itemtype="http://schema.org/BreadcrumbList" class="flex">
+    <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">
+          <a itemprop="item" href="#" class="flex items-center hover:text-blue-300 transition-colors">
+            <i class="fas fa-database mr-1"></i>
             <span itemprop="name">Processamento de Dados</span>
           </a>
           <meta itemprop="position" content="1" />
         </li>
-        <span class="mx-2">›</span>
+        <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">
+          <a itemprop="item" href="#" class="flex items-center hover:text-blue-300 transition-colors">
+            <i class="fas fa-project-diagram mr-1"></i>
             <span itemprop="name">Matriz de Confusão</span>
           </a>
           <meta itemprop="position" content="2" />
@@ -108,77 +188,98 @@
       </ol>
     </div>
 
-    <!-- Confusion Matrix Form -->
-    <h2 class="h2_form text-2xl font-bold text-white mb-4">Matriz de Confusão</h2>
-    <form id="confusion_matrix" method="post" class="bg-gray-900 p-6 rounded-lg shadow-inner">
+    <div class="form-container mt-8">
+      <!-- Confusion Matrix Form -->
+      <h2 class="h2_form text-3xl font-bold text-center text-white mb-6 flex items-center justify-center">
+        <i class="fas fa-edit mr-3"></i>Entrada de Dados
+      </h2>
 
-      <!-- True Positive -->
-      <p class="info">
-        <i class="fas fa-check-circle text-green-400 mr-1"></i>
-        Positivo Verdadeiro (PV): item declarado VERDADEIRO, e na realidade VERDADEIRO
-      </p>
-      <label for="confusion_matrix_tp">Número de Positivos Verdadeiros (PV)</label>
-      <input type="text" id="confusion_matrix_tp" name="tp" value="70" size="8" spellcheck="false" class="w-full" />
-      
-      <!-- False Positive -->
-      <p class="info mt-4">
-        <i class="fas fa-exclamation-triangle text-yellow-400 mr-1"></i>
-        Falso Positivo (FP) ou Erro Tipo I: item declarado VERDADEIRO mas na realidade FALSO
-      </p>
-      <label for="confusion_matrix_fp">Número de Falsos Positivos (FP)</label>
-      <input type="text" id="confusion_matrix_fp" name="fp" value="5" size="8" spellcheck="false" class="w-full" />
-      
-      <!-- True Negative -->
-      <p class="info mt-4">
-        <i class="fas fa-check-circle text-green-400 mr-1"></i>
-        Negativo Verdadeiro (NV): item declarado FALSO, e na realidade FALSO
-      </p>
-      <label for="confusion_matrix_tn">Número de Negativos Verdadeiros (NV)</label>
-      <input type="text" id="confusion_matrix_tn" name="tn" value="15" size="8" spellcheck="false" class="w-full" />
-      
-      <!-- False Negative -->
-      <p class="info mt-4">
-        <i class="fas fa-times-circle text-red-400 mr-1"></i>
-        Falso Negativo (FN) ou Erro Tipo II: item declarado FALSO mas na realidade VERDADEIRO
-      </p>
-      <label for="confusion_matrix_fn">Número de Falsos Negativos (FN)</label>
-      <input type="text" id="confusion_matrix_fn" name="fn" value="10" size="8" spellcheck="false" class="w-full" />
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+        <!-- True Positive -->
+        <div class="true-positive">
+          <p class="info">
+            <i class="fas fa-check-circle"></i>
+            <span><strong>Positivo Verdadeiro (PV):</strong> itens corretamente previstos como positivos (verdadeiros positivos).</span>
+          </p>
+          <label for="confusion_matrix_tp"><i class="fas fa-check-circle text-green-400 mr-2"></i>PV (VERDADEIRO POSITIVO)</label>
+          <input type="text" id="confusion_matrix_tp" name="tp" value="70" size="8" spellcheck="false" class="mt-1" />
+        </div>
+        
+        <!-- False Positive -->
+        <div class="false-positive">
+          <p class="info">
+            <i class="fas fa-exclamation-triangle"></i>
+            <span><strong>Falso Positivo (FP):</strong> itens negativos classificados incorretamente como positivos (Erro Tipo I).</span>
+          </p>
+          <label for="confusion_matrix_fp"><i class="fas fa-exclamation-triangle text-yellow-400 mr-2"></i>FP (FALSO POSITIVO)</label>
+          <input type="text" id="confusion_matrix_fp" name="fp" value="5" size="8" spellcheck="false" class="mt-1" />
+        </div>
+        
+        <!-- True Negative -->
+        <div class="true-negative">
+          <p class="info">
+            <i class="fas fa-check-circle"></i>
+            <span><strong>Negativo Verdadeiro (NV):</strong> itens corretamente previstos como negativos (verdadeiros negativos).</span>
+          </p>
+          <label for="confusion_matrix_tn"><i class="fas fa-check-circle text-blue-400 mr-2"></i>NV (VERDADEIRO NEGATIVO)</label>
+          <input type="text" id="confusion_matrix_tn" name="tn" value="15" size="8" spellcheck="false" class="mt-1" />
+        </div>
+        
+        <!-- False Negative -->
+        <div class="false-negative">
+          <p class="info">
+            <i class="fas fa-times-circle"></i>
+            <span><strong>Falso Negativo (FN):</strong> itens positivos classificados incorretamente como negativos (Erro Tipo II).</span>
+          </p>
+          <label for="confusion_matrix_fn"><i class="fas fa-times-circle text-red-400 mr-2"></i>FN (FALSO NEGATIVO)</label>
+          <input type="text" id="confusion_matrix_fn" name="fn" value="10" size="8" spellcheck="false" class="mt-1" />
+        </div>
+      </div>
 
       <!-- Analyze Button -->
-      <button type="button" id="analyzeBtn" class="mt-6 flex items-center justify-center">
-        <i class="fas fa-calculator mr-2"></i> Analisar
-      </button>
+      <div class="text-center mt-8">
+        <button type="button" id="analyzeBtn" class="flex items-center justify-center mx-auto">
+          <i class="fas fa-calculator mr-3"></i> <span class="uppercase font-semibold">Analisar Resultados</span>
+        </button>
+      </div>
 
       <!-- Related Tools -->
-      <div class="cf mt-6 text-center">
-        <span>Consulte também:</span> 
-        <a href="#" class="ml-1">Precisão e Revocação</a> — 
-        <a href="#" class="ml-1">Sensibilidade e Especificidade</a>
+      <div class="cf mt-8 text-center">
+        <span class="opacity-80">Explore também:</span> 
+        <a href="#" class="ml-2 hover:text-blue-300 transition-colors inline-flex items-center">
+          <i class="fas fa-chart-line mr-1"></i> Precisão e Revocação
+        </a> 
+        <span class="mx-2 opacity-50">|</span>
+        <a href="#" class="hover:text-blue-300 transition-colors inline-flex items-center">
+          <i class="fas fa-heartbeat mr-1"></i> Sensibilidade e Especificidade
+        </a>
       </div>
-    </form>
+    </div>
 
     <!-- Confusion Matrix Display -->
-    <div id="matrixContainer" class="mt-8 hidden">
-      <h3 class="text-xl font-bold text-center text-white mb-4">Matriz de Confusão</h3>
+    <div id="matrixContainer" class="mt-12 hidden fade-in">
+      <h3 class="text-2xl font-bold text-center text-white mb-6 flex items-center justify-center">
+        <i class="fas fa-th-large mr-3"></i>Matriz de Confusão
+      </h3>
       <div class="flex justify-center">
-        <table class="matrix border-collapse text-white text-center">
-          <thead>
+        <table class="matrix text-white text-center min-w-full max-w-2xl">
+          <thead class="bg-gradient-to-r from-gray-900 to-gray-800">
             <tr>
-              <th class="matrix-header"></th>
-              <th class="matrix-header">Previsto: Sim</th>
-              <th class="matrix-header">Previsto: Não</th>
+              <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 bg-green-900/50">PV</td>
-              <td id="cell_fn" class="matrix-cell bg-red-900/50">FN</td>
+            <tr class="bg-gradient-to-r from-gray-900/50 to-gray-950/50">
+              <td class="matrix-header">Real: SIM</td>
+              <td id="cell_tp" class="matrix-cell text-2xl">PV</td>
+              <td id="cell_fn" class="matrix-cell text-2xl">FN</td>
             </tr>
-            <tr>
-              <td class="matrix-header">Real: Não</td>
-              <td id="cell_fp" class="matrix-cell bg-yellow-900/50">FP</td>
-              <td id="cell_tn" class="matrix-cell bg-blue-900/50">NV</td>
+            <tr class="bg-gradient-to-r from-gray-800/50 to-gray-900/50">
+              <td class="matrix-header">Real: NÃO</td>
+              <td id="cell_fp" class="matrix-cell text-2xl">FP</td>
+              <td id="cell_tn" class="matrix-cell text-2xl">NV</td>
             </tr>
           </tbody>
         </table>
@@ -186,43 +287,47 @@
     </div>
 
     <!-- Metrics Display -->
-    <div id="metricsContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mt-6 hidden">
-      <div class="metric-card">
+    <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">
         <div class="metric-title">Acurácia</div>
         <div id="accuracy" class="metric-value">--</div>
+        <div class="tooltiptext">Proporção de previsões corretas (PV + NV) / Total</div>
       </div>
-      <div class="metric-card">
+      <div class="tooltip metric-card">
         <div class="metric-title">Precisão (PV)</div>
         <div id="precision" class="metric-value">--</div>
+        <div class="tooltiptext">Entre os classificados como positivos, quantos são realmente positivos? (PV / (PV+FP))</div>
       </div>
-      <div class="metric-card">
+      <div class="tooltip metric-card">
         <div class="metric-title">Sensibilidade</div>
         <div id="recall" class="metric-value">--</div>
+        <div class="tooltiptext">Capacidade de identificar positivos: PV / (PV+FN)</div>
       </div>
-      <div class="metric-card">
+      <div class="tooltip metric-card">
         <div class="metric-title">Especificidade</div>
         <div id="specificity" class="metric-value">--</div>
+        <div class="tooltiptext">Capacidade de identificar negativos: NV / (NV+FP)</div>
       </div>
     </div>
 
     <!-- Instructions -->
-    <div class="instructions mt-8">
-      <h3><i class="fas fa-lightbulb mr-2"></i>Instruções de Uso</h3>
+    <div class="instructions mt-14">
+      <h3><i class="fas fa-lightbulb mr-3"></i>Instruções de Uso</h3>
       <ul>
-        <li><strong>PV (Positivo Verdadeiro):</strong> Quantidade de instâncias corretamente classificadas como positivas.</li>
-        <li><strong>FP (Falso Positivo):</strong> Quantidade de instâncias negativas classificadas incorretamente como positivas (Erro Tipo I).</li>
-        <li><strong>NV (Negativo Verdadeiro):</strong> Quantidade de instâncias corretamente classificadas como negativas.</li>
-        <li><strong>FN (Falso Negativo):</strong> Quantidade de instâncias positivas classificadas incorretamente como negativas (Erro Tipo II).</li>
+        <li><strong>PV (Positivo Verdadeiro):</strong> Instâncias que são positivas e foram classificadas corretamente como positivas.</li>
+        <li><strong>FP (Falso Positivo):</strong> Instâncias que são negativas mas foram classificadas erradamente como positivas.</li>
+        <li><strong>NV (Negativo Verdadeiro):</strong> Instâncias que são negativas e foram classificadas corretamente como negativas.</li>
+        <li><strong>FN (Falso Negativo):</strong> Instâncias que são positivas mas foram classificadas erradamente como negativas.</li>
       </ul>
-      <p>Após preencher os valores, clique em <strong>Analisar</strong> para gerar a matriz e visualizar métricas de desempenho do modelo.</p>
-      <p class="mt-2"><i class="fas fa-info-circle text-blue-400 mr-1"></i> Este aplicativo é ideal para cientistas de dados, analistas e estudantes que desejam avaliar modelos de classificação binária.</p>
+      <p>Após preencher os valores, clique em <strong class="text-blue-300">"Analisar Resultados"</strong> para gerar a matriz e visualizar as métricas de desempenho do modelo.</p>
+      <p class="mt-4"><i class="fas fa-star text-yellow-400 mr-2"></i> <strong>Dica:</strong> Valores devem ser números inteiros positivos. Use esse aplicativo para avaliações rápidas ou aprendizado!</p>
     </div>
 
   </div>
 
   <!-- Footer -->
-  <footer class="bg-blue-950 text-gray-400 py-4 text-center text-sm mt-12">
-    <p>© 2023 Aplicativo de Matriz de Confusão | Desenvolvido para análise de modelos de classificação</p>
+  <footer class="mt-16">
+    <p>© 2023 Matriz de Confusão | Feito com <i class="fas fa-heart text-red-500"></i> para cientistas de dados e estudantes</p>
   </footer>
 
   <script>
@@ -239,15 +344,24 @@
       document.getElementById('cell_tn').textContent = tn;
       document.getElementById('cell_fn').textContent = fn;
 
-      // Show matrix and metrics
-      document.getElementById('matrixContainer').classList.remove('hidden');
-      document.getElementById('metricsContainer').classList.remove('hidden');
+      // Show matrix and metrics with fade-in effect
+      const matrixContainer = document.getElementById('matrixContainer');
+      const metricsContainer = document.getElementById('metricsContainer');
+      matrixContainer.classList.remove('hidden');
+      metricsContainer.classList.remove('hidden');
+      matrixContainer.classList.add('fade-in');
+      metricsContainer.classList.add('fade-in');
+
+      // Force reflow to restart animation
+      void matrixContainer.offsetWidth;
+      void metricsContainer.offsetWidth;
 
       // Calculate metrics
-      const accuracy = (tp + tn) / (tp + fp + tn + fn);
-      const precision = tp / (tp + fp) || 0;
-      const recall = tp / (tp + fn) || 0; // also known as sensitivity
-      const specificity = tn / (tn + fp) || 0;
+      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; // also known as sensitivity
+      const specificity = (tn + fp) > 0 ? tn / (tn + fp) : 0;
 
       // Display metrics
       document.getElementById('accuracy').textContent = accuracy.toFixed(3);

prompts.txt

@@ -1 +1,2 @@
-Em português. Use as cores branca, preta e azul escuro. Crie um Aplicativo de Matriz de Confusão. Gere instruções de uso. Considere parte do código:  <!-- center --> <div id="center">  <h1 id="title">Confusion Matrix</h1> <div id="breadcrumps"><ol itemscope itemtype="http://schema.org/BreadcrumbList"><li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="https://www.dcode.fr/tools-list#data_processing"><span itemprop="name">Data Processing</span></a><meta itemprop="position" content="1" /></li><li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="https://www.dcode.fr/confusion-matrix"><span itemprop="name">Confusion Matrix</span></a><meta itemprop="position" content="2" /></li></ol></div> <!-- advert --> <div id='div-gpt-ad-1407836191040-0' style='min-width:320px;min-height:100px'></div> <!-- !advert --> <div id="forms"> <h2 class="h2_form" id="f0">Confusion Matrix</h2> <form id="confusion_matrix" method="post"> <p class="info">True Positive (TP) : item declared TRUE, and in reality TRUE</p> <label for="confusion_matrix_tp">Number of True Positive (TP)</label> <input type="text" id="confusion_matrix_tp" name="tp" value="70" size="8" spellcheck="false" class="" /><br/> <p class="info">False Positive (FP) or Type I error: item declared TRUE but in reality FALSE</p> <label for="confusion_matrix_fp">Number of False Positive (FP)</label> <input type="text" id="confusion_matrix_fp" name="fp" value="5" size="8" spellcheck="false" class="" /><br/> <p class="info">True Negative (TN): item declared FALSE, and in reality FALSE</p> <label for="confusion_matrix_tn">Number of True Negative (TN)</label> <input type="text" id="confusion_matrix_tn" name="tn" value="15" size="8" spellcheck="false" class="" /><br/> <p class="info">False Negative (FN) or Type II error: item declared FALSE but in reality TRUE</p> <label for="confusion_matrix_fn">Number of False Negative (FN)</label> <input type="text" id="confusion_matrix_fn" name="fn" value="10" size="8" spellcheck="false" class="" /><br/> <button data-post="tp,fp,tn,fn" post="tp,fp,tn,fn">Analyze</button> <div class="cf "><span>See also:</span> <a href="/precision-recall">Precision and Recall</a> — <a href="/sensibility-specificity">Sensitivity and Specificity</a></div> </form> </div> <!-- advert --> <div id='div-gpt-ad-1407836210596-0' style='min-width:336px;min-height:280px'></div>
+Em português. Use as cores branca, preta e azul escuro. Crie um Aplicativo de Matriz de Confusão. Gere instruções de uso. Considere parte do código:  <!-- center --> <div id="center">  <h1 id="title">Confusion Matrix</h1> <div id="breadcrumps"><ol itemscope itemtype="http://schema.org/BreadcrumbList"><li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="https://www.dcode.fr/tools-list#data_processing"><span itemprop="name">Data Processing</span></a><meta itemprop="position" content="1" /></li><li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="https://www.dcode.fr/confusion-matrix"><span itemprop="name">Confusion Matrix</span></a><meta itemprop="position" content="2" /></li></ol></div> <!-- advert --> <div id='div-gpt-ad-1407836191040-0' style='min-width:320px;min-height:100px'></div> <!-- !advert --> <div id="forms"> <h2 class="h2_form" id="f0">Confusion Matrix</h2> <form id="confusion_matrix" method="post"> <p class="info">True Positive (TP) : item declared TRUE, and in reality TRUE</p> <label for="confusion_matrix_tp">Number of True Positive (TP)</label> <input type="text" id="confusion_matrix_tp" name="tp" value="70" size="8" spellcheck="false" class="" /><br/> <p class="info">False Positive (FP) or Type I error: item declared TRUE but in reality FALSE</p> <label for="confusion_matrix_fp">Number of False Positive (FP)</label> <input type="text" id="confusion_matrix_fp" name="fp" value="5" size="8" spellcheck="false" class="" /><br/> <p class="info">True Negative (TN): item declared FALSE, and in reality FALSE</p> <label for="confusion_matrix_tn">Number of True Negative (TN)</label> <input type="text" id="confusion_matrix_tn" name="tn" value="15" size="8" spellcheck="false" class="" /><br/> <p class="info">False Negative (FN) or Type II error: item declared FALSE but in reality TRUE</p> <label for="confusion_matrix_fn">Number of False Negative (FN)</label> <input type="text" id="confusion_matrix_fn" name="fn" value="10" size="8" spellcheck="false" class="" /><br/> <button data-post="tp,fp,tn,fn" post="tp,fp,tn,fn">Analyze</button> <div class="cf "><span>See also:</span> <a href="/precision-recall">Precision and Recall</a> — <a href="/sensibility-specificity">Sensitivity and Specificity</a></div> </form> </div> <!-- advert --> <div id='div-gpt-ad-1407836210596-0' style='min-width:336px;min-height:280px'></div>
+Melhore o UX, tornando mais agradável e visual. Pode alterar as cores