Skip to content

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

Mise_en_forme

parent da81ec41
Show whitespace changes
Inline Side-by-side
Showing with 197 additions and 44 deletions
index.php
View file @ a85921de
...@@ -4,30 +4,56 @@ ...@@ -4,30 +4,56 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="tensorflow.js"></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> <title>Formulaire d'upload de fichiers</title>
<!-- API TenserFlow --> <!-- API TenserFlow -->
</head> </head>
<body> <body>
<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>
<form id ="form" action="" method="" enctype="multipart/form-data">
<h2>Upload Fichier</h2>
<div id ="div-ID" class="div-photo" >
<canvas id="canvas" ></canvas>
<img id="img-ID" src="" height="150em"/>
<canvas id="canvas" ></canvas> <div class="site-header-main">
<div id="logo-header"></div>
<div class="site-branding">Titre de la page</div>
<div id="couleurs-droite"></div>
</div>
<div class="container">
<div class ="div-ID div-photo" >
<img id="img-ID" src="" height="150em"/>
<img id="img-ID2" src="" height="150em"/> <img id="img-ID2" src="" height="150em"/>
<div id="div-filename"></div>
</div> </div>
<label for="fileUpload">Fichier:</label> </div>
<input type="file" name="photo" id="fileUpload"> <div class="div-form">
<input id="#btnSubmit" type="submit" name="submit" value="Upload"> <form id ="form" action="" method="" enctype="multipart/form-data">
<p><strong>Note:</strong> Seuls les formats .jpg et .png sont autorisés jusqu'à une taille maximale de 5 Mo.</p> <!-- <label for="fileUpload">Fichier:</label> -->
<p id="p-status"><strong>Statut :</strong></p> <div class="div-btn-form">
<input type="file" name="photo" id="fileUpload" required="required" class="btn-form" hidden>
<button onclick="defaultBtnActive()" class="btn-form" id="custom-fileUpload">Choisissez une photo</button>
</div>
<script>
const defaultBtn = document.querySelector('#fileUpload');
const customBtn = document.querySelector("#custom-fileUpload");
function defaultBtnActive(){
defaultBtn.click();
}
</script>
<div class="div-btn-form">
<input id="btnSubmit" type="submit" name="submit" value="Upload" class="btn-form">
</div>
</form> </form>
</div>
<div id="div"> <div id="div">
<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 = "container">
</div> </div>
</body> </body>
</html> </html>
removeBackground2.php
View file @ a85921de
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
define('WHERE_TO_PUT','img_bg'); define('WHERE_TO_PUT','img_bg');
define('PATH_TO_BG', "img_bg"); define('PATH_TO_BG', "img_bg");
// die; die;
require_once "vendor/autoload.php"; require_once "vendor/autoload.php";
if($_SERVER["REQUEST_METHOD"] == "POST") if($_SERVER["REQUEST_METHOD"] == "POST")
{ {
...@@ -38,10 +38,10 @@ if($_SERVER["REQUEST_METHOD"] == "POST") ...@@ -38,10 +38,10 @@ if($_SERVER["REQUEST_METHOD"] == "POST")
] ]
]); ]);
$fp = fopen('img_bg/'.pathinfo($filename, PATHINFO_FILENAME)."no-bg.png", "wb"); $fp = fopen('img_bg/'.pathinfo($filename, PATHINFO_FILENAME)."NO-BG.png", "wb");
fwrite($fp, $res->getBody()); fwrite($fp, $res->getBody());
$data = array( $data = array(
"src" => PATH_TO_BG.DIRECTORY_SEPARATOR.pathinfo($filename, PATHINFO_FILENAME)."no-bg.png" "src" => PATH_TO_BG."/".pathinfo($filename, PATHINFO_FILENAME)."NO-BG.png"
); );
echo json_encode($data); echo json_encode($data);
} }
......
script.js
View file @ a85921de
// 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 ID = "img-ID"; const ID = "img-ID";
const canva = "canvas"; const canva = "canvas";
const idBtnSubmit = 'btnSubmit';btnSubmit = $("#"+idBtnSubmit);
var src = ''; const idConsole = "div";var Console;
const idFileUpload = "custom-fileUpload"; var btnFileUpload;
const idBtnSubmit = 'btnSubmit';var btnSubmit;
const idStatut = "span-status";
var errorUpload = true;
var errorRemoveBackGround = true;
// SCRIPT
// SCRIPT ====================================================================================
$(document).ready(function(){ $(document).ready(function(){
btnFileUpload = $("#"+idFileUpload);
btnSubmit = $("#"+idBtnSubmit);
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);
...@@ -31,13 +44,19 @@ $(document).ready(function(){ ...@@ -31,13 +44,19 @@ $(document).ready(function(){
.done(function(data){ .done(function(data){
console.log(data); console.log(data);
src = data['src']; src = data['src'];
$("div#div").empty(); errorUpload = data['error'];
$("div#div").append(data['message']); Console.empty();
Console.append(data['message']);
//Affichage de la photo //Affichage de la photo
$("#img-ID").attr('src',data['src']); $("#img-ID").attr('src',data['src']);
findFaces(); findFaces();
}) })
.fail(function(error){
Console.empty();
alert("La requête s'est terminée en échec. Infos : " + JSON.stringify(error));
})
$.ajax({ $.ajax({
//url de la requête //url de la requête
...@@ -62,10 +81,11 @@ $(document).ready(function(){ ...@@ -62,10 +81,11 @@ $(document).ready(function(){
}); });
}); });
// FONCTIONS // FONCTIONS ================================================================================
async function findFaces() { async function findFaces() {
btnSubmit.prop('disabled',false); btnFileUpload.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;
...@@ -73,14 +93,15 @@ async function findFaces() { ...@@ -73,14 +93,15 @@ async function findFaces() {
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) {
console.log("faces found") console.log("faces found");
console.log(predictions); console.log(predictions.length);
document.getElementById("p-status").innerText += predictions.length+" face(s) found!"; $("#"+idStatut).empty();
const canvas = document.getElementById(canva); $("#"+idStatut).append(predictions.length+" face(s) found!");
canvas.width = img.width; // const canvas = document.getElementById(canva);
canvas.height = img.height; // canvas.width = img.width;
const ctx = canvas.getContext("2d"); // canvas.height = img.height;
ctx.fillStyle = "rgba(250,225,6,0.5)"; // const ctx = canvas.getContext("2d");
// ctx.fillStyle = "rgba(250,225,6,0.5)";
// for (let i = 0; i < predictions.length; i++) // for (let i = 0; i < predictions.length; i++)
// { // {
// const start = predictions[i].topLeft; // const start = predictions[i].topLeft;
...@@ -101,9 +122,10 @@ async function findFaces() { ...@@ -101,9 +122,10 @@ async function findFaces() {
// } // }
} }
else { else {
document.getElementById("status").innerText = "No Face(s) Found"; $("#"+idStatut).append("No Face(s) Found");
} }
btnSubmit.prop('disabled',false); btnSubmit.prop('disabled',false);
btnFileUpload.prop('disabled',false);
} }
style.css
View file @ a85921de
.div-photo{ html,body{
display : inline font-family: sans-serif;
display: flex;
flex-direction: column;
}
.btn-form{
width: 70%;
height: 50px;
min-width: 20%;
}
.container{
margin-bottom: 20px;
display: flex;
justify-content: center;
border-radius: 13px;
}
.div-btn-form{
align-self: auto;
text-align: center;
margin: 5px;
}
.div-photo {
height: 200px;
width: 700px;
margin-top: 35px;
background-color: whitesmoke;
border: 2px;
border-radius: 13px;
}
.site-header-main{
background-color: #00b8de;
display: flex;
justify-content: space-between;
}
.site-branding{
margin-top: 50px;
margin-left: 50px;
max-width: 100%;
min-width: 0%;
overflow: hidden;
font-size: 1.75rem;
line-height: 1.25;
font-weight: 700;
color: white;
}
#logo-header{
height: 150px;
width: 300px;
background-image: url('img/logo-header.png');
/* background-image: url('https://myservices.imt-lille-douai.fr/portail/wp-content/themes/MyServices/img/logo-header.png'); */
background-size: 300px 150px;
background-color: #00b8de;
}
#couleurs-droite {
height: 150px;
width: 230px;
background-image: url('img/couleurs-droite@2x.png');
/* background-image: url('https://myservices.imt-lille-douai.fr/portail/wp-content/themes/MyServices/img/couleurs-droite@2x.png'); */
background-size: 230px 150px;
display: block;
}
#form{
display: flex;
flex-direction: column;
} }
\ No newline at end of file
tensorflow.js 0 → 100644
View file @ a85921de
This source diff could not be displayed because it is too large. You can view the blob instead.
upload.php
View file @ a85921de
...@@ -9,11 +9,15 @@ if($_SERVER["REQUEST_METHOD"] == "POST") ...@@ -9,11 +9,15 @@ if($_SERVER["REQUEST_METHOD"] == "POST")
//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("jpg" => "image/jpeg", "png" => "image/png"); $allowed = array(
"jpg" => "image/jpeg",
"png" => "image/png"
);
$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
$filetype = $_FILES["photo"]["type"]; $filetype = $_FILES["photo"]["type"];
$filesize = $_FILES["photo"]["size"]; $filesize = $_FILES["photo"]["size"];
$message = ""; $message = "";
$error = true;
// Vérifie l'extension du fichier // Vérifie l'extension du fichier
$ext = pathinfo($filename, PATHINFO_EXTENSION); $ext = pathinfo($filename, PATHINFO_EXTENSION);
...@@ -30,6 +34,8 @@ if($_SERVER["REQUEST_METHOD"] == "POST") ...@@ -30,6 +34,8 @@ if($_SERVER["REQUEST_METHOD"] == "POST")
if(file_exists(PATH_TO_ID."/".$_FILES["photo"]["name"])) if(file_exists(PATH_TO_ID."/".$_FILES["photo"]["name"]))
{ {
//echo $_FILES["photo"]["name"] . " existe déjà."; //echo $_FILES["photo"]["name"] . " existe déjà.";
$error = false;
move_uploaded_file($_FILES["photo"]["tmp_name"], PATH_TO_ID."/".$filename);
$message = $_FILES["photo"]["name"] . " existe déjà."; $message = $_FILES["photo"]["name"] . " existe déjà.";
} }
else else
...@@ -38,6 +44,7 @@ if($_SERVER["REQUEST_METHOD"] == "POST") ...@@ -38,6 +44,7 @@ if($_SERVER["REQUEST_METHOD"] == "POST")
// echo "Votre fichier a été téléchargé avec succès."; // echo "Votre fichier a été téléchargé avec succès.";
// echo("<br></br>"); // echo("<br></br>");
// echo "taille de la photo : ".$_FILES["photo"]["size"]." octets"; // echo "taille de la photo : ".$_FILES["photo"]["size"]." octets";
$error = false;
$message = "Votre fichier a été téléchargé avec succès.<br></br> Taille de la photo : ".$_FILES["photo"]["size"]." octets"; $message = "Votre fichier a été téléchargé avec succès.<br></br> Taille de la photo : ".$_FILES["photo"]["size"]." octets";
} }
} }
...@@ -61,6 +68,7 @@ if($_SERVER["REQUEST_METHOD"] == "POST") ...@@ -61,6 +68,7 @@ if($_SERVER["REQUEST_METHOD"] == "POST")
} }
$data = array( $data = array(
"message" => $message, "message" => $message,
"error" => $error,
"src" => PATH_TO_ID."/".$_FILES["photo"]["name"] "src" => PATH_TO_ID."/".$_FILES["photo"]["name"]
); );
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