add web app

4 years ago · af5a93e471
parent e5223ac3af
commit af5a93e471
4 changed files with 95 additions and 0 deletions
--- a/API/1-API/solution/web-app/app.py
+++ b/API/1-API/solution/web-app/app.py
@ -0,0 +1,32 @@
+import numpy as np
+from flask import Flask, request, render_template
+import pickle
+
+app = Flask(__name__)
+
+model = pickle.load(open("../ufo-model.pkl", "rb"))
+
+
+@app.route("/")
+def home():
+    return render_template("index.html")
+
+
+@app.route("/predict", methods=["POST"])
+def predict():
+
+    int_features = [int(x) for x in request.form.values()]
+    final_features = [np.array(int_features)]
+    prediction = model.predict(final_features)
+
+    output = prediction[0]
+
+    countries = ["Australia", "Canada", "Germany", "UK", "US"]
+
+    return render_template(
+        "index.html", prediction_text="Likely country: {}".format(countries[output])
+    )
+
+
+if __name__ == "__main__":
+    app.run(debug=True)
--- a/API/1-API/solution/web-app/model-test.py
+++ b/API/1-API/solution/web-app/model-test.py
@ -0,0 +1,4 @@
+import pickle
+
+model = pickle.load(open("../ufo-model.pkl", "rb"))
+print(model.predict([[0, 50, -40]]))
--- a/API/1-API/solution/web-app/static/css/styles.css
+++ b/API/1-API/solution/web-app/static/css/styles.css
@ -0,0 +1,29 @@
+body {
+	width: 100%;
+	height: 100%;
+	font-family: 'Helvetica';
+	background: black;
+	color: #fff;
+	text-align: center;
+	letter-spacing: 1.4px;
+	font-size: 30px;
+}
+
+input {
+	min-width: 150px;
+}
+
+.grid {
+	width: 300px;
+	border: 1px solid #2d2d2d;
+	display: grid;
+	justify-content: center;
+	margin: 20px auto;
+}
+
+.box {
+	color: #fff;
+	background: #2d2d2d;
+	padding: 12px;
+	display: inline-block;
+}
--- a/API/1-API/solution/web-app/templates/index.html
+++ b/API/1-API/solution/web-app/templates/index.html
@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>🛸 UFO Appearance Prediction! 👽</title>
+  <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}"> 
+</head>
+
+<body>
+ <div class="grid">
+
+  <div class="box">
+
+  <p>According to the number of seconds, latitude and longitude, which country is likely to have reported seeing a UFO?</p>
+
+    <form action="{{ url_for('predict')}}"method="post">
+    	<input type="number" name="seconds" placeholder="Seconds" required="required" min="0" max="60" />
+      <input type="text" name="latitude" placeholder="Latitude" required="required" />
+		  <input type="text" name="longitude" placeholder="Longitude" required="required" />
+      <button type="submit" class="btn">Predict country where the UFO is seen</button>
+    </form>
+
+  
+   <p>{{ prediction_text }}</p>
+
+ </div>
+</div>
+
+</body>
+</html>