Add 2 files

index.html

@@ -6,27 +6,27 @@
   <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">
+  <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, #000000 0%, #001833 100%);
-      color: #ffffff;
-      font-family: 'Inter', sans-serif;
+      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-blue-950/30 backdrop-blur-lg rounded-2xl shadow-2xl text-white mt-10 border border-blue-800/30;
+      @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-white to-blue-200 bg-clip-text text-transparent;
-      text-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
+      @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-white transition-all duration-300 flex items-center;
+      @apply hover:text-blue-300 transition-all duration-300 flex items-center;
     }
     #breadcrumps a:hover i {
       @apply text-blue-300;
@@ -45,49 +45,55 @@
       @apply block mt-2 text-white font-semibold;
     }
     input[type="text"] {
-      @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;
+      @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-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;
+      @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-6 text-sm text-gray-400;
+      @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-blue-700 rounded-lg overflow-hidden;
-      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+      @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-blue-900/80 text-white text-center font-bold text-base uppercase tracking-wider;
+      @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-lg relative;
+      @apply text-center font-bold text-2xl relative transition-all duration-300;
       transition: all 0.3s ease;
     }
     .matrix-cell:hover {
-      @apply transform scale-105 z-10;
+      @apply transform scale-110 z-10 cursor-pointer;
+      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
     }
-    #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; }
+    #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-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;
+      @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-3xl md:text-4xl font-extrabold bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent;
+      @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-black/30 rounded-xl text-gray-200 text-sm leading-relaxed border border-gray-700/50;
+      @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;
@@ -103,84 +109,175 @@
     }
     .tooltip .tooltiptext {
       visibility: hidden;
-      width: 220px;
+      width: 250px;
       background-color: #1e293b;
       color: #e2e8f0;
       text-align: center;
-      border-radius: 6px;
-      padding: 8px;
+      border-radius: 10px;
+      padding: 12px;
       position: absolute;
-      z-index: 1;
+      z-index: 10;
       bottom: 125%;
       left: 50%;
-      margin-left: -110px;
+      margin-left: -125px;
       opacity: 0;
-      transition: opacity 0.3s;
+      transition: opacity 0.3s, transform 0.3s;
       font-size: 14px;
       border: 1px solid #334155;
-      box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+      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: -5px;
-      border-width: 5px;
+      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-blue-950/30 backdrop-blur-sm text-gray-400 py-6 text-center text-sm mt-16 border-t border-blue-800/30;
+      @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.6s ease-in-out;
+      animation: fadeIn 0.8s ease-out;
     }
     @keyframes fadeIn {
-      from { opacity: 0; transform: translateY(10px); }
+      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-900/50 to-gray-800/50 p-8 rounded-2xl shadow-xl border border-gray-700/50;
+      @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;
+    }
+    /* Enhanced table styling */
+    .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;
+    }
+    /* Hover effects for table cells */
+    #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 elements */
+    .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); }
+    }
+    
+    /* Custom scrollbar */
+    ::-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-black text-white">
-
+<body class="bg-gray-900 text-gray-100 min-h-screen">
   <!-- Header -->
-  <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-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.
+  <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>
 
   <!-- Main Content -->
-  <div id="center" class="transition-all duration-500 ease-in-out">
+  <div id="center" class="transition-all duration-700 ease-in-out">
     
     <!-- Breadcrumb -->
     <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">
-            <i class="fas fa-database mr-1"></i>
-            <span itemprop="name">Processamento de Dados</span>
+          <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-blue-300 transition-colors">
-            <i class="fas fa-project-diagram mr-1"></i>
+          <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" />
@@ -190,80 +287,122 @@
 
     <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 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">
         <!-- 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>
+          <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>
-          <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>
+          <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>
-          <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>
+          <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>
-          <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>
+          <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>
-          <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 -->
-      <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>
+      <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>
 
       <!-- Related Tools -->
-      <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 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>
 
     <!-- Confusion Matrix Display -->
     <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 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-900 to-gray-800">
+          <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>
@@ -271,15 +410,15 @@
             </tr>
           </thead>
           <tbody>
-            <tr class="bg-gradient-to-r from-gray-900/50 to-gray-950/50">
+            <tr>
               <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>
+              <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 class="bg-gradient-to-r from-gray-800/50 to-gray-900/50">
+            <tr>
               <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>
+              <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>
@@ -288,46 +427,93 @@
 
     <!-- Metrics Display -->
     <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 class="tooltip metric-card group">
+        <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 class="tooltiptext">Proporção geral de acertos. (PV + NV) / Total</div>
       </div>
-      <div class="tooltip metric-card">
-        <div class="metric-title">Precisão (PV)</div>
+      <div class="tooltip metric-card group">
+        <div class="metric-title">PRECISÃO</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 class="tooltiptext">Qualidade das previsões positivas. PV / (PV + FP)</div>
       </div>
-      <div class="tooltip metric-card">
-        <div class="metric-title">Sensibilidade</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 identificar positivos: PV / (PV+FN)</div>
+        <div class="tooltiptext">Capacidade de detectar positivos. PV / (PV + FN)</div>
       </div>
-      <div class="tooltip metric-card">
-        <div class="metric-title">Especificidade</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 identificar negativos: NV / (NV+FP)</div>
+        <div class="tooltiptext">Capacidade de detectar negativos. NV / (NV + FP)</div>
+      </div>
+    </div>
+
+    <!-- Key Insights -->
+    <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>
 
     <!-- Instructions -->
     <div class="instructions mt-14">
-      <h3><i class="fas fa-lightbulb mr-3"></i>Instruções de Uso</h3>
+      <h3><i class="fas fa-lightbulb mr-3 text-yellow-400"></i>Guia de Utilização</h3>
       <ul>
-        <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>
+        <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>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>
+      <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 -->
-  <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 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>
@@ -347,14 +533,17 @@
       // Show matrix and metrics with fade-in effect
       const matrixContainer = document.getElementById('matrixContainer');
       const metricsContainer = document.getElementById('metricsContainer');
+      const insightsContainer = document.getElementById('insightsContainer');
+      
       matrixContainer.classList.remove('hidden');
       metricsContainer.classList.remove('hidden');
-      matrixContainer.classList.add('fade-in');
-      metricsContainer.classList.add('fade-in');
-
+      insightsContainer.classList.remove('hidden');
+      
       // Force reflow to restart animation
       void matrixContainer.offsetWidth;
-      void metricsContainer.offsetWidth;
+      matrixContainer.classList.add('fade-in');
+      metricsContainer.classList.add('fade-in');
+      insightsContainer.classList.add('fade-in');
 
       // Calculate metrics
       const total = tp + fp + tn + fn;
@@ -368,6 +557,76 @@
       document.getElementById('precision').textContent = precision.toFixed(3);
       document.getElementById('recall').textContent = recall.toFixed(3);
       document.getElementById('specificity').textContent = specificity.toFixed(3);
+
+      // Generate insights
+      const strengthsList = document.getElementById('strengths');
+      const improvementsList = document.getElementById('improvements');
+      
+      // Clear previous insights
+      strengthsList.innerHTML = '';
+      improvementsList.innerHTML = '';
+      
+      // Add new insights based on metrics
+      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 no items in strengths, add general one
+      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);
+      }
+    });
+    
+    // Add animation to matrix cells
+    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>

prompts.txt

@@ -1,2 +1,3 @@
 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
+Melhore o UX, tornando mais agradável e visual. Pode alterar as cores
+Troque o preto por cinza escuro