Commit 35407622 authored by Okthane's avatar Okthane

Comptage de visages

parent 876d653f
...@@ -5,25 +5,26 @@ ...@@ -5,25 +5,26 @@
<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">
<title>Formulaire d'upload de fichiers</title> <title>Formulaire d'upload de fichiers</title>
<script src="jquery.js"></script>
<script src="script.js"></script>
<!-- API TenserFlow --> <!-- API TenserFlow -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/blazeface"></script>
</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="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
<form id ="form" action="" method="" enctype="multipart/form-data"> <form id ="form" action="" method="" enctype="multipart/form-data">
<h2>Upload Fichier</h2> <h2>Upload Fichier</h2>
<div id ="div-ID" > <div id ="div-ID" >
<canvas id="canvas"></canvas> <canvas id="canvas" ></canvas>
<img id="img-ID" src="" /> <img id="img-ID" src="" height="150em"/>
</div> </div>
<label for="fileUpload">Fichier:</label> <label for="fileUpload">Fichier:</label>
<input type="file" name="photo" id="fileUpload"> <input type="file" name="photo" id="fileUpload">
<input id="#btnSubmit" type="submit" name="submit" value="Upload"> <input id="#btnSubmit" type="submit" name="submit" value="Upload">
<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></p> --> <p id="p-status"><strong>Statut :</strong></p>
</form> </form>
<div id="div"></div> <div id="div">
</div>
</body> </body>
</html> </html>
// VARIABLES // VARIABLES
const URL_CHECK_ID = 'upload.php'; const URL_CHECK_ID = 'upload.php';
const ID = $("#img-ID"); const ID = "img-ID";
const canva = $("#canva"); const canva = "canvas";
const idBtnSubmit = 'btnSubmit';btnSubmit = $("#"+idBtnSubmit);
// SCRIPT // SCRIPT
...@@ -24,33 +25,36 @@ $(document).ready(function(){ ...@@ -24,33 +25,36 @@ $(document).ready(function(){
contentType: false, contentType: false,
processData: false processData: false
}) })
.done(function(response){ .done(function(data){
//Traitement de la réponse console.log(data);
let data = JSON.stringify(response);
$("div#div").empty(); $("div#div").empty();
$("div#div").append(data); $("div#div").append(data['message']);
//Affichage de la photo //Affichage de la photo
$("#img-ID").attr('src',data['src']);
findFaces();
}) })
// findFaces();
}); });
}); });
// FONCTIONS // FONCTIONS
async function findFaces() { async function findFaces() {
btnSubmit.prop('disabled',false);
console.log('_findFaces()');
const model = await blazeface.load(); const model = await blazeface.load();
const img = ID; // const img = ID;
const img = document.getElementById(ID);
const predictions = await model.estimateFaces(img, false); const predictions = await model.estimateFaces(img, false);
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);
document.getElementById("status").innerText = "Face(s) found!"; document.getElementById("p-status").innerText += predictions.length+" face(s) found!";
const canvas = canva; // const canvas = document.getElementById(canva);
canvas.width = img.width; // canvas.width = img.width;
canvas.height = img.height; // canvas.height = img.height;
// const ctx = canvas.getContext("2d"); // const ctx = canvas.getContext("2d");
// ctx.fillStyle = "rgba(250,225,6,0.5)"; // ctx.fillStyle = "rgba(250,225,6,0.5)";
// for (let i = 0; i < predictions.length; i++) // for (let i = 0; i < predictions.length; i++)
...@@ -75,6 +79,7 @@ async function findFaces() { ...@@ -75,6 +79,7 @@ async function findFaces() {
else { else {
document.getElementById("status").innerText = "No Face(s) Found"; document.getElementById("status").innerText = "No Face(s) Found";
} }
btnSubmit.prop('disabled',false);
} }
<?php <?php
define("PATH_TO_ID", ""); define('PATH_TO_ID', "img");
// 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. // Vérifie si le fichier a été uploadé sans erreur.
//format de la réponse //format de la réponse
...@@ -26,14 +27,14 @@ if($_SERVER["REQUEST_METHOD"] == "POST"){ ...@@ -26,14 +27,14 @@ if($_SERVER["REQUEST_METHOD"] == "POST"){
if(in_array($filetype, $allowed)) if(in_array($filetype, $allowed))
{ {
// Vérifie si le fichier existe avant de le télécharger. // Vérifie si le fichier existe avant de le télécharger.
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à.";
$message = $_FILES["photo"]["name"] . " existe déjà."; $message = $_FILES["photo"]["name"] . " existe déjà.";
} }
else else
{ {
move_uploaded_file($_FILES["photo"]["tmp_name"], $_FILES["photo"]["name"]); move_uploaded_file($_FILES["photo"]["tmp_name"], PATH_TO_ID."/".$_FILES["photo"]["name"]);
// 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";
...@@ -58,7 +59,10 @@ if($_SERVER["REQUEST_METHOD"] == "POST"){ ...@@ -58,7 +59,10 @@ if($_SERVER["REQUEST_METHOD"] == "POST"){
// echo "Error: " . $_FILES["photo"]["error"]; // echo "Error: " . $_FILES["photo"]["error"];
$message = "Error: " . $_FILES["photo"]["error"]; $message = "Error: " . $_FILES["photo"]["error"];
} }
header('Content-Type: application/json'); $data = array(
echo json_encode($message); "message" => $message,
"src" => PATH_TO_ID."/".$_FILES["photo"]["name"]
);
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