karma/crab-webapp
1
0
Fork 0
mirror of https://github.com/karma-riuk/crab-webapp.git synced 2025-07-05 06:08:13 +02:00
Code Issues Packages Projects Releases Wiki Activity

using new backend logic

Browse Source
This commit is contained in:
Karma Riuk
2025-05-10 22:33:24 +02:00
parent 9e69d376c6
commit 4d87a31d70
5 changed files with 59 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
public/css/style.css
View File

@ -87,6 +87,11 @@ table tbody td:nth-child(1) {
word-break: break-all;
}
.comment-cell {
overflow-wrap: break-word;
word-break: break-word;
}
/* style score header */
table th:nth-child(3) {
white-space: nowrap;
@ -96,4 +101,3 @@ table th:nth-child(3) {
table tbody td:nth-child(3) {
text-align: right;
}

1
public/index.html
View File

@ -8,7 +8,6 @@
<title>Dataset Downloader & Answer Uploader</title>
<link rel="stylesheet" href="css/style.css">
<script src="/socket.io/socket.io.js"></script>
<script defer src="js/socket.js"></script>
<script defer src="js/index.js"></script>
<script defer src="js/sorttable.js"></script>
</head>

58
public/js/index.js
View File

@ -1,3 +1,12 @@
const socket = io();
const progressContainer = document.getElementById("progress-container");
const progressBar = document.getElementById("progress-bar");
const progressText = document.getElementById("progress-text");
const statusEl = document.getElementById("status");
const resultsContainer = document.getElementById("results-container");
// Download logic
document.getElementById("downloadBtn").onclick = () => {
const ds = document.getElementById("datasetSelect").value;
@ -27,13 +36,52 @@ document.getElementById("uploadBtn").onclick = async () => {
});
const json = await res.json();
const statusEl = document.getElementById("status");
if (res.ok) {
statusEl.style.color = "green";
statusEl.textContent = json.message || "Upload succeeded!";
} else {
if (!res.ok) {
statusEl.style.color = "red";
statusEl.textContent =
json.error + (json.message ? ": " + json.message : "");
return;
}
progressContainer.style.display = "none";
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 tbody = resultsContainer.querySelector("table tbody");
tbody.innerHTML = "";
Object.entries(json).forEach(([id, info]) => {
const row = tbody.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.innerHTML = `<span class='comment-cell'>${info["proposed comment"]}</span>`;
scoreCell.textContent = info["max bleu score"].toFixed(4);
});
};
function setProgress(percent) {
progressBar.value = percent;
progressText.textContent = `${percent}%`;
}
socket.on("progress", (data) => {
setProgress(data.percent);
if (data.percent == 100) {
statusEl.style.color = "green";
statusEl.textContent = "Processing complete!";
}
});
socket.on("started-processing", () => {
progressContainer.style.display = "block";
setProgress(0);
});
socket.on("successul-upload", () => {
statusEl.style.color = "green";
statusEl.textContent = "Upload succeeded!";
});

49
public/js/socket.js
View File

@ -1,49 +0,0 @@
const socket = io();
// 2) Grab our new DOM elements
const progressContainer = document.getElementById("progress-container");
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}%`;
}
// 3) Update UI on each progress message
socket.on("progress", (data) => {
setProgress(data.percent);
if (data.percent == 100) {
statusEl.style.color = "green";
statusEl.textContent = "Processing complete!";
}
});
socket.on("started-processing", () => {
progressContainer.style.display = "block";
setProgress(0);
});
socket.on("ended-processing", (data) => {
progressContainer.style.display = "none";
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 tbody = resultsContainer.querySelector("table tbody");
tbody.innerHTML = "";
Object.entries(data).forEach(([id, info]) => {
const row = tbody.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);
});
});