74 lines
2.9 KiB
JavaScript
74 lines
2.9 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function () {
|
|
// --- Theme Switcher --- //
|
|
const themeSwitch = document.getElementById('theme-switch');
|
|
const themeIcon = document.querySelector('.theme-icon');
|
|
const currentTheme = localStorage.getItem('theme') || 'light';
|
|
|
|
document.documentElement.setAttribute('data-theme', currentTheme);
|
|
|
|
if (currentTheme === 'dark') {
|
|
themeSwitch.checked = true;
|
|
themeIcon.classList.remove('fa-moon');
|
|
themeIcon.classList.add('fa-sun');
|
|
} else {
|
|
themeIcon.classList.remove('fa-sun');
|
|
themeIcon.classList.add('fa-moon');
|
|
}
|
|
|
|
themeSwitch.addEventListener('change', function(e) {
|
|
if (e.target.checked) {
|
|
document.documentElement.setAttribute('data-theme', 'dark');
|
|
localStorage.setItem('theme', 'dark');
|
|
themeIcon.classList.remove('fa-moon');
|
|
themeIcon.classList.add('fa-sun');
|
|
} else {
|
|
document.documentElement.setAttribute('data-theme', 'light');
|
|
localStorage.setItem('theme', 'light');
|
|
themeIcon.classList.remove('fa-sun');
|
|
themeIcon.classList.add('fa-moon');
|
|
}
|
|
});
|
|
|
|
// --- Prediction Form --- //
|
|
const predictionForm = document.getElementById('prediction-form');
|
|
const resultCard = document.getElementById('result-card');
|
|
const resultMessage = document.getElementById('result-message');
|
|
const resultValue = document.getElementById('result-value');
|
|
|
|
predictionForm.addEventListener('submit', function (e) {
|
|
e.preventDefault();
|
|
|
|
// Mocking the API call for demonstration
|
|
const mockProbability = Math.random();
|
|
|
|
displayResult(mockProbability);
|
|
});
|
|
|
|
function displayResult(probability) {
|
|
const isFraud = probability > 0.5; // Example threshold: tune this based on your model's ROC curve
|
|
|
|
resultValue.textContent = `${(probability * 100).toFixed(2)}%`;
|
|
|
|
resultCard.classList.remove('result-good', 'result-bad');
|
|
|
|
if (isFraud) {
|
|
resultMessage.textContent = 'High Probability of Fraud';
|
|
resultValue.classList.remove('result-good');
|
|
resultValue.classList.add('result-bad');
|
|
resultCard.classList.add('result-bad');
|
|
} else {
|
|
resultMessage.textContent = 'Low Probability of Fraud';
|
|
resultValue.classList.remove('result-bad');
|
|
resultValue.classList.add('result-good');
|
|
resultCard.classList.add('result-good');
|
|
}
|
|
|
|
// Show the result card with a smooth animation
|
|
resultCard.style.display = 'block';
|
|
resultCard.style.transform = 'translateY(20px)';
|
|
setTimeout(() => {
|
|
resultCard.style.opacity = 1;
|
|
resultCard.style.transform = 'translateY(0)';
|
|
}, 10); // A small delay to ensure the display property is applied first
|
|
}
|
|
}); |