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