Deploying Streamlit and OpenCV based web application to Heroku

How to correctly deploy a web application using OpenCV to Heroku

Photo by v2osk on Unsplash

This article will take you through building a simple web application using python, opencv and streamlit and deploying it to heroku platform. I am writing this article as there are some technical hitches when deploying an application using opencv to heroku. So this article will clearly walk you through to deploying an application to heroku despite using opencv.

There are two parts to this article.

1. Creating a web application using streamlit.

2. Deploying the web application to heroku.

Part 1 : Creating a basic web app

In this part I will quickly get you up and running with a simple web application using opencv and streamlit that converts any uploaded image to a grayscale image. I have chosen a rather simple application to quickly demonstrate how to correctly deploy an application using opencv to heroku and the exact same procedure can be used for any other advanced web application as well.

Streamlit

Streamlit lets you create apps for your machine learning projects with deceptively simple Python scripts. It is superfast, intuitive and very very easy to understand.

This article assumes that the reader is well versed with the basics of streamlit and I am just going to focus on quickly building a streamlit application here. If someone needs a refresher on streamlit then one can refer the following resources:

Welcome to Streamlit - Streamlit 0.63.1 documentation

Build a Data Science Web App with Streamlit and Python

Now I will quickly walk through the development part of a simple web application in 5 easy and simple steps.

1. Making the necessary imports.

import cv2
import streamlit as st
import numpy as np

2. Adding a title and markdown to the web app.

st.title("First Streamlit Web Application")
st.markdown("This simple web application renders \
the uploaded images into grayscale mode.")

3. Adding a sidebar and adding a title to it.(Optional)

st.sidebar.title("First Streamlit Web Application")
st.sidebar.markdown("This simple web application renders \
the uploaded images into grayscale mode.")

4. Creating a file uploader widget on the sidebar.

uploaded_file=st.sidebar.file_uploader(label="Upload Image",\
type=["jpg","jpeg","png"],key="i")

5. Opening the uploaded image, converting it to grayscale and rendering it on the web app.

if uploaded_file is not None:
    file_bytes = np.asarray(bytearray(uploaded_file.read()),\
    dtype=np.uint8)
    image = cv2.imdecode(file_bytes, 1)
    st.subheader("Grayscale Image")
    st.image(image=cv2.cvtColor(image,cv2.COLOR_RGB2GRAY),width=400)

Now quickly save this file with a suitable filename, say “app.py” and to run it on local browser, switch to the directory containing the file and run the command :

streamlit run app.py

In case if an error regarding forbidden access to socket shows up, then simply specify any higher port number such as 8502 or 5000 explicitly.

streamlit run app.py --server.port 8502

So this creates a basic web application perfectly running on our local machine and now it has to be deployed to heroku.

Part 2 : Deploying the app to heroku

In this part, I will walk you through the complete step by step procedure for deploying the application to heroku.

Heroku is a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud and supports multiple languages such as Java, Node.js, Scala, Clojure, Python, PHP, and Go.

The deployment part can be divided into the following 3 steps:

• Creating an app on heroku and setting up buildpacks.
• Setting up the files needed for deployment
• Pushing the application to heroku.

Step 1 : Creating an app on heroku and setting up buildpacks.

1. Create an account on heroku and log in.

Cloud Application Platform | Heroku

2. Create a new app and choose a suitable name and location for the app.

Note : Try to give a meaningful name to your app if you wish to put it on your profile as the app name will be a part of URL of the final deployed application.

Creating a new app in heroku.

Giving a suitable name to app and create the app.

3. Add Buildpacks

Heroku Buildpacks are sets of open source scripts that are used for compiling apps on Heroku. They form the backbone of Heroku’s polyglot platform. Buildpacks enable you to extend Heroku’s build system to support your language or customizations, or to make particular binary packages available to the runtime.

For more on buildpacks, refer to :

Buildpacks

Heroku Buildpacks | Heroku

Go to the settings menu of newly created heroku app and scroll down to the Add Buildpack option and add buildpacks to your app. For this app, I will add two buildpacks, first one of which is officially supported and the second one is a third-party buildpack.

• heroku/python
• https://github.com/heroku/heroku-buildpack-apt

The second buildpack enables us to properly install opencv’s additional dependencies.

Add buildpacks.

Choose python buildpack and click Save changes.

Add the buildpack URL and click Save changes.

Finally the app should contain these two buildpacks.

Step 2 : Setting up the files needed for deployment

The following files should be present in the main directory of the application along with the python code.

Care should be taken to follow the exact naming convention for these files as followed here.

1. requirements.txt

This file lists out all the required python libraries along with their specific versions so as to easily install all the dependencies on the heroku platform. For this application, the file should look like this :

numpy==1.18.5
streamlit==0.61.0
opencv-python==4.2.0.34

Creating a requirements.txt file enables easy installing of all the dependencies in one go using the following command :

pip install -r requirements.txt

2. setup.sh

Just like requirements.txt, this file helps setting up the desired environment in order to properly run the application on heroku environment. For applications using streamlit the contents of this file can be kept as it is and need not to be modified.

mkdir -p ~/.streamlit/
echo "\
[server]\n\
headless = true\n\
port = $PORT\n\
enableCORS = false\n\
\n\
" > ~/.streamlit/config.toml

3. Procfile

Note : This file should be named as “Procfile” and should not have any extension not even .txt

Procfile contains the command to be executed to start the application.The contents are as follows :

web: sh setup.sh && streamlit run app.py

The contents of the file has 2 parts.

The first part declares a single process type, web, and the command needed to run it and the second part contains the command to run application.

Note : Make sure to put correct name of your python program here along with the extension .py

4. Aptfile

Note : This file should be named as “Aptfile” and should not have any extension not even .txt

This file is optional while deploying to heroku and is only needed if the application to be deployed uses opencv. It is required since opencv has some additional dependencies that are not installed on heroku by default and needs to be installed manually. These dependencies can be installed by using linux commands sudo apt get install or sudo apt install. So an additional Aptfile with the names of those dependencies helps with this and tells heroku to install these dependencies using the apt buildpack that was added while creating app.

The following are the dependencies that are to be listed in the Aptfile :

libsm6
libxrender1
libfontconfig1
libice6

5. runtime.txt

This file contains the specific python version that you want to get installed on the heroku platform.Its completely optional as generally there isn’t much difference among the python versions.

If someone wishes to use this, then a specific python version can be specified as follows :

python-3.6.8

So finally the main application directory should contain the following files :

• app.py (main python file and other required files)
• requirements.txt
• setup.sh
• Procfile
• Aptfile (only if using opencv)
• runtime.txt (optional)

Step 3: Pushing the application to heroku.

1. Installations

In order to follow the next steps, heroku CLI tool and Git should be installed on the local machine.Refer to the following sources to install these.

Git - Installing Git

The Heroku CLI

2. Initialize the folder as a git repository.

This can be done by executing following command through the terminal.

git init

3. Logging in to Heroku

Execute the following command and log in to heroku as prompted.

heroku login

4. Configure the heroku app as a remote repository for pushing files.

heroku git:remote -a <your app name>

For this application the name of app created in heroku is streamlit-opencv-demo.So the command should look like this :

heroku git:remote -a streamlit-opencv-demo

5. Commit the code to repository.

git add .
git commit -am "commit message"

6. Deploy the code to heroku.

git push heroku master

This will start installing all dependencies and creating the environment followed by the deployment of the application. Its always fun to have a look into the logs produced during this step to understand what’s going on during the deployment process.

7. Scale up the dynos in order to ensure smooth running of the application.

heroku ps:scale web=1

For more on dynos refer the link below:

Heroku Dynos | Heroku

8. Open the application.

heroku open

This will open the application in the browser and it should look like this :

The complete code for the application along with all the other files can be found on the my github.

https://github.com/RaviBansal7717/streamlit-opencv-demo

References:

Getting Started on Heroku with Python

There you go! Hopefully the app should be running properly and be user ready. Try playing with this one and also try deploying your own exciting and fun applications.