Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <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>Insurance Cost Prediction Application</title> | |
| </head> | |
| <body> | |
| <div class="bg-black text-white flex flex-row justify-end py-1"> | |
| <button class="mx-8 font-bold tablink active rounded-2xl p-2 hover:bg-purple-500 duration-150" onclick="openModel(event, 'Model1')">Model 1</button> | |
| <button class="mx-8 font-bold tablink rounded-2xl p-2 hover:bg-purple-500 duration-150" onclick="openModel(event, 'Model2')">Model 2</button> | |
| <button class="mx-8 font-bold tablink rounded-2xl p-2 hover:bg-purple-500 duration-150" onclick="openModel(event, 'Model3')">Model 3</button> | |
| </div> | |
| <div id="Model1" class="Model bg-gradient-to-r from-purple-400 to-purple-700 text-gray-800"> | |
| <section class="flex flex-col justify-between item-center p-8 min-h-screen md:flex-row"> | |
| <main class="bg-white p-16 rounded-lg"> | |
| <h1 class="text-3xl font-bold mb-8">Predict Your Insurance Cost:</h1> | |
| <form enctype="multipart/form-data" class="flex flex-col" id="upload_form"> | |
| <label for="age" class="mb-2">Age</label> | |
| <input type="text" name="age" placeholder="Age" required="required" class="p-4 bg-gray-100 rounded-md" /> | |
| <label for="sex" class="mt-4 mb-2">Gender:</label> | |
| <select name="sex" id="sex" class="p-4 bg-gray-100 rounded-md"> | |
| <option value="1">Male</option> | |
| <option value="0">Female</option> | |
| </select> | |
| <label for="smoker" class="mt-4 mb-2">Smoker:</label> | |
| <select name="smoker" id="smoker" class="p-4 bg-gray-100 rounded-md"> | |
| <option value="1">Yes</option> | |
| <option value="0">No</option> | |
| </select> | |
| <label for="bmi" class="mt-4 mb-2">BMI:</label> | |
| <input type="text" name="bmi" placeholder="BMI" required="required" class="p-4 bg-gray-100 rounded-md" /> | |
| <label for="children" class="mt-4 mb-2">Children:</label> | |
| <input type="text" name="children" placeholder="Children" required="required" class="p-4 bg-gray-100 rounded-md" /> | |
| <label for="region" class="mt-4 mb-2">Region:</label> | |
| <select name="region" id="region" class="p-4 bg-gray-100 rounded-md"> | |
| <option value="3">Southwest</option> | |
| <option value="2">Southeast</option> | |
| <option value="1">Northwest</option> | |
| <option value="0">Northeast</option> | |
| </select> | |
| <button type="submit" class="flex justify-center align-center mt-8 p-4 bg-gradient-to-r from-purple-400 to-purple-700 text-white rounded-md"> | |
| PREDICT NOW<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> | |
| </main> | |
| <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">Your estimate insurance cost:</h1> | |
| <h2 class="text-5xl font-bold">$<span id="insurance_cost">0.00 USD</span></h2> | |
| <div class="mt-8"> | |
| <p id="respAge"></p> | |
| <p id="respSex"></p> | |
| <p id="respSmoker"></p> | |
| <p id="respBmi"></p> | |
| <p id="respChildren"></p> | |
| <p id="respRegion"></p> | |
| </div> | |
| </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> | |
| <div id="Model2" class="Model"> | |
| <iframe | |
| src="https://alproits-yolov8-pothole.hf.space" | |
| frameborder="0" | |
| class="h-screen w-screen" | |
| ></iframe> | |
| </div> | |
| <div id="Model3" class="Model"> | |
| <iframe | |
| src="https://hilmizr-yolov5-ricedisease.hf.space" | |
| frameborder="0" | |
| class="h-screen w-screen" | |
| ></iframe> | |
| </div> | |
| <style> | |
| .active { | |
| background-color: rgb(124 58 237); | |
| } | |
| #Model2 { | |
| display: none; | |
| } | |
| </style> | |
| </body> | |
| <script> | |
| function openModel(evt, modelName) { | |
| var i, x, tablinks; | |
| x = document.getElementsByClassName("Model"); | |
| for (i = 0; i < x.length; i++) { | |
| x[i].style.display = "none"; | |
| } | |
| tablinks = document.getElementsByClassName("tablink"); | |
| for (i = 0; i < x.length; i++) { | |
| tablinks[i].className = tablinks[i].className.replace(" active", ""); | |
| } | |
| document.getElementById(modelName).style.display = "block"; | |
| 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: "https://labalproits-cyberdas-be.hf.space/predict", // Replace with the correct URL | |
| data: formData, | |
| processData: false, | |
| contentType: false, | |
| success: function (response) { | |
| // Handle the response data | |
| $('#respAge').html("<strong>Age:</strong> " + response.age + " tahun"); | |
| $('#respSex').html("<strong>Gender:</strong> " + response.sex); | |
| $('#respSmoker').html("<strong>Smoker:</strong> "+ response.smoker); | |
| $('#respBmi').html("<strong>BMI:</strong> " + response.bmi); | |
| $('#respChildren').html("<strong>Children:</strong> " + response.children); | |
| $('#respRegion').html("<strong>Region:</strong> " + response.region); | |
| $('#insurance_cost').html(parseFloat(response.insurance_cost).toFixed(2) + ' USD'); | |
| console.log(response); | |
| }, | |
| error: function (error) { | |
| console.error("Error:", error); | |
| } | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |