denicaturkusumaw
/
TIF_E41201756
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #2 from zainidineafi/master 

Fix card & label
This commit is contained in:
Zainidine Afi Wijaya 2024-03-05 00:04:35 +07:00 committed by GitHub
parent d4d6646bb8 bc4974d0e3
commit 8c38789fa3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 72 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
static/assets/home/css/custom.css
View File

@ -1,3 +1,42 @@
.custom-card {
margin-top: 25px; /* Menambahkan jarak atas antara card */
margin-bottom: 25px; /* Menambahkan jarak bawah antara card */
border: 1px solid rgba(123, 1, 217, 0.1); /* Menambahkan border dengan warna ungu muda */
box-shadow: 0px 2px 4px rgba(123, 1, 217, 0.1); /* Menambahkan efek shadow */
background-color: rgba(123, 1, 217, 0.1); /* Warna background ungu muda */
}
.custom-card .card-header {
background-color: #cb0c9f; /* Warna latar belakang header */
color: white; /* Warna teks header */
border-bottom: 1px solid #cb0c9f; /* Garis bawah header */
border-radius: 10px 10px 0 0; /* Sudut bulat di bagian atas */
text-align: center; /* Meletakkan teks di tengah */
height: 60px; /* Atur tinggi header */
display: flex; /* Menggunakan flexbox */
align-items: center; /* Meletakkan item di tengah vertikal */
justify-content: center; /* Meletakkan item di tengah horizontal */
}
.btn.custom-clear {
background-color: #cb0c9f; /* Warna latar belakang tombol */
color: white; /* Warna teks tombol */
border: none; /* Menghapus border */
padding: 12px 24px; /* Padding untuk memberikan ruang di dalam tombol */
border-radius: 5px; /* Sudut bulat */
cursor: pointer; /* Menampilkan kursor tangan saat dihover */
transition: background-color 0.3s ease; /* Transisi warna latar belakang */
width: 20%; /* Lebar tombol agar mepet dengan card */
margin-top: 10px; /* Jarak dari card body di atas tombol */
margin-bottom: 10px; /* Jarak dari card body di bawah tombol */
margin-left: auto; /* Menggeser tombol ke kanan */
}
.btn.custom-clear:hover {
background-color: #a00a86; /* Warna latar belakang saat hover */
}

99
static/assets/home/js/custom.js
View File

