From d188c45b298bf0249736a9ed04c52c4ceadd0f25 Mon Sep 17 00:00:00 2001
From: azizatulmashwafah <zizahchaca@gmail.com>
Date: Wed, 29 May 2024 08:54:37 +0700
Subject: [PATCH] upload klasifikasi.html

---
 klasifikasi.html | 78 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 78 insertions(+)
 create mode 100644 klasifikasi.html

diff --git a/klasifikasi.html b/klasifikasi.html
new file mode 100644
index 0000000..40977b6
--- /dev/null
+++ b/klasifikasi.html
@@ -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 %}