Implementing Custom Deep Learning Model Into Flask App For Image Recognition



Original Source Here

Implementing Custom Deep Learning Model Into Flask App For Image Recognition

Source: Author(GeekPython)

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.

Overview

The web app has a beautiful 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 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.

Source: Author(GeekPython)

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.

Dependencies

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__)

@app.route('/')
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 run command 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 http://127.0.0.1:5000.

Flask app preview

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.

  • load_model from keras.model will be used to load the model.
  • img_to_array from keras.utils will 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 model.

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.

preprocess_img and predict_result are the functions we created in our model.py file.

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 index.html.

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 layout.html and index.html.

layout.html

The layout.html file contains the HTML boilerplate in which we included the custom CSS and JS files.

index.html

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 css and js inside the folder and then add the custom.css and image_upload.js files, respectively.

custom.css

This CSS file gives additional styles to our web app’s user interface.

image_upload.js

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.

result.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👇

Conclusion

In this tutorial, we’ve learned to create the Flask app for image recognition 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

Head over to my GitHub for source code to get started with this project.

AI/ML

Trending AI/ML Article Identified & Digested via Granola by Ramsey Elbasheer; a Machine-Driven RSS Bot

%d bloggers like this: