added code to start fawkes and capture output (not yet finished)

html/index.html

@@ -59,8 +59,11 @@
 				<tbody>
 				</tbody>
 			</table>
+			
 			<p id="text-no-images" style="text-align: center;">You haven't uploaded any images yet.</p>
 
+			<button class="button button-primary" id="button-start"><i class="fas fa-check"></i>&nbsp;&nbsp;&nbsp;Start Fawkes</button>
+
 		</div>
 
 		<div class="footer">
@@ -85,7 +88,11 @@ document.getElementById("button-upload").addEventListener("click", function(){
 
 		// Add file to files list
 		var id = Date.now();
-		files[id] = file;
+		files[id] = {
+			file: file,
+			uploading: true,
+			error: false
+		};
 
 		// Add file to table
 		var table = document.getElementById("table-images").getElementsByTagName("tbody")[0];
@@ -109,6 +116,8 @@ document.getElementById("button-upload").addEventListener("click", function(){
 
 socket.on("FILE_ERROR", function(data){
 	// When error while uploading
+	files[data.name].uploading = false;
+	files[data.name].error = true;
 	document.getElementById("status-"+data.name).innerHTML = "<i class='fas fa-exclamation-triangle'></i>&nbsp;&nbsp;&nbsp;Upload Error";
 	document.getElementById("status-"+data.name).title = data.error;
 });
@@ -117,7 +126,7 @@ socket.on("FILE_ACK", function(data){
 	// When can send next file segment
 	var file = files[data.name];
 	var offset = data.nextSegment * 100000;
-	var fileSegment = file.slice(offset, Math.min(offset + 100000, file.size));
+	var fileSegment = file.file.slice(offset, Math.min(offset + 100000, file.file.size));
 	var fileReader = new FileReader();
 	fileReader.onload = function(event){
 		socket.emit("FILE_DATA", {name:data.name, data:event.target.result, segment:data.nextSegment});
@@ -130,9 +139,55 @@ socket.on("FILE_ACK", function(data){
 
 socket.on("FILE_DONE", function(data){
 	// File upload done
+	files[data.name].uploading = false;
 	document.getElementById("status-"+data.name).innerHTML = "<i class='fas fa-check'></i>&nbsp;&nbsp;&nbsp;Upload Complete";
 });
 
+document.getElementById("button-start").addEventListener("click", function(){
+	// When start button clicked
+
+	// Check if all files uploaded
+	var num = 0;
+	for(let id in files){
+		if(files[id].uploading){
+			alert("Not all files have been uploaded!");
+			return;
+		}else if(!files[id].error){
+			num++;
+		}
+	}
+	if(num == 0){
+		alert("You haven't uploaded any files yet!");
+		return;
+	}
+
+	// Disable button
+	document.getElementById("button-start").style.display = "none";
+
+	// Send server request to start Fawkes
+	socket.emit("FAWKES_START");
+});
+
+socket.on("FAWKES_STARTED", function(){
+	// Update all states
+	for(let id in files){
+		if(!files[id].uploading && !files[id].error){
+			document.getElementById("status-"+id).innerHTML = "<i class='fas fa-hourglass-half'></i>&nbsp;&nbsp;&nbsp;In Queue";
+		}
+	}
+});
+
+socket.on("FAWKES_STATE", function(data){
+	// Update state
+	if(data.done){
+		document.getElementById("status-"+data.name).innerHTML = "<i class='fas fa-check'></i>&nbsp;&nbsp;&nbsp;Processing Complete";
+	}else if(data.numFaces == 0){
+		document.getElementById("status-"+data.name).innerHTML = "<i class='fas fa-check'></i>&nbsp;&nbsp;&nbsp;No Faces Detected";
+	}else{
+		document.getElementById("status-"+data.name).innerHTML = "<i class='fas fa-spinner fa-pulse'></i>&nbsp;&nbsp;&nbsp;Processing Faces ("+data.face+"/"+data.numFaces+")";
+	}
+});
+
 </script>
 
 

main.js

@@ -23,12 +23,14 @@ const url = require("url");
 const fs = require("fs");
 const util = require("util");
 const crypto = require("crypto");
+const spawn = require("child_process").spawn;
 
 // Vars
 const hostname = "192.168.0.128"; // Enter your local IP address here
 const port = 8001; // Enter a port number here
 
 var files = {};
+var lastImageId;
 
 
 // Create HTTP server
@@ -159,6 +161,56 @@ io.on("connection", (socket) => {
 			}
 		});
 	});
+
+	// Fawkes start
+	socket.on("FAWKES_START", () => {
+		// Start binary
+		var process = spawn("fawkes/protection", ["-d", "fawkes/files/"+userId, "--mode", "low"]);
+
+		// Add listeners
+		process.stdout.setEncoding("utf8");
+		process.stdout.on("data", function(data){
+			// Received output from process
+			console.log("fawkes stdout: "+data);
+
+			// Parse output
+			data = data.replace("\n", " ");
+			var splices = data.split(" ");
+			if(data.startsWith("Find ")){
+				var numFaces = splices[1];
+				var imageId = splices[4];
+				console.log("fawkes found "+numFaces+" faces in image "+imageId);
+
+				// Update file info
+				files[userId+imageId].numFaces = numFaces;
+				lastImageId = imageId;
+
+				// Update client states
+				socket.emit("FAWKES_STATE", {name:imageId, face:1, numFaces:numFaces});
+
+			}else if(splices[0] == "processing"){
+				var face = splices[2];
+				console.log("fawkes processing face "+face);
+
+				// Update client states
+				socket.emit("FAWKES_STATE", {name:lastImageId, face:face, numFaces:files[lastImageId].numFaces});
+
+			}
+			
+		});
+		process.stderr.setEncoding("utf8");
+		process.stderr.on("data", function(data){
+			// Received output from process
+			console.log("fawkes stderr: "+data);
+		});
+		process.on("close", function(code){
+			// Fawkes exited
+			console.log("Fawkes exited with code "+code);
+		});
+
+		// Update file states
+		socket.emit("FAWKES_STARTED");
+	});
 });