azizatulmashwafah
/
Web_Parkinson
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

upload klasifikasi.html

This commit is contained in:
azizatulmashwafah 2024-05-29 08:54:37 +07:00
parent 854b6efce8
commit d188c45b29
1 changed files with 78 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
klasifikasi.html Normal file
View File

@ -0,0 +1,78 @@
{% 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 %}