templates/users/prediction.html

{% extends 'users/userbase.html' %}
{% load static %}
{% block contents %}

<div class="row justify-content-center fade-in">
    <div class="col-xl-10">
        <div class="glass-panel p-0 overflow-hidden">
            <div class="row g-0">
                <!-- Left: Form -->
                <div class="col-lg-7 p-5" style="border-right: 1px solid var(--glass-border);">
                    <div class="mb-4">
                        <h3 class="fw-bold text-white mb-2">Transaction Analyzer</h3>
                        <p class="text-muted small">Enter transaction metadata for real-time inference.</p>
                    </div>

                    <form method="POST" action="{% url 'prediction' %}">
                        {% csrf_token %}

                        <div class="row g-3 mb-3">
                            <div class="col-6">
                                <label class="input-label">Amount ($)</label>
                                <input type="number" step="0.01" name="amount" class="input-modern" placeholder="0.00"
                                    required>
                            </div>
                            <div class="col-6">
                                <label class="input-label">Time (Sec)</label>
                                <input type="number" name="transaction_time" class="input-modern"
                                    placeholder="e.g. 4500" required>
                            </div>
                        </div>

                        <div class="row g-3 mb-3">
                            <div class="col-6">
                                <label class="input-label">Category</label>
                                <select name="merchant_type" class="input-modern">
                                    <option>Shopping</option>
                                    <option>Food</option>
                                    <option>Fuel</option>
                                    <option>Online</option>
                                    <option>Travel</option>
                                    <option>Bills</option>
                                </select>
                            </div>
                            <div class="col-6">
                                <label class="input-label">Location</label>
                                <select name="location" class="input-modern">
                                    <option>Delhi</option>
                                    <option>Bangalore</option>
                                    <option>Chennai</option>
                                    <option>Hyderabad</option>
                                    <option>Mumbai</option>
                                </select>
                            </div>
                        </div>

                        <div class="row g-3 mb-5">
                            <div class="col-6">
                                <label class="input-label">Device</label>
                                <select name="device_type" class="input-modern">
                                    <option>Mobile</option>
                                    <option>Web</option>
                                    <option>POS</option>
                                </select>
                            </div>
                            <div class="col-6">
                                <label class="input-label">Customer ID</label>
                                <input type="number" name="customer_id" class="input-modern" placeholder="ID" required>
                            </div>
                        </div>

                        <button type="submit" class="btn-modern w-100 py-3">
                            Run Analysis <i class="fas fa-arrow-right ms-2"></i>
                        </button>
                    </form>
                </div>

                <!-- Right: Result -->
                <div
                    class="col-lg-5 p-5 d-flex align-items-center justify-content-center bg-dark bg-opacity-25 text-center">
                    <div class="w-100">
                        {% if final_output %}
                        <div class="fade-in">
                            {% if "Fraud" in final_output %}
                            <div class="result-circle res-danger">
                                <i class="fas fa-exclamation-triangle"></i>
                            </div>
                            <h2 class="text-white fw-bold mb-2">FRAUD DETECTED</h2>
                            <p
                                class="text-danger bg-danger bg-opacity-10 p-2 rounded mb-4 d-inline-block border border-danger">
                                High probability of fraudulent activity.
                            </p>
                            {% else %}
                            <div class="result-circle res-success">
                                <i class="fas fa-check"></i>
                            </div>
                            <h2 class="text-white fw-bold mb-2">LEGITIMATE</h2>
                            <p
                                class="text-success bg-success bg-opacity-10 p-2 rounded mb-4 d-inline-block border border-success">
                                Transaction cleared security checks.
                            </p>
                            {% endif %}

                            {% if predictions %}
                            <div class="text-start bg-secondary bg-opacity-10 p-3 rounded">
                                <div class="small fw-bold text-muted text-uppercase mb-2">Model Consensus</div>
                                {% for model, result in predictions.items %}
                                <div class="d-flex justify-content-between mb-1 small">
                                    <span class="text-muted">{{ model }}</span>
                                    <span
                                        class="fw-bold {% if 'Fraud' in result %}text-danger{% else %}text-success{% endif %}">
                                        {{ result }}
                                    </span>
                                </div>
                                {% endfor %}
                            </div>
                            {% endif %}

                            {% if fraud_score %}
                            <div class="mt-3 text-muted small">
                                Risk Score: <strong class="text-white">{{ fraud_score }}</strong>
                            </div>
                            {% endif %}
                        </div>
                        {% else %}
                        <div class="text-muted opacity-25">
                            <i class="fas fa-chart-radar" style="font-size: 5rem;"></i>
                            <h4 class="fw-bold mt-4">Ready to Scan</h4>
                            <p class="small">Enter details to initiate the inference engine.</p>
                        </div>
                        {% endif %}

                        {% if error %}
                        <div class="alert alert-danger mt-3 bg-danger bg-opacity-10 border-danger text-danger">
                            {{ error }}
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}