Hugging Face's logo

Spaces:
brajshukl
/
carpriceprediction
No application file

App Files Community
1
brajshukl commited on
Commit
46f1484
•
1 Parent(s): ea1916c

Upload index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +140 -0
templates/index.html ADDED
@@ -0,0 +1,140 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <!-- Required meta tags -->
5
+ <meta charset="utf-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7
+ <link rel="stylesheet" href="static/css/style.css">
8
+
9
+ <!-- Bootstrap CSS -->
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
11
+
12
+ <title>Car Price Predictor</title>
13
+ </head>
14
+ <body class="bg-dark">
15
+ <div class="container">
16
+ <div class="row">
17
+ <div class="card mt-50" style="width: 100%; height: 100%;">
18
+ <div class="card-header">
19
+ <div class="col-12" style="text-align: center;">
20
+ <h1>Welcome to Car Price Predictor</h1>
21
+ </div>
22
+ </div>
23
+ <div class="card-body">
24
+ <form method="post" accept-charset="utf-8">
25
+ <div class="col-18 form-group" style="text-align: center;">
26
+ <label for=""><b>Select Company</b></label>
27
+ <select class="selectpicker form-control" name="company" id="company" required="1" onchange="load_car_models(this,'car_model')">
28
+ {% for company in companies %}
29
+ <option value="{{ company }}">{{ company }}</option>
30
+ {% endfor %}
31
+ </select>
32
+ </div>
33
+ <div class="col-18 form-group" style="text-align: center;">
34
+ <label for=""><b>Select Model</b></label>
35
+ <select class="selectpicker form-control" name="car_model" id="car_model" required="1">
36
+
37
+ </select>
38
+ </div>
39
+ <div class="col-18 form-group" style="text-align: center;">
40
+ <label for=""><b>Select Year of Purchase</b></label>
41
+ <select class="selectpicker form-control" name="year" id="year" required="1">
42
+ {% for year in years %}
43
+ <option value="{{ year }}">{{ year }}</option>
44
+ {% endfor %}
45
+ </select>
46
+ </div>
47
+ <div class="col-18 form-group" style="text-align: center;">
48
+ <label for=""><b>Select Fuel Type</b></label>
49
+ <select class="selectpicker form-control" name="fuel_type" id="fuel_type" required="1">
50
+ {% for fuel_type in fuel_types %}
51
+ <option value="{{ fuel_type }}">{{ fuel_type }}</option>
52
+ {% endfor %}
53
+ </select>
54
+ </div>
55
+ <div class="col-18 form-group" style="text-align: center;">
56
+ <label for=""><b>Enter Number of Kilomete Traval</b></label>
57
+ <input class="form-control" type="text" id="kili_driven" name="kilo_driven" placeholder="Enter Number of Kilomete Traval">
58
+ </div>
59
+ <button class="btn btn-primary form-control" onclick="send_data()">Predict Price</button>
60
+ </form>
61
+ <br>
62
+
63
+ <div class="row">
64
+ <div class="col-12" style="text-align: center;">
65
+ <h3><span id="prediction"></span></h3>
66
+ </div>
67
+ </div>
68
+ </div>
69
+
70
+ </div>
71
+ </div>
72
+ </div>
73
+ <script>
74
+ function load_car_models(cam,car_model_id)
75
+ {
76
+ var company = document.getElementById(cam.id);
77
+ var car_model = document.getElementById(car_model_id);
78
+ car_model.value="";
79
+ car_model.innerHTML="";
80
+
81
+ {% for company in companies %}
82
+
83
+ if(company.value == "{{company}}")
84
+ {
85
+ {% for model in car_models %}
86
+ {% if company in model %}
87
+ var newOption = document.createElement("option");
88
+ newOption.value="{{ model }}";
89
+ newOption.innerHTML="{{ model }}";
90
+ car_model.options.add(newOption);
91
+ {% endif %}
92
+ {% endfor %}
93
+ }
94
+
95
+ {% endfor %}
96
+ }
97
+
98
+ function form_handler(event)
99
+ {
100
+ event.preventDefault();
101
+ }
102
+
103
+ function send_data()
104
+ {
105
+ //suppress form default behabier
106
+ document.querySelector('form').addEventListener('submit',form_handler);
107
+ //send and recieve data to predict
108
+ var fd = new FormData(document.querySelector('form'));
109
+
110
+ var xhr= new XMLHttpRequest();
111
+ xhr.open('POST','/predict',true);
112
+ document.getElementById('prediction').innerHTML="Wait! Predicting Price ....";
113
+
114
+ xhr.onreadystatechange= function()
115
+ {
116
+ if(xhr.readyState == XMLHttpRequest.DONE)
117
+ {
118
+ document.getElementById('prediction').innerHTML="Prediction: Rs. "+xhr.responseText;
119
+ }
120
+ }
121
+
122
+ xhr.onload=function(){};
123
+ xhr.send(fd);
124
+
125
+
126
+ }
127
+ </script>
128
+
129
+ <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
130
+ <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>
131
+ <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>
132
+
133
+ <!-- Option 2: Separate Popper and Bootstrap JS -->
134
+ <!--
135
+ <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>
136
+ <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>
137
+ <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>
138
+ -->
139
+ </body>
140
+ </html>