Spaces:

alexandremoraisdarosa
/

matriz-confusao

Running

App Files Files Community

alexandremoraisdarosa commited on 26 days ago

Commit

21af66c

verified ·

1 Parent(s): cea3583

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +260 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Matriz Confusao
-emoji: ⚡
-colorFrom: yellow
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: matriz-confusao
+emoji: ⚛️
+colorFrom: pink
+colorTo: gray
 sdk: static
 pinned: false
+tags:
+  - QwenSite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,260 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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">
+  <style>
+    body {
+      background-color: #ffffff;
+      color: #000000;
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    }
+    #center {
+      @apply max-w-4xl mx-auto p-6 bg-blue-950 rounded-lg shadow-xl text-white mt-8;
+    }
+    #title {
+      @apply text-4xl font-extrabold text-center mb-2 text-white;
+      text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
+    }
+    #breadcrumps ol {
+      @apply flex text-sm mb-6 space-x-2 text-gray-300;
+    }
+    #breadcrumps a {
+      @apply hover:text-white transition-colors;
+    }
+    .info {
+      @apply text-sm text-gray-300 mt-3 mb-1;
+    }
+    label {
+      @apply block mt-2 text-white font-medium;
+    }
+    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;
+    }
+    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;
+    }
+    .cf {
+      @apply mt-4 text-sm text-gray-400;
+    }
+    .cf a {
+      @apply text-blue-300 hover:underline;
+    }
+    .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);
+    }
+    .matrix-cell {
+      @apply p-4 border border-gray-600 flex flex-col justify-center items-center;
+    }
+    .matrix-header {
+      @apply bg-gray-800 text-white py-2 font-semibold;
+    }
+    .metric-card {
+      @apply mt-6 p-4 bg-gray-800 rounded-lg shadow border border-gray-700;
+    }
+    .metric-title {
+      @apply font-bold text-blue-300 text-sm uppercase tracking-wider;
+    }
+    .metric-value {
+      @apply text-2xl font-extrabold text-white;
+    }
+    .instructions {
+      @apply mt-8 p-5 bg-gray-800 rounded-lg text-gray-200 text-sm leading-relaxed border border-gray-700;
+    }
+    .instructions h3 {
+      @apply font-bold text-white text-lg mb-2;
+    }
+    .instructions ul {
+      @apply list-disc list-inside ml-4 space-y-1 mb-3;
+    }
+  </style>
+</head>
+<body class="bg-white text-black">
+  <!-- Header -->
+  <header class="bg-blue-950 text-white py-6 shadow-md">
+    <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>
+    </div>
+  </header>
+  <!-- Main Content -->
+  <div id="center" class="transition-all duration-300 ease-in-out">
+    <!-- Breadcrumb -->
+    <div id="breadcrumps">
+      <ol itemscope itemtype="http://schema.org/BreadcrumbList" class="flex">
+        <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
+          <a itemprop="item" href="#" class="flex items-center">
+            <span itemprop="name">Processamento de Dados</span>
+          </a>
+          <meta itemprop="position" content="1" />
+        </li>
+        <span class="mx-2">›</span>
+        <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
+          <a itemprop="item" href="#" class="flex items-center">
+            <span itemprop="name">Matriz de Confusão</span>
+          </a>
+          <meta itemprop="position" content="2" />
+        </li>
+      </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">
+      <!-- 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" />
+      <!-- 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>
+      <!-- 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>
+    </form>
+    <!-- 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 class="flex justify-center">
+        <table class="matrix border-collapse text-white text-center">
+          <thead>
+            <tr>
+              <th class="matrix-header"></th>
+              <th class="matrix-header">Previsto: Sim</th>
+              <th class="matrix-header">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>
+            <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>
+          </tbody>
+        </table>
+      </div>
+    </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 class="metric-title">Acurácia</div>
+        <div id="accuracy" class="metric-value">--</div>
+      </div>
+      <div class="metric-card">
+        <div class="metric-title">Precisão (PV)</div>
+        <div id="precision" class="metric-value">--</div>
+      </div>
+      <div class="metric-card">
+        <div class="metric-title">Sensibilidade</div>
+        <div id="recall" class="metric-value">--</div>
+      </div>
+      <div class="metric-card">
+        <div class="metric-title">Especificidade</div>
+        <div id="specificity" class="metric-value">--</div>
+      </div>
+    </div>
+    <!-- Instructions -->
+    <div class="instructions mt-8">
+      <h3><i class="fas fa-lightbulb mr-2"></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>
+      </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>
+    </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>
+  <script>
+    document.getElementById('analyzeBtn').addEventListener('click', function () {
+      // Get values
+      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;
+      // Update matrix
+      document.getElementById('cell_tp').textContent = tp;
+      document.getElementById('cell_fp').textContent = fp;
+      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');
+      // 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;
+      // Display metrics
+      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);
+    });
+  </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>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@

+ 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:  <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>  <div id='div-gpt-ad-1407836191040-0' style='min-width:320px;min-height:100px'></div>  <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>  <div id='div-gpt-ad-1407836210596-0' style='min-width:336px;min-height:280px'></div>