|
|
<!DOCTYPE html> |
|
|
<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">Climate Sentiment Classifier</h2> |
|
|
<p class="mb-4">An optimized sentiment classifier to classify climate-related sentiment in climate-related |
|
|
paragraphs hosted from <a href="https://huggingface.co/climatebert" target="_blank">ClimateBERT</a></p> |
|
|
<input id="sentenceInput" type="text" class="form-control mb-3" placeholder="Enter your sentence here" |
|
|
value="We emitted 13.4 million tonnes CO2 of Scope 2 (indirect emissions), being emissions arising from our consumption of purchased electricity, steam or heat." /> |
|
|
<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(); |
|
|
|
|
|
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(); |
|
|
const elapsed = (endTime - startTime).toFixed(2); |
|
|
|
|
|
|
|
|
resultDiv.innerHTML = |
|
|
`Label: <b>${data.result.label.toUpperCase()}</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"; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById("sentenceInput").addEventListener("keypress", function (e) { |
|
|
if (e.key === "Enter") { |
|
|
classifySentence(); |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
|
|
|
|
|
|
</html> |
