| <!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8">
|
| <title>Naive Bayes URL Spam Checker</title>
|
| <style>
|
| body {
|
| font-family: Arial, sans-serif;
|
| background: #f4f4f4;
|
| text-align: center;
|
| padding: 60px;
|
| }
|
|
|
| h1 {
|
| color: #2c3e50;
|
| }
|
|
|
| input[type="text"] {
|
| width: 60%;
|
| padding: 14px;
|
| font-size: 16px;
|
| border-radius: 8px;
|
| border: 1px solid #ccc;
|
| margin-top: 20px;
|
| }
|
|
|
| button {
|
| margin-top: 20px;
|
| padding: 12px 24px;
|
| font-size: 16px;
|
| background-color: #3498db;
|
| color: white;
|
| border: none;
|
| border-radius: 6px;
|
| cursor: pointer;
|
| }
|
|
|
| button:hover {
|
| background-color: #2980b9;
|
| }
|
|
|
| #result {
|
| margin-top: 30px;
|
| font-size: 20px;
|
| font-weight: bold;
|
| }
|
|
|
| #reason {
|
| font-size: 16px;
|
| margin-top: 10px;
|
| color: #555;
|
| }
|
|
|
| #spellSteps {
|
| margin-top: 20px;
|
| text-align: left;
|
| max-width: 600px;
|
| margin: 20px auto;
|
| background-color: #fff;
|
| padding: 15px;
|
| border-radius: 10px;
|
| box-shadow: 0 0 10px rgba(0,0,0,0.1);
|
| }
|
|
|
| .safe {
|
| color: green;
|
| }
|
|
|
| .spam {
|
| color: red;
|
| }
|
| </style>
|
| </head>
|
| <body>
|
| <title>Naive Bayes URL Spam Checker</title>
|
| </head>
|
| <body>
|
| <h1>🔍 Naive Bayes URL Spam Checker</h1>
|
|
|
| <input type="text" id="urlInput" placeholder="Enter URL (e.g. http://example.com)">
|
| <br>
|
| <button onclick="checkURL()">Check</button>
|
|
|
| <div id="result"></div>
|
| <div id="spellSteps"></div>
|
| <div id="reason"></div>
|
|
|
| <script>
|
| async function checkURL() {
|
| const url = document.getElementById("urlInput").value.trim();
|
| const resultDiv = document.getElementById("result");
|
| const reasonDiv = document.getElementById("reason");
|
| const spellStepsDiv = document.getElementById("spellSteps");
|
|
|
| resultDiv.innerHTML = "⏳ Checking...";
|
| reasonDiv.innerHTML = "";
|
| spellStepsDiv.innerHTML = "";
|
|
|
| try {
|
| const response = await fetch('/predict', {
|
| method: 'POST',
|
| headers: { 'Content-Type': 'application/json' },
|
| body: JSON.stringify({ url: url })
|
| });
|
|
|
| const data = await response.json();
|
|
|
| if (data.prediction === 1) {
|
| resultDiv.innerHTML = "🚫 <span class='spam'>SPAM / PHISHING</span>";
|
| } else {
|
| resultDiv.innerHTML = "✅ <span class='safe'>This URL is SAFE</span>";
|
| }
|
|
|
| if (data.reason) {
|
| reasonDiv.innerText = `🔍 Reason: ${data.reason}`;
|
| }
|
|
|
| if (data.steps && data.steps.length > 0) {
|
| const title = document.createElement("h3");
|
| title.innerText = "🧠 Spell Checker Log:";
|
| spellStepsDiv.appendChild(title);
|
|
|
| data.steps.forEach((step) => {
|
| const line = document.createElement("div");
|
| line.innerHTML = step.valid
|
| ? `✅ ${step.word} → Valid`
|
| : `❌ ${step.word} → Misspelled`;
|
| line.style.color = step.valid ? "green" : "red";
|
| spellStepsDiv.appendChild(line);
|
| });
|
| }
|
| } catch (err) {
|
| resultDiv.innerHTML = "⚠️ Error checking the URL.";
|
| reasonDiv.innerText = err.message;
|
| }
|
| }
|
| </script>
|
|
|
| <div class="mt-6 text-center">
|
| <a href="/naive_bayes" class="inline-block bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded shadow">
|
| ← Back to Naive Bayes classification
|
| </a>
|
| </div>
|
| </body>
|
| </html> |
