How to surface a Machine Learning app on Google Cloud using Flask and Vue.js. Vol. 1 —back-end API.

So, after having spent hours on getting your predictive model trained, tested and validated, it’s time for you to share the output of it to the end users.

Sometimes it might be as easy as providing the csv with the predictions, in more complex cases you might need to have a scheduled script running in batches, but sometimes the situation will require you to get the script triggered from the user interface or from another application.

In those, more complex cases, you should consider using a web framework or building API that is going to run the model taking the user input and serve the output back to end user or to another application.

Choosing your stack

Depending on the level of abstraction of your app you are going to need to choose the right stack.

In the simplest usage, when building a dashboard you might need only one dashboarding framework. For the more complex needs, when there is a requirement for more advanced front end functionalities,you might need to use multiple different frameworks or technologies.

Depending on the programming language of your choice and the use case you might consider one or a combination of the below frameworks:

• Dashboarding: Plotly, Bokeh (Python), Shiny (R)
• Full Web Frameworks: Flask, Django (Python)
• Back End API: Falcon (Python), Plumber (R)
• Front End: Vanilla JS, JQuery, React, Vue, Angular (JavaScript)

Python and R are the most common languages for Data Science, while JavaScript is the main language of web development. However it is possible to do Machine Learning in JavaScript or build a simple web app using just Python/R dashboarding apps, the most viable solution is to use one of the DS languages for the back end and one of the JS frameworks for the front end.

In this tutorial I am going to use Flask for back end and Vue.js for front end.

Currently I work mostly with Python, so I didn’t take any R frameworks into consideration. Shiny, however, is extremely powerful and worth attention for low-to-medium complexity dashboards.

I chose Flask because it enables much more freedom than the dashboarding frameworks and is relatively lightweight compared to Django, having much bigger ecosystem and community support than the lighter Falcon.

For front end, I chose Vue, as it very well documented and even though it hasn’t been on the market for as long as Angular and React were, it has a large ecosystem and great community support.

Development

First, let’s make sure all the Python dependencies for the project are satisfied. We are going to need the following packages:

• flask — web framework
• numpy — handling numeric operations
• sklearn — machine learning

Now, we can start with building the minimal app in Flask. It looks like this:

The route part specifies what the app returns at particular URIs. In this example the app will return a string “I’m a minimal flask app” at the location “/” which means a default route. After you run the app by putting SET FLASK_APP=minimal.py && flask run in your Windows cmd, the below will appear in your console.

This means the app is available at your local machine at the port 5000 (default port for Flask). You can now go to http://127.0.0.1:5000/ or http://localhost:5000/ and view the app which should look like this:

Passing data onto the back end

Since your model is going to use input from the app’s users, you are going to need to pass it to it. The two ways of doing it through URI or through HTTP requests.

To illustrate those two ways, let’s create a simple app taking name as an input and returning ‘Hello, {name}!’ as an example. Consider the below code.

Save the below code to hello.py and run set FLASK_APP=main.py && flask run.

The first route at http://localhost:5000/uri/<name>, passes the variable name into the function and returns the output of it. So, the output will be generated based on what is after ‘/uri/’ in your address bar (e.g. http://localhost:5000/uri/matt will return ‘Hello, matt!’.

Another, a more powerful way, is to use a POST request. Here we pass a JSON file to http://localhost:5000/post and based on the contents of the JSON file, Flask will return accordingly generated string.

Note the argument specifying permitted methods is different between the two routes. The first route uses method GET while the second route uses method POST. More on request methods here

Since browsers, in their basic functionalities don’t offer a way to POST a JSON file, we are going to have to use Python Requests library.

Since both the size and complexity of data we can pass through JSON file is much greater than through URI variables, I am going to proceed with this solution in my design.

API for a simple linear regression model

Now, we are ready to take a machine learning script, in this case a simple linear regression, and plug it in to the Flask app.

linear_model function takes an array of values [[x0,y0],[x1,x1],…[xn,yn]] as an argument and returns linear model’s R², coefficient and interception.

In the route api/predict, similarly to the previous example, I am getting the function argument in the form of JSON and parse it to values variable. Then I run the linear_model and generate a response dictionary that is getting parsed to JSON and returned.

You can test the API using below code:

The JSON output looks following:

{
  "coef": 3.29, 
  "intercept": 2.29, 
  "score": 0.99
}

This is it for the the first part. In the next part, I will focus on building a front end and connecting front and back.

All the scripts are available at the below Git location.

matt-kowaleczko/flask-vue-gcp-app-tutorial

For more, visit my website visit my website www.clusteroneanalytics.com follow me on Twitter or on LinkedIn.