created a websocket to witness the progress of the processing

package.json

@@ -9,14 +9,15 @@
         "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js"
     },
     "dependencies": {
-        "express": "^4.18.2",
         "cors": "^2.8.5",
         "dotenv": "^16.3.1",
-        "multer": "^1.4.5-lts.1"
+        "express": "^4.18.2",
+        "multer": "^1.4.5-lts.1",
+        "socket.io": "^4.8.1"
     },
     "devDependencies": {
-        "nodemon": "^3.0.2",
         "jest": "^29.7.0",
+        "nodemon": "^3.0.2",
         "supertest": "^6.3.4"
     }
 }

public/css/style.css

@@ -25,3 +25,7 @@ h1 {
     /* adjust size as you like */
     height: auto;
 }
+
+#progress-container {
+    display: none;
+}

public/index.html

@@ -7,6 +7,8 @@
     <link rel="icon" type="image/x-icon" href="/img/crab.png">
     <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>
 </head>
 
@@ -42,9 +44,14 @@
         <input type="file" id="fileInput" accept="application/json" />
         <br /><br />
         <button id="uploadBtn">Upload JSON</button>
+        <span id="status" style="color: green;"> </span>
     </fieldset>
 
-    <div id="status" style="color: green;"></div>
+
+    <div id="progress-container">
+        <progress id="progress-bar" value="0" max="100"></progress>
+        <span id="progress-text">0%</span>
+    </div>
 
 </body>
 

public/js/socket.js

@@ -0,0 +1,26 @@
+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");
+
+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);
+});

src/routes/answers.js

@@ -1,6 +1,8 @@
 import { Router } from "express";
 import multer from "multer";
 import { InvalidJsonFormatError } from "../utils/errors.js";
+import { io as socket } from "../socket.js";
+import { evaluate_comments } from "../utils/process_data.js";
 
 const router = Router();
 
@@ -72,8 +74,9 @@ router.post("/submit/comments", upload.single("file"), async (req, res) => {
             throw error;
         }
 
-        // TODO: Save the file or process it further
-        // For now, just return success
+        socket.emit("started-processing");
+        evaluate_comments(validatedData);
+
         res.status(200).json({
             message: "Answer submitted successfully",
             data: validatedData,
@@ -105,8 +108,8 @@ router.post("/submit/refinement", upload.single("file"), async (req, res) => {
             throw error;
         }
 
-        // TODO: Save the file or process it further
-        // For now, just return success
+        socket.emit("started-processing");
+        evaluate_comments(validatedData);
         res.status(200).json({
             message: "Answer submitted successfully",
             data: validatedData,

src/server.js

@@ -2,7 +2,7 @@ import express, { json } from "express";
 import cors from "cors";
 import dotenv from "dotenv";
 import routes from "./routes/index.js";
-import createSocketServer from "./socket.js";
+import { createSocketServer } from "./socket.js";
 
 dotenv.config();
 

src/socket.js

@@ -0,0 +1,17 @@
+import http from "http";
+import { Server } from "socket.io";
+
+function onConnect(socket) {
+    console.log("Websocket client connected:", socket.id);
+}
+
+let io;
+
+function createSocketServer(app) {
+    const httpServer = http.createServer(app);
+    io = new Server(httpServer);
+    io.on("connection", onConnect);
+    return httpServer;
+}
+
+export { createSocketServer, io };

src/utils/process_data.js

@@ -0,0 +1,29 @@
+import { io as socket } from "../socket.js";
+
+export const evaluate_comments = async (answers) => {
+    const total = Object.keys(answers).length;
+    let i = 0;
+    for (const [key, value] of Object.entries(answers)) {
+        console.log(`Processing ${key}: ${value}...`);
+        await new Promise((res) => setTimeout(res, 500));
+        console.log("Done");
+        const data = {
+            percent: Math.floor((++i / total) * 100),
+        };
+        socket.emit("progress", data);
+    }
+};
+
+export const evaluate_refinement = async (answers) => {
+    const total = Object.keys(answers).length;
+    let i = 0;
+    for (const [key, value] of Object.entries(answers)) {
+        console.log(`Processing ${key}: ${value}...`);
+        await new Promise((res) => setTimeout(res, 500));
+        console.log("Done");
+        const data = {
+            percent: Math.floor((++i / total) * 100),
+        };
+        socket.emit("progress", data);
+    }
+};