Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Sentiment Classifier</title> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <style> | |
| body { | |
| background-color: #e3f2fd; | |
| color: #0d47a1; | |
| } | |
| .container { | |
| margin-top: 10%; | |
| } | |
| .card { | |
| background-color: #bbdefb; | |
| border: none; | |
| border-radius: 1rem; | |
| } | |
| .btn-primary { | |
| background-color: #0d47a1; | |
| border-color: #0d47a1; | |
| } | |
| .loader { | |
| display: none; | |
| margin-top: 10px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container text-center"> | |
| <div class="card p-4 shadow-lg"> | |
| <h2 class="mb-3">SMS Spam Classifier</h2> | |
| <p class="mb-4">An optimized sms spam classifier from <a | |
| href="https://huggingface.co/mrm8488/bert-tiny-finetuned-sms-spam-detection" target="_blank">BERT | |
| Tiny SMS Spam Detector</a></p> | |
| <input id="sentenceInput" type="text" class="form-control mb-3" placeholder="Enter your sms text here ..." | |
| value="FreeMsg Hey there darling it's been 3 week's now and no word back! I'd like some fun you up for it still? Tb ok! XxX std chgs to send, £1.50 to rcv" /> | |
| <button class="btn btn-primary w-100" onclick="classifySentence()">Classify</button> | |
| <div class="loader" id="loader" style="display:none;"> | |
| <div class="spinner-border text-primary" role="status"> | |
| <span class="visually-hidden">Loading...</span> | |
| </div> | |
| </div> | |
| <div id="result" class="mt-4 fs-5"></div> | |
| </div> | |
| </div> | |
| <script> | |
| async function classifySentence() { | |
| const sentence = document.getElementById("sentenceInput").value; | |
| const loader = document.getElementById("loader"); | |
| const resultDiv = document.getElementById("result"); | |
| resultDiv.textContent = ""; | |
| loader.style.display = "block"; | |
| const startTime = performance.now(); // Start timing | |
| try { | |
| const response = await fetch(`${window.location.origin}/classify`, { | |
| method: "POST", | |
| headers: { | |
| "Content-Type": "application/json", | |
| }, | |
| body: JSON.stringify({ sentence }), | |
| }); | |
| const data = await response.json(); | |
| const endTime = performance.now(); // End timing | |
| const elapsed = (endTime - startTime).toFixed(2); | |
| // Map model labels to custom labels | |
| const labelMap = { | |
| "LABEL_0": "SPAM", | |
| "LABEL_1": "HAM" | |
| }; | |
| const mappedLabel = labelMap[data.result.label] || data.result.label; | |
| // Display label and score in bold, plus elapsed time | |
| resultDiv.innerHTML = | |
| `Label: <b>${mappedLabel}</b> -- ` + | |
| `Score: <b>${data.result.score.toFixed(3)}</b> -- ` + | |
| `Response Time: <b>${elapsed} ms</b>`; | |
| } catch (err) { | |
| resultDiv.textContent = "❌ Error: Unable to classify sentence."; | |
| console.error(err); | |
| } finally { | |
| loader.style.display = "none"; | |
| } | |
| } | |
| // 🔥 This adds Enter key support | |
| document.getElementById("sentenceInput").addEventListener("keypress", function (e) { | |
| if (e.key === "Enter") { | |
| classifySentence(); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |