|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>FraudShield AI | Transaction Monitoring</title>
|
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="container">
|
|
|
<header>
|
|
|
<h1>FraudShield AI</h1>
|
|
|
<p>Advanced Real-time Credit Card Fraud Detection Pipeline</p>
|
|
|
</header>
|
|
|
|
|
|
<div class="main-layout">
|
|
|
<div class="card">
|
|
|
<div class="card-title">
|
|
|
<span>🔍</span> Sample Transactions
|
|
|
</div>
|
|
|
<div class="tabs">
|
|
|
<div class="tab active" id="tab-fraud">Fraud Cases</div>
|
|
|
<div class="tab" id="tab-normal">Legitimate</div>
|
|
|
</div>
|
|
|
<div class="samples-list" id="samples-container">
|
|
|
|
|
|
<p style="text-align: center; color: #64748b;">Loading samples...</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="card">
|
|
|
<div class="card-title">
|
|
|
<span>⚙️</span> Analysis Engine
|
|
|
</div>
|
|
|
<form id="prediction-form">
|
|
|
<div class="form-group">
|
|
|
<div>
|
|
|
<label style="font-size: 0.8rem; color: #94a3b8;">Amount ($)</label>
|
|
|
<input type="number" id="Amount" class="input-field" step="0.01" required placeholder="89.99">
|
|
|
</div>
|
|
|
<div>
|
|
|
<label style="font-size: 0.8rem; color: #94a3b8;">Time (Seconds)</label>
|
|
|
<input type="number" id="Time" class="input-field" required placeholder="0">
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div style="margin-bottom: 0.5rem; font-size: 0.8rem; color: #94a3b8;">PCA Components (V1 - V28)</div>
|
|
|
<div style="max-height: 200px; overflow-y: auto; padding-right: 5px;" id="v-inputs">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<button type="submit" class="btn">Analyze Transaction</button>
|
|
|
</form>
|
|
|
|
|
|
<div id="result-area">
|
|
|
<div class="result-title" id="res-title">SAFE</div>
|
|
|
<div class="result-conf" id="res-conf">Confidence: 99.8%</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
let samples = { fraud: [], normal: [] };
|
|
|
let activeTab = 'fraud';
|
|
|
|
|
|
|
|
|
const vContainer = document.getElementById('v-inputs');
|
|
|
for (let i = 1; i <= 28; i++) {
|
|
|
const div = document.createElement('div');
|
|
|
div.className = 'form-group';
|
|
|
div.style.marginBottom = '0.5rem';
|
|
|
div.innerHTML = `
|
|
|
<div style="grid-column: span 2">
|
|
|
<input type="number" step="0.000001" id="V${i}" class="input-field" placeholder="V${i} component" value="0">
|
|
|
</div>
|
|
|
`;
|
|
|
vContainer.appendChild(div);
|
|
|
}
|
|
|
|
|
|
|
|
|
fetch('/get_samples')
|
|
|
.then(res => res.json())
|
|
|
.then(data => {
|
|
|
samples = data;
|
|
|
renderSamples();
|
|
|
});
|
|
|
|
|
|
function renderSamples() {
|
|
|
const container = document.getElementById('samples-container');
|
|
|
container.innerHTML = '';
|
|
|
|
|
|
const list = activeTab === 'fraud' ? samples.fraud : samples.normal;
|
|
|
|
|
|
list.forEach(item => {
|
|
|
const el = document.createElement('div');
|
|
|
el.className = 'sample-item';
|
|
|
el.innerHTML = `
|
|
|
<div class="amount">$${item.Amount.toFixed(2)}</div>
|
|
|
<div class="meta">
|
|
|
<span>Time: ${Math.floor(item.Time)}s</span>
|
|
|
<span>PCA: Mixed</span>
|
|
|
</div>
|
|
|
`;
|
|
|
el.onclick = () => fillForm(item);
|
|
|
container.appendChild(el);
|
|
|
});
|
|
|
}
|
|
|
|
|
|
function fillForm(item) {
|
|
|
document.getElementById('Amount').value = item.Amount;
|
|
|
document.getElementById('Time').value = item.Time;
|
|
|
for (let i = 1; i <= 28; i++) {
|
|
|
document.getElementById(`V${i}`).value = item[`V${i}`];
|
|
|
}
|
|
|
|
|
|
const card = document.querySelectorAll('.card')[1];
|
|
|
card.style.borderColor = 'var(--primary)';
|
|
|
setTimeout(() => card.style.borderColor = 'var(--glass-border)', 500);
|
|
|
}
|
|
|
|
|
|
|
|
|
document.getElementById('tab-fraud').onclick = () => {
|
|
|
activeTab = 'fraud';
|
|
|
document.getElementById('tab-fraud').classList.add('active');
|
|
|
document.getElementById('tab-normal').classList.remove('active');
|
|
|
renderSamples();
|
|
|
};
|
|
|
document.getElementById('tab-normal').onclick = () => {
|
|
|
activeTab = 'normal';
|
|
|
document.getElementById('tab-normal').classList.add('active');
|
|
|
document.getElementById('tab-fraud').classList.remove('active');
|
|
|
renderSamples();
|
|
|
};
|
|
|
|
|
|
|
|
|
document.getElementById('prediction-form').onsubmit = async (e) => {
|
|
|
e.preventDefault();
|
|
|
const btn = e.target.querySelector('button');
|
|
|
btn.innerHTML = 'Processing...';
|
|
|
btn.disabled = true;
|
|
|
|
|
|
const data = {
|
|
|
Amount: document.getElementById('Amount').value,
|
|
|
Time: document.getElementById('Time').value
|
|
|
};
|
|
|
for (let i = 1; i <= 28; i++) {
|
|
|
data[`V${i}`] = document.getElementById(`V${i}`).value;
|
|
|
}
|
|
|
|
|
|
try {
|
|
|
const res = await fetch('/predict', {
|
|
|
method: 'POST',
|
|
|
headers: { 'Content-Type': 'application/json' },
|
|
|
body: JSON.stringify(data)
|
|
|
});
|
|
|
const result = await res.json();
|
|
|
|
|
|
const resArea = document.getElementById('result-area');
|
|
|
resArea.style.display = 'block';
|
|
|
resArea.className = result.is_fraud ? 'result-fraud' : 'result-safe';
|
|
|
|
|
|
document.getElementById('res-title').innerText = result.class;
|
|
|
document.getElementById('res-conf').innerText = `Confidence: ${result.confidence.toFixed(2)}%`;
|
|
|
|
|
|
} catch (err) {
|
|
|
alert('Analysis failed: ' + err.message);
|
|
|
} finally {
|
|
|
btn.innerHTML = 'Analyze Transaction';
|
|
|
btn.disabled = false;
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
|
|
|
