File size: 3,981 Bytes
852ac26 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 |
{% extends 'base.html' %}
{% load static %}
{%block content%}
{%if no_faces%}
<div class="container">
<div class="logo text-center mb-3"><img src="{% static 'images/logo1.png'%}" alt="Logo" ></div>
<hr />
<div class="alert alert-danger">
No faces detected. Cannot process the video.
</div>
</div>
{%else%}
<div class="container">
<div class="logo text-center mb-3"><img src="{% static 'images/logo1.png'%}" alt="Logo" ></div>
<hr />
<h3>Frames Split</h3>
<div id="preprocessed_images" class="col-12 mt-4 mb-2">
{% for each_image in preprocessed_images %}
<img src="{%static each_image%}" class="preprocess" width=auto height="250" />
{%endfor%}
</div>
<h3>Face Cropped Frames</h3>
<div id="faces_images" class="col-12 mb-2">
{% for each_image in faces_cropped_images %}
<img src="{%static each_image%}" class="faces" width=auto height="150" />
{%endfor%}
</div>
<div class="result text-center">
<h3>Play to see Result</h3>
<video height="320" width="640" id="predict-media" controls>
<source src="{{MEDIA_URL}}{{original_video}}" type="video/mp4" codecs="avc1.4d002a" />
</video>
{%if output == "REAL" %}
<h4 class="mx-auto">Result: <span style="color:green">{{output}}</span>
<img src="{% static 'images/thumpup.png'%}" alt="real" height="100px" width=auto>
{%else%}
<h4 class="mx-auto">Result: <span style="color:red">{{output}}</span>
<img src="{% static 'images/thumpdown.png'%}" alt="fake" height="100px" width=auto >
{%endif%}
</div>
<!--
<h3>Heat Maps</h3>
<div id="heatmap_images" class="col-12 mb-4 ">
{% for each_heatmap_image in heatmap_images %}
<img src="{%static each_heatmap_image%}" class="heat-map" width="100" height="150" />
{%endfor%}
</div>
</div>
-->
{%endif%}
{%endblock%}
{%block js_cripts%}
<script src="{%static 'js/face-api.min.js'%}"></script>
<script>
$(document).ready(function () {
const video = document.getElementById("predict-media");
Promise.all([
faceapi.nets.ssdMobilenetv1.loadFromUri('/static/json'),
faceapi.nets.tinyFaceDetector.loadFromUri("/static/json")
])
var detectionTimeout;
video.addEventListener("playing", () => {
var canvas;
if ($('canvas').length < 1) {
canvas = faceapi.createCanvasFromMedia(video);
canvas.style.top = video.offsetTop + "px";
canvas.style.left = video.offsetLeft + "px";
document.body.append(canvas);
}
/* In order to be able to pause the video */
const displaySize = { width: video.width, height: video.height - 60 };
faceapi.matchDimensions(canvas, displaySize);
detectionTimeout = setInterval(async () => {
const detections = await faceapi.detectAllFaces(video);
const resizedDetections = faceapi.resizeResults(detections, displaySize);
canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);
canvas.style.top = video.offsetTop + "px";
canvas.style.left = video.offsetLeft + "px";
resizedDetections.forEach((result, i) => {
console.log(resizedDetections[i].box);
var result = '{{output}}';
var confidence = '{{confidence}}';
var drawOptions = {label: result.concat(" " , confidence , "%")};
if (result == 'REAL'){
drawOptions["boxColor"] = "#0f0";
}
else if (result == 'FAKE'){
drawOptions["boxColor"] = "#f00";
}
var box = { x: resizedDetections[i].box.x, y: resizedDetections[i].box.y, height: 100, width: 100 };
const drawBox = new faceapi.draw.DrawBox(box, drawOptions);
drawBox.draw(canvas);
});
}, 1);
});
video.addEventListener("paused", () => {
clearTimeout(detectionTimeout);
});
})
</script>
{%endblock%} |