Files
crab-webapp/public/js/index.js
2025-05-17 17:37:19 +02:00

205 lines
6.4 KiB
JavaScript

const socket = io();
const progressContainer = document.getElementById("progress-container");
const progressBar = document.getElementById("progress-bar");
const progressText = document.getElementById("progress-text");
const uploadStatusEl = document.getElementById("upload-status");
const statusStatusEl = document.getElementById("status-status");
const commentResultsContainer = document.querySelector(
".results-container#comment",
);
const refinementResultsContainer = document.querySelector(
".results-container#refinement",
);
const tick = "✅";
const cross = "❌";
let results = {};
// Download logic
document.getElementById("download-dataset").onclick = () => {
const ds = document.getElementById("dataset-select").value;
const withCtx = document.getElementById("with-context").checked;
const url =
`/datasets/download/${ds}` + (withCtx ? "?withContext=true" : "");
window.location = url;
};
// Upload logic
document.getElementById("upload-btn").onclick = async () => {
uploadStatusEl.classList.add("hidden");
progressContainer.classList.add("hidden");
const type = document.getElementById("answer-cype").value;
const fileInput = document.getElementById("file-cnput");
if (!fileInput.files.length) {
return alert("Please choose a JSON file first.");
}
const file = fileInput.files[0];
const form = new FormData();
form.append("file", file);
const res = await fetch(`/answers/submit/${type}`, {
headers: {
"X-Socket-Id": socket.id,
},
method: "POST",
body: form,
});
const json = await res.json();
if (!res.ok) {
uploadStatusEl.classList.remove("hidden");
uploadStatusEl.style.color = "red";
uploadStatusEl.textContent =
json.error + (json.message ? ": " + json.message : "");
return;
}
results = json;
progressContainer.classList.add("hidden");
commentResultsContainer.classList.add("hidden");
refinementResultsContainer.classList.add("hidden");
const resultsContainer =
type === "comment"
? commentResultsContainer
: refinementResultsContainer;
resultsContainer.classList.remove("hidden");
const tbody = resultsContainer.querySelector("table tbody");
tbody.innerHTML = "";
Object.entries(results).forEach(([id, info]) => {
const row = tbody.insertRow(); // create a new row
const idCell = row.insertCell(); // cell 1: id
idCell.textContent = id;
if (type == "comment") {
const commentCell = row.insertCell();
const scoreCell = row.insertCell();
const span = document.createElement("span");
span.className = "comment-cell";
span.textContent = info["proposed_comment"];
commentCell.appendChild(span);
scoreCell.textContent = info["max_bleu_score"].toFixed(2);
} else {
const compiledCell = row.insertCell();
const testedCell = row.insertCell();
compiledCell.textContent =
info["compilation"] || false ? tick : cross;
testedCell.textContent = info["test"] || false ? tick : cross;
}
});
};
[...document.getElementsByClassName("download-results")].forEach((e) => {
e.onclick = () => {
const dataStr =
"data:text/json;charset=utf-8," +
encodeURIComponent(JSON.stringify(results));
const dlAnchorElem = document.createElement("a");
dlAnchorElem.setAttribute("href", dataStr);
dlAnchorElem.setAttribute("download", "results.json");
document.body.appendChild(dlAnchorElem);
dlAnchorElem.click();
document.body.removeChild(dlAnchorElem);
};
});
function setProgress(percent) {
progressContainer.classList.remove("hidden");
progressBar.value = percent;
progressText.textContent = `${percent.toFixed(0)}%`;
}
socket.on("progress", (data) => {
setProgress(data.percent);
if (data.percent == 100) {
uploadStatusEl.style.color = "green";
uploadStatusEl.textContent = "Processing complete!";
}
});
socket.on("started-processing", (data) => {
setProgress(0);
uploadStatusEl.classList.remove("hidden");
uploadStatusEl.style.color = "green";
uploadStatusEl.textContent = data["id"];
});
socket.on("successful-upload", () => {
uploadStatusEl.classList.remove("hidden");
uploadStatusEl.style.color = "green";
uploadStatusEl.textContent = "Upload succeeded!";
});
// INFO-MODAL LOGIC
const aboutButton = document.getElementById("about-button");
const modalOverlay = document.getElementById("modal-overlay");
const modalContent = document.getElementById("modal-content");
const modalClose = document.getElementById("modal-close");
function show_modal_with(content) {
modalOverlay.classList.remove("hidden");
modalContent.innerHTML = "";
modalContent.appendChild(content);
modalOverlay.focus();
}
// open modal
aboutButton.addEventListener("click", () => {
show_modal_with(about.content.cloneNode(true));
});
// close modal via “×” button
modalClose.addEventListener("click", () => {
modalOverlay.classList.add("hidden");
});
// also close if you click outside the white box
modalOverlay.addEventListener("click", (e) => {
if (e.target === modalOverlay) {
modalOverlay.classList.add("hidden");
}
});
modalOverlay.addEventListener("keydown", (e) => {
if (e.key === "Escape") {
modalOverlay.classList.add("hidden");
console.log("hiding");
}
});
["download", "upload", "results"].forEach((section) => {
window[`info-${section}-btn`].addEventListener("click", () => {
show_modal_with(window[`info-${section}`].content.cloneNode(true));
});
});
document.getElementById("request-status").onclick = async () => {
if (!uuid.reportValidity()) return;
const res = await fetch(`/answers/status/${uuid.value}`, {
headers: {
"X-Socket-Id": socket.id,
},
});
const json = await res.json();
if (!res.ok) {
statusStatusEl.classList.remove("hidden");
statusStatusEl.style.color = "red";
statusStatusEl.textContent =
json.error + (json.message ? ": " + json.message : "");
return;
}
statusStatusEl.classList.remove("hidden");
statusStatusEl.style.color = "green";
statusStatusEl.textContent = json["status"];
};