feat: fetch api using ajax

templates/index.html

@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <title>Aplikasi Prediksi Biaya Asuransi</title>
   </head>
 
@@ -19,7 +20,7 @@
         <main class="bg-white p-16 rounded-lg">
           <h1 class="text-3xl font-bold mb-8">Prediksi Biaya Asuransi Anda:</h1>
     
-          <form action="https://labalproits-cyberdas-lr.hf.space/predict" method="post" enctype="multipart/form-data" class="flex flex-col">
+          <form enctype="multipart/form-data" class="flex flex-col" id="upload_form">
             <label for="age" class="mb-2">Usia</label>
             <input type="text" name="age" placeholder="Usia" required="required" class="p-4 bg-gray-100 rounded-md" />
     
@@ -60,17 +61,15 @@
         <section class="mt-8 h-full flex-auto rounded-lg md:mt-0 md:ml-8">
           <div class="bg-white p-16 rounded-lg">
             <h1 class="text-2xl mb-8">Estimasi biaya asuransi Anda adalah</h1>
-            <h2 class="text-5xl font-bold">${{ '{:,.2f}'.format(insurance_cost) }}</h2>
-            {% if insurance_cost != 0 %}
+            <h2 class="text-5xl font-bold">$<span id="insurance_cost"></span></h2>
               <div class="mt-8">
-                <p><strong>Usia:</strong> {{ age }} tahun</p>
-                <p><strong>Jenis kelamin:</strong> {{ sex }}</p>
-                <p><strong>Status perokok:</strong> {{ smoker }}</p>
-                <p><strong>BMI:</strong> {{ bmi }}</p>
-                <p><strong>Jumlah Anak:</strong> {{ children }}</p>
-                <p><strong>Region:</strong> {{ region }}</p>
+                <p><strong>Usia:</strong> <span id="respAge"></span> tahun</p>
+                <p><strong>Jenis kelamin:</strong> <span id="respSex"></span></p>
+                <p><strong>Status perokok:</strong> <span id="respSmoker"></span></p>
+                <p><strong>BMI:</strong> <span id="respBmi"></span></p>
+                <p><strong>Jumlah Anak:</strong> <span id="respChildren"></span></p>
+                <p><strong>Region:</strong> <span id="respRegion"></span></p>
               </div>
-            {% endif %}
           </div>
           <div class="flex justify-around p-16 rounded-lg mt-8">
             <img class="h-24 md:h-28" src="https://elib.its.ac.id/conf/cyberdas/public/assets/img/img_navbar.svg" alt="logo-dts" />
@@ -79,33 +78,12 @@
       </section>
     </div>
 
-    <div id="Model2" class="Model bg-gradient-to-r from-green-400 to-green-700 text-gray-800">
-      <section class="flex flex-col justify-between item-center p-8 min-h-screen md:flex-row">
-        <section class="mt-8 flex-auto rounded-lg md:mt-0 md:ml-8">
-          <div class="bg-white p-16 rounded-lg">
-            <h1 class="text-3xl font-bold mb-8">Prediksi :</h1>
-            <form action="https://alproits-cyberdas-lr.hf.space/predict" method="post" enctype="multipart/form-data" class="flex flex-col">
-              <label for="">
-
-              </label>
-              <button type="submit" class="flex justify-center align-center mt-8 p-4 bg-gradient-to-r from-green-400 to-green-700 text-white rounded-md">
-                PREDIKSI SEKARANG<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right ml-4">
-                  <line x1="5" y1="12" x2="19" y2="12"></line>
-                  <polyline points="12 5 19 12 12 19"></polyline>
-                </svg>
-              </button>
-            </form>
-          </div>
-        </section>
-        <section class="mt-8 h-full flex-auto rounded-lg md:mt-0 md:ml-8">
-          <div class="bg-white p-16 rounded-lg">
-            <h1 class="text-3xl font-bold mb-8"> Hasil Prediksi :</h1>
-          </div>
-          <div class="flex justify-around p-16 rounded-lg mt-8">
-            <img class="h-24 md:h-28" src="https://elib.its.ac.id/conf/cyberdas/public/assets/img/img_navbar.svg" alt="logo-dts" />
-          </div>
-        </section>
-      </section>
+    <div id="Model2" class="Model">
+      <iframe
+      src="https://alproits-yolov8-pothole.hf.space"
+      frameborder="0"
+      class="h-screen w-screen"
+      ></iframe>
     </div>
 
     <style>
@@ -133,4 +111,38 @@
       evt.currentTarget.className += " active";
     }
   </script>
+  <script>
+    $(document).ready(function () {
+        $("#upload_form").submit(function (event) {
+            event.preventDefault();  // Prevent the default form submission
+
+            // Get the form data
+            var formData = new FormData(this);
+
+            // Make the Ajax request
+            $.ajax({
+                type: "POST",
+                url: "http://127.0.0.1:8000/predict",  // Replace with the correct URL
+                data: formData,
+                processData: false,
+                contentType: false,
+                success: function (response) {
+                    // Handle the response data
+                    $('#respAge').html(response.age);
+                    $('#respSex').html(response.sex);
+                    $('#respSmoker').html(response.smoker);
+                    $('#respBmi').html(response.bmi);
+                    $('#respChildren').html(response.children);
+                    $('#respRegion').html(response.region);
+                    $('#insurance_cost').html(response.insurance_cost);
+                    console.log(response);
+                },
+                error: function (error) {
+                    console.error("Error:", error);
+                }
+            });
+        });
+    });
+  </script>
+</body>
 </html>