Added Confusion Matrix Calculator (#1792)

Rakesh9100 · Aug 10, 2024 · 6420248 · 6420248
1 parent 1abd35f
commit 6420248
Show file tree

Hide file tree

Showing 6 changed files with 291 additions and 0 deletions.
diff --git a/Calculators/Confusion-Matrix-Calculator/README.md b/Calculators/Confusion-Matrix-Calculator/README.md
@@ -0,0 +1,30 @@
+# <p align="center">Confusion Matrix Calculator</p>
+
+## Description :-
+
+An interactive web-based calculator that allows users to compute essential machine learning metrics based on a confusion matrix. By entering values for true positives, false positives, false negatives, and true negatives, users can instantly see calculated accuracy, precision, recall, and F1 score. These metrics are crucial for evaluating the performance of classification models in machine learning.
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Features :-
+
+- Calculate accuracy, precision, recall, and F1 score based on confusion matrix inputs.
+- Instantly see performance metrics relevant to classification models.
+
+## Usage :-
+
+1. Open the index.html file in your web browser.
+
+2. Enter the following inputs:
+   - True Positive (TP)
+   - False Positive (FP)
+   - False Negative (FN)
+   - True Negative (TN)
+
+3. Click the "Calculate" button to view the computed metrics.
+
+The calculator will display accuracy, precision, recall, and F1 score based on the provided confusion matrix values.
diff --git a/Calculators/Confusion-Matrix-Calculator/assets/image.jpg b/Calculators/Confusion-Matrix-Calculator/assets/image.jpg
diff --git a/Calculators/Confusion-Matrix-Calculator/index.html b/Calculators/Confusion-Matrix-Calculator/index.html
@@ -0,0 +1,75 @@
+
+<html >
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Confusion Matrix Calculator</title>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="main-container  mt-5">
+        <div class="container">
+            <h1 class="text-center">Confusion Matrix Calculator</h1>
+
+            <div class="cyan-container">
+
+                <form id="confusionMatrixForm">
+                    <div class="row text-center mb-3">
+                        <div class="col"></div>
+                        <div class="col"><label class="form-label">Actual Positive</label></div>
+                        <div class="col"><label class="form-label">Actual Negative</label></div>
+                    </div>
+                    <div class="row mb-3 align-items-center">
+                        <div class="col text-end"><label class="form-label">Predicted Positive</label></div>
+                        <div class="col">
+                            <input type="number" id="truePositive" class="form-control" placeholder="True Positive" step="any" required>
+                        </div>
+                        <div class="col">
+                            <input type="number" id="falsePositive" class="form-control" placeholder="False Positive" step="any" required>
+                        </div>
+                    </div>
+                    <div class="row mb-3 align-items-center">
+                        <div class="col text-end"><label class="form-label">Predicted Negative</label></div>
+                        <div class="col">
+                            <input type="number" id="falseNegative" class="form-control" placeholder="False Negative" step="any" required>
+                        </div>
+                        <div class="col">
+                            <input type="number" id="trueNegative" class="form-control" placeholder="True Negative" step="any" required>
+                        </div>
+                    </div>
+                    <div class="text-center">
+                        <button type="submit" class="btn btn-primary mt-3">Calculate</button>
+
+                    </div>
+                    <div class="text-center">
+                        <button type="button" class="btn btn-secondary mt-3" onclick="clearForm()">Clear</button>
+                    </div>
+                    <div class="resultcontainer">
+                        <div id="result">
+                            <div id="accuracy" class="result"></div>
+                            <div id="precision" class="result"></div>
+                            <div id="recall" class="result"></div>
+                            <div id="f1Score" class="result"></div>
+                        </div>
+                    </div>
+                </form>
+            </div>
+
+        </div>
+        <div class="containerimage">
+            <div class="image-container p-4 ">
+                <img src="assets/image.jpg"  class="img-fluid">
+            </div>
+            <div class="Formulae">
+
+                <p>ACCURACY: (TP+TN)/(TP+TN+FP+FN) </p>
+                <p>PRECISION: TP/(TP+FP) </p>
+                <p>RECALL: TP/(TP+FN) </p>
+                <p>F1 SCORE: 2*((PRECISION+RECALL)/(PRECISON*RECALL)) </p>
+            </div>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Calculators/Confusion-Matrix-Calculator/script.js b/Calculators/Confusion-Matrix-Calculator/script.js
@@ -0,0 +1,34 @@
+document.getElementById('confusionMatrixForm').addEventListener('submit', function(event) {
+    event.preventDefault();
+
+    // Get input values
+    const truePositive = parseFloat(document.getElementById('truePositive').value);
+    const falsePositive = parseFloat(document.getElementById('falsePositive').value);
+    const falseNegative = parseFloat(document.getElementById('falseNegative').value);
+    const trueNegative = parseFloat(document.getElementById('trueNegative').value);
+
+
+    const accuracy = (truePositive + trueNegative) / (truePositive + falsePositive + falseNegative + trueNegative);
+    const precision = truePositive / (truePositive + falsePositive);
+    const recall = truePositive / (truePositive + falseNegative);
+    const f1Score = 2 * (precision * recall) / (precision + recall);
+
+
+    document.getElementById('accuracy').textContent = `Accuracy: ${(accuracy * 100).toFixed(2)}%`;
+    document.getElementById('precision').textContent = `Precision: ${(precision * 100).toFixed(2)}%`;
+    document.getElementById('recall').textContent = `Recall: ${(recall * 100).toFixed(2)}%`;
+    document.getElementById('f1Score').textContent = `F1 Score: ${f1Score.toFixed(2)}`;
+});
+
+function clearForm() {
+    document.getElementById('truePositive').value = '';
+    document.getElementById('falsePositive').value = ''; 
+    document.getElementById('falseNegative').value = '';
+    document.getElementById('trueNegative').value = '';
+
+    // Clear the result display
+    document.getElementById('accuracy').textContent = '';
+    document.getElementById('precision').textContent = '';
+    document.getElementById('recall').textContent = '';
+    document.getElementById('f1Score').textContent = '';
+}
diff --git a/Calculators/Confusion-Matrix-Calculator/style.css b/Calculators/Confusion-Matrix-Calculator/style.css
@@ -0,0 +1,138 @@
+body {
+    font-family: Arial, sans-serif;
+    background: linear-gradient(to right, rgba(0, 102, 255, 0.9), rgba(0, 178, 178, 0.9));
+
+}
+
+.main-container {
+    display: flex;
+    align-items: flex-start;
+    gap: 15px;
+    padding: 20px;
+    max-width: 1200px; 
+    margin:   auto; 
+}
+
+.container {
+    background-color: rgba(0, 0, 0, 0.6);
+    padding: 30px;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    max-width: 600px;
+    color: white;
+
+}
+
+.containerimage {
+    background-color: rgba(0, 0, 0, 0.6);
+    padding: 10px; 
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+
+
+}
+
+.Formulae {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    color: white;
+    font-size: 14px; 
+}
+
+.cyan-container {
+    background-color: rgba(0, 255, 255, 0.6); 
+    display: flex;
+    justify-content: center;
+    max-width: 600px;
+    padding: 30px; 
+    border-radius: 8px;
+
+}
+
+.resultcontainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: black;
+    font-weight: bold;
+    margin-top: 20px;
+    font-size: 22px; 
+
+}
+
+
+
+h1 {
+    font-size: 32px; 
+    margin-bottom: 20px;
+}
+
+
+
+.btn {
+    background-color: blue;
+    font-size: 18px; 
+    padding: 10px 20px; 
+}
+
+.form-label {
+    font-size: 16px; 
+}
+
+input.form-control {
+    font-size: 18px; 
+    padding: 10px; 
+}
+
+@media (max-width: 768px) {
+    .main-container {
+        flex-direction: column; 
+        align-items: center;
+        gap: 20px; 
+        max-width: 100%; 
+        padding: 10px;
+    }
+
+    .containerimage {
+        max-width: 100%; 
+        padding: 10px;
+    }
+
+    .containerimage img {
+        width: 100%; 
+        height: auto; 
+        min-width: 300px; 
+        max-width:600px;
+    }
+
+    .cyan-container {
+        max-width: 100%;
+        padding: 20px; 
+    }
+
+    .form-label {
+        font-size: 14px; 
+    }
+
+    input.form-control {
+        font-size: 16px; 
+        padding: 12px; 
+    }
+
+    .btn {
+        font-size: 16px; 
+        padding: 12px 24px; 
+    }
+
+    h1 {
+        font-size: 28px; 
+    }
+
+    .resultcontainer {
+        font-size: 20px; 
+    }
+}
diff --git a/index.html b/index.html
@@ -1263,6 +1263,20 @@ <h3>Calculates the Conductivity & Resistivity.</h3>
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>Confusion Matrix Calculator</h2>
+                <h3>Calculates Accuracy, Precision, Recall, and F1 Score for classification models in Machine Learning.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Confusion-Matrix-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Confusion-Matrix-Calculator" title="Source Code" target="_blank">
+                        <img src="./assets/images/github.png" alt="Source Code"></img>
+                    </a>
+                </div>
+            </div>
+        </div>
         <div class="box">
             <div class="content">
                 <h2>Cosine Formula Calculator</h2>