added table to show results in frontend

This commit is contained in:
Karma Riuk
2025-05-08 00:11:21 +02:00
parent 173a84aa2b
commit fe064218f5
5 changed files with 101 additions and 6 deletions

View File

@ -6,6 +6,8 @@ const progressBar = document.getElementById("progress-bar");
const progressText = document.getElementById("progress-text");
const statusEl = document.getElementById("status");
const resultsContainer = document.getElementById("results-container");
function setProgress(percent) {
progressBar.value = percent;
progressText.textContent = `${percent}%`;
@ -24,3 +26,27 @@ socket.on("started-processing", () => {
progressContainer.style.display = "block";
setProgress(0);
});
socket.on("ended-processing", (data) => {
resultsContainer.style.display = "block";
// empty the table besides the header of the table and fill the table. the data is of form id:
// {"proposed comment": "bla bla bla", "bleu score": 0.2}
const table = resultsContainer.querySelector("table");
// remove all the rows besides the table header
while (table.rows.length > 1) {
table.deleteRow(1);
}
Object.entries(data).forEach(([id, info]) => {
const row = table.insertRow(); // create a new row
const idCell = row.insertCell(); // cell 1: id
const commentCell = row.insertCell(); // cell 2: proposed comment
const scoreCell = row.insertCell(); // cell 3: bleu score
idCell.textContent = id;
commentCell.textContent = info["proposed comment"];
scoreCell.textContent = info["max bleu score"].toFixed(4);
});
});