File size: 3,148 Bytes
93944e5 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 | document.addEventListener("DOMContentLoaded", () => {
const form = document.getElementById("sentiment-form");
const textArea = document.getElementById("text-input");
const btn = document.getElementById("analyze-btn");
const btnText = btn.querySelector(".btn-text");
const spinner = btn.querySelector(".spinner");
const resultContainer = document.getElementById("result-container");
const sentimentValue = document.getElementById("sentiment-value");
const confidenceBar = document.getElementById("confidence-bar");
const confidenceText = document.getElementById("confidence-text");
const errorMsg = document.getElementById("error-message");
// Auto-resize textarea
textArea.addEventListener("input", function () {
this.style.height = "auto";
this.style.height = this.scrollHeight + "px";
});
form.addEventListener("submit", async (e) => {
e.preventDefault();
const text = textArea.value.trim();
if (!text) {
showError("Please enter some text to analyze.");
return;
}
// UI Reset
hideError();
setLoading(true);
resultContainer.classList.add("hidden");
try {
const response = await fetch("/analyze", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ text }),
});
const data = await response.json();
if (!response.ok) {
throw new Error(data.error || "An error occurred during analysis.");
}
// Animate results
displayResult(data.sentiment, data.confidence);
} catch (error) {
showError(error.message);
} finally {
setLoading(false);
}
});
function setLoading(isLoading) {
if (isLoading) {
btn.disabled = true;
btnText.style.opacity = "0";
spinner.classList.remove("hidden");
} else {
btn.disabled = false;
btnText.style.opacity = "1";
spinner.classList.add("hidden");
}
}
function showError(message) {
errorMsg.textContent = message;
errorMsg.classList.remove("hidden");
}
function hideError() {
errorMsg.textContent = "";
errorMsg.classList.add("hidden");
}
function displayResult(sentiment, confidence) {
// Reset old classes
sentimentValue.className = "metric-value";
confidenceBar.className = "progress-bar-fill";
confidenceBar.style.width = "0%";
// Show container
resultContainer.classList.remove("hidden");
// Setup new values
sentimentValue.textContent = sentiment;
const confPercentage = Math.round(confidence * 100);
confidenceText.textContent = confPercentage + "%";
// Force reflow for animation
void confidenceBar.offsetWidth;
// Add color classes
if (sentiment.toLowerCase() === "positive") {
sentimentValue.classList.add("positive");
confidenceBar.classList.add("positive");
} else {
sentimentValue.classList.add("negative");
confidenceBar.classList.add("negative");
}
// Animate progress bar
setTimeout(() => {
confidenceBar.style.width = Math.max(confPercentage, 5) + "%";
}, 50);
}
});
|