Yes! you read the title right. So, today in this post I’ll show you how to setup a basic image-classifier in the form of a web application.
Basic requirements
Before we getting dive more into it, I am listing down the basic ingredients which are required to make a web application in python.
Flask
Flask Bootstrap
Please note that, I am not showing about how to create an AI classifier model, so make sure you have your classifier already before seeking into this post, if not then you can download a pre-trained model.
Let’s get started !
Installation
You need to have installed the above mentioned libraries. You can easily install them by using pip.
1 | pip install flask |
Getting started
So, firstly we arrange our files and folders in the below shown order.
You can change the main folder name image-classifier (In my case) to any other name as you like.
So, firstly we will write a basic flask app structure in __init__.py
. This file can be found inside the classifier. Inside the __init__.py
file write the below code
1 | from flask import Flask |
Now, writing our run.py file. You can find this run.py file inside the main folder. Open the file and write the below code
1 | from classifier import app as application |
Now, we will create write a config.py file. This file contains the configuration for the application. The basic configuration we can put now is that, we can just put our application in DEBUG mode. So, open the config.py file and write the below line.
1 | import os |
Make a uploaded_images folder inside the config folder, this folder contains the image which will be uploaded on the server via user.
Writing a basic route for our flask app
We have completely setup our basic flask environment. Now, its time to write a very basic flask api for hello world. Open the routes.py inside the classifier folder. Add the below lines to it
1 | from classifier import app |
Here, the route() function of the Flask class is a decorator, which tells the application which URL should call the associated function.
1 | app.route(rule, options) |
The rule parameter represents URL binding with the function.
The options is a list of parameters to be forwarded to the underlying Rule object.
and in the end we just returned a simple message using some HTML tags.
To run this code, follows below steps.
1 | cd path/to/main-folder |
Just open the browser and type localhost:8000/testing. You should see a screen just like below
Lets start our main route
Lets make our template. For this, firstly makes a folder called template inside the classifier folder. Now inside the template, create a home.html file and paste the code from this link in it.
Now, we make our home url and our backend part !!. So we will rewrite our routes.py file
1 | @app.route('/home') |
Now, our image processing function will be like below
1 | from flask import render_template |
Here, firstly we get the image from the form in the home.html, then save the image into the system and then fetch that file and send it to another function image_prediction for processing. Then, we simply render the response from the model to the webpage. If there is no error, then we display the prediction.html template or else, we render the error.html. Now, working on our image_prediction function.
For making the this, firstly create a folder named backend inside the classifier folder, then inside the backend folder, create a prediction.py file and write the below code into it.
1 | import keras |
Now, let’s make our error.html and prediction.html templates. These templates are also, saved inside the templates folder. So, you can get the code for both the templates from here.
Well the coding part is mostly done, now we will test our web application. Now open your console and run the below command
1 | python run.py |
After this, it will firstly download the VGG19 pretrained weights (if you are following my code.), then it will start the server. Now, open the browser and go to localhost:8000/home, you will see something like this
Now, click on browse to upload any image and click the predict button. You’ll see some message like this (based on your image)
If there is any some issue with your image, then below screen will appear
Conclusion
So, this is how we can make a very basic web application for our image classifier. You can also find the whole code from my github.