Build Flask App For Image Recognition Using Deep Learning Model
7 min read
The web app we will make is about predicting the image of a hand sign digit. The model is trained on the dataset named "American Hand Digit Sign Language" found on Kaggle.
This tutorial will focus on making a web app using the Flask web framework, so all the necessary backend processes, including data preparation, data preprocessing, and training a model, are already done.
We will implement our model in action by embedding it on the client side..
The web app has a good-looking user interface in which we have an image upload area and an image preview section where we can see the preview of the uploaded image. All were made using Bootstrap, CSS, and JS. The web app has a Submit button responsible for handling the prediction and rendering the prediction page, where we will see the result obtained by predicting the image using our custom model.
Click here to see a glimpse of the app.
We used Bootstrap to build our client interface and to preview the image the user will upload, we used custom CSS and JS, and we used Keras, NumPy, and Pillow to recognize and predict the image in the backend.
We need the following dependencies to get started on this project.
Installing the dependencies
We need to install the dependencies we've seen above. Open your terminal and run the following command to install the libraries using the pip.
pip install Flask tensorflow numpy Pillow
The command will begin installing the libraries in your base Python environment. If the libraries have already been installed in your environment, then the command will upgrade the libraries to the updated version or prompt the message stating requirements are already satisfied.
However, it is recommended that you use virtual environments that keep the libraries in an isolated Python environment, avoiding conflict between the different versions of the same dependencies so that your other projects might not get affected due to the change in dependency version.
To create a Python virtual environment, see the detailed guide below.
After successfully setting up the virtual environment in the project directory and installing the required dependencies, move on to the coding part.
Creating a flask server
We'll create a basic Flask server to start our web app on the localhost with default port number 5000.
In the root folder of the project directory, create a file named
app.py and add the following code to start a flask server.
from flask import Flask app = Flask(__name__) def hello_world(): return '<h1>Hello, World!</h1>'
To run the app, open your terminal and change the directory to the project directory, or open the terminal integrated with the IDE (PyCharm) or code editor (VS Code) and execute the following command.
>flask --app app.py run
Learn how to run the flask apps from the terminal. The following guide will help let you know the usage of the
flask runcommand with different flags.
This will start our development server on the localhost with port number 5000, and we can access the web app on the web address
Our flask app is ready, and we'll start structuring our app into a good web app. But first, we'll have to code our backend.
Coding the backend
Before coding our user interface, we'll need to create the functions which will handle the preprocessing of the uploaded image and the prediction on that uploaded image.
Create a Python file named
model.py where all our functions to handle the image preprocessing and prediction will go.
First, we imported the libraries we will use further in the code.
keras.modelwill be used to load the model.
keras.utilswill be used for converting the image into an array.
numpy is used for converting images into an array, but we'll use it in the prediction function.
Image from PIL (Python Imaging Library) will be used for loading the image.
In the next section, we loaded our model using the
load_model function, specified the path of our trained model inside it, and stored it in the variable named
Then, we defined the function to preprocess the image, which takes the path of an image, and then we loaded that image using the
Image.open function. Then we resized the loaded image into 224 x 224 dimensions because we trained our model using the transfer learning technique. The MobileNet model we used for transfer learning is pre-trained with the images having 224 x 224 dimensions. Then we created the array of that resized image and, by dividing it by 255.0, we converted the image pixel range from 0 to 1, then reshaped it to the required shape and returned it.
In the end, we created a function to predict the result of the preprocessed image using our model.
Coding the frontend
The backend part is completed. Now we'll code the frontend part of our web app. In the
app.py file, add the following code.
Initially, we imported the required libraries and functions to help us advance in this code.
Flask will be used to create or serve our application.
render_template will be used for rendering our HTML files.
request for accessing the image uploaded by the user in the frontend of our application.
predict_result are the functions we created in our
After that, we created the home route where we defined the decorator
@app.route("/") with path (
/) and the function
main to render the HTML template
The index.html file includes the web app's user interface, which has a form for uploading the image, an image preview section, and a submit button.
Add the HTML files in the flask application. Create a folder named
templates in the root folder of the directory and then create the files named
The layout.html file contains the HTML boilerplate in which we included the custom CSS and JS files.
In the image upload section, we added the URL that will handle the image uploading, preprocessing, and prediction. Additionally, we added the
method='post' to handle the POST request. We will define the logic for
predict_image_file ahead of this tutorial.
Now, add the custom CSS and JS files that will add the style and function to preview the uploaded image by the user.
Create a folder name
static in the root folder of the project directory and then create the subfolders
js inside the static folder and then add the
image_upload.js files, respectively.
This CSS file gives additional styles to our web app's user interface.
This JS file displays the preview of the image uploaded on our web app.
The reference for making the UI of our web app is taken from here.
After adding all the HTML, CSS, and JS files, here comes the interesting part.
Then we defined another route that contains the code for a POST request, preprocessing of the image, and then the prediction.
In this section of the
app.py file, we created the prediction route using the decorator
@app.route('/prediction', methods=['POST']) in which we specified the path
/prediction and set the method to
POST to handle the post request.
Then defined, the function
predict_image_file in which the code takes the image stream of the image uploaded by the user and performs the preprocessing using the function
preprocess_img, which is coming from the
model.py file and then predicts the result using the
predict_result function and then ultimately rendered the
result.html page where we can see the result.
To avoid any error, we wrapped the code in the
try-except block, in which if the user uploads a file that cannot be processed, then the code will show the error in the frontend.
To add the result page, create a file named
result.html in the templates folder and add the following HTML.
This page is responsible for displaying the prediction if the image uploaded by the user is processed successfully. Otherwise, the error message will be displayed.
Get the source code of this app👇👇
In this tutorial, we've learned to create the Flask app for image recognition which is based on the deep-learning model.
Some key points that we learned while making the app:
- implementing the deep learning model into the app
- creating the flask app
- using the custom model to predict the images
- image preprocessing
To get started with this project, head over to my GitHub for source code.
🏆Other articles you might like if you like this article
✅Build a Streamlit app to visualize and analyze the Covid-19 data.
✅Deploy your Streamlit app on the Heroku server in simple steps.
✅Create a fully functional contact form for your blog where you'll get an email whenever users send a message and will be saved in DB dynamically.
✅How to use Async/Await in Python.
✅How to execute the dynamically generated code in Python.
That's all for now
Did you find this article valuable?
Support Sachin Pal by becoming a sponsor. Any amount is appreciated!