Jigyasa-panwar's picture
Update template/index.html
7564d0c verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Email Spam Detector</title>
<style>
body{
font-family:Arial, sans-serif;
padding:2rem;
background:#f3f3f3
}
h1{color:#333}
textarea{width:100%;height:100px; margin-top: 10px; padding: 10px; font-size: 16px;}
button { margin-top: 10px; padding: 10px 20px; font-size: 16px; background: #4CAF50; color: white; border: none; cursor: pointer; }
#result { margin-top: 20px; font-size: 18px; color: #444; }
</style>
</head>
<body>
<h1>Email Spam Detector</h1>
<label for="emailText">Enter Email Content:</label>
<textarea id="emailText" placeholder="Type or paste your email here..."></textarea>
<br>
<button onclick="checkSpam()">Check</button>
<div id="result"></div>
<script>
async function checkSpam() {
const inputText=document.getElementById('emailText').value.trim();
const resultDiv = document.getElementById('result');
if (!inputText) { resultDiv.innerText = "Please enter an email message.";
}return; }
resultDiv.innerText = "Analyzing...";
const hf_api_token = "YOUR_HUGGING_FACE_API_KEY";
// Replace with your token
const model = "your-username/your-model-name";
// e.g. "yourname/email-spam-detector"
try {
const response = await fetch('https://api-inference.huggingface.co/models/${model}', { method: "POST", headers: { "Authorization": `Bearer ${hf_api_token}`, "Content-Type": "application/json" }, body: JSON.stringify({ inputs: inputText }) });
const result = await response.json(); console.log(result);
if (result.error) { resultDiv.innerText = "Model loading or error: " + result.error; } else if (Array.isArray(result)) { const label = result[0][0].label;
const score = (result[0][0].score * 100).toFixed(2); resultDiv.innerText = `Prediction: ${label} (${score}%)`; } else { resultDiv.innerText = "Unexpected response format."; } }
catch (err) { console.error(err); resultDiv.innerText = "Error contacting the model.";
}
</script>
</body>
</html>