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" /> | |
| <title>Aplikasi Prediksi Biaya Asuransi</title> | |
| </head> | |
| <body class="bg-gray-900"> | |
| <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> | |
| </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">Prediksi Biaya Asuransi Anda:</h1> | |
| <form action="https://labalproits-cyberdas-lr.hf.space/predict" method="post" enctype="multipart/form-data" class="flex flex-col"> | |
| <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" /> | |
| <label for="sex" class="mt-4 mb-2">Jenis Kelamin:</label> | |
| <select name="sex" id="sex" class="p-4 bg-gray-100 rounded-md"> | |
| <option value="1">Laki-laki</option> | |
| <option value="0">Perempuan</option> | |
| </select> | |
| <label for="smoker" class="mt-4 mb-2">Perokok:</label> | |
| <select name="smoker" id="smoker" class="p-4 bg-gray-100 rounded-md"> | |
| <option value="1">Ya</option> | |
| <option value="0">Tidak</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">Jumlah Anak:</label> | |
| <input type="text" name="children" placeholder="Jumlah Anak" 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"> | |
| 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> | |
| </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">Estimasi biaya asuransi Anda adalah</h1> | |
| <h2 class="text-5xl font-bold">${{ '{:,.2f}'.format(insurance_cost) }}</h2> | |
| {% if insurance_cost != 0 %} | |
| <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> | |
| </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" /> | |
| </div> | |
| </section> | |
| </section> | |
| </div> | |
| <div id="Model2" class="Model"> | |
| <gradio-app src="https://alproits-yolov8-pothole.hf.space"></gradio-app> | |
| </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 | |
| type="module" | |
| src="https://gradio.s3-us-west-2.amazonaws.com/3.45.2/gradio.js" | |
| ></script> | |
| </html> | |