@ -9,9 +9,6 @@ function clearImage() {
$("#hasilDeteksi").hide();
$("#pie").hide();
// clearChartData();
// Tambahkan pemanggilan AJAX untuk menghapus gambar
$.ajax({
@ -106,32 +103,21 @@ $(document).ready(function () {
$("#hasilDeteksi").show();
$("#result").empty();
var buttonClass =
label === "GIANT" ? "btn-sm" : "bg-gradient-dark" ;
var penangananButtonLabel =
label === "GIANT"
? "Tidak ada penanganan"
: "Terdeteksi " + label;
$("#result").append(`
<div style="display: grid; grid-template-columns: 50% auto; align-items: center;">
<img id="image" height="80%" width="50%" src="${data.img_path}">
<div>
<h6>Hasil: <button class="btn ${buttonClass}" '">${label}</button></h6>
<p>Probabilitas Terbesar: ${highest_probability.toFixed(2)}%</p>
</div>
${
label === "GIANT"
? `<button class="btn ${buttonClass}">${penangananButtonLabel}</button>`
: `<button class="btn btn-info" onclick="showPenjelasan('${label}')">${penangananButtonLabel}</button>`
}
<br>
<br>
<button class="btn btn-info" onclick="location.href='${getLink(label)}'">Baca Selengkapnya</button>
</div>
<img id="image" height="80%" width="50%" src="${data.img_path}">
<div>
<h6>Hasil: ${label}</h6>
<p>Probabilitas Terbesar: ${highest_probability.toFixed(2)}%</p>
</div>
</div>
<!-- Div untuk konten tambahan -->
<div>
<p>Sistem mengidentifikasi bahwa objek yang dipilih termasuk kedalam kelas ${label}. Untuk penjelasan selengkapnya, dapat klik button berikut</p>
<button class="btn btn-info" onclick="location.href='${getLink(label)}'">Baca Selengkapnya</button>
</div>
`);
@ -217,51 +203,6 @@ $(document).ready(function () {
});
});
//menampilkan keterangan penjelasan mengenai penyakit yang terdeteksi
function showPenjelasan(penyakit) {
var penjelasanContainer = document.getElementById("penjelasanContainer");
$.ajax({
url: `/handing?clasify=${penyakit}`,
type: "GET",
success: function (response) {
let clasify = response.class;
let guides = response.data;
console.log(penyakit)
var cardBody = penjelasanContainer.querySelector(".card-body");
let penjelasan =
`<div style='max-height: 300px; overflow: auto;'><p>${clasify} terdeteksi. Berikut adalah langkah-langkah penanganan yang dapat Anda lakukan:</p>`;
guides.map((data, i) => {
penjelasan += "<li>" + data.text;
if (data.image != null) {
penjelasan +=
"<img src='" +
data.image +
"' style='width: 100px; height: 100px; object-fit: cover; display: block; margin: 0 auto' />";
}
penjelasan += "</li>";
});
penjelasan += "</div>";
cardBody.innerHTML = penjelasan;
penjelasanContainer.style.display = "block";
},
error: function (error) {
console.error(error);
},
});
}
function closePenjelasan() {
var penjelasanContainer = document.getElementById("penjelasanContainer");
penjelasanContainer.style.display = "none";
}
function clearChartData() {
labels.length = 0;
@ -291,11 +232,15 @@ function showTutorial() {
function nextSlide() {
$('#tutorialCarousel').carousel('next');
}
//menutup modal tutorial
function closeModal() {
var modal = document.getElementById('tutorialModal');
$('#tutorialModal').modal('hide');
}
// menutup modal crop
function closeCrop() {
document.getElementById("upload_image").value = "";
$('#modal').modal('hide');
}
window.onload = function() {
showTutorial();
showTutorial();
document.getElementById("upload_image").value = "";
};

43
templates/classification.html
View File

@ -180,18 +180,18 @@
<div class="content mt-5">
<div class="col-lg-6 mx-auto">
<div class="card custom-card">
<div class="card-header bg-primary">
<div class="card-header">
<h5 class="text-center text-white">Upload Gambar</h5>
</div>
<div class="card-body">
<form method="post" enctype="multipart/form-data">
<div class="form-group row">
<label for="upload_image" class="col-3 col-form-label">Pilih Gambar</label>
<div class="col-9">
<input type="file" id="upload_image" name="image" class="form-control-file align-items-center" accept=".jpg, .jpeg">
<input type="reset" class="btn btn-sm btn-primary btn-round" value="Clear" onclick="clearImage()">
</div>
<div class="form-group row">
<label for="upload_image" class="col-3 col-form-label">Pilih Gambar</label>
<div class="col-12 d-flex align-items-center justify-content-between">
<input type="file" id="upload_image" name="image" class="form-control-file align-items-center" accept=".jpg, .jpeg">
<input type="reset" class="btn custom-clear btn-round" value="Clear" onclick="clearImage()">
</div>
</div>
</form>
</div>
</div>
@ -202,9 +202,7 @@
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title" style="color: rgb(171, 26, 26);">Perhatian : Agar hasil deteksi lebih akurat, atur posisi pemangkasan (crop) dengan baik dan disarankan pada ukuran paling kecil crop</h6>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="img-container">
@ -221,7 +219,7 @@
<div class="modal-footer">
<button type="button" id="crop" class="btn btn-primary">Pangkas</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
<button type="button" class="btn btn-secondary" onclick="closeCrop()">Batal</button>
</div>
</div>
</div>
@ -231,39 +229,20 @@
<div class="col-lg-6 mx-auto">
<div class="card custom-card" id="hasilDeteksi" style="display: none;">
<div class="card-header bg-primary">
<h4 class="text-center text-white">Hasil Deteksi</h4>
<h5 class="text-center text-white">Hasil Deteksi</h5>
</div>
<div class="card-body text-center" id="result"></div>
</div>
<div id="penjelasan" style="display: none;">
</div>
</div>
<div id="pie" style="display: none;" class="col-lg-6 mx-auto">
<div class="card custom-card">
<h4 class="card-header text-center text-white bg-primary">Persentase Probabilitas</h4>
<h5 class="card-header text-center text-white bg-primary">Persentase Probabilitas</h5>
<div class="card-body">
<canvas id="pieChart" width="10" height="10"></canvas>
</div>
</div>
</div>
<div id="penjelasanContainer" style="display: none;">
<div class="card pop-card">
<div class="card-header">
<h4>Detail</h4>
<button type="button" class="close" aria-label="Close" onclick="closePenjelasan()">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="card-body">
<!-- Content goes here -->
</div>
</div>
</div>
</div>
</div>