79 lines
3.9 KiB
HTML
79 lines
3.9 KiB
HTML
{% extends "base.html" %}
|
|
{% block content %}
|
|
<div class="text-center">
|
|
<h1 class="mt-4 mb-3"><b>CLASSIFICATION</b></h1>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<div class="card col-md-12" style="height: 310px; object-fit: cover; border-radius: 15px;">
|
|
<div class="card-body">
|
|
<h5 class="card-title"><b>Image Pattern</b></h5>
|
|
<img id="inputImagePreview" src="" class="card-img-top" alt="pola-gambar" style="width: fit-content; height: 230px; object-fit: cover; display: none;">
|
|
{% if predict_image_path %}
|
|
<img id="processedImage" src="{{ predict_image_path }}" class="card-img-top" alt="gambar-diproses" style="width: fit-content; height: 230px; object-fit: cover;">
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<label class="form-label mt-3"><b>Insert Image</b></label>
|
|
<form class="row g-3" action="/submit" method="POST" enctype="multipart/form-data">
|
|
<div class="col-md-12 mb-2">
|
|
<input type="file" id="inputImage" name="file" accept="image/*" style="background-color: #A5C7C6; color: white; border-radius: 5px; width: 100%;" onchange="previewImage(event)">
|
|
<div class="form-text" style="color: red;">Upload minimum 20 kb and maximum 5 mb</div>
|
|
</div>
|
|
<div class="col-md-8 mb-3">
|
|
<button type="submit" onclick="showProcessedImage()" class="btn" style="background-color: #00A9A7; color: white; border-radius: 10px; width: 100%;">Classification</button>
|
|
</div>
|
|
<div class="col-md-4 mb-3">
|
|
<a href="/refresh" class="btn" style="background-color: #878C8C; color: white; border-radius: 10px; width: 100%;">Refresh</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card col-md-12" style="height: 310px; object-fit: cover; border-radius: 15px;">
|
|
<div class="card-body">
|
|
<h5 class="card-title" style="font-weight: bold; margin-bottom: 100px;">Classification Result</h5>
|
|
{% if predictiontremor %}
|
|
<h1 class="text-center"><b>{{ predictiontremor }}</b></h1>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<form class="row g-3" action="" enctype="multipart/form-data">
|
|
<div class="col-md-4 mb-3">
|
|
<label class="form-label mt-3"><b>Confidence :</b></label>
|
|
{% if predictiontremor %}
|
|
<p>{{ confidencetremor }}</p>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-8 mb-3">
|
|
<label class="form-label mt-3"><b>Suggestion :</b></label>
|
|
{% if saran %}
|
|
<p>{{ saran }}</p>
|
|
{% endif %}
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
// Fungsi untuk menampilkan gambar yang dipilih saat input file berubah
|
|
function previewImage(event) {
|
|
console.log('Input file changed'); // Periksa apakah fungsi dipanggil saat input file berubah
|
|
var input = event.target;
|
|
var reader = new FileReader();
|
|
reader.onload = function () {
|
|
var img = document.getElementById('inputImagePreview');
|
|
img.src = reader.result;
|
|
img.style.display = 'block';
|
|
};
|
|
reader.readAsDataURL(input.files[0]);
|
|
}
|
|
// Fungsi untuk menampilkan gambar yang diproses setelah mengirim formulir
|
|
function showProcessedImage() {
|
|
var inputImg = document.getElementById('inputImagePreview');
|
|
inputImg.style.display = 'none'; // Sembunyikan gambar yang dipilih
|
|
var processedImg = document.getElementById('processedImage');
|
|
processedImg.src = inputImg.src; // Set gambar yang diproses dari gambar yang dipilih
|
|
processedImg.style.display = 'block'; // Tampilkan gambar yang diproses
|
|
}
|
|
</script>
|
|
{% endblock %}
|