Hugging Face's logo

Spaces:
binoubinks
/
ADS_front
Sleeping

App Files Community
ADS_front
File size: 5,956 Bytes 
b790a6c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 
<!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 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>

    <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://binoubinks-ads-back.hf.space/predict", 
                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>