diff --git a/README.md b/README.md new file mode 100644 index 0000000..312f3ab --- /dev/null +++ b/README.md @@ -0,0 +1,19 @@ +# Credit Card Fraud Detection API + +## Problem Statement +This project aims to predict whether a credit card transaction is fraudulent or legitimate in real-time. It provides a web interface to submit transaction data and receive a fraud probability score. + +## Dataset +The model will be trained on the [Kaggle Credit Card Fraud Dataset](https://www.kaggle.com/datasets/mlg-ulb/creditcardfraud). + +## Model +The initial implementation uses a Logistic Regression model as a baseline. + +## API Usage +* `/predict`: POST endpoint that accepts transaction data and returns a fraud probability. +* `/health`: GET endpoint to check service status. + +## Future Improvements +- Implement more advanced models (Random Forest, XGBoost). +- Add user authentication. +- Deploy to a cloud environment. \ No newline at end of file diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..4ff826b --- /dev/null +++ b/assets/css/custom.css @@ -0,0 +1,172 @@ +/* General Body & Theme Variables */ +:root { + --primary-color: #0d6efd; + --background-color: #f8f9fa; + --card-bg: #ffffff; + --text-color: #212529; + --border-color: #dee2e6; + --muted-text-color: #6c757d; + --hero-gradient: linear-gradient(45deg, #0d6efd, #6c757d); + --navbar-bg: #343a40; +} + +[data-theme="dark"] { + --primary-color: #4dabf7; + --background-color: #121212; + --card-bg: #1e1e1e; + --text-color: #e9ecef; + --border-color: #495057; + --muted-text-color: #adb5bd; + --hero-gradient: linear-gradient(45deg, #1f3a93, #343a40); + --navbar-bg: #1e1e1e; +} + +body { + background-color: var(--background-color); + color: var(--text-color); + transition: background-color 0.3s ease, color 0.3s ease; +} + + +/* Animations */ +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.animated { + animation-duration: 0.8s; + animation-fill-mode: both; + animation-name: fadeInUp; +} + +/* Navbar */ +.navbar { + background-color: var(--navbar-bg) !important; + border-bottom: 1px solid var(--border-color); + transition: background-color 0.3s ease; +} + +/* Theme Switcher */ +.theme-switcher { + display: flex; + align-items: center; +} + +.theme-switcher .form-check-input { + width: 40px; + height: 20px; + background-color: #555; + border: none; + cursor: pointer; + position: relative; + transition: background-color 0.3s ease; +} + +.theme-switcher .form-check-input:checked { + background-color: var(--primary-color); +} + +.theme-switcher .theme-icon { + margin-left: 8px; + color: #ffc107; + transition: color 0.3s ease; +} + + +/* Hero Section */ +.hero { + background: var(--hero-gradient); + color: white; + padding: 4rem 2rem; + margin-bottom: 2rem; + border-radius: 0.5rem; + text-align: center; + animation-delay: 0.2s; +} + +/* Card Styling */ +.card { + background-color: var(--card-bg); + border: 1px solid var(--border-color); + border-radius: 0.5rem; + transition: background-color 0.3s ease, border-color 0.3s ease; + animation-delay: 0.4s; +} + +.card-header { + background-color: transparent; + border-bottom: 1px solid var(--border-color); + padding: 1rem 1.25rem; +} + +.card-header h5 { + color: var(--text-color); +} + +.form-label { + color: var(--muted-text-color); +} + +.form-control { + background-color: var(--background-color); + color: var(--text-color); + border: 1px solid var(--border-color); +} + +.form-control:focus { + background-color: var(--background-color); + color: var(--text-color); + border-color: var(--primary-color); + box-shadow: 0 0 0 0.25rem rgba(var(--primary-color), 0.25); +} + +/* Buttons */ +.btn-primary { + background-color: var(--primary-color); + border-color: var(--primary-color); + transition: background-color 0.2s ease, transform 0.2s ease; +} + +.btn-primary:hover { + transform: translateY(-2px); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} + +/* Result Card */ +#result-card { + transition: opacity 0.5s ease-in-out, transform 0.5s ease; + border-width: 2px; +} + +.result-good { + color: #28a745; +} + +.result-bad { + color: #dc3545; +} + +#result-card.result-good { + border-color: #28a745; +} + +#result-card.result-bad { + border-color: #dc3545; +} + +.result-value { + font-size: 2.5rem; + font-weight: bold; +} + +/* Footer */ +footer { + color: var(--muted-text-color); +} \ No newline at end of file diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..3cfaa9b --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,74 @@ +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 + } +}); \ No newline at end of file diff --git a/index.php b/index.php index 7205f3d..a0af018 100644 --- a/index.php +++ b/index.php @@ -1,150 +1,90 @@ - - - + + - - - New Style - - - - - - - - - - - - - - - - - - - + + + Credit Card Fraud Detection + + + -
-
-

Analyzing your requirements and generating your website…

-
- Loading… -
-

AI is collecting your requirements and applying the first changes.

-

This page will update automatically as the plan is implemented.

-

Runtime: PHP — UTC

+ + + +
+
+

Real-Time Transaction Analysis

+

Enter transaction details below to get a fraud probability score.

+
+ +
+
+
+
+
New Transaction
+
+
+
+

NOTE: For this demo, only a few of the 28 anonymized features are shown.

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+
+
+
+ + + +
+
-
- + + + + - + \ No newline at end of file diff --git a/requirements.txt b/requirements.txt new file mode 100644 index 0000000..7747f0e --- /dev/null +++ b/requirements.txt @@ -0,0 +1,6 @@ +fastapi +uvicorn[standard] +scikit-learn +pandas +numpy +joblib \ No newline at end of file