2021-10-30 07:55:09 +00:00
<!--
Copyright (C) 2021 Thomas Van Acker
This program is free software: you can redistribute it and/or modify it under
the terms of the GNU General Public License as published by the Free Software
Foundation, either version 3 of the License, or (at your option) any later
version.
This program is distributed in the hope that it will be useful, but WITHOUT
ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
You should have received a copy of the GNU General Public License along with
this program. If not, see < https: / / www . gnu . org / licenses / > .
2021-10-30 14:25:33 +00:00
This project is hosted on https://git.bitscuit.be/bitscuit/Fawkes
2021-10-30 07:55:09 +00:00
-->
< html >
< head >
< title > Fawkes< / title >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< link href = "https://fonts.googleapis.com/css?family=Raleway:400,300,600" rel = "stylesheet" type = "text/css" >
< link href = "css/normalize.css" rel = "stylesheet" >
< link href = "css/skeleton.css" rel = "stylesheet" >
< link href = "css/extra.css" rel = "stylesheet" >
< link href = "css/fontawesome/css/all.css" rel = "stylesheet" >
< / head >
< body style = "padding-top: 10px;" >
2021-10-30 14:25:33 +00:00
< div id = "main" class = "container" style = "text-align: center;" >
2021-10-30 07:55:09 +00:00
< h1 > Fawkes< / h1 >
< p > Protect your images from facial recognition.< / p >
2021-10-30 14:25:33 +00:00
< p > TODO: add more info< / p >
2021-10-30 07:55:09 +00:00
< / div >
2021-10-30 14:25:33 +00:00
< div class = "container" >
< p > The table below shows the status for each image you've uploaded. You can select the files you want to protect using the < i > Browse< / i > and < i > Upload< / i > buttons below.< / p >
< div class = "row" >
< div class = "twelve columns" >
< label for = "input-file" > Your Image< / label >
< input class = "u-full-width" type = "file" id = "input-file" >
< / div >
< / div >
< button id = "button-upload" class = "button button-primary" > < i class = "fas fa-upload" > < / i > Upload< / button >
< / div >
< div class = "container" >
< table id = "table-images" class = "u-full-width" >
< thead >
< tr >
< th > Image Name< / th >
< th > Status< / th >
< / tr >
< / thead >
< tbody >
< / tbody >
< / table >
< p id = "text-no-images" style = "text-align: center;" > You haven't uploaded any images yet.< / p >
< / div >
2021-10-30 07:55:09 +00:00
< div class = "footer" >
< p > Many thanks to the people who made < a href = "http://sandlab.cs.uchicago.edu/fawkes/" > Fawkes< / a > !< br / > Copyright © 2021 Thomas Van Acker< br / > Project hosted on < a target = "_blank" href = "https://git.bitscuit.be/bitscuit/Fawkes" > Gitscuit< / a > < / p >
< / div >
<!-- Socket.io stuff -->
< script src = "/socket.io/socket.io.js" > < / script >
< script >
2021-10-30 14:25:33 +00:00
// Vars
var files = {};
2021-10-30 07:55:09 +00:00
// Start socket.io
var socket = io();
// Init listeners
2021-10-30 14:25:33 +00:00
document.getElementById("button-upload").addEventListener("click", function(){
if(document.getElementById("input-file").files.length != 0){
var file = document.getElementById("input-file").files[0];
// Add file to files list
var id = Date.now();
files[id] = file;
// Add file to table
var table = document.getElementById("table-images").getElementsByTagName("tbody")[0];
var row = "";
row += "< tr id = 'row-"+id+"' > ";
row += "< td > "+file.name+"< / td > ";
row += "< td id = 'status-"+id+"' > < i class = 'fas fa-spinner fa-pulse' > < / i > Initializing Upload< / td > ";
row += "< / tr > ";
table.innerHTML += row;
document.getElementById("text-no-images").style.display = "none";
// Send request to server
socket.emit("FILE_START", {name:id, length:file.size});
}else{
// No file selected
alert("Please select a file using the 'Browse' button.");
}
});
socket.on("FILE_ERROR", function(data){
// When error while uploading
document.getElementById("status-"+data.name).innerHTML = "< i class = 'fas fa-exclamation-triangle' > < / i > Upload Error";
document.getElementById("status-"+data.name).title = data.error;
});
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 fileReader = new FileReader();
fileReader.onload = function(event){
socket.emit("FILE_DATA", {name:data.name, data:event.target.result, segment:data.nextSegment});
};
fileReader.readAsBinaryString(fileSegment);
// Update status
document.getElementById("status-"+data.name).innerHTML = "< i class = 'fas fa-spinner fa-pulse' > < / i > Uploading ("+Math.floor(100*data.nextSegment/data.numSegments)+"%)";
});
socket.on("FILE_DONE", function(data){
// File upload done
document.getElementById("status-"+data.name).innerHTML = "< i class = 'fas fa-check' > < / i > Upload Complete";
});
2021-10-30 07:55:09 +00:00
< / script >
< / body >
< / html >
