Spaces:
Runtime error
Runtime error
File size: 6,899 Bytes
6411ffa 7f80e8d a78ccca 6411ffa 928970e 6411ffa a78ccca 6411ffa 7f80e8d a78ccca 6411ffa a78ccca 6411ffa a78ccca 6411ffa a78ccca 6411ffa a78ccca 6411ffa a78ccca 6411ffa a78ccca 6411ffa a78ccca 928970e 6411ffa 0a7e4a9 6411ffa 7f80e8d 6411ffa 928970e 6411ffa 7f80e8d 35d9f1a 7f80e8d a78ccca 0a7e4a9 a78ccca 8c0654c 92db7c4 7f80e8d 6411ffa | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 | <!DOCTYPE html>
<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>
|