Coding / Programming Videos

Post your favorite coding videos and share them with others!

Deep Learning model deployment using Flask – Sumit Kothari – Medium

Source link

Heroku live web-app

Table of Contents

  • Pre-request
  • Usage / Installation
  • Code structure
  • Deep Learning Model
  • Flask Webapp & Integrating DL model


You should have basic understanding of:

  • Python, pip, virtual environment, Flask
  • Machine Learning / Deep Learning
  • HTML, CSS, JavaScript

Usage / Installation


Clone/download code for this demo from mnist-demo github repo

git clone

Navigate to root of the project and install required dependencies

cd mnist-demo
pip install -r requirements.txt

Run Flask app locally


Code Structure

code structure of flask webapp

DL Model

Training deeplearning model contains the code to train a deeplearning model.

Last line in the code helps us in saving our keras/tensorflow model., y_train, epochs=5)
model.evaluate(x_test, y_test)
# Save entire model to a HDF5 file'mnist_ann_model.h5')

Testing deeplearning model

The model saved during training, is used for testing purpose.

Also we have created our testing script (i.e as a module, therefore we can load it easily in other python scripts which we can use during prediction.

Following is the logic used in

# load model
model = tf.keras.models.load_model('tensorflow_model/mnist_ann_model.h5')
graph = tf.get_default_graph()
  • Method predict_image takes image as input and returns image label with confidence/probability
  • In predict_image, first we convert image to gray-scale, save in numpy array and re-shape it to 1x28x28
  • Finally in predict_image, we pass this test image array to model.predictmethod, which help us in predicting the most probable label with its probability
def predict_image(test_image):
# load test image, resize and normalize it
img =
img.thumbnail(image_size, Image.ANTIALIAS)
img = img.convert('L')
image_data = np.asarray(img, dtype=np.float32)
image_data = image_data / 255
image_data_test = image_data.reshape((1, image_size[0], image_size[1]))
        global graph
with graph.as_default():
                # predit the output 
classes = model.predict(image_data_test)
image_pred = str(np.argmax(classes))
confidence = round(classes[0][np.argmax(classes)], 2) * 100
print(image_pred, confidence)

return image_pred, confidence

Flask Webapp & Integrating DL model

The main python file for our webapp is, which contains following major logic.

We have method upload_file() which handles the index/root route path, for both GET and POST request type.

@app.route('/', methods=['GET', 'POST'])
def upload_file():

If the request type is GET we display index.html template file.

return render_template('index.html')

When request type is POST, user is trying to upload the image file.

We validate the name, type of the uploaded image and redirect to error page if any validation error.

if request.method == 'POST':
# check if the post request has the file part
if 'file' not in request.files:
return redirect('/error')
file = request.files['file']
        # if user does not select file, browser also
# submit a empty part without filename
if file.filename == '':
return redirect('/error')

We have also loaded our predict_image (as model_predict) method from, which helps us in predicting label for the given image.

from tensorflow_model.predict import predict_image as model_predict

So, if image valid we call our model_predict which takes input parameter as image file and return label & label’s confidence probability.

And finally we redirect to new route method (file_predict()) where we display the predictions.

if file and allowed_file(file.filename):
filename = secure_filename(file.filename)
  ['UPLOAD_FOLDER'], filename))
            image_pred, confidence = model_predict(file)
messages = {
'file': 'uploads/' + filename,
'image_pred': str(image_pred),
'confidence': str(confidence)

messages = json.dumps(messages)
return redirect(url_for('file_predict', messages=messages))

We also have a method called file_predict() which helps us in displaying the prediction result using predict.html template file.

def file_predict():
messages = request.args['messages']
messages = json.loads(messages)
    return render_template('predict.html', predicted_value=messages['image_pred'], 

predict.html has the template which displays predicted label value, predicted label confidence and original image.

<h3>Predicted Value: </h3><h1>{{predicted_value}}</h1>
<h3>Prediction Confidence: </h3><h1>{{predicted_confidence}}</h1>
<h3>Orignal Image</h3>
<img src="{{image}}" height="auto" />

Similarly, index.html has the template which allows us to upload the image, on which to predict.

<form method=post enctype=multipart/form-data>
<input type=file name=file>
<input type=submit value=Upload>

Source link


Leave a Reply

Please Login to comment
Notify of
Translate »