Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Spam Email Classifier</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| padding: 20px; | |
| } | |
| textarea { | |
| width: 100%; | |
| height: 150px; | |
| } | |
| button { | |
| margin-top: 10px; | |
| padding: 10px 20px; | |
| background-color: #4CAF50; | |
| color: white; | |
| border: none; | |
| cursor: pointer; | |
| } | |
| #result { | |
| margin-top: 20px; | |
| font-size: 18px; | |
| font-weight: bold; | |
| } | |
| #info { | |
| margin-top: 20px; | |
| font-size: 16px; | |
| font-style: italic; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Spam Email Classifier</h1> | |
| <p>Enter your email below, and the model will predict if it's spam or not.</p> | |
| <form id="email-form"> | |
| <textarea id="email-text" placeholder="Enter email content..."></textarea> | |
| <button type="submit">Classify Email</button> | |
| </form> | |
| <button id="info-button">Info</button> | |
| <div id="result"></div> | |
| <div id="info"></div> | |
| <script> | |
| // Local Server | |
| // const PREDICT_URL = "http://127.0.0.1:8000/predict/"; | |
| // const INFO_URL = "http://127.0.0.1:8000/"; | |
| // Remote Servers | |
| const PREDICT_URL = "https://dangminh214-spam-email-classifier.hf.space/predict/"; | |
| const INFO_URL = "https://dangminh214-spam-email-classifier.hf.space/"; | |
| // Handle email form submission | |
| document.getElementById('email-form').addEventListener('submit', async function(event) { | |
| event.preventDefault(); | |
| const emailText = document.getElementById('email-text').value; | |
| const response = await fetch(PREDICT_URL, { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json' | |
| }, | |
| body: JSON.stringify({ text: emailText }) | |
| }); | |
| const data = await response.json(); | |
| let predictResult = "Legit E-Mail" | |
| if (data.prediction == "spam") predictResult = "Spam E-Mail" | |
| document.getElementById('result').textContent = `Prediction: ${predictResult}`; | |
| }); | |
| // Handle info button click | |
| document.getElementById('info-button').addEventListener('click', async function() { | |
| const response = await fetch(INFO_URL); | |
| const data = await response.json(); | |
| document.getElementById('info').textContent = data.info; | |
| }); | |
| </script> | |
| </body> | |
| </html> | |