In this guide, you will learn to deploy an image classifier on the web using Streamlit and Heroku. An image classifier is a computer vision algorithm that is able to assign an image to a particular predefined class based on the content of the image file. It is used to enable applications to perform classification and sorting tasks on image data.
For this guide, you will download a simple binary classifier from Google Teachable Machine. This guide assumes you have intermediate knowledge of Python. The other prerequisites for this guide are:
Basic knowledge of Streamlit
Basic knowledge of image classification in machine learning
Here's a real-world scenario:
Imagine you are a machine learning engineer at a remote-first AI/ML startup. You are part of the research and development team that specializes in AI and ML. Being remote first, you need to share your image classification app idea with not only your team members, but also other teams and company staff that may not be savvy about ML but want to test the practicality of your solution. You will also need to roll out your image classification solution to the general public. This means that it should be simple, intuitive, and easily accessible, and that you should know how to deploy ML solutions.
To get your environment ready, install the relevant packages by running the command
pip install keras streamlit pillow numpy
With the four packages, you are ready to start a simple image classifier.
Teachable Machine allows you to train classifier models on the web. You can create an image, audio, or pose project. In this case, choose an image classification project. For this guide, you will use the brain tumor detection dataset on Kaggle. Follow the link to download the dataset.
Once on the image classification page, label Class 1 as Brain Tumor and Class 2 as No Brain Tumor. Upload the images to the appropriate class. After uploading the data, click the Train Model button and wait for results.
Once done, you will be able to download the weights file with a
.h5 extension. This is what you will use for your classification task.
In your development folder, create a file named
This is the file that holds the Streamlit code responsible for displaying content on the webpage.
To set up the page by giving it a header, title, and description, write the following code.
1import streamlit as st 2st.title("Image Classification with Google's Teachable Machine") 3st.header("Brain Tumor MRI Classification Example") 4st.text("Upload a brain MRI Image for image classification as tumor or no-tumor")
Next, handle the file upload, processing by the classifier from Teachable Machine, and finally, displaying results. To ensure neat code and follow best practice, create a separate file to handle the actual classification.
In the same folder that holds
app.py, create a file called
img_classification.py. This will hold the classification function that you will call in the
app.py file for image classification.
To perform classification, load the
weights file that you downloaded in
.h5 format into a keras model.
1import keras 2from PIL import Image, ImageOps 3import numpy as np 4 5 6def teachable_machine_classification(img, weights_file): 7 # Load the model 8 model = keras.models.load_model(weights_file) 9 10 # Create the array of the right shape to feed into the keras model 11 data = np.ndarray(shape=(1, 224, 224, 3), dtype=np.float32) 12 image = img 13 #image sizing 14 size = (224, 224) 15 image = ImageOps.fit(image, size, Image.ANTIALIAS) 16 17 #turn the image into a numpy array 18 image_array = np.asarray(image) 19 # Normalize the image 20 normalized_image_array = (image_array.astype(np.float32) / 127.0) - 1 21 22 # Load the image into the array 23 data = normalized_image_array 24 25 # run the inference 26 prediction = model.predict(data) 27 return np.argmax(prediction) # return position of the highest probability
This part of the code performs image upload handling, running inference from the function in the
img_classification.py file and displaying the results.
Just below the imports in
app.py, add this line to allow you to use your classification function.
1from img_classification import teachable_machine_classification
The below code will be added to your
1uploaded_file = st.file_uploader("Choose a brain MRI ...", type="jpg") 2 if uploaded_file is not None: 3 image = Image.open(uploaded_file) 4 st.image(image, caption='Uploaded MRI.', use_column_width=True) 5 st.write("") 6 st.write("Classifying...") 7 label = teachable_machine_classification(image, 'brain_tumor_classification.h5') 8 if label == 0: 9 st.write("The MRI scan has a brain tumor") 10 else: 11 st.write("The MRI scan is healthy")
To run your application on localhost, open up your terminal or shell, navigate to the current working directory, and run the command
streamlit run app.py
The app will run locally and be available via the URL
At this point, your app is set up and running locally. It's time to share it. Register for a Heroku account to allow you to deploy your awesome classifier to the web. After registration, download the Heroku CLI.
requirements.txt file that will hold the libraries used and their versions. You can use the
The file should look something like this:
1numpy==1.16.4 2streamlit==0.52.1 3pillow 4keras 5tensorflow==2.0.0b1
setup.sh file and a
These files will instruct Heroku on what to do to set up the app and get it running.
setup.sh file, write the below code, which will will create a streamlit folder with a credentials.toml and a config.toml file.
1mkdir -p ~/.streamlit/ 2echo "\ 3[general]\n\ 4email = \"[email protected]\"\n\ 5" > ~/.streamlit/credentials.toml 6echo "\ 7[server]\n\ 8headless = true\n\ 9enableCORS=false\n\ 10port = $PORT\n\ 11" > ~/.streamlit/config.toml
procfile will be the one that executes
setup.sh. Then run the Streamlit
app.py file procfile code:
1web: sh setup.sh && streamlit run app.py
Initiate an empty Git repository using the command
In your terminal, navigate to the code's working directory and log in to Heroku using the CLI command
heroku login. To deploy, run the command
heroku create. Upon completion of this command, Heroku will assign an app name and URL to your app, which will allow you to access it via the web.
Last, push your code to your Heroku instance using the Git commands below.
1git add . 2git commit -m "commit message" 3git push heroku master
To check if deployment was successful, run the command
heroku ps scale:web=1.
You have now learned to deploy machine learning solutions on the web using Streamlit to build the interface and Heroku to serve the app on the web. These skills are vital for real world roles such as ML engineer, ML devops, software engineer with an interest in ML, and freelance ML enthusiasts who would like to share their work. For a more in-depth look at Heroku, consider this tutorial.
You can also further build on the skills in this guide by researching cloud-based ML deployment solutions such as Amazon AWS, Microsoft Azure, GCP, and FloydHub.