Skip to content

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

okay

parent 46dc8baf
Hide whitespace changes
Inline Side-by-side
Showing with 111 additions and 108 deletions
index.php
View file @ 39631691
...@@ -10,11 +10,11 @@ ...@@ -10,11 +10,11 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style.css">
<!-- Si souhaitez utiliser le code en local -->
<script src="tensorflow.js"></script> <!-- <script src="tensorflow.js"></script> -->
<script src="blazeface.js"></script> <!-- <script src="blazeface.js"></script> -->
<!-- <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> <script src="script.js"></script>
<title>Formulaire d'upload de fichiers</title> <title>Formulaire d'upload de fichiers</title>
...@@ -58,7 +58,9 @@ ...@@ -58,7 +58,9 @@
<div id ="dropcontainer" class ="row d-flex justify-content-center div-ID div-photo" > <div id ="dropcontainer" class ="row d-flex justify-content-center div-ID div-photo" >
<div class="col-md-3 my-auto d-flex justify-content-center" > <div class="col-md-3 my-auto d-flex justify-content-center" >
<img name ="im-ID" id="img-ID" src="" height="150em"/> <img name ="im-ID" id="img-ID" src="" height="150em"/>
<!-- <canvas id="ctx"></canvas> -->
</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">
...@@ -87,9 +89,9 @@ ...@@ -87,9 +89,9 @@
</form> </form>
<script> <script>
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("ok");
if (file){ if (file){
const reader = new FileReader(); const reader = new FileReader();
......
no-bg.png deleted 100644 → 0
View file @ 46dc8baf
{"errors":[{"title":"No image given","code":"missing_source","detail":"Please provide the source image in the image_url, image_file or image_file_b64 parameter."}]}
\ No newline at end of file
removeBackground2.php
View file @ 39631691
<?php <?php
// phpinfo(); // phpinfo();
// die; define('PATH', "img_bg");
define('WHERE_TO_PUT','img_bg'); define('KEY' ,'n6CkFXudANRCubRKMKG5hjNa');
define('PATH_TO_BG', "img_bg");
define('TEMP','temp');
define('KEY','n6CkFXudANRCubRKMKG5hjNa');
require_once "vendor/autoload.php"; require_once "vendor/autoload.php";
...@@ -17,15 +14,15 @@ if($_SERVER["REQUEST_METHOD"] == "POST") ...@@ -17,15 +14,15 @@ if($_SERVER["REQUEST_METHOD"] == "POST")
"jpg" => "image/jpeg", "jpg" => "image/jpeg",
"png" => "image/png" "png" => "image/png"
); );
$filename = $_FILES["photo"]["name"]; $filename = $_FILES["photo"]["name"];
$newfilename = $filename; $newfilename = $filename;
$filetype = $_FILES["photo"]["type"]; $filetype = $_FILES["photo"]["type"];
$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' => [
[ [
'name' => 'image_file', 'name' => 'image_file',
...@@ -40,20 +37,22 @@ if($_SERVER["REQUEST_METHOD"] == "POST") ...@@ -40,20 +37,22 @@ if($_SERVER["REQUEST_METHOD"] == "POST")
'X-Api-Key' => KEY 'X-Api-Key' => KEY
] ]
]); ]);
// On supprime l'image intermédiaire
// $deletefile=unlink(TEMP.'/'.$newfilename);
$path = PATH.'/'.pathinfo($newfilename, PATHINFO_FILENAME)."NO-BG.png";
//On crée et stocke l'image détourée //On crée et stocke l'image détourée
$fp = fopen('img_bg/'.pathinfo($newfilename, PATHINFO_FILENAME)."NO-BG.png", "wb"); $fp = fopen($path, "wb");
fwrite($fp, $res->getBody()); fwrite($fp, $res->getBody());
fclose($fp); fclose($fp);
$path = 'img_bg/'.pathinfo($filename, PATHINFO_FILENAME)."NO-BG.png"; //On renvoie l'image détourée au front
$type = pathinfo($path, PATHINFO_EXTENSION); // $path = 'img_bg'.'/'.pathinfo($filename, PATHINFO_FILENAME)."NO-BG.png";
$data = file_get_contents($path); $type = pathinfo($path, PATHINFO_EXTENSION);
$data = file_get_contents($path);
$base64 = 'data:image/' . $type . ';base64,' . base64_encode($data); $base64 = 'data:image/' . $type . ';base64,' . base64_encode($data);
$data = array( $data = array(
"témoin"=>"ok",
"src" => $base64 "src" => $base64
); );
echo json_encode($data); echo json_encode($data);
......
script.js
View file @ 39631691
// VARIABLES =============================================================================== // VARIABLES ===============================================================================
const URL_CHECK_ID = "upload.php"; const URL_CHECK_ID = "upload.php";
const URL_DETOURAGE = "removeBackground2.php"; const URL_DETOURAGE = "removeBackground2.php";
const URL_WEB_API = "web_server.php"; const URL_WEB_API = "web_server.php";
const URL_CHOOSE_MAIL = "io.php"; const URL_CHOOSE_MAIL = "io.php";
const URL_END = "byebye.html"; const URL_END = "byebye.html";
const timeout = 5000; const ID = "img-ID"; var Img;
const ID = "img-ID"; var Img;
const ID_bg = "img-ID2"; var ImgBG; const ID_bg = "img-ID2"; var ImgBG;
const canva = "canvas"; const canva = "canvas";
// console.log($("#"+ID).attr('src'));
const idConsole = "span-status";var Console; const idConsole = "span-status"; var Console;
var base64 = ""; var base64 = "";
const idFileUpload = "fileUpload"; var inputFileUpload; const idFileUpload = "fileUpload"; var inputFileUpload;
const idCustomFileUpload = "custom-fileUpload"; var btnCustomFileUpload; const idCustomFileUpload = "custom-fileUpload"; var btnCustomFileUpload;
const idBtnSubmit = "btnSubmit";var btnSubmit; const idBtnSubmit = "btnSubmit"; var btnSubmit;
const idStatut = "span-status"; const idStatut = "span-status";
//Variables concernant le bouton "Annuler"
const idCancel = "cancel"; var btnCancel;
var errorFormat = true; var errorFormat = true;
var errorRemoveBackGround = true; 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;
// SCRIPT ==================================================================================== // SCRIPT ====================================================================================
...@@ -44,33 +39,34 @@ $(document).ready(function(){ ...@@ -44,33 +39,34 @@ $(document).ready(function(){
console.log(getParameter(window.location.href)); 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);
Img = $("#"+ID); Img = $("#"+ID);
ImgBG = $("#"+ID_bg); ImgBG = $("#"+ID_bg);
btnSubmit = $("#"+idBtnSubmit); btnSubmit = $("#"+idBtnSubmit);
btnCancel = $("#"+idCancel); Console = $("#"+idConsole);
Console = $("#"+idConsole);
li_OneFace = $("#"+id_li_OneFace); li_OneFace = $("#"+id_li_OneFace);
li_format = $("#"+id_li_format); li_format = $("#"+id_li_format);
li_taille = $("#"+id_li_taille); li_taille = $("#"+id_li_taille);
//Si l'on change la photo, //Si l'on change la photo,
inputFileUpload.change(function(){ inputFileUpload.change(function(){
unSeulVisage=false; unSeulVisage = false;
format_correct=false; format_correct = false;
valide=false; valide = false;
ImgBG.attr("src",""); ImgBG.attr("src","");
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(); { event.preventDefault();
var formData = new FormData(this); var formData = new FormData(this);
console.log(inputFileUpload.attr('filename')); console.log(inputFileUpload.attr('filename'));
...@@ -78,15 +74,15 @@ $(document).ready(function(){ ...@@ -78,15 +74,15 @@ $(document).ready(function(){
//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({
url: URL_CHECK_ID, url : URL_CHECK_ID,
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
}) })
.fail(function(error){ .fail(function(error){
Console.empty(); Console.empty();
...@@ -95,12 +91,13 @@ $(document).ready(function(){ ...@@ -95,12 +91,13 @@ $(document).ready(function(){
.done(function(data){ .done(function(data){
errorFormat = data['error']; errorFormat = data['error'];
if(data['errorMIME']){li_format.removeClass("list-group-item-secondary list-group-item-success").addClass("list-group-item-danger");} if (data['errorMIME']) {li_format.removeClass("list-group-item-secondary list-group-item-success").addClass("list-group-item-danger");}
else{li_format.removeClass("list-group-item-secondary list-group-item-danger").addClass("list-group-item-success");} else {li_format.removeClass("list-group-item-secondary list-group-item-danger").addClass("list-group-item-success");}
console.log(data['errorSize']) console.log(data['errorSize']);
if(data['errorSize']){console.log(2); li_taille.removeClass("list-group-item-secondary list-group-item-success").addClass("list-group-item-danger");} if (data['errorSize']) {console.log(2); li_taille.removeClass("list-group-item-secondary list-group-item-success").addClass("list-group-item-danger");}
else{console.log(1); li_taille.removeClass("list-group-item-secondary list-group-item-danger").addClass("list-group-item-success");} else {console.log(1); li_taille.removeClass("list-group-item-secondary list-group-item-danger" ).addClass("list-group-item-success");}
if(!errorFormat){ if(!errorFormat)
{
format_correct = true; format_correct = true;
photoDetourage(formData); photoDetourage(formData);
} }
...@@ -123,9 +120,9 @@ $(document).ready(function(){ ...@@ -123,9 +120,9 @@ $(document).ready(function(){
let data = response; let data = response;
if(!data["atraiter"]){window.open(URL_END, '_self');} if(!data["atraiter"]){window.open(URL_END, '_self');}
console.log(data); console.log(data);
let prenom = data['prenom']; let prenom = data['prenom'];
let nom = data['nom']; let nom = data['nom'];
let mailCalcule = data["mailCalcule"]; let mailCalcule = data["mailCalcule"];
let mailsPossibles = data["mailsPossibles"]; let mailsPossibles = data["mailsPossibles"];
if(mailsPossibles.length!=0){ if(mailsPossibles.length!=0){
...@@ -146,7 +143,7 @@ $(document).ready(function(){ ...@@ -146,7 +143,7 @@ $(document).ready(function(){
<label for="${element}"> ${element}</label><br>` <label for="${element}"> ${element}</label><br>`
); );
}); });
$("#choix-email input").attr('checked') $("#choix-email input").attr('checked');
$("#choix-email").append( $("#choix-email").append(
`<input type="submit" id="valide-mail" value="Ok c'est bon !" class="btn btn-secondary" style="background-color:#00b8de">` `<input type="submit" id="valide-mail" value="Ok c'est bon !" class="btn btn-secondary" style="background-color:#00b8de">`
); );
...@@ -154,12 +151,12 @@ $(document).ready(function(){ ...@@ -154,12 +151,12 @@ $(document).ready(function(){
else{ else{
$("body").append(` $("body").append(`
<div class = "container grayarea text-center"> <div class = "container grayarea text-center">
<h3>Votre adresse électronique sera ${mailCalcule}, vous recevrez votre mot de passe dans les 24 heures.</h3> <h3>Votre adresse électronique sera ${mailCalcule}, vous recevrez votre mot de passe dans les 24 heures.</h3>
</div> </div>
<div class = "container"> <div class = "container">
<form action="" method="" onsubmit="event.preventDefault();sendMail()"> <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"> <input type="submit" id="valide-mail" value="Ok c'est bon !" class="btn btn-secondary" style="background-color:#00b8de">
</form> </form>
</div> </div>
` `
); );
...@@ -192,8 +189,8 @@ $(document).ready(function(){ ...@@ -192,8 +189,8 @@ $(document).ready(function(){
function sendMail(){ function sendMail(){
console.log($("input[name=\"mail\"]:checked").val());
var mail = $("input[name=\"mail\"]:checked").val(); let mail = $("input[name=\"mail\"]:checked").val();
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({
...@@ -202,7 +199,7 @@ function sendMail(){ ...@@ -202,7 +199,7 @@ function sendMail(){
data: 'mail='+mail, data: 'mail='+mail,
dataType: "json" dataType: "json"
}); });
setTimeout(function () {window.open(URL_END, '_self');}, timeout); window.open(URL_END, '_self');
} }
else{ else{
alert("Oups...\nIl y a un problème avec votre photo :'("); alert("Oups...\nIl y a un problème avec votre photo :'(");
...@@ -222,15 +219,13 @@ async function photoDetourage(formData){ ...@@ -222,15 +219,13 @@ async function photoDetourage(formData){
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
}) })
.done(function(data){ .done(function(data){
console.log(data); console.log(data);
//Affichage de la photo //Affichage de la photo
ImgBG.attr('src',data['src']); ImgBG.attr('src',data['src']);
}) })
...@@ -242,18 +237,25 @@ async function findFaces(idImage) { ...@@ -242,18 +237,25 @@ async function findFaces(idImage) {
// btnCustomFileUpload.prop('disabled',true); // btnCustomFileUpload.prop('disabled',true);
$("body").css("cursor","wait"); $("body").css("cursor","wait");
btnSubmit.prop('disabled',true); btnSubmit.prop('disabled',true);
console.log('_findFaces()');
const model = await blazeface.load(); const model = await blazeface.load();
// const img = ID; // const img = ID;
const img = document.getElementById(idImage); const img = document.getElementById(idImage);
const predictions = await model.estimateFaces(img, false); var returnTensors = false;
console.log('_findFaces()'); const predictions = await model.estimateFaces(img, returnTensors);
console.log(predictions.length+ " visage(s) trouvés.");
if (predictions.length > 0) { if (predictions.length > 0) {
console.log("faces found"); // for (let i = 0; i < predictions.length; i++) {
console.log(predictions.length);
// const start = predictions[i].topLeft;
// const end = predictions[i].bottomRight;
// const size = [end[0] - start[0], end[1] - start[1]];
// // Render a rectangle over each detected face.
// 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;
} }
...@@ -296,14 +298,13 @@ function getFile(filePath) { ...@@ -296,14 +298,13 @@ function getFile(filePath) {
function get_base64(src){ 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;
} }
base_64 = string.slice(k+7); base_64 = string.slice(k+7);
console.log(base_64)
return base_64; return base_64;
} }
......
upload.php
View file @ 39631691
...@@ -11,20 +11,21 @@ if($_SERVER["REQUEST_METHOD"] == "POST") ...@@ -11,20 +11,21 @@ if($_SERVER["REQUEST_METHOD"] == "POST")
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"
); );
$filename = htmlspecialchars(trim($_FILES["photo"]["name"]));// évite les noms de fichiers trop exotiques $filename = htmlspecialchars(trim($_FILES["photo"]["name"]));// évite les noms de fichiers trop exotiques
$newfilename = $filename; $newfilename = $filename;
$filetype = $_FILES["photo"]["type"]; $filetype = $_FILES["photo"]["type"];
$filesize = $_FILES["photo"]["size"]; $filesize = $_FILES["photo"]["size"];
$message = ""; $message = "";
$error = true;
$errorSize = true; $error = true;
$errorMIME = true; $errorSize = true;
$errorMIME = true;
// Vérifie l'extension du fichier // Vérifie l'extension du fichier
$ext = pathinfo($filename, PATHINFO_EXTENSION); $ext = pathinfo($filename, PATHINFO_EXTENSION);
...@@ -47,7 +48,7 @@ if($_SERVER["REQUEST_METHOD"] == "POST") ...@@ -47,7 +48,7 @@ if($_SERVER["REQUEST_METHOD"] == "POST")
"errorMIME" => $errorMIME, "errorMIME" => $errorMIME,
"errorSize" => $errorSize, "errorSize" => $errorSize,
"error" => $error,//<----- Prend la valeur true (erreur!) ou false (ouf!) "error" => $error,//<----- Prend la valeur true (erreur!) ou false (ouf!)
); );
echo json_encode($data); echo json_encode($data);
......
web_server.php
View file @ 39631691
...@@ -2,9 +2,10 @@ ...@@ -2,9 +2,10 @@
if($_SERVER["REQUEST_METHOD"]=="POST"){ if($_SERVER["REQUEST_METHOD"]=="POST"){
$data = array( $data = array(
"atraiter" => true, "atraiter" => true,
"studentId" => $_POST['studentId'],
"prenom" => "jean-patrick", "studentId" => $_POST['studentId'],
"nom" => "doe.remifa.sollasi", "prenom" => "jean-patrick",
"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")
......
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