Build a Web App to detect Pneumonia from Chest X-Ray Images Part 2: Building the Web App

Hello Everyone

I hope you enjoyed the 1st part of this blog series where we are building a web app to detect pneumonia from chest X-ray images. In the 1st part, we talked about the data and how to use transfer learning to make a deep learning model quickly.

In this blog post, we will use Flask( a lightweight web framework for python) to make the web app and use the trained models on uploaded chest x-ray images. If you have not read the previous blog, I strongly suggest you read it.

So let’s start making the web app.

(source: Giphy)

Approach for development

Before writing the code, it will be good if we sketch out a roadmap of how the user will interact with the web app and how the backend will work. So below is a diagram.

Roadmap of the web app

As you can see from the image above. The user will upload an Image via a webpage and after submitting the image, the image will go to the Flask server where our trained model will be used to make predictions. After the predictions are made the response will be sent back to the webpage via the server.

I hope you understood the basic concept and roadmap of how we will be making this web app. So let’s do it.

Initializing the Flask app and Making a Basic Template

I hope that you already know about how to make a Flask App if not I strongly advise you to go through this blog.

So this is how we initialize our flask app as shown on line 13 we just write the following to create our app.

app = Flask(__name__,template_folder = 'templates')

We also tell our flask app to look for the templates folder for rendering it on the web page.

At line 17 we define a route for the home page and we render our home page.

Before we talk about the HTML files we should look at the directory structure.

D:.
│   .gitignore
│   app.py
│   check.py
│   model.h5
│   train.py
│
├───.vscode
│       settings.json
│
├───static
│       unnamed.png
│
└───templates
        base.html
        home.html

Below are the two HTML files base.html and home.html. If you are having trouble understanding whats going on please have a look at this.

base.html

home.html

As you can see I’m a bootstrap guy😂😂.

If you have written the code and stored it as in the form of the above-mentioned directory structure. Run the following

python app.py

You will get a link to http://127.0.0.1:5000/ i.e. your localhost. Copy this and paste it on your browser. You will get something like this.

You can clone the Github Repository to see the same results.

Home page of web app

Adding File Upload Logic

Now let’s add the code for uploading the image to our home route.

This is the code for uploading the file to a flask server. Note:

1. Firstly we check the POST request. (Line 26)
2. Then we check if a file is uploaded or not. (Lines 30–34)
3. Then we check if the file has an empty name as sometimes a file with an empty name is sent to the server if the request times out. (Lines 38–42)
4. Lastly, we check if the file is in png, jpg/jpeg format or not, (Lines 45–49)
5. If all other conditions are satisfied then we save the file by removing previously uploaded files. (Lines 53–60)

Let’s move to the final section

A small breather 😂😂😂😂

Adding the Prediction Functionality

Now we will add a function for making the prediction on the uploaded images.

This is the final listing with full code.

In the listing above we had added the makePredictions function (Lines 17–39).

1. We load the uploaded file from the path given resize it to (224,224) and convert it to RGB if the image is in grayscale (since our model requires RGB images). (Lines 21–30)
2. Then we convert the image to NumPy array and reshape it to (1,224,224,3). (Lines 31,32)
3. Then we make predictions from the model, convert them to our labels (healthy/pneumonic),. and return it. (Lines 33–39)
4. At the home method, we take this label and send this to our template. (Lines 89–92).

After completing all the code you will get the final results.

Below are Some Results

Demo 1 (Pneumonia)

Demo 2 (Healthy)

Congratulations on completing the Project 👏👏

I hope you got the basic idea of how to productionize your trained deep learning models. Hope this will help you in your future projects.

Here is the Github Repo for the project

Thanks for being here with me till the end. Help me to improve by commenting below about the blog, your comments mean a lot to bring the best content to you.

You can follow me on Twitter, LinkedIn, Facebook

If you find yourself with any doubts or want to share your valuable suggestion do comment below

Stay tuned for For More Blog Posts.

Until then Keep Practising.

Thank You!!