Spaces:
Sleeping
Sleeping
File size: 4,223 Bytes
bf5ba70 f9272e7 | 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 | document.addEventListener('DOMContentLoaded', () => {
const btn = document.getElementById('submit-btn');
const input = document.getElementById('text-input');
const resultBox = document.getElementById('result-box');
async function sendFeedback(isCorrect) {
const text = input.value.trim();
const predictedLabel = resultBox.textContent.split(":")[1].split(",")[0].trim();
await fetch('/feedback', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ text, predicted_label: predictedLabel, correct: isCorrect })
});
}
btn.addEventListener('click', async () => {
const text = input.value.trim();
if (!text) {
resultBox.textContent = "Введите текст";
resultBox.className = "alert alert-warning mt-4";
return;
}
resultBox.textContent = "⏳ Analysis...";
resultBox.className = "alert alert-info mt-4";
try {
const response = await fetch('/predict', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ text })
});
const data = await response.json();
resultBox.textContent = `🏷 Class: ${data.label}, assurance: ${data.confidence}`;
resultBox.className = "alert alert-success mt-4";
document.getElementById("feedback-section").classList.remove("d-none");
document.getElementById("probs-container").style.display = 'block';
const probsBars = document.getElementById('probs-bars');
probsBars.innerHTML = '';
for (const [label, prob] of Object.entries(data.probs)) {
const bar = document.createElement('div');
bar.className = 'progress my-2';
const inner = document.createElement('div');
inner.className = 'progress-bar';
inner.style.width = `${prob * 100}%`;
inner.style.color = 'black';
inner.innerText = `${label}: ${(prob * 100).toFixed(1)}%`;
bar.appendChild(inner);
probsBars.appendChild(bar);
}
} catch (err) {
resultBox.textContent = "Error";
resultBox.className = "alert alert-danger mt-4";
}
});
document.getElementById("btn-correct").addEventListener("click", async () => {
await sendFeedback(true);
document.getElementById("feedback-section").classList.add("d-none");
resultBox.innerHTML += "<br>Thanks for the confirmation!";
});
document.getElementById("btn-incorrect").addEventListener("click", () => {
sendFeedback(false);
document.getElementById("correction-form").classList.remove("d-none");
});
document.getElementById("send-correction").addEventListener("click", () => {
const correctLabel = document.getElementById("correct-label").value;
const text = document.getElementById("text-input").value.trim();
const predictedLabel = resultBox.textContent.split(":")[1].split(",")[0].trim();
if (!correctLabel) {
alert("Choose the right class");
return;
}
fetch('/correction', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ text, predicted_label: predictedLabel, true_label: correctLabel })
}).then(() => {
alert("Thank you, the correction has been sent");
document.getElementById("correction-form").classList.add("d-none");
});
});
const themeToggle = document.getElementById("theme-toggle");
themeToggle.addEventListener("change", () => {
document.body.classList.toggle("bg-dark");
document.body.classList.toggle("text-white");
document.querySelector(".container").classList.toggle("bg-dark");
document.querySelector(".container").classList.toggle("text-white");
document.body.classList.toggle("dark-theme");
document.querySelectorAll('h1, .form-label').forEach(el => {
el.classList.toggle('text-dark');
})
});
}); |