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 @@
<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="jquery.js"></script>
<script src="script.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script> -->
<title>Formulaire d'upload de fichiers</title>
<!-- API TenserFlow -->
</head>
<body>
<button id="photovalidé">Web_serverAPI</button>
<div class="site-header-main">
<div id="logo-header"></div>
<div class="site-branding">Titre de la page</div>
......@@ -27,8 +28,14 @@
</div>
<div class="container">
<div class ="div-ID div-photo" >
<img name ="im_ID" id="img-ID" src="" height="150em"/>
<img id="img-ID2" src="" height="150em"/>
<img name ="im-ID" id="img-ID" 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>
</div>
......@@ -37,7 +44,7 @@
<form id ="form" action="" method="" enctype="multipart/form-data">
<!-- <label for="fileUpload">Fichier:</label> -->
<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> -->
</div>
<div class="div-btn-form">
......@@ -45,16 +52,21 @@
</div>
</form>
<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];
console.log("ok");
if (file){
......@@ -64,9 +76,16 @@
previewImage.setAttribute("src", this.result);
});
reader.readAsDataURL(file);
findFaces("img-ID");
}
});
// const defaultBtn = document.querySelector('#fileUpload');
// const customBtn = document.querySelector("#custom-fileUpload");
// function defaultBtnActive(){
// defaultBtn.click();
// }
</script>
</div>
......@@ -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 id="p-status"><strong>Statut :</strong><span id="span-status"></span></p>
</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>
</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")
"src" => $base64
);
echo json_encode($data);
}
}
}
......
script.js
View file @ 61812c2e
......@@ -2,9 +2,13 @@
const URL_CHECK_ID = 'upload.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 canva = "canvas";
console.log($("#"+ID).attr('src'));
const idConsole = "div";var Console;
......@@ -17,34 +21,35 @@ const idStatut = "span-status";
var errorUpload = true;
var errorRemoveBackGround = true;
var unSeulVisage = false;
var format_correct = false;
// SCRIPT ====================================================================================
$(document).ready(function(){
inputFileUpload = $("#"+idFileUpload);
console.log(inputFileUpload.val());
// console.log(inputFileUpload.val());
console.log(getParameter(window.location.href));
btnCustomFileUpload = $("#"+idCustomFileUpload);
btnSubmit = $("#"+idBtnSubmit);
Console = $("#"+idConsole);
$("#form").on("submit",function (event) {
event.preventDefault();
var formData = new FormData(this);
console.log(inputFileUpload.attr('filename'));
$.ajax({
//url de la requête
url: URL_CHECK_ID,
method: 'POST',
enctype: 'multipart/form-data',
data: formData,
cache: false,
dataType: "json",
contentType: false,
processData: false
//url de la requête
url: URL_CHECK_ID,
method: 'POST',
enctype: 'multipart/form-data',
data: formData,
cache: false,
dataType: "json",
contentType: false,
processData: false
})
.done(function(data){
console.log(data);
......@@ -55,8 +60,7 @@ $(document).ready(function(){
Console.append(data['message']);
//Affichage de la photo
$("#img-ID").attr('src',data['src']);
findFaces();
// findFaces();
})
.fail(function(error){
Console.empty();
......@@ -83,18 +87,82 @@ $(document).ready(function(){
//Affichage de la photo
$("#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 ================================================================================
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);
btnSubmit.prop('disabled',true);
console.log('_findFaces()');
const model = await blazeface.load();
// const img = ID;
const img = document.getElementById(ID);
console.log(idImage);
const img = document.getElementById(idImage);
const predictions = await model.estimateFaces(img, false);
console.log('_findFaces()');
if (predictions.length > 0) {
......@@ -102,6 +170,11 @@ async function findFaces() {
console.log(predictions.length);
$("#"+idStatut).empty();
$("#"+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);
// canvas.width = img.width;
// canvas.height = img.height;
......@@ -127,12 +200,35 @@ async function findFaces() {
// }
}
else {
$("#"+idStatut).empty();
$("#"+idStatut).append("No Face(s) Found");
$("#li-oneface").css('color','red');
}
btnSubmit.prop('disabled',false);
// btnSubmit.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) {
return filePath.substr(filePath.lastIndexOf('\\') + 1) ;
......
style.css
View file @ 61812c2e
......@@ -29,9 +29,12 @@ html,body{
height: 200px;
width: 700px;
margin-top: 35px;
padding-top: 50px;
display: flex;
justify-content: space-evenly;
background-color: whitesmoke;
border: 2px;
border: solid ;
border-color: #00b8de;
border-radius: 13px;
}
.site-header-main{
......
upload.php
View file @ 61812c2e
......@@ -69,7 +69,7 @@ if($_SERVER["REQUEST_METHOD"] == "POST")
$data = array(
"message" => $message,
"error" => $error,
"src" => PATH_TO_ID."/".$_FILES["photo"]["name"]
// "src" => PATH_TO_ID."/".$_FILES["photo"]["name"]
);
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