mahedi420 commited on
Commit
1a6a81e
1 Parent(s): 0402d07

frontend update

Browse files
Files changed (2) hide show
  1. app.py +7 -3
  2. templates/home.html +90 -6
app.py CHANGED
@@ -22,9 +22,13 @@ def predict_api():
22
  output = model.predict(new_data)
23
  return jsonify(output[0])
24
 
25
- # @app.route('/predict')
26
- # def predict():
27
-
 
 
 
 
28
 
29
 
30
  if __name__ == '__main__':
 
22
  output = model.predict(new_data)
23
  return jsonify(output[0])
24
 
25
+ @app.route('/predict',methods=['POST'])
26
+ def predict():
27
+ data=[float(x) for x in request.form.values()]
28
+ final_input=scaling.transform(np.array(data).reshape(1,-1))
29
+ print(final_input)
30
+ output=model.predict(final_input)[0]
31
+ return render_template("home.html",prediction_text="The House price prediction is {}".format(output))
32
 
33
 
34
  if __name__ == '__main__':
templates/home.html CHANGED
@@ -1,11 +1,95 @@
1
  <!DOCTYPE html>
2
- <html lang="en">
 
3
  <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Document</title>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
7
  </head>
 
8
  <body>
9
- <h1>Hello bhai </h1>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
10
  </body>
11
- </html>
 
 
1
  <!DOCTYPE html>
2
+ <html>
3
+
4
  <head>
5
+ <meta charset="UTF-8">
6
+ <title>ML API</title>
7
+ <link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
8
+ <link href='https://fonts.googleapis.com/css?family=Arimo' rel='stylesheet' type='text/css'>
9
+ <link href='https://fonts.googleapis.com/css?family=Hind:300' rel='stylesheet' type='text/css'>
10
+ <link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
11
+
12
+ <style>
13
+ body {
14
+ display: flex;
15
+ align-items: center;
16
+ justify-content: center;
17
+ height: 100vh;
18
+ margin: 0;
19
+ font-family: 'Open Sans Condensed', sans-serif;
20
+ background-color: #2C3E50;
21
+ color: white;
22
+ }
23
+
24
+ .login {
25
+ background: #eceeee;
26
+ padding: 20px;
27
+ width: 300px;
28
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
29
+ border-radius: 10px;
30
+ text-align: center;
31
+ }
32
+
33
+ .login h1 {
34
+ color: #000;
35
+ font-size: 24px;
36
+ margin-bottom: 20px;
37
+ }
38
+
39
+ form {
40
+ display: flex;
41
+ flex-direction: column;
42
+ }
43
+
44
+ input {
45
+ margin-bottom: 10px;
46
+ padding: 10px;
47
+ border: 1px solid #ccc;
48
+ border-radius: 5px;
49
+ font-size: 14px;
50
+ }
51
+
52
+ button {
53
+ padding: 10px;
54
+ background-color: #3498db;
55
+ color: white;
56
+ border: none;
57
+ border-radius: 5px;
58
+ cursor: pointer;
59
+ }
60
+ </style>
61
+
62
  </head>
63
+
64
  <body>
65
+ <div class="login">
66
+ <h1>Boston House Price Prediction</h1>
67
+
68
+ <!-- Main Input For Receiving Query to our ML -->
69
+ <form action="/predict" method="POST">
70
+ <input type="text" name="CRIM" placeholder="CRIM" required="required" />
71
+ <input type="text" name="ZN" placeholder="ZN" required="required" />
72
+ <input type="text" name="INDUS" placeholder="INDUS" required="required" />
73
+ <input type="text" name="CHAS" placeholder="CHAS" required="required" />
74
+ <input type="text" name="NOX" placeholder="NOX" required="required" />
75
+ <input type="text" name="RM" placeholder="RM" required="required" />
76
+ <input type="text" name="Age" placeholder="Age" required="required" />
77
+ <input type="text" name="DIS" placeholder="DIS" required="required" />
78
+ <input type="text" name="RAD" placeholder="RAD" required="required" />
79
+ <input type="text" name="TAX" placeholder="TAX" required="required" />
80
+ <input type="text" name="PTRATIO" placeholder="PTRATIO" required="required" />
81
+ <input type="text" name="B" placeholder="B" required="required" />
82
+ <input type="text" name="LSTAT" placeholder="LSTAT" required="required" />
83
+
84
+ <button type="submit" class="btn btn-primary btn-block btn-large">Predict</button>
85
+ </form>
86
+
87
+ <br>
88
+ <br>
89
+
90
+ </div>
91
+ {{prediction_text}}
92
+
93
  </body>
94
+
95
+ </html>