108 lines
4.3 KiB
HTML
108 lines
4.3 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Fraud Detection System</title>
|
||
|
|
<link rel="stylesheet" href="/static/style.css">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container">
|
||
|
|
<h1>Fraud Detection System</h1>
|
||
|
|
<form action="/predict" method="post">
|
||
|
|
<div class="form-group">
|
||
|
|
<label>Transaction Amount:</label>
|
||
|
|
<input type="number" step="0.01" name="amt" required>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group">
|
||
|
|
<label>Category:</label>
|
||
|
|
<select name="category" required>
|
||
|
|
<option value="entertainment">Entertainment</option>
|
||
|
|
<option value="food_dining">Food & Dining</option>
|
||
|
|
<option value="gas_transport">Gas & Transport</option>
|
||
|
|
<option value="grocery_net">Grocery</option>
|
||
|
|
<option value="grocery_pos">Grocery POS</option>
|
||
|
|
<option value="health_fitness">Health & Fitness</option>
|
||
|
|
<option value="home">Home</option>
|
||
|
|
<option value="kids_pets">Kids & Pets</option>
|
||
|
|
<option value="misc_net">Misc Net</option>
|
||
|
|
<option value="misc_pos">Misc POS</option>
|
||
|
|
<option value="personal_care">Personal Care</option>
|
||
|
|
<option value="shopping_net">Shopping Net</option>
|
||
|
|
<option value="shopping_pos">Shopping POS</option>
|
||
|
|
<option value="travel">Travel</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group">
|
||
|
|
<label>Gender:</label>
|
||
|
|
<select name="gender" required>
|
||
|
|
<option value="M">Male</option>
|
||
|
|
<option value="F">Female</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group">
|
||
|
|
<label>Date of Birth (YYYY-MM-DD):</label>
|
||
|
|
<input type="text" name="dob" placeholder="1990-01-01" required>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group">
|
||
|
|
<label>Transaction Time (YYYY-MM-DD HH:MM:SS):</label>
|
||
|
|
<input type="text" name="trans_date_trans_time" placeholder="2023-01-01 12:00:00" required>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group">
|
||
|
|
<label>City Population:</label>
|
||
|
|
<input type="number" name="city_pop" required>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group">
|
||
|
|
<label>Job:</label>
|
||
|
|
<input type="text" name="job" required>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group">
|
||
|
|
<label>Merchant:</label>
|
||
|
|
<input type="text" name="merchant" required>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group">
|
||
|
|
<label>User Latitude:</label>
|
||
|
|
<input type="number" step="0.000001" name="lat" required>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group">
|
||
|
|
<label>User Longitude:</label>
|
||
|
|
<input type="number" step="0.000001" name="long" required>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group">
|
||
|
|
<label>Merchant Latitude:</label>
|
||
|
|
<input type="number" step="0.000001" name="merch_lat" required>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group">
|
||
|
|
<label>Merchant Longitude:</label>
|
||
|
|
<input type="number" step="0.000001" name="merch_long" required>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button type="submit">Check for Fraud</button>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
{% if prediction %}
|
||
|
|
<div class="result">
|
||
|
|
<h2>Prediction Result</h2>
|
||
|
|
<p><strong>Fraudulent:</strong> {{ prediction.is_fraud }}</p>
|
||
|
|
<p><strong>Probability:</strong> {{ "%.2f"|format(prediction.probability * 100) }}%</p>
|
||
|
|
<p class="{% if prediction.is_fraud %}fraud{% else %}legit{% endif %}">
|
||
|
|
{% if prediction.is_fraud %}
|
||
|
|
⚠️ This transaction appears to be fraudulent!
|
||
|
|
{% else %}
|
||
|
|
✓ This transaction appears to be legitimate.
|
||
|
|
{% endif %}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
{% endif %}
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|