Hugging Face's logo

Spaces:
brajshukl
/
carpriceprediction
No application file

App Files Community
1
carpriceprediction
File size: 6,120 Bytes 
46f1484
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="static/css/style.css">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

    <title>Car Price Predictor</title>
  </head>
  <body class="bg-dark">
    <div class="container">
      <div class="row">
        <div class="card mt-50" style="width: 100%; height: 100%;">
          <div class="card-header">
            <div class="col-12" style="text-align: center;">
              <h1>Welcome to Car Price Predictor</h1>
            </div>
          </div>
          <div class="card-body">
            <form method="post" accept-charset="utf-8">
              <div class="col-18 form-group" style="text-align: center;">
                <label for=""><b>Select Company</b></label>
                <select class="selectpicker form-control" name="company" id="company" required="1" onchange="load_car_models(this,'car_model')">
                  {% for company in companies %}
                  <option value="{{ company }}">{{ company }}</option>
                  {% endfor %}
                </select>
              </div>
              <div class="col-18 form-group" style="text-align: center;">
                <label for=""><b>Select Model</b></label>
                <select class="selectpicker form-control" name="car_model" id="car_model" required="1">
                  
                </select>
              </div>
              <div class="col-18 form-group" style="text-align: center;">
                <label for=""><b>Select Year of Purchase</b></label>
                <select class="selectpicker form-control" name="year" id="year" required="1">
                  {% for year in years %}
                  <option value="{{ year }}">{{ year }}</option>
                  {% endfor %}
                </select>
              </div>
              <div class="col-18 form-group" style="text-align: center;">
                <label for=""><b>Select Fuel Type</b></label>
                <select class="selectpicker form-control" name="fuel_type" id="fuel_type" required="1">
                  {% for fuel_type in fuel_types %}
                  <option value="{{ fuel_type }}">{{ fuel_type }}</option>
                  {% endfor %}
                </select>
              </div>
              <div class="col-18 form-group" style="text-align: center;">
                <label for=""><b>Enter Number of Kilomete Traval</b></label>
                <input class="form-control" type="text" id="kili_driven" name="kilo_driven" placeholder="Enter Number of Kilomete Traval">
              </div>
              <button class="btn btn-primary form-control" onclick="send_data()">Predict Price</button>
            </form>
            <br>

            <div class="row">
              <div class="col-12" style="text-align: center;">
                <h3><span id="prediction"></span></h3>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
    <script>
      function load_car_models(cam,car_model_id)
      {
        var company = document.getElementById(cam.id);
        var car_model = document.getElementById(car_model_id);
        car_model.value="";
        car_model.innerHTML="";

          {% for company in companies %}

            if(company.value == "{{company}}")
            {
              {% for model in car_models %}
                {% if company in model %}
                  var newOption = document.createElement("option");
                  newOption.value="{{ model }}";
                  newOption.innerHTML="{{ model }}";
                  car_model.options.add(newOption);
                {% endif %}
              {% endfor %}
            }

          {% endfor %}
      }

      function form_handler(event)
      {
        event.preventDefault();
      }

      function send_data()
      {
        //suppress form default behabier
        document.querySelector('form').addEventListener('submit',form_handler);
        //send and recieve data to predict
        var fd = new FormData(document.querySelector('form'));

        var xhr= new XMLHttpRequest();
        xhr.open('POST','/predict',true);
        document.getElementById('prediction').innerHTML="Wait! Predicting Price ....";

        xhr.onreadystatechange= function()
          {
            if(xhr.readyState == XMLHttpRequest.DONE)
            {
              document.getElementById('prediction').innerHTML="Prediction: Rs. "+xhr.responseText;
            }
          }
        
         xhr.onload=function(){};
         xhr.send(fd);
        

      }
    </script>

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
    -->
  </body>
</html>