Deploy Machine Learning Projects Online Using Flask

Getting your machine learning (ML) project working is not enough, to shine among other developers you need to show the world your work. The best way to do this is to deploy your ML project online. Flask is a Python micro web framework that gives you the ability to make web applications.

In this article, we will go through:

• Installing Flask and getting it ready.
• Developing the front-end interface.
• Coding the back-end which is our python code that will get the data from the front-end and use a pre-trained ML model then send the results back to the front-end showing it to the user.
• Connecting the front-end to the back-end.
• Using our ML web application.

Prerequisites:

1. Python 3.5+
2. Requirements file (requirements.txt) of python libraries used in your ML project.

Optional:

• Anaconda
• You can clone/download the example project used in this tutorial from: [Digit Recognizer - Python Flask Web App]

Installing Flask:

It is preferable to create a new environment for this project:

⚠️ Note: You can use Windows command line if you have already added conda to PATH.

In your Anaconda prompt run the next line:

conda create -n env_name python

then activate the new environment :

conda activate env_name

Now, install Flask:

pip install Flask

Now, after we installed Flask, let’s install the requirements from the requirements.txt file:

1. Make sure that you are running the command line in the directory where therequirements.txt is in.
2. Run pip install -r requirements.txt

Project Background:

The machine learning project used in this tutorial is a digit recognizer, it takes an image drawn by the user and predicts the drawn digit.

We trained a convolutional neural network with (28*28) nodes as the input layer and 10 nodes for the output layer (each node presents the probability of each digit).

Once you have a trained model, you can save it as a .model file. This allows you to use the model anytime without rebuilding the model or retraining it.

The Front-End:

The directory tree of your project should be like the following:

Project_Folder
|   myModel.model     # The pre-trained model
|   requirements.txt  # The requirements file
|   run.py            # Run this file using <python run.py>
|   
\---digitReader
    |   routes.py     # The main back-end code
    |   __init__.py   # Initializing the app
    |   
    +---static
    |   +---CSS
    |   |       Here you put all the  .css files
    |   |       
    |   \---JS
    |           Here you put all the  .js files
    |           
    +---templates
            Here you put all the  .html files

For the main interface, we will create an HTML file inside the templatesfolder.

⚠️ Note that the name of your HTML file will be used later in the back-end code.

Here is the HTML code:

ModMaamari/digit-recognizer

Helpful resources to create a front-end interface:

• Python Flask Tutorial: Full-Featured Web App
• How to Make Websites with Python
• Bootstrap

Example front-end interface:

Front-End Interface

⚠️ Note: Make sure you put the used css files inside static/CSS folder, and the used js files inside static/JS folder.

The Back-End:

Here, we have 3 python files (shown in the previous directory tree):

First: __init__.py

Second: routes.py

Finally: run.py

Front-End Back-End Connection:

Flask is responsible for connecting the front-end to the back-end, flask functions that do this:

• render_template: this function renders an HTML page, it supports Jinja syntax.
• url_for: dynamically creating URLs of routes.

Running the Application:

To run the app, run anaconda command line(you can also use windows command line provided you have python pre-installed and added to PATH)

1. Ensure that you run the command line from the project directory
2. Type cmd in the title bar and press enter

1. Activate the environment that you have created for your project, note that after you activate the env using conda activate <env_name> all the following command lines will start with(env_name )
2. Run python run.py
3. Open a new internet browser window and go to http://127.0.0.1:5000/

Congrats, you have successfully created your first ML web app.

More content at plainenglish.io