added table to show results in frontend

public/css/style.css

@@ -42,3 +42,50 @@ h1 {
     width: 100%;
 }
 
+#results-container {
+    display: none;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+}
+table th {
+    background-color: #f4f4f4;
+    padding: 8px;
+    text-align: left;
+    border-bottom: 2px solid #ddd;
+}
+
+table td {
+    padding: 8px;
+    border-bottom: 1px solid #eee;
+}
+
+table tr:nth-child(even) {
+    background-color: #fafafa;
+}
+
+table tr:hover {
+    background-color: #f1f1f1;
+}
+
+/* style id column values */
+table td:nth-child(1) {
+
+  font-family: monospace;   /* fixed-width font */
+  width: 8ch;               /* exactly 8 “0” widths */
+  white-space: normal;      /* allow wrapping */
+  word-break: break-all;   
+}
+
+/* style score header */
+table th:nth-child(3) {
+    white-space: nowrap;
+}
+
+/* style score column values */
+table td:nth-child(3) {
+    text-align: right;
+}
+

public/index.html

@@ -56,6 +56,15 @@
         </div>
     </div>
 
+    <div id="results-container">
+        <h3>Results</h3>
+        <table>
+            <tr>
+            <th>id</th>
+            <th>Proposed comment</th>
+            <th>Max bleu score</th>
+            </tr>
+        </table>
     </div>
 
 </body>

public/js/socket.js

@@ -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);
+    });
+});

src/routes/answers.js

@@ -80,11 +80,18 @@ router.post("/submit/comments", upload.single("file"), async (req, res) => {
             io.to(socketId).emit("started-processing");
         }
 
-        evaluate_comments(validatedData, (percent) => {
+        evaluate_comments(
+            validatedData,
+            (percent) => {
                 if (!(socketId && io.sockets.sockets.has(socketId))) return;
 
                 io.to(socketId).emit("progress", { percent });
-        });
+            },
+            (results) => {
+                if (!(socketId && io.sockets.sockets.has(socketId))) return;
+                io.to(socketId).emit("ended-processing", results);
+            },
+        );
 
         res.status(200).json({
             message: "Answer submitted successfully",

src/utils/process_data.js

@@ -4,7 +4,7 @@ import { bleu } from "bleu-score";
 
 const DATASET_PATH = getProjectPath("data/dataset.json");
 
-export const evaluate_comments = async (answers, percent_cb) => {
+export const evaluate_comments = async (answers, percent_cb, finished_cb) => {
     console.log(`Reading dataset...`);
     const raw = fs.readFileSync(DATASET_PATH);
     const dataset = JSON.parse(raw);
@@ -19,6 +19,7 @@ export const evaluate_comments = async (answers, percent_cb) => {
 
     const total = Object.keys(answers).length;
     let i = 0;
+    const results = {};
     for (const [id, generated_comment] of Object.entries(answers)) {
         console.log(`Processing ${id}...`);
         if (!(id in referenceMap)) {
@@ -34,15 +35,20 @@ export const evaluate_comments = async (answers, percent_cb) => {
             maxScore = Math.max(score, maxScore);
             console.log(`bleu score: ${score}`);
         }
+        results[id] = {
+            "proposed comment": generated_comment,
+            "max bleu score": maxScore,
+        };
         console.log(`Max bleu score: ${maxScore}`);
 
         console.log(`Done with ${id}`);
         percent_cb(Math.floor((++i / total) * 100));
     }
     console.log("Done processing comments!");
+    finished_cb(results);
 };
 
-export const evaluate_refinement = async (answers, percent_cb) => {
+export const evaluate_refinement = async (answers, percent_cb, finished_cb) => {
     const total = Object.keys(answers).length;
     let i = 0;
     for (const [key, value] of Object.entries(answers)) {