Hugging Face's logo

Spaces:
Rahul23232
/
EmailSpamdetection
Sleeping

App Files Community
Rahul23232 commited on
Commit
fcf497d
·
verified ·
1 Parent(s): c7960cc

Update template/index.html

Browse files
Files changed (1) hide show
  1. template/index.html +38 -37
template/index.html CHANGED
@@ -2,47 +2,48 @@
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Email Spam Detector</title>
7
  <style>
8
- body{
9
- font-family:Arial, sans-serif;
10
- padding:2rem;
11
- background:#f3f3f3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
12
  }
13
- h1{color:#333}
14
- textarea{width:100%;height:100px; margin-top: 10px; padding: 10px; font-size: 16px;}
15
- button { margin-top: 10px; padding: 10px 20px; font-size: 16px; background: #4CAF50; color: white; border: none; cursor: pointer; }
16
- #result { margin-top: 20px; font-size: 18px; color: #444; }
17
  </style>
18
  </head>
19
  <body>
20
- <h1>Email Spam Detector</h1>
21
- <label for="emailText">Enter Email Content:</label>
22
- <textarea id="emailText" placeholder="Type or paste your email here..."></textarea>
23
- <br>
24
- <button onclick="checkSpam()">Check</button>
25
- <div id="result"></div>
26
- <script>
27
- async function checkSpam() {
28
- const inputText=document.getElementById('emailText').value.trim();
29
- const resultDiv = document.getElementById('result');
30
- if (!inputText) { resultDiv.innerText = "Please enter an email message.";
31
- }return; }
32
- resultDiv.innerText = "Analyzing...";
33
- const hf_api_token = "YOUR_HUGGING_FACE_API_KEY";
34
- // Replace with your token
35
- const model = "your-username/your-model-name";
36
- // e.g. "yourname/email-spam-detector"
37
- try {
38
- 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 }) });
39
- const result = await response.json(); console.log(result);
40
- if (result.error) { resultDiv.innerText = "Model loading or error: " + result.error; } else if (Array.isArray(result)) { const label = result[0][0].label;
41
- const score = (result[0][0].score * 100).toFixed(2); resultDiv.innerText = `Prediction: ${label} (${score}%)`; } else { resultDiv.innerText = "Unexpected response format."; } }
42
- catch (err) { console.error(err); resultDiv.innerText = "Error contacting the model.";
43
 
44
- }
45
-
46
- </script>
 
 
 
 
 
 
 
 
 
 
 
47
  </body>
48
- </html>
 
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
+ <title>Email Spam Detection</title>
 
6
  <style>
7
+ body {
8
+ font-family: Arial, sans-serif;
9
+ background-color: #f4f6f8;
10
+ text-align: center;
11
+ margin-top: 80px;
12
+ }
13
+ textarea {
14
+ width: 60%;
15
+ height: 150px;
16
+ padding: 10px;
17
+ font-size: 16px;
18
+ }
19
+ button {
20
+ padding: 10px 25px;
21
+ font-size: 16px;
22
+ margin-top: 15px;
23
+ cursor: pointer;
24
+ }
25
+ .result {
26
+ margin-top: 20px;
27
+ font-size: 20px;
28
+ font-weight: bold;
29
  }
 
 
 
 
30
  </style>
31
  </head>
32
  <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
33
 
34
+ <h1>Email Spam Detection System</h1>
35
+
36
+ <form method="POST">
37
+ <textarea name="email" placeholder="Enter email text here..." required></textarea>
38
+ <br>
39
+ <button type="submit">Check Email</button>
40
+ </form>
41
+
42
+ {% if prediction %}
43
+ <div class="result">
44
+ Prediction: {{ prediction }}
45
+ </div>
46
+ {% endif %}
47
+
48
  </body>
49
+ </html>