# Build Flask App For Image Recognition Using Deep Learning Model 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](https://www.kaggle.com/datasets/rayeed045/american-sign-language-digit-dataset)" 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 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. ![A preview of the web app](https://cdn.hashnode.com/res/hashnode/image/upload/v1668182115023/qI-NIwmYg.png align="center") Click [here](https://user-images.githubusercontent.com/72191416/201943098-c8f5fd8b-ec7d-4e5d-883d-8b69109b946f.mp4) 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. - **Flask** - **TensorFlow (Keras)** - **NumPy** - **Pillow (PIL)** ### 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***. ```shell 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.** > %[https://geekpython.in/python-virtual-environments-venv] 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. ```python from flask import Flask app = Flask(__name__) @app.route('/') def hello_world(): return '

Hello, World!

' ``` 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. ```shell >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.** > %[https://geekpython.in/run-flask-app-from-the-command-line-in-windows] 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`. ![Sample of the web app](https://cdn.hashnode.com/res/hashnode/image/upload/v1668257616673/E_eMig67e.png align="center") 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. %[https://gist.github.com/Sachin-crypto/4c421a7bf76218cffc011765a5cd9aed] 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](https://keras.io/api/applications/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. %[https://gist.github.com/Sachin-crypto/4479f7611f371321e19a8cc1ab3b514f] 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*** %[https://gist.github.com/Sachin-crypto/4e482e1d57a08e9ccd7e8914fd8ad173] The **layout.html** file contains the HTML boilerplate in which we included the custom CSS and JS files. ***index.html*** %[https://gist.github.com/Sachin-crypto/ffcbcfe4b9deb6a452aa1abbd759f3fe] 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 ***static*** folder and then add the `custom.css` and `image_upload.js` files, respectively. ***custom.css*** %[https://gist.github.com/Sachin-crypto/2f12fc66cdfaf761efba239414340395] This **CSS** file gives additional styles to our web app's user interface. ***image_upload.js*** %[https://gist.github.com/Sachin-crypto/666204238d8ed615ec463ccc7c71f96a] 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](https://jsfiddle.net/bootstrapious/8w7a50n2). 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**. %[https://gist.github.com/Sachin-crypto/7c3625d155f672c3d8166037fe6b261b] 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*** %[https://gist.github.com/Sachin-crypto/50b2792e1b7d1f9995527e974d08e1c9] 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👇👇** > %[https://github.com/Sachin-crypto/Flask_Image_Recognition] ## Conclusion 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](https://github.com/Sachin-crypto/Flask_Image_Recognition) 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.*** %[https://geekpython.in/python-web-app-under-100-lines-of-code-using-streamlit] ***✅Deploy your Streamlit app on the Heroku server in simple steps.*** %[https://geekpython.in/deploy-streamlit-webapp-to-heroku] ***✅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.*** %[https://geekpython.in/contact-form-for-your-blog-get-emails-and-save-in-db-dynamically] ***✅How to use Async/Await in Python.*** %[https://geekpython.in/asyncio-how-to-use-asyncawait-in-python] ***✅How to execute the dynamically generated code in Python.*** %[https://geekpython.in/exec-function-in-python] --- **That's all for now** **Keep Coding✌✌**