mirror of
https://github.com/serengil/deepface.git
synced 2025-06-09 21:07:09 +00:00
90 lines
3.9 KiB
HTML
90 lines
3.9 KiB
HTML
{% extends 'base.html' %}
|
|
{% block mainContent %}
|
|
<div class="container">
|
|
<div class="row" style="align-self: center">
|
|
<!--left col -->
|
|
<div class="col-lg-6 col-sm-12">
|
|
<input id="file-input" type="file" class="file input-lg" data-preview-file-type="text">
|
|
</div>
|
|
<!-- right col-->
|
|
<div class="col-lg-6 col-sm-12" id="div_prediction">
|
|
<div class="card">
|
|
<!--predicted image-->
|
|
<img class="card-img-top" id="predicted-img" alt="predicted picture">
|
|
<div class="card-body">
|
|
<!--prediction results-->
|
|
<div class="card-text" id="predicted-results"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="text-align: center; font-weight: lighter; margin-top: 20px">
|
|
<p id="app-developBy"></p>
|
|
<p id="app-description"></p>
|
|
<p id="app-contact"></p>
|
|
</div>
|
|
</div>
|
|
<!-- loading gif-->
|
|
<img src="static/img/loading-sm.gif" id="loading_image" alt="loading"
|
|
style="position: absolute; left: 73%; top: 48%; z-index: 2; width: 25px">
|
|
<script>
|
|
$("#file-input").fileinput({'showUpload':true, 'previewFileType':'any', 'autoOrientImage':false});
|
|
// hide prediction and loading image at beginning
|
|
$("#loading_image").fadeOut(0);
|
|
$("#div_prediction").fadeOut(0);
|
|
|
|
|
|
//when click upload
|
|
$('.fileinput-upload-button').click(function (event) {
|
|
$("#div_prediction").fadeOut(1000);
|
|
setTextEmpty();
|
|
$('#loading_image').fadeIn(1500);
|
|
sendMessage();
|
|
});
|
|
|
|
//when click remove
|
|
$('.fileinput-remove-button').click(function (event) {
|
|
$("#div_prediction").fadeOut(1000);
|
|
setTextEmpty();
|
|
});
|
|
|
|
|
|
// send image to server and get response
|
|
function sendMessage() {
|
|
let dataURL;
|
|
dataURL = $('.file-preview-image').attr("src");
|
|
base64Image = dataURL.replace("data:image/jpeg;base64,","");
|
|
base64Image = base64Image.replace("data:image/png;base64,","");
|
|
let message = {
|
|
image: base64Image
|
|
}
|
|
|
|
$.post("/api/predict",JSON.stringify(message), function(response){
|
|
let resultArea = document.getElementById('predicted-results')
|
|
resultArea.innerHTML = ''
|
|
let predictedImg = document.getElementById('predicted-img')
|
|
predictedImg.src = 'data:image/(jpeg|png);charset=utf-8;base64,'+response['img_str']
|
|
$('#loading_image').fadeOut(300);
|
|
$("#div_prediction").fadeIn(1500);
|
|
if (response['status'] === 'success') {
|
|
for (let i=0; i<response['results'].length; i++) {
|
|
const addedId = `<div style=\"border: 1px dashed darkgrey\"><ul><li><strong>ID: </strong>${response['results'][i].id}`
|
|
const emotionList = `<div style=\"margin: 10px 30px; font-weight: lighter;\"><ul><li>${response['results'][i].emotion['allEmotions'][0]}</li><li>${response['results'][i].emotion['allEmotions'][1]}</li><li>${response['results'][i].emotion['allEmotions'][2]}</li><li>${response['results'][i].emotion['allEmotions'][3]}</li><li>${response['results'][i].emotion['allEmotions'][4]}</li></ul></div>`
|
|
const otherInfo = `</li><li><strong>Type: </strong>${response['results'][i].pet}</li><li><strong>Breed: </strong>${response['results'][i].breed}</li><li><strong>Emotion: </strong>${response['results'][i].emotion['mostLikely']}</li></ul>${emotionList}</div>`
|
|
const addedHtml = response['isShowId'] !== 'false' ? addedId + otherInfo : otherInfo
|
|
resultArea.innerHTML += addedHtml
|
|
}
|
|
} else {
|
|
let resultArea = document.getElementById('predicted-results')
|
|
resultArea.innerHTML += response['message']
|
|
}
|
|
});
|
|
}
|
|
|
|
//set emotion and breed text to empty
|
|
function setTextEmpty() {
|
|
let resultArea = document.getElementById('predicted-results')
|
|
resultArea.innerHTML = ''
|
|
}
|
|
</script>
|
|
{% endblock %} |