add docker file app/ and req file

Dockerfile

@@ -0,0 +1,27 @@
+# 2 stages build
+FROM python:3.12-slim AS python-base
+WORKDIR /app
+# We need to add the path of our virtual env to our $PATH environment variable :
+ENV PATH=".venv/bin:$PATH"
+
+# Our builder image to install the libraries
+FROM python-base AS python-builder
+RUN apt-get update && \
+    apt-get upgrade -y && \
+    apt-get install -y gcc \
+    && apt-get clean
+
+COPY ./requirements.txt ./
+RUN python -m venv .venv
+# Install requirements
+RUN pip install -r requirements.txt
+
+
+# Our final image
+FROM python-base
+COPY --from=python-builder /app/.venv ./.venv
+COPY ./app /app
+
+EXPOSE 5000
+
+ENTRYPOINT gunicorn --bind 0.0.0.0:5000 main:app

app/main.py

@@ -0,0 +1,80 @@
+import os
+import pickle
+import requests
+from dotenv import load_dotenv
+from flask import Flask, render_template, request
+from pydantic import BaseModel, Field, PositiveFloat
+
+app = Flask(__name__)
+MODEL = pickle.load(open("model.sav", "rb"))
+
+PRICE_BASE = 10**5
+
+load_dotenv(override=False)
+
+API_HOST = os.environ.get("API_HOST", "localhost")
+
+
+class FormQuery(BaseModel):
+    med_inc: PositiveFloat = Field(..., validation_alias="MedInc")
+    house_age: PositiveFloat = Field(..., validation_alias="HouseAge")
+    ave_rooms: PositiveFloat = Field(..., validation_alias="AveRooms")
+    ave_bedrms: PositiveFloat = Field(..., validation_alias="AveBedrms")
+    population: PositiveFloat = Field(..., validation_alias="Population")
+    ave_occup: PositiveFloat = Field(..., validation_alias="AveOccup")
+    latitude: float = Field(..., validation_alias="Latitude")
+    longitude: float = Field(..., validation_alias="Longitude")
+
+
+@app.route("/", methods=["GET"])
+def california_index():
+    return render_template("index.html")
+
+
+@app.route("/predict/", methods=["POST"])
+def local_model_result():
+    form_query = FormQuery(**request.form.to_dict(flat=True))
+
+    reg = MODEL.predict(
+        [
+            [
+                form_query.med_inc,
+                form_query.house_age,
+                form_query.ave_rooms,
+                form_query.ave_bedrms,
+                form_query.population,
+                form_query.ave_occup,
+                form_query.latitude,
+                form_query.longitude,
+            ]
+        ]
+    )[0]
+    return render_template("prediction.html", price=reg * PRICE_BASE)
+
+
+@app.route("/predict_from_api/", methods=["POST"])
+def api_result():
+    model_list = requests.get(f"http://{API_HOST}:8000/model/list/").json()
+    if len(model_list) == 0:
+        raise Exception("No model could be retrieved from the model registry")
+
+    best_model = sorted(model_list, key=lambda d: d["rse"])[0]
+    app.logger.debug(f"Best model retrieved : {best_model}")
+
+    api_response = requests.post(
+        f"http://{API_HOST}:8000/model/predict/",
+        json={
+            **{"train_id": best_model["train_id"]},
+            **FormQuery(**request.form.to_dict(flat=True)).model_dump(),
+        },
+    )
+
+    response = api_response.json()
+    app.logger.debug(response)
+
+    return render_template("prediction.html", price=response["reg"] * PRICE_BASE)
+
+
+if __name__ == "__main__":
+    app.debug = True
+    app.run(host="0.0.0.0", port=5000, debug=True)

app/static/css/jumbotron-narrow.css

@@ -0,0 +1,88 @@
+/* Space out content a bit */
+body {
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+
+a, a:hover, a:visited, a:link, a:active{
+	text-decoration: none;
+}
+
+/* Everything but the jumbotron gets side spacing for mobile first views */
+.header,
+.marketing,
+.footer {
+  padding-right: 15px;
+  padding-left: 15px;
+}
+
+/* Custom page header */
+.header {
+  padding-bottom: 20px;
+  border-bottom: 1px solid #e5e5e5;
+}
+/* Make the masthead heading the same height as the navigation */
+.header h3 {
+  margin-top: 0;
+  margin-bottom: 0;
+  line-height: 40px;
+}
+
+/* Custom page footer */
+.footer {
+  padding-top: 19px;
+  color: #777;
+  border-top: 1px solid #e5e5e5;
+}
+
+/* Customize container */
+@media (min-width: 768px) {
+  .container {
+    max-width: 730px;
+  }
+}
+.container-narrow > hr {
+  margin: 30px 0;
+}
+
+/* Main marketing message and sign up button */
+.jumbotron {
+  text-align: center;
+  border-bottom: 1px solid #e5e5e5;
+}
+.jumbotron .btn {
+  padding: 14px 24px;
+  font-size: 21px;
+}
+
+/* Supporting marketing content */
+.marketing {
+  margin: 40px 0;
+}
+.marketing p + h4 {
+  margin-top: 28px;
+}
+
+/* Responsive: Portrait tablets and up */
+@media screen and (min-width: 768px) {
+  /* Remove the padding we set earlier */
+  .header,
+  .marketing,
+  .footer {
+    padding-right: 0;
+    padding-left: 0;
+  }
+  /* Space out the masthead */
+  .header {
+    margin-bottom: 30px;
+  }
+  /* Remove the bottom border on the jumbotron for visual effect */
+  .jumbotron {
+    border-bottom: 0;
+  }
+}
+
+#selector {
+  width: 600px;
+  height: 200px;
+}

app/templates/index.html

@@ -0,0 +1,91 @@
+<!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">
+    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
+    <meta name="description" content="">
+    <meta name="author" content="">
+    <link rel="icon" href="../../favicon.ico">
+
+    <title>VIVADATA |California ML</title>
+
+    <!-- Bootstrap core CSS -->
+    <link href="../static/css/bootstrap.min.css" rel="stylesheet">
+
+    <!-- Custom styles for this template -->
+    <link href="../static/css/jumbotron-narrow.css" rel="stylesheet">
+
+  </head>
+
+  <body>
+
+    <div class="container">
+      <div class="header clearfix">
+        <h3 class="text-muted">VIVADATA - Flask Demo</h3>
+      </div>
+
+      <div class="jumbotron">
+        <h1>Predicting of California Housing 🏘️</h1>
+        <p class="lead">Fill the needed data to predict the median value!</p>
+        <!-- <p><a class="btn btn-lg btn-success" href="home" role="button">Get started</a></p> -->
+      </div class="form-row">
+        <form action="" id="prediction-form" method="post">
+        	<div class="form-row">
+			    <div class="form-group col-md-6">
+			      <label for="MedInc">Median income in block</label>
+			      <input type="number" step="0.01" class="form-control" id="MedInc" name="MedInc" placeholder="Enter Value">
+			    </div>
+			    <div class="form-group col-md-6">
+			      <label for="HouseAge">Median house age in block</label>
+			      <input type="number" step="0.01" class="form-control" id="HouseAge" name="HouseAge" placeholder="Enter Value">
+			    </div>
+			</div>
+			<div class="form-row">
+			    <div class="form-group col-md-6">
+			      <label for="AveRooms">Average number of rooms</label>
+			      <input type="number" step="0.01" class="form-control" id="AveRooms" name="AveRooms" placeholder="Enter Value">
+			    </div>
+			    <div class="form-group col-md-6">
+			      <label for="AveBedrms">Average number of bedrooms</label>
+			      <input type="number" step="0.01" class="form-control" id="AveBedrms" name="AveBedrms" placeholder="Enter Value">
+			    </div>
+			</div>
+			<div class="form-row">
+			    <div class="form-group col-md-6">
+			      <label for="Population">Block population</label>
+			      <input type="number" step="0.01" class="form-control" id="Population" name="Population" placeholder="Enter Value">
+			    </div>
+			    <div class="form-group col-md-6">
+			      <label for="AveOccup">Average house occupancy</label>
+			      <input type="number" step="0.01" class="form-control" id="AveOccup" name="AveOccup" placeholder="Enter Value">
+			    </div>
+			</div>
+			<div class="form-row">
+			    <div class="form-group col-md-6">
+			      <label for="Latitude">House block latitude</label>
+			      <input type="number" step="0.01" class="form-control" id="Latitude" name="Latitude" placeholder="Enter Value">
+			    </div>
+			    <div class="form-group col-md-6">
+			      <label for="Longitude">House block longitude</label>
+			      <input type="number" step="0.01" class="form-control" id="Longitude" name="Longitude" placeholder="Enter Value">
+			    </div>
+			</div>
+			<button type="submit" class="btn btn-primary" onclick="setAction('/predict/')">Predict via local model</button>
+			<button type="submit" class="btn btn-primary" onclick="setAction('/predict_from_api/')">Predict via API</button>
+		</form>
+		<br>
+      <footer class="footer">
+        <p>&copy; Vivadata 2019</p>
+      </footer>
+
+    </div> <!-- /container -->
+  </body>
+</html>
+
+<script>
+    function setAction(action) {
+        document.getElementById('prediction-form').action = action;
+    }
+</script>

app/templates/prediction.html

@@ -0,0 +1,46 @@
+<!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">
+    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
+    <meta name="description" content="">
+    <meta name="author" content="">
+    <link rel="icon" href="../../favicon.ico">
+
+    <title>VIVADATA | Prediction</title>
+
+    <!-- Bootstrap core CSS -->
+    <link href="../static/css/bootstrap.min.css" rel="stylesheet">
+
+    <!-- Custom styles for this template -->
+    <link href="../static/css/jumbotron-narrow.css" rel="stylesheet">
+
+  </head>
+
+  <body>
+
+    <div class="container">
+      <div class="header clearfix">
+        <h3 class="text-muted">VIVADATA - Flask Demo</h3>
+      </div>
+
+      <div class="jumbotron">
+        <h1>Median house value: {{price}} 💵</h1>
+      </div>
+
+	  <br>
+	  <div class="text-center">
+	  	<a href="/" class="btn btn-primary">Back</a>
+	  </div>
+	  
+	  <br>
+      <footer class="footer">
+        <p>&copy; Vivadata 2019</p>
+      </footer>
+
+    </div> <!-- /container -->
+  </body>
+</html>
+

requirements.txt

@@ -30,4 +30,4 @@ threadpoolctl==3.2.0
 typing_extensions==4.8.0
 urllib3==2.0.7
 uvicorn==0.23.2
-Werkzeug==3.0.1
+Werkzeug==3.0.1