Skip to content

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

Mise_en_forme

parent da81ec41
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 197 additions and 44 deletions
index.php
View file @ a85921de
......@@ -4,30 +4,56 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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>
<!-- API TenserFlow -->
</head>
<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>
<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"/>
<canvas id="canvas" ></canvas>
<img id="img-ID2" src="" height="150em"/>
<div id="div-filename"></div>
</div>
<label for="fileUpload">Fichier:</label>
<input type="file" name="photo" id="fileUpload">
<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 id="p-status"><strong>Statut :</strong></p>
</form>
</div>
<div class="div-form">
<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" 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>
</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>
</body>
</html>
removeBackground2.php
View file @ a85921de
......@@ -5,7 +5,7 @@
define('WHERE_TO_PUT','img_bg');
define('PATH_TO_BG', "img_bg");
// die;
die;
require_once "vendor/autoload.php";
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());
$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);
}
......
script.js
View file @ a85921de
// VARIABLES
// VARIABLES ===============================================================================
const URL_CHECK_ID = 'upload.php';
const URL_DETOURAGE = "removeBackground2.php"
const URL_DETOURAGE = "removeBackground2.php";
const ID = "img-ID";
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(){
btnFileUpload = $("#"+idFileUpload);
btnSubmit = $("#"+idBtnSubmit);
Console = $("#"+idConsole);
$("#form").on("submit",function (event) {
event.preventDefault();
var formData = new FormData(this);
......@@ -31,13 +44,19 @@ $(document).ready(function(){
.done(function(data){
console.log(data);
src = data['src'];
$("div#div").empty();
$("div#div").append(data['message']);
errorUpload = data['error'];
Console.empty();
Console.append(data['message']);
//Affichage de la photo
$("#img-ID").attr('src',data['src']);
findFaces();
})
.fail(function(error){
Console.empty();
alert("La requête s'est terminée en échec. Infos : " + JSON.stringify(error));
})
$.ajax({
//url de la requête
......@@ -62,10 +81,11 @@ $(document).ready(function(){
});
});
// FONCTIONS
// FONCTIONS ================================================================================
async function findFaces() {
btnSubmit.prop('disabled',false);
btnFileUpload.prop('disabled',true);
btnSubmit.prop('disabled',true);
console.log('_findFaces()');
const model = await blazeface.load();
// const img = ID;
......@@ -73,14 +93,15 @@ async function findFaces() {
const predictions = await model.estimateFaces(img, false);
console.log('_findFaces()');
if (predictions.length > 0) {
console.log("faces found")
console.log(predictions);
document.getElementById("p-status").innerText += predictions.length+" face(s) found!";
const canvas = document.getElementById(canva);
canvas.width = img.width;
canvas.height = img.height;
const ctx = canvas.getContext("2d");
ctx.fillStyle = "rgba(250,225,6,0.5)";
console.log("faces found");
console.log(predictions.length);
$("#"+idStatut).empty();
$("#"+idStatut).append(predictions.length+" face(s) found!");
// const canvas = document.getElementById(canva);
// canvas.width = img.width;
// canvas.height = img.height;
// const ctx = canvas.getContext("2d");
// ctx.fillStyle = "rgba(250,225,6,0.5)";
// for (let i = 0; i < predictions.length; i++)
// {
// const start = predictions[i].topLeft;
......@@ -99,11 +120,12 @@ async function findFaces() {
// ctx.stroke();
// }
// }
}
else {
document.getElementById("status").innerText = "No Face(s) Found";
}
btnSubmit.prop('disabled',false);
}
else {
$("#"+idStatut).append("No Face(s) Found");
}
btnSubmit.prop('disabled',false);
btnFileUpload.prop('disabled',false);
}
style.css
View file @ a85921de
.div-photo{
display : inline
html,body{
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 diff is collapsed.
upload.php
View file @ a85921de
......@@ -9,11 +9,15 @@ if($_SERVER["REQUEST_METHOD"] == "POST")
//format de la réponse
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
$filetype = $_FILES["photo"]["type"];
$filesize = $_FILES["photo"]["size"];
$message = "";
$error = true;
// Vérifie l'extension du fichier
$ext = pathinfo($filename, PATHINFO_EXTENSION);
......@@ -30,6 +34,8 @@ if($_SERVER["REQUEST_METHOD"] == "POST")
if(file_exists(PATH_TO_ID."/".$_FILES["photo"]["name"]))
{
//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à.";
}
else
......@@ -38,6 +44,7 @@ if($_SERVER["REQUEST_METHOD"] == "POST")
// echo "Votre fichier a été téléchargé avec succès.";
// echo("<br></br>");
// 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";
}
}
......@@ -61,6 +68,7 @@ if($_SERVER["REQUEST_METHOD"] == "POST")
}
$data = array(
"message" => $message,
"error" => $error,
"src" => PATH_TO_ID."/".$_FILES["photo"]["name"]
);
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