250 lines
7.7 KiB
HTML
250 lines
7.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width, initial-scale=1.0, shrink-to-fit=no"
|
|
/>
|
|
<title>{% if judul %}{{ judul }} - {% endif %}Kepuasan Pelanggan</title>
|
|
<link
|
|
rel="stylesheet"
|
|
href="{{ url_for('static', filename='bootstrap/css/bootstrap.min.css') }}"
|
|
/>
|
|
<link rel="stylesheet" type="text/css" href="styles.css" />
|
|
<script
|
|
src="https://kit.fontawesome.com/f2151fe6dc.js"
|
|
crossorigin="anonymous"
|
|
></script>
|
|
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
|
|
<style>
|
|
.judul {
|
|
font-family: "Montserrat", sans-serif;
|
|
font-weight: 700;
|
|
}
|
|
.navbar-container {
|
|
height: 85px; /* Set the height of the navbar container */
|
|
background: #3591ae;
|
|
}
|
|
.btn-back:hover {
|
|
background-color: red; /* Ubah warna background saat dihover */
|
|
}
|
|
.badge {
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.fa-thumbs-up,
|
|
.fa-thumbs-down {
|
|
position: relative;
|
|
padding-right: 7px;
|
|
}
|
|
|
|
.top-0 {
|
|
top: 0;
|
|
}
|
|
|
|
.start-100 {
|
|
left: 100%;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="navbar-container">
|
|
<nav
|
|
class="navbar navbar-expand-lg"
|
|
style="background: #3591ae; height: 100%"
|
|
>
|
|
<div class="container-fluid d-flex justify-content-center h-100">
|
|
<p class="h2 text-center judul" style="color: white; margin: 0">
|
|
Kepuasan Pelanggan
|
|
</p>
|
|
</div>
|
|
<div class="navbar-collapse collapse">
|
|
<ul class="navbar-nav ml-auto">
|
|
<li class="nav-item">
|
|
<button
|
|
type="button"
|
|
class="btn btn-primary btn-back"
|
|
onclick="backSystem()"
|
|
>
|
|
Kembali
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<div
|
|
class="card border-info border rounded-5 shadow"
|
|
style="margin-bottom: 2%; margin-top: 3%; background: #3591ae"
|
|
>
|
|
<div
|
|
class="card-body d-flex justify-content-between align-items-center"
|
|
>
|
|
<h4 class="text-white">Kamera</h4>
|
|
<button
|
|
type="button"
|
|
class="btn btn-primary"
|
|
id="reloadButton"
|
|
onclick="reloadSystem()"
|
|
>
|
|
Deteksi
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="card border-info border rounded-5 shadow"
|
|
style="margin-bottom: 2%"
|
|
>
|
|
<div class="card-body text-center">
|
|
<div id="video_container">
|
|
<img
|
|
id="video_feed"
|
|
src="{{ url_for('video_feed') }}"
|
|
alt="Video Feed"
|
|
style="max-width: 100%; max-height: 100%"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<div
|
|
class="card border-info border rounded-5 shadow"
|
|
style="margin-bottom: 2%; margin-top: 3%; background: #3591ae"
|
|
>
|
|
<div
|
|
class="card-body d-flex justify-content-between align-items-center"
|
|
>
|
|
<h4 class="text-white">Prediksi</h4>
|
|
<div style="font-size: 0">
|
|
<div
|
|
style="
|
|
position: relative;
|
|
display: inline-block;
|
|
font-size: 16px;
|
|
margin-right: 30px;
|
|
"
|
|
>
|
|
<i
|
|
class="fa-solid fa-thumbs-up text-white"
|
|
style="font-size: 25px"
|
|
></i>
|
|
<span
|
|
class="top-0 start-100 translate-middle badge rounded-pill bg-success text-white"
|
|
id="puasPoints"
|
|
style="position: absolute"
|
|
>{{ puas_points }}</span
|
|
>
|
|
</div>
|
|
<div
|
|
style="
|
|
position: relative;
|
|
display: inline-block;
|
|
font-size: 16px;
|
|
margin-right: 10px;
|
|
"
|
|
>
|
|
<i
|
|
class="fa-solid fa-thumbs-down text-white"
|
|
style="font-size: 25px"
|
|
></i>
|
|
<span
|
|
class="top-0 start-100 translate-middle badge rounded-pill bg-success text-white"
|
|
id="tidakPuasPoints"
|
|
style="position: absolute"
|
|
>{{ tidak_puas_points }}</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card border-info border rounded-5 shadow">
|
|
<div
|
|
class="card-body d-flex justify-content-center align-items-center"
|
|
>
|
|
<div id="initialView">
|
|
<p>Studi ekspresi wajah sedang berlangsung...</p>
|
|
</div>
|
|
<div
|
|
id="resultView"
|
|
style="
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
text-align: center;
|
|
"
|
|
>
|
|
<i
|
|
id="expressionIcon"
|
|
class="fa-10x fa-regular fa-face-meh text-center"
|
|
style="color: #3591ae; font-size: 28vw; margin-bottom: 20px"
|
|
></i>
|
|
<p
|
|
id="result"
|
|
class="text-center mb-0"
|
|
style="font-size: 1.3em"
|
|
>
|
|
Tidak ada hasil ekspresi yang terdeteksi
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
|
|
<script>
|
|
var socket = io.connect(
|
|
"http://" + document.domain + ":" + location.port
|
|
);
|
|
|
|
socket.on("connect", function () {
|
|
socket.emit("get_expression");
|
|
});
|
|
|
|
socket.on("update_expression", function (data) {
|
|
console.log("Data dari Server:", data);
|
|
|
|
if (data.most_common_expression === "Puas") {
|
|
console.log("Ekspresi Puas");
|
|
$("#expressionIcon")
|
|
.removeClass()
|
|
.addClass("fa-10x fa-regular fa-face-smile");
|
|
} else if (data.most_common_expression === "TidakPuas") {
|
|
console.log("Ekspresi Tidak Puas");
|
|
$("#expressionIcon")
|
|
.removeClass()
|
|
.addClass("fa-10x fa-regular fa-face-frown");
|
|
} else {
|
|
console.log("Ekspresi Tidak Terdeteksi");
|
|
$("#expressionIcon")
|
|
.removeClass()
|
|
.addClass("fa-10x fa-regular fa-face-meh");
|
|
}
|
|
$("#result").text(data.most_common_expression);
|
|
$("#initialView").hide();
|
|
$("#resultView").show();
|
|
|
|
// Update poin pada tampilan HTML
|
|
$("#puasPoints").text(data.puas_points);
|
|
$("#tidakPuasPoints").text(data.tidak_puas_points);
|
|
});
|
|
|
|
function reloadSystem() {
|
|
// Memuat ulang halaman atau memulai sistem deteksi ekspresi lagi
|
|
window.location.reload();
|
|
}
|
|
|
|
function backSystem() {
|
|
// Redirect ke halaman tentang.html saat tombol ditekan
|
|
window.location.href = "/";
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|