Spaces:
Sleeping
Sleeping
| <html lang="en" data-bs-theme="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Email Spam Detection</title> | |
| <link rel="stylesheet" href="https://cdn.replit.com/agent/bootstrap-agent-dark-theme.min.css"> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet"> | |
| <style> | |
| /* Fix for select arrow visibility in dark mode */ | |
| select.form-select { | |
| background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container py-5"> | |
| <div class="row justify-content-center"> | |
| <div class="col-md-8"> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h2 class="text-center mb-0">Email Spam Detection</h2> | |
| </div> | |
| <div class="card-body"> | |
| {% if error %} | |
| <div class="alert alert-danger alert-dismissible fade show" role="alert"> | |
| {{ error }} | |
| <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> | |
| </div> | |
| {% endif %} | |
| {% if prediction %} | |
| <div class="card mb-4"> | |
| <div class="card-body"> | |
| <h5 class="card-title d-flex align-items-center"> | |
| <i class="bi {% if prediction == 'Spam' %}bi-shield-fill-exclamation text-danger{% else %}bi-shield-fill-check text-success{% endif %} me-2"></i> | |
| Analysis Result | |
| </h5> | |
| <p class="card-text"> | |
| This email is classified as: | |
| <span class="badge {% if prediction == 'Spam' %}bg-danger{% else %}bg-success{% endif %} fs-6"> | |
| {{ prediction }} | |
| </span> | |
| </p> | |
| <p class="card-text"> | |
| <small class="text-muted"> | |
| Model used: <span class="fw-bold">{{ selected_model }}</span> | |
| </small> | |
| </p> | |
| </div> | |
| </div> | |
| {% endif %} | |
| <form method="POST" action="{{ url_for('predict') }}" id="predictionForm"> | |
| <div class="mb-4"> | |
| <label for="model" class="form-label">Select Model</label> | |
| <select class="form-select" name="model" id="model" required> | |
| <option value="" {% if not selected_model %}selected{% endif %}>Choose a model...</option> | |
| {% for model in models %} | |
| <option value="{{ model }}" {% if selected_model == model %}selected{% endif %}> | |
| {{ model }} | |
| </option> | |
| {% endfor %} | |
| </select> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="email" class="form-label">Email Content</label> | |
| <textarea class="form-control" id="email" name="email" rows="6" required>{{ email if email else '' }}</textarea> | |
| </div> | |
| <div class="d-grid gap-2"> | |
| <button type="submit" class="btn btn-primary" id="submitBtn"> | |
| <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span> | |
| Analyze Email | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> | |
| <script src="{{ url_for('static', filename='js/main.js') }}"></script> | |
| </body> | |
| </html> |