Skip to content

P
Projet ISIS
Commit 179ce411 authored by Okthane's avatar Okthane
Browse files
Options

Commit Final Partie Code

parent 39631691
Hide whitespace changes
Inline Side-by-side
Showing with 116 additions and 124 deletions
byebye.html
View file @ 179ce411
...@@ -8,6 +8,6 @@ ...@@ -8,6 +8,6 @@
<title>Merci pour votre participation</title> <title>Merci pour votre participation</title>
</head> </head>
<body> <body>
<img src="img/.jpg" height="400px" > <img src="img/.jpg" height="400px" >
</body> </body>
</html> </html>
\ No newline at end of file
index.php
View file @ 179ce411
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script> <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/blazeface"></script> <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/blazeface"></script>
<script src="jquery.js"></script> <script src="jquery.js"></script>
<script src="script.js"></script>
<title>Formulaire d'upload de fichiers</title> <title>Formulaire d'upload de fichiers</title>
<!-- API TenserFlow --> <!-- API TenserFlow -->
</head> </head>
...@@ -64,9 +64,9 @@ ...@@ -64,9 +64,9 @@
</div> </div>
<div id=conditions class="col-md-3 my-5 d-flex justify-content-center"> <div id=conditions class="col-md-3 my-5 d-flex justify-content-center">
<ul class="list-group"> <ul class="list-group">
<li id="li-oneface" class="list-group-item list-group-item-secondary">Un seul visage<span></span></li> <li id="li-oneface" class="list-group-item list-group-item-secondary">Un seul visage <span></span></li>
<li id="li-format" class="list-group-item list-group-item-secondary">Format (jpg/png)<span></span></li> <li id="li-format" class="list-group-item list-group-item-secondary">Format (jpg/png)<span></span></li>
<li id="li-taille" class="list-group-item list-group-item-secondary">Poids (< 1 Mo)<span></span></li> <li id="li-taille" class="list-group-item list-group-item-secondary">Poids (< 1 Mo) <span></span></li>
</ul> </ul>
</div> </div>
<div class="col-md-3 my-auto d-flex justify-content-center"> <div class="col-md-3 my-auto d-flex justify-content-center">
...@@ -77,7 +77,7 @@ ...@@ -77,7 +77,7 @@
<div class ="row d-flex justify-content-center" > <div class ="row d-flex justify-content-center" >
<div class="div-form"> <div class="div-form">
<form id ="form" action="" method="" enctype="multipart/form-data"> <form id ="form" action="" method="POST" enctype="multipart/form-data">
<!-- <label for="fileUpload">Fichier:</label> --> <!-- <label for="fileUpload">Fichier:</label> -->
<div class="div-btn-form"> <div class="div-btn-form">
<input type="file" name="photo" id="fileUpload" required="required" class="btn-form" accept="image/png, image/jpeg" > <input type="file" name="photo" id="fileUpload" required="required" class="btn-form" accept="image/png, image/jpeg" >
...@@ -92,7 +92,7 @@ ...@@ -92,7 +92,7 @@
const inpFile = document.getElementById("fileUpload"); const inpFile = document.getElementById("fileUpload");
const previewImage = document.getElementById("img-ID"); const previewImage = document.getElementById("img-ID");
const file = inpFile.files[0]; const file = inpFile.files[0];
console.log("ok"); console.log(file);
if (file){ if (file){
const reader = new FileReader(); const reader = new FileReader();
console.log("ok"); console.log("ok");
...@@ -105,7 +105,7 @@ ...@@ -105,7 +105,7 @@
} }
inpFile.addEventListener("change", function (){ inpFile.addEventListener("change", function (){
const file = inpFile.files[0]; const file = inpFile.files[0];
console.log("ok"); console.log(file);
if (file){ if (file){
const reader = new FileReader(); const reader = new FileReader();
console.log("ok"); console.log("ok");
...@@ -125,6 +125,7 @@ ...@@ -125,6 +125,7 @@
// defaultBtn.click(); // defaultBtn.click();
// } // }
</script> </script>
<script src="script.js"></script>
</div> </div>
</div> </div>
......
removeBackground2.php
View file @ 179ce411
<?php <?php
// phpinfo(); // phpinfo();
define('PATH', "img_bg"); define('PATH', 'img_bg');
define('KEY' ,'n6CkFXudANRCubRKMKG5hjNa'); define('KEY' , 'n6CkFXudANRCubRKMKG5hjNa');
require_once "vendor/autoload.php"; require_once "vendor/autoload.php";
...@@ -21,7 +21,7 @@ if($_SERVER["REQUEST_METHOD"] == "POST") ...@@ -21,7 +21,7 @@ if($_SERVER["REQUEST_METHOD"] == "POST")
$ext = pathinfo($filename, PATHINFO_EXTENSION); $ext = pathinfo($filename, PATHINFO_EXTENSION);
if(array_key_exists($ext, $allowed)) if(array_key_exists($ext, $allowed))
{ {
$client = new GuzzleHttp\Client(["verify"=>false]); $client = new GuzzleHttp\Client(["verify" => false]);
$res = $client->post('https://api.remove.bg/v1.0/removebg', [ $res = $client->post('https://api.remove.bg/v1.0/removebg', [
'multipart' => [ 'multipart' => [
[ [
......
script.js
View file @ 179ce411
...@@ -27,6 +27,7 @@ var errorRemoveBackGround = true; ...@@ -27,6 +27,7 @@ var errorRemoveBackGround = true;
var unSeulVisage = false; var unSeulVisage = false;
var format_correct = false; var format_correct = false;
const id_li_OneFace = "li-oneface"; var li_OneFace; const id_li_OneFace = "li-oneface"; var li_OneFace;
const id_li_format = "li-format"; var li_format; const id_li_format = "li-format"; var li_format;
const id_li_taille = "li-taille"; var li_taille; const id_li_taille = "li-taille"; var li_taille;
...@@ -35,9 +36,6 @@ const id_li_taille = "li-taille"; var li_taille; ...@@ -35,9 +36,6 @@ const id_li_taille = "li-taille"; var li_taille;
$(document).ready(function(){ $(document).ready(function(){
// console.log(inputFileUpload.val());
console.log(getParameter(window.location.href));
//Variables des éléments du DOM. //Variables des éléments du DOM.
inputFileUpload = $("#"+idFileUpload); inputFileUpload = $("#"+idFileUpload);
btnCustomFileUpload = $("#"+idCustomFileUpload); btnCustomFileUpload = $("#"+idCustomFileUpload);
...@@ -52,6 +50,71 @@ $(document).ready(function(){ ...@@ -52,6 +50,71 @@ $(document).ready(function(){
li_taille = $("#"+id_li_taille); li_taille = $("#"+id_li_taille);
//Récupération des données concernant l'étudiant & proposition des différentes addresses mail.
studentId = getParameter(window.location.href);
$.ajax({
url: URL_WEB_API,
method: 'POST',
data: 'studentId='+studentId,
dataType: "json"
})
.done(function(response){
// let data = JSON.stringify(response);
// $("div#res").append(data);
// if(!data["atraiter"]){window.open(URL_END, '_self');
let data = response;
if(!data["atraiter"]){window.open(URL_END, '_self');}
console.log(data);
let prenom = data['prenom'];
let nom = data['nom'];
let mailCalcule = data["mailCalcule"];
let mailsPossibles = data["mailsPossibles"];
if(mailsPossibles.length != 0)
{
$("body").append(
`<div class = "container grayarea">
<h2 class="text-center">Choix de l'adresse électronique</h2>
<div class = "form-container div-form" id="email-container" >
<div class="title-container"><h3>Veuillez choisir votre prochaine adresse électronique</h3></div>
<form id ="choix-email" name="mail" class="div-form form-emails" action="" method="" onsubmit="event.preventDefault();sendMail()">
</form>
</div>
</div>`
);
mailsPossibles.forEach(element => {
$('#choix-email').append(
`<input type="radio" id="${element}" name="mail" value="${element}" required>
<label for="${element}"> ${element}</label><br>`
);
});
$("#choix-email input").attr('checked');
$("#choix-email").append(
`<input type="submit" id="valide-mail" value="Ok c'est bon !" class="btn btn-secondary" style="background-color:#00b8de">`
);
}
else
{
$("body").append(`
<div class = "container grayarea text-center">
<h3>Votre adresse électronique sera ${mailCalcule}, vous recevrez votre mot de passe dans les 24 heures.</h3>
</div>
<div class = "container">
<form action="" method="" onsubmit="event.preventDefault();sendMail()">
<input type="submit" id="valide-mail" value="Ok c'est bon !" class="btn btn-secondary" style="background-color:#00b8de">
</form>
</div>
`
);
}
})
//====EVENEMENTS========================================================
//Si l'on change la photo, //Si l'on change la photo,
inputFileUpload.change(function(){ inputFileUpload.change(function(){
unSeulVisage = false; unSeulVisage = false;
...@@ -61,15 +124,21 @@ $(document).ready(function(){ ...@@ -61,15 +124,21 @@ $(document).ready(function(){
li_format.removeClass (" list-group-item-success list-group-item-danger ").addClass(" list-group-item-secondary "); li_format.removeClass (" list-group-item-success list-group-item-danger ").addClass(" list-group-item-secondary ");
li_OneFace.removeClass(" list-group-item-success list-group-item-danger ").addClass(" list-group-item-secondary "); li_OneFace.removeClass(" list-group-item-success list-group-item-danger ").addClass(" list-group-item-secondary ");
li_taille.removeClass (" list-group-item-success list-group-item-danger ").addClass(" list-group-item-secondary "); li_taille.removeClass (" list-group-item-success list-group-item-danger ").addClass(" list-group-item-secondary ");
}); });
//Requête pour les vérifications de sécurité & de format //Requête pour les vérifications de sécurité & de format
$("#form").on("submit",function (event) { $("#form").on("submit", function (event) {
if(valide == false) if(valide == false)
{ event.preventDefault(); {
var formData = new FormData(this); event.preventDefault();
console.log(inputFileUpload.attr('filename')); const file = inpFile.files[0];
const extension = file.name.substring(file.name.lastIndexOf('.')+1, file.name.length) || file.name;
// La photo se nomme avec l'ID.
const formData = new FormData();
formData.set("photo",file,studentId+"."+extension);
//Requête pour vérifier l'intégrité du fichier, ses dimensions //Requête pour vérifier l'intégrité du fichier, ses dimensions
$.ajax({ $.ajax({
...@@ -104,83 +173,6 @@ $(document).ready(function(){ ...@@ -104,83 +173,6 @@ $(document).ready(function(){
})} })}
}); });
//Récupération des données concernant l'étudiant & proposition des différentes addresses mail.
studentId = getParameter(window.location.href);
$.ajax({
url: URL_WEB_API,
method: 'POST',
data: 'studentId='+studentId,
dataType: "json"
})
.done(function(response){
// let data = JSON.stringify(response);
// $("div#res").append(data);
// if(!data["atraiter"]){window.open(URL_END, '_self');
let data = response;
if(!data["atraiter"]){window.open(URL_END, '_self');}
console.log(data);
let prenom = data['prenom'];
let nom = data['nom'];
let mailCalcule = data["mailCalcule"];
let mailsPossibles = data["mailsPossibles"];
if(mailsPossibles.length!=0){
$("body").append(
`<div class = "container grayarea">
<h2 class="text-center">Choix de l'adresse électronique</h2>
<div class = "form-container div-form" id="email-container" >
<div class="title-container"><h3>Veuillez choisir votre prochaine adresse électronique</h3></div>
<form id ="choix-email" name="mail" class="div-form form-emails" action="" method="" onsubmit="event.preventDefault();sendMail()">
</form>
</div>
</div>`
);
let required = 0;
mailsPossibles.forEach(element => {
$('#choix-email').append(
`<input type="radio" id="${element}" name="mail" value="${element}" required>
<label for="${element}"> ${element}</label><br>`
);
});
$("#choix-email input").attr('checked');
$("#choix-email").append(
`<input type="submit" id="valide-mail" value="Ok c'est bon !" class="btn btn-secondary" style="background-color:#00b8de">`
);
}
else{
$("body").append(`
<div class = "container grayarea text-center">
<h3>Votre adresse électronique sera ${mailCalcule}, vous recevrez votre mot de passe dans les 24 heures.</h3>
</div>
<div class = "container">
<form action="" method="" onsubmit="event.preventDefault();sendMail()">
<input type="submit" id="valide-mail" value="Ok c'est bon !" class="btn btn-secondary" style="background-color:#00b8de">
</form>
</div>
`
);
}
})
$("#dropcontainer").ondragover = $("#dropcontainer").ondragenter = function(evt) {
evt.preventDefault();
};
$("#dropcontainer").ondrop = function(evt) {
evt.preventDefault()
// pretty simple -- but not for IE :(
idFileUpload.files = evt.dataTransfer.files;
// If you want to use some of the dropped files
const dT = new DataTransfer();
dT.items.add(evt.dataTransfer.files[0]);
dT.items.add(evt.dataTransfer.files[3]);
fileInput.files = dT.files;
evt.preventDefault();}
}); });
...@@ -194,10 +186,11 @@ function sendMail(){ ...@@ -194,10 +186,11 @@ function sendMail(){
console.log("unSeulVisage: "+unSeulVisage+"\nformat_correct: "+format_correct); console.log("unSeulVisage: "+unSeulVisage+"\nformat_correct: "+format_correct);
if(unSeulVisage && format_correct){ if(unSeulVisage && format_correct){
$.ajax({ $.ajax({
url: URL_CHOOSE_MAIL, url : URL_CHOOSE_MAIL,
method: 'POST', method : 'POST',
data: 'mail='+mail, data : 'mail='+mail,
dataType: "json"
dataType : "json"
}); });
window.open(URL_END, '_self'); window.open(URL_END, '_self');
} }
...@@ -210,17 +203,15 @@ function sendMail(){ ...@@ -210,17 +203,15 @@ function sendMail(){
async function photoDetourage(formData){ async function photoDetourage(formData){
await findFaces(ID); await findFaces(ID);
if(unSeulVisage){ if(unSeulVisage){
// if (true){
$.ajax({ $.ajax({
//url de la requête //url de la requête
url: URL_DETOURAGE, url : URL_DETOURAGE,
method : 'POST',
method: 'POST', enctype : 'multipart/form-data',
enctype: 'multipart/form-data' , data : formData,
data: formData,
cache : false,
cache: false, dataType : "json",
dataType: "json",
contentType: false, contentType: false,
processData: false processData: false
}) })
...@@ -230,7 +221,6 @@ async function photoDetourage(formData){ ...@@ -230,7 +221,6 @@ async function photoDetourage(formData){
ImgBG.attr('src',data['src']); ImgBG.attr('src',data['src']);
}) })
} }
} }
async function findFaces(idImage) { async function findFaces(idImage) {
...@@ -253,13 +243,17 @@ async function findFaces(idImage) { ...@@ -253,13 +243,17 @@ async function findFaces(idImage) {
// // Render a rectangle over each detected face. // // Render a rectangle over each detected face.
// ctx.fillRect(start[0], start[1], size[0], size[1]); // ctx.fillRect(start[0], start[1], size[0], size[1]);
// } // }
$("#"+idStatut).empty(); $("#"+ idStatut).empty();
$("#"+idStatut).append(predictions.length+" face(s) found!"); $("#"+ idStatut).append(predictions.length+" face(s) found!");
if(predictions.length == 1){ if(predictions.length == 1)
{
li_OneFace.removeClass("list-group-item-secondary list-group-item-danger").addClass("list-group-item-success"); li_OneFace.removeClass("list-group-item-secondary list-group-item-danger").addClass("list-group-item-success");
unSeulVisage = true; unSeulVisage = true;
} }
else{li_OneFace.removeClass("list-group-item-secondary list-group-item-success").addClass("list-group-item-danger");} else
{
li_OneFace.removeClass("list-group-item-secondary list-group-item-success").addClass("list-group-item-danger");
}
} }
else { else {
li_OneFace.removeClass("list-group-item-secondary list-group-item-success").addClass("list-group-item-danger"); li_OneFace.removeClass("list-group-item-secondary list-group-item-success").addClass("list-group-item-danger");
...@@ -267,7 +261,6 @@ async function findFaces(idImage) { ...@@ -267,7 +261,6 @@ async function findFaces(idImage) {
btnSubmit.prop('disabled',false); btnSubmit.prop('disabled',false);
btnCustomFileUpload.prop('disabled',false); btnCustomFileUpload.prop('disabled',false);
$("body").css("cursor",""); $("body").css("cursor","");
// return predictions.length;
} }
function getParameter(url){ function getParameter(url){
...@@ -300,7 +293,7 @@ function get_base64(src){ ...@@ -300,7 +293,7 @@ function get_base64(src){
var string = src; var string = src;
var k = 0; var k = 0;
var base_64; var base_64;
while (string.slice(k,k+7)!="base64," && k<100) while (string.slice(k,k+7) != "base64," && k<100)
{ {
k=k+1; k=k+1;
} }
......
upload.php
View file @ 179ce411
<?php <?php
//dossier temporaitre pour les images //dossier temporaitre pour les images
define('PATH_TO_TEMP', "temp"); define('PATH_TO_TEMP', "temp" );
// Vérifier si le formulaire a été soumis // Vérifier si le formulaire a été soumis
if($_SERVER["REQUEST_METHOD"] == "POST") if($_SERVER["REQUEST_METHOD"] == "POST")
{ {
// Vérifie si le fichier a été uploadé sans erreur. // Format de la réponse
//format de la réponse
if(isset($_FILES["photo"]) && $_FILES["photo"]["error"] == 0) if(isset($_FILES["photo"]) && $_FILES["photo"]["error"] == 0)
{ {
$allowed = array( $allowed = array(
"jpg" => "image/jpeg", "jpg" => "image/jpeg",
"jpeg" => "image/jpeg", "jpeg" => "image/jpeg",
"png" => "image/png", "png" => "image/png",
"PNG" => "image/PNG", "PNG" => "image/PNG",
"JPG" => "image/JPG" "JPG" => "image/JPG"
...@@ -44,7 +42,7 @@ if($_SERVER["REQUEST_METHOD"] == "POST") ...@@ -44,7 +42,7 @@ if($_SERVER["REQUEST_METHOD"] == "POST")
} }
} }
$error = $errorMIME || $errorSize; $error = $errorMIME || $errorSize;
$data = array( $data = array(
"errorMIME" => $errorMIME, "errorMIME" => $errorMIME,
"errorSize" => $errorSize, "errorSize" => $errorSize,
......
web_server.php
View file @ 179ce411
...@@ -7,8 +7,8 @@ if($_SERVER["REQUEST_METHOD"]=="POST"){ ...@@ -7,8 +7,8 @@ if($_SERVER["REQUEST_METHOD"]=="POST"){
"prenom" => "jean-patrick", "prenom" => "jean-patrick",
"nom" => "doe.remifa.sollasi", "nom" => "doe.remifa.sollasi",
"mailCalcule" => "patrick.doe.remifa.sollasi@ext.imt-nord-europe.fr", "mailCalcule" => "patrick.doe.remifa.sollasi@ext.imt-nord-europe.fr",
// "mailsPossibles" => array() "mailsPossibles" => array()
"mailsPossibles"=>array("jean-patrick.doe@ext.imt-nord-europe.fr","jean.doe@ext.imt-nord-europe.fr","patrick.doe@ext.imt-nord-europe.fr","jean.remifa.sollasi@ext.imt-nord-europe.fr","jp.doeremifasollasi@ext.imt-nord-europe.fr") // "mailsPossibles"=>array("jean-patrick.doe@ext.imt-nord-europe.fr","jean.doe@ext.imt-nord-europe.fr","patrick.doe@ext.imt-nord-europe.fr","jean.remifa.sollasi@ext.imt-nord-europe.fr","jp.doeremifasollasi@ext.imt-nord-europe.fr")
); );
echo json_encode($data); echo json_encode($data);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment