update,
This commit is contained in:
louiscklaw
57
it114105/ite3905/Assignment/templates/index.html
Normal file
57
it114105/ite3905/Assignment/templates/index.html
Normal file
@@ -0,0 +1,57 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<title>AI Face Blur in Video</title>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/style.css') }}">
|
||||
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container py-5" style="margin-top: 250px;">
|
||||
|
||||
<!-- For demo purpose -->
|
||||
<header class="text-white text-center">
|
||||
<h1 class="display-4">AI Blur Faces in Video </h1>
|
||||
<p class="lead mb-0">AI will detect the video faces, you can select you want to blur of face </p>
|
||||
<p> </p>
|
||||
</header>
|
||||
<br>
|
||||
|
||||
<div class="row py-4">
|
||||
<div class="col-lg-6 mx-auto">
|
||||
<form action="/upload" method="POST" enctype="multipart/form-data">
|
||||
<!-- Upload image input-->
|
||||
<div class="input-group mb-3 px-2 py-2 rounded-pill bg-white shadow-sm">
|
||||
<input id="upload" type="file" name="video" id="video" onchange="readURL(this);" class="form-control border-0">
|
||||
<label id="upload-label" for="upload" class="font-weight-light text-muted">Choose file</label>
|
||||
<div class="input-group-append">
|
||||
<label for="upload" class="btn btn-light m-0 rounded-pill px-4"> <i class="fa fa-cloud-upload mr-2 text-muted"></i><small class="text-uppercase font-weight-bold text-muted">Choose file</small></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3 text-center" style="margin-top: 80px;">
|
||||
<button type="submit" id="btnProcess" class="btn btn-outline-light">Process</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
</footer>
|
||||
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
$('#btnProcess').click(function(){
|
||||
$(this).html('<div class="spinner-border" role="status"><span class="sr-only">Loading...</span></div>');
|
||||
})
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
63
it114105/ite3905/Assignment/templates/process.html
Normal file
63
it114105/ite3905/Assignment/templates/process.html
Normal file
@@ -0,0 +1,63 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<title>AI Face Blur in Video</title>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/style.css') }}">
|
||||
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
|
||||
</head>
|
||||
<style>
|
||||
body{
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div class="py-5" style="height: 900px;background-color: white;margin-top: 85px; padding: 50px; ">
|
||||
<form action="ml/render" method="POST">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div style="overflow-y: scroll;">
|
||||
<h1>{{filename}}</h1>
|
||||
<p>You can select your want to blur faces:</p>
|
||||
<div class="d-flex flex-row bd-highlight mb-4">
|
||||
{% for people in detected_face_img %}
|
||||
<div class="p-2 bd-highlight">
|
||||
<input type="checkbox" name="face" id="{{people.id}}" value="{{people.id}}" />
|
||||
<label for="{{people.id}}"><img src="{{people.url}}" /></label>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<div class="embed-responsive embed-responsive-16by9">
|
||||
<video class="video-fluid z-depth-1" autoplay loop controls muted>
|
||||
<source src="/static/save-data/{{fileName}}.mp4" type="video/mp4" />
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-render">
|
||||
<button type="submit" id="btnRender" class="btn btn-dark float-right" style="margin-top: 10px;">Render</button>
|
||||
</div>
|
||||
<input type="hidden" id="file" name="file" value="{{fileName}}">
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
</footer>
|
||||
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
|
||||
</body>
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
$('#btnRender').click(function(){
|
||||
$(this).html('<div class="spinner-grow text-light" role="status"><span class="sr-only">Loading...</span></div>');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
57
it114105/ite3905/Assignment/templates/render.html
Normal file
57
it114105/ite3905/Assignment/templates/render.html
Normal file
@@ -0,0 +1,57 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<title>AI Face Blur in Video</title>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/style.css') }}">
|
||||
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
|
||||
</head>
|
||||
<style>
|
||||
body{
|
||||
overflow-y: scroll;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div class="py-5" style="height: 100%;background-color: white;margin-top: 85px; margin-bottom: 85px; padding: 50px; ">
|
||||
<div class="mx-auto" style="width: 60%;">
|
||||
|
||||
<div class="embed-responsive embed-responsive-16by9">
|
||||
<video class="video-fluid z-depth-1" autoplay loop controls muted>
|
||||
<source src="/static/save-data/{{fileName}}-finish.mp4" type="video/mp4" />
|
||||
</video>
|
||||
</div>
|
||||
<br>
|
||||
<a href="/static/save-data/{{fileName}}-finish.mp4" download><button class="btn btn-info"><i class="fa fa-download"></i> Download</button></a>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 50px;">
|
||||
<div class="text-center">
|
||||
<h4>You selected the faces:</h4>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="overflow-auto">
|
||||
<div class="d-flex flex-row bd-highlight mb-10 justify-content-center">
|
||||
{% for people in detected_face_img %}
|
||||
<div class="p-2 bd-highlight">
|
||||
<input type="checkbox" name="person" value="{{people.id}}" />
|
||||
<label for="{{people.id}}"><img src="{{people}}" /></label>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
</footer>
|
||||
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user