Skip to content

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

n

parent 4e2986ec
Hide whitespace changes
Inline Side-by-side
Showing with 182 additions and 49 deletions
byebye.html 0 → 100644
View file @ 61812c2e
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
\ No newline at end of file
index.php
View file @ 61812c2e
...@@ -11,15 +11,16 @@ ...@@ -11,15 +11,16 @@
<script src="tensorflow.js"></script> <!-- <script src="tensorflow.js"></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>
<!-- <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script> -->
<title>Formulaire d'upload de fichiers</title> <title>Formulaire d'upload de fichiers</title>
<!-- API TenserFlow --> <!-- API TenserFlow -->
</head> </head>
<body> <body>
<button id="photovalidé">Web_serverAPI</button>
<div class="site-header-main"> <div class="site-header-main">
<div id="logo-header"></div> <div id="logo-header"></div>
<div class="site-branding">Titre de la page</div> <div class="site-branding">Titre de la page</div>
...@@ -27,8 +28,14 @@ ...@@ -27,8 +28,14 @@
</div> </div>
<div class="container"> <div class="container">
<div class ="div-ID div-photo" > <div class ="div-ID div-photo" >
<img name ="im_ID" id="img-ID" src="" height="150em"/> <img name ="im-ID" id="img-ID" src="" height="150em"/>
<img id="img-ID2" src="" height="150em"/> <div id=conditions>
<ul>
<li id="li-oneface">Un seul visage<span></span></li>
<li id="li-format">Format correct<span></span></li>
</ul>
</div>
<img name ="im_ID2" id="img-ID2" src="" height="150em"/>
<div id="div-filename"></div> <div id="div-filename"></div>
</div> </div>
</div> </div>
...@@ -37,7 +44,7 @@ ...@@ -37,7 +44,7 @@
<form id ="form" action="" method="" enctype="multipart/form-data"> <form id ="form" action="" method="" 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" onchange="document.im_ID.src=this.value;"> <input type="file" name="photo" id="fileUpload" required="required" class="btn-form" accept="image/png, image/jpeg" >
<!-- <button onclick="defaultBtnActive()" class="btn-form" id="custom-fileUpload">Choisissez une photo</button> --> <!-- <button onclick="defaultBtnActive()" class="btn-form" id="custom-fileUpload">Choisissez une photo</button> -->
</div> </div>
<div class="div-btn-form"> <div class="div-btn-form">
...@@ -45,16 +52,21 @@ ...@@ -45,16 +52,21 @@
</div> </div>
</form> </form>
<script> <script>
const defaultBtn = document.querySelector('#fileUpload');
const customBtn = document.querySelector("#custom-fileUpload");
function defaultBtnActive(){
defaultBtn.click();
}
const inpFile = document.getElementById("fileUpload");
const previewImage = document.getElementById("img-ID");
inpFile.addEventListener("change", function (){ const inpFile = document.getElementById("fileUpload");
const previewImage = document.getElementById("img-ID");
const file = inpFile.files[0];
console.log("ok");
if (file){
const reader = new FileReader();
console.log("ok");
reader.addEventListener("load", function(){
previewImage.setAttribute("src", this.result);
});
reader.readAsDataURL(file);
findFaces("img-ID");
}
inpFile.addEventListener("change", function (){
const file = inpFile.files[0]; const file = inpFile.files[0];
console.log("ok"); console.log("ok");
if (file){ if (file){
...@@ -64,9 +76,16 @@ ...@@ -64,9 +76,16 @@
previewImage.setAttribute("src", this.result); previewImage.setAttribute("src", this.result);
}); });
reader.readAsDataURL(file); reader.readAsDataURL(file);
findFaces("img-ID");
} }
}); });
// const defaultBtn = document.querySelector('#fileUpload');
// const customBtn = document.querySelector("#custom-fileUpload");
// function defaultBtnActive(){
// defaultBtn.click();
// }
</script> </script>
</div> </div>
...@@ -75,16 +94,5 @@ ...@@ -75,16 +94,5 @@
<p><strong>Note:</strong> Seuls les formats .jpg et .png sont autorisés jusqu'à une taille maximale de 5 Mo.</p> <p><strong>Note:</strong> Seuls les formats .jpg et .png sont autorisés jusqu'à une taille maximale de 5 Mo.</p>
<p id="p-status"><strong>Statut :</strong><span id="span-status"></span></p> <p id="p-status"><strong>Statut :</strong><span id="span-status"></span></p>
</div> </div>
<div class = "form-container" id="email-container">
<div class="title-container"> <h2>Choix de l'adresse électronique</h2></div>
<div class="form-emails">
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> </label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> </label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"></label><br>
</div>
</div>
</body> </body>
</html> </html>
io.php 0 → 100644
View file @ 61812c2e
<?php
echo json_encode('ok');
?>
\ No newline at end of file
removeBackground2.php
View file @ 61812c2e
...@@ -51,7 +51,6 @@ if($_SERVER["REQUEST_METHOD"] == "POST") ...@@ -51,7 +51,6 @@ if($_SERVER["REQUEST_METHOD"] == "POST")
"src" => $base64 "src" => $base64
); );
echo json_encode($data); echo json_encode($data);
} }
} }
} }
......
script.js
View file @ 61812c2e
...@@ -2,9 +2,13 @@ ...@@ -2,9 +2,13 @@
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_CHOOSE_MAIL = 'io.php';
const URL_END = 'byebye.html';
const ID = "img-ID"; const ID = "img-ID";
const canva = "canvas"; const canva = "canvas";
console.log($("#"+ID).attr('src'));
const idConsole = "div";var Console; const idConsole = "div";var Console;
...@@ -17,34 +21,35 @@ const idStatut = "span-status"; ...@@ -17,34 +21,35 @@ const idStatut = "span-status";
var errorUpload = true; var errorUpload = true;
var errorRemoveBackGround = true; var errorRemoveBackGround = true;
var unSeulVisage = false;
var format_correct = false;
// SCRIPT ==================================================================================== // SCRIPT ====================================================================================
$(document).ready(function(){ $(document).ready(function(){
inputFileUpload = $("#"+idFileUpload); inputFileUpload = $("#"+idFileUpload);
console.log(inputFileUpload.val()); // console.log(inputFileUpload.val());
console.log(getParameter(window.location.href));
btnCustomFileUpload = $("#"+idCustomFileUpload); btnCustomFileUpload = $("#"+idCustomFileUpload);
btnSubmit = $("#"+idBtnSubmit); btnSubmit = $("#"+idBtnSubmit);
Console = $("#"+idConsole); Console = $("#"+idConsole);
$("#form").on("submit",function (event) { $("#form").on("submit",function (event) {
event.preventDefault(); event.preventDefault();
var formData = new FormData(this); var formData = new FormData(this);
console.log(inputFileUpload.attr('filename')); console.log(inputFileUpload.attr('filename'));
$.ajax({ $.ajax({
//url de la requête //url de la requête
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
}) })
.done(function(data){ .done(function(data){
console.log(data); console.log(data);
...@@ -55,8 +60,7 @@ $(document).ready(function(){ ...@@ -55,8 +60,7 @@ $(document).ready(function(){
Console.append(data['message']); Console.append(data['message']);
//Affichage de la photo //Affichage de la photo
$("#img-ID").attr('src',data['src']); // findFaces();
findFaces();
}) })
.fail(function(error){ .fail(function(error){
Console.empty(); Console.empty();
...@@ -83,18 +87,82 @@ $(document).ready(function(){ ...@@ -83,18 +87,82 @@ $(document).ready(function(){
//Affichage de la photo //Affichage de la photo
$("#img-ID2").attr('src',data['src']); $("#img-ID2").attr('src',data['src']);
}) })
}); });
//Etape du choix de l'addresse mail.
$("#photovalidé").on('click',function(){
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);
let data = response;
console.log(data);
let studentIdRes = data['studentId'];
let prenom = data['prenom'];
let nom = data['nom'];
let mailCalcule = data["mailCalcule"];
let mailsPossibles = data["mailsPossibles"];
if(mailsPossibles.length!=0){
$("body").append(
`<h3>Bonjour <strong>${prenom}</strong>, veuillez choisir votre prochaine adresse électronique</h3>
<div class = "form-container div-form" id="email-container" >
<div class="title-container"> <h2>Choix de l'adresse électronique</h2></div>
<form id ="choix-email" name="mail" class="div-form form-emails" action="" method="" onsubmit="event.preventDefault();sendMail()">
</form>
</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 !">`
);
}
})
});
}); });
// FONCTIONS ================================================================================ // FONCTIONS ================================================================================
function sendMail(){
console.log($("input[name=\"mail\"]:checked").val());
var mail = $("input[name=\"mail\"]:checked").val();
$.ajax({
url: URL_CHOOSE_MAIL,
method: 'POST',
data: 'mail='+mail,
dataType: "json"
});
setTimeout(function () {
window.open(URL_END, '_self');
}, 000);;
// window.close();
}
async function findFaces() {
async function findFaces(idImage) {
btnCustomFileUpload.prop('disabled',true); btnCustomFileUpload.prop('disabled',true);
btnSubmit.prop('disabled',true); btnSubmit.prop('disabled',true);
console.log('_findFaces()'); console.log('_findFaces()');
const model = await blazeface.load(); const model = await blazeface.load();
// const img = ID; // const img = ID;
const img = document.getElementById(ID); console.log(idImage);
const img = document.getElementById(idImage);
const predictions = await model.estimateFaces(img, false); const predictions = await model.estimateFaces(img, false);
console.log('_findFaces()'); console.log('_findFaces()');
if (predictions.length > 0) { if (predictions.length > 0) {
...@@ -102,6 +170,11 @@ async function findFaces() { ...@@ -102,6 +170,11 @@ async function findFaces() {
console.log(predictions.length); console.log(predictions.length);
$("#"+idStatut).empty(); $("#"+idStatut).empty();
$("#"+idStatut).append(predictions.length+" face(s) found!"); $("#"+idStatut).append(predictions.length+" face(s) found!");
if(predictions.length==1){
$("#li-oneface").css('color','green');
}
else{$("#li-oneface").css('color','red');}
// const canvas = document.getElementById(canva); // const canvas = document.getElementById(canva);
// canvas.width = img.width; // canvas.width = img.width;
// canvas.height = img.height; // canvas.height = img.height;
...@@ -127,12 +200,35 @@ async function findFaces() { ...@@ -127,12 +200,35 @@ async function findFaces() {
// } // }
} }
else { else {
$("#"+idStatut).empty();
$("#"+idStatut).append("No Face(s) Found"); $("#"+idStatut).append("No Face(s) Found");
$("#li-oneface").css('color','red');
} }
btnSubmit.prop('disabled',false); // btnSubmit.prop('disabled',false);
btnCustomFileUpload.prop('disabled',false); btnCustomFileUpload.prop('disabled',false);
} }
function getParameter(url){
L = url.length;
l=0;
parameter="";
for (var k = 0; k<L; k++){
l=k
if(url[k]=="?"){break;}
}
while (url[l]!="=")
{
l=l+1;
}
l=l+1;
while(l<L&& url[l]!="&")
{
parameter+=url[l];
l=l+1;
}
// console.log(parameter);
return parameter;
}
function getFile(filePath) { function getFile(filePath) {
return filePath.substr(filePath.lastIndexOf('\\') + 1) ; return filePath.substr(filePath.lastIndexOf('\\') + 1) ;
......
style.css
View file @ 61812c2e
...@@ -29,9 +29,12 @@ html,body{ ...@@ -29,9 +29,12 @@ html,body{
height: 200px; height: 200px;
width: 700px; width: 700px;
margin-top: 35px; margin-top: 35px;
padding-top: 50px;
display: flex;
justify-content: space-evenly;
background-color: whitesmoke; background-color: whitesmoke;
border: 2px; border: solid ;
border-color: #00b8de;
border-radius: 13px; border-radius: 13px;
} }
.site-header-main{ .site-header-main{
......
upload.php
View file @ 61812c2e
...@@ -69,7 +69,7 @@ if($_SERVER["REQUEST_METHOD"] == "POST") ...@@ -69,7 +69,7 @@ if($_SERVER["REQUEST_METHOD"] == "POST")
$data = array( $data = array(
"message" => $message, "message" => $message,
"error" => $error, "error" => $error,
"src" => PATH_TO_ID."/".$_FILES["photo"]["name"] // "src" => PATH_TO_ID."/".$_FILES["photo"]["name"]
); );
echo json_encode($data); echo json_encode($data);
} }
......
web_server.php 0 → 100644
View file @ 61812c2e
<?php
if($_SERVER["REQUEST_METHOD"]=="POST"){
$data = array(
"studentId"=>$_POST['studentId'],
"prenom"=>"jean-patrick",
"nom"=>"doe.remifa.sollasi",
"mailCalcule"=>"patrick.doe.remifa.sollasi@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);
}
?>
\ No newline at end of file
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