Skip to content
Related Articles

Related Articles

Deploying a TensorFlow 2.1 CNN model on the web with Flask

View Discussion
Improve Article
Save Article
  • Difficulty Level : Easy
  • Last Updated : 11 May, 2020

When starting to learn Machine Learning, one of the biggest issues people face is deploying whatever they make to the web for easier demonstration/use. This article will help those beginners bridge the gap between creating a TensorFlow model and deploying it on the web with Flask and hopefully gain some insight on the issues TensorFlow and Flask have.

Creating a Model
First we will have to train our model using TensorFlow and Keras’s ImageDataGenerator. For this, We have downloaded 12500 images of Cat’s and 12500 images of dogs respectively. To train a model using ImageDataGenerator first install keras and tensorflow,

pip install keras
pip install tensorflow

We have trained a model using transfer learning from InceptionV3 model. For a tutorial on transfer learning visit this link. After the model has been trained, we will need to execute the following command which creates a model folder of the trained model. (Before TensorFlow 2.0, a model file was created instead of a model folder).'Name_of_model')

Creating Flask Application
Then, we will have to install Flask. Flask is a micro-framework in Python which is extensively used to deploy ML models on the web, we will have to install flask using the following command.

pip install flask

Coming to the webpage we want to build. Create a HTML page according to your preference, we have created a basic webpage with a button to upload an image and a button to predict what the image is. This code sends the image as a post request and stores it in the folder “uploaded/image/” where a prediction is made from here. Courtesy of Shubham S. Naik from Stack Overflow. The code is divided into 2 files, namely a .js file an a .html file. Copy the below code into a file named upload.html and save it in a folder named templates.

<!DOCTYPE html>
        rel="stylesheet" type="text/css" />
    <script class="jsbin" src=""></script>
    <script class="jsbin" src=""></script>
    <meta charset=utf-8 />
    <script src="{{ url_for('static', filename='upload.js') }}"></script>
        section {
            display: block;
    <form action="" method="POST" enctype="multipart/form-data">
        <input type='file' name='file' onchange="readURL(this);" />
        <img id="blah" src="#" alt="your image" />
        <button type="submit">Submit & predict</button>

Copy the below code into a file named upload.js and save it in a folder called static.

function readURL(input) {
if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function (e) {

After this is done, we will need ImageDataGenerator to make a prediction of an image once it has been trained. First we will load the model using

model = tf.keras.models.load_model('Name_of_model')

Then, we will need to import ImageDataGenerator. Now, coming to the flask the flask code. Copy the below code into a file and place it in the root directory. The complete Python code is as follows:-

from flask import Flask, render_template, request
from werkzeug import secure_filename
from keras.preprocessing.image import ImageDataGenerator
import tensorflow as tf
import numpy as np
import os 
    import shutil
    shutil.rmtree('uploaded / image')
    % cd uploaded % mkdir image % cd ..
model = tf.keras.models.load_model('model')
app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = 'uploaded / image'
def upload_f():
    return render_template('upload.html')
def finds():
    test_datagen = ImageDataGenerator(rescale = 1./255)
    vals = ['Cat', 'Dog'] # change this according to what you've trained your model to do
    test_dir = 'uploaded'
    test_generator = test_datagen.flow_from_directory(
            target_size =(224, 224),
            color_mode ="rgb",
            shuffle = False,
            class_mode ='categorical',
            batch_size = 1)
    pred = model.predict_generator(test_generator)
    return str(vals[np.argmax(pred)])
@app.route('/uploader', methods = ['GET', 'POST'])
def upload_file():
    if request.method == 'POST':
        f = request.files['file']['UPLOAD_FOLDER'], secure_filename(f.filename)))
        val = finds()
        return render_template('pred.html', ss = val)
if __name__ == '__main__':

Finally we need to render a html page for the final prediction. Copy the below code and place save it as pred.html in templates folder.

<!DOCTYPE html>
<h1>{{ ss }}</h1>

The final folder structure is described as follows :-
The black colored flags are folders and blue flags are files.

directory structure

Finally, all we need to do is run the file and go to to see the output





Note : Every time a prediction is made, please delete the images in uploaded/image before uploading a new one or you might get an Internal Server error.

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!