Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added Confusion Matrix Calculator #1792

Merged
merged 1 commit into from
Aug 10, 2024
Merged

Added Confusion Matrix Calculator #1792

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 30 additions & 0 deletions Calculators/Confusion-Matrix-Calculator/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
Binary file added Calculators/Confusion-Matrix-Calculator/assets/image.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
75 changes: 75 additions & 0 deletions Calculators/Confusion-Matrix-Calculator/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
34 changes: 34 additions & 0 deletions Calculators/Confusion-Matrix-Calculator/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = '';
}
138 changes: 138 additions & 0 deletions Calculators/Confusion-Matrix-Calculator/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
}
14 changes: 14 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1191,6 +1191,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>
Expand Down