created a websocket to witness the progress of the processing

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