Learn the fastest way to build data apps

Another post starts with you beautiful people!
I hope you have enjoyed and learned something new from my previous three posts about machine learning model deployment. In one post we have learned How to deploy a model as FastAPI? In the second post, we have learned How to deploy a deep learning model as RestAPI? and in the third post, we have also learned How to scale your deep learning model API? If you are following my blog posts, you have seen how easily you have transit yourselves from aspiring to a mature data scientist. In this new post, I am going to share a new framework- Streamlit which will help you to easily create a beautiful app with Python only. I will show here how had I used the Streamlit framework to create an app for my YOLOv3 custom model.

What is Streamlit?
Streamlit’s open-source app framework is the easiest way for data scientists and machine learning engineers to create beautiful, performant apps in only a few hours!  All in pure Python. All for free. With this framework, building an app with ML/DL/NLP model is as easy as writing Python scripts.

Installing Streamlit?
To install Streamlit, open your activated virtual env in Anaconda Prompt, or if you have not one then create it. Then run the following command to install the Streamlit framework: pip install --upgrade streamlit
In my case, I have created a virtual env 'stream' in Anaconda Prompt with Python 3.7 and it looks like below-

Once the installation is done we can verify it by running its inbuilt help app with below command-

As soon as you run the above command, it will ask you to enter your email. Fill up your email and press enter. After this, a welcome screen will appear as well as in the next few seconds the sample app will open in a new tab in your default browser. The welcome console will look like below-

And the default app in the browser will look like below-

Click on the 'Choose a demo' dropdown. You will see their sample demo options-

Now click on any of the options. I selected the last option and it looks like below after the selection-

How beautiful it is, right! This demo app demonstrates a Pandas Dataframe representing the gross agricultural production for some years. Now scroll down a little bit and you will see the code used to build this beautiful app. See the complete code is in Python. The dataset 'agri.csv.gz' is imported from AWS S3 bucket location like we usually do while importing the data in csv format and rest in few lines the UI logic is written as per Streamlit framework-

Now I will jump to the actual demo of my app. Here I will show you how had I created an app for my object detection and recognition neural networks model. This YOLOv3 based model I created to detect wine bottles and recognized their names from the image. With Pycharm IDE I have created a project, then I created an empty folder 'model' . There I copied my model weights and configuration files. Next, I created the app.py file where I will write my code of image uploading, image preprocessing, passing the image to the model, and showing results in Streamlit UI.

Here, I show you my project structure in Pycharm IDE-

I have saves some sample images inside the images folder. the model folder contains weights and configuration files of my object detection and recognition models I trained on YOLOv3. app.py is my main file which will act as Streamlit application and contains logic to display bounding boxes and brand names in the image. brand_recognition.py is another file which contains logic to recognize the brand names. Based on your machine learning or deep learning model you can maintain this structure as you want. Here the main thing is to see how app.py is using Streamlit related features. Let's understand app.py structure-

In above code snippet, after importing required libraries I have defined the app layout containing title, header, and a slider. The 'st' object of Streamlit has many useful functions for UI which you can easily check in Pycharm IDE as soon as you type dot(.) after st object like below screenshot-

For details inbuilt functions please refer this official link. Next, I have defined a function to read the image. For this purpose I used OpenCV. Since OpenCV loads the image in BGR format I converted the image in RGB format otherwise your image will show in blue color-

Above this function, I used a cache decorator. The Streamlit cache allows our app to execute quickly even when loading data from the web, manipulating large datasets, or performing expensive computations. Based on your need you can add/remove this. After this, I have defined a function that contains YOLOv3 related logic- loading the weights and configuration files, getting the output layer, identifying the best bounding boxes, and recognized the brand names to the detected bottles. Here you can call or write your logic of your ML/DL model-

Inside the above yolo_v3() function in the last, I used the following Streamlit functions to display my final output image-

Next, for showing some sample images options in the left sidebar of the app I used st.sidebar.selectbox() function and passed some options there. You can think of this as a dropdown value. In the end, I read the given image using my read_img() function and then called the yolo_v3() function to show the output-

That's it we have our simple app is ready to test. For running the Streamlit server run following command: streamlit run app.py

Your default browser window open as soon the above command runs and you will see following look like screen-

Looks amazing right! With very few Python-like syntaxes of Streamlit, we have easily created an app for our model. No need of UI or JavaScript knowledge to create an app now. As a Data Scientist with Python knowledge now you can give more focus on your model performance and in less time without any help you can create an app also. That's the power of the Streamlit framework.

Let's move ahead and what if you want to give the user an option of uploading the image instead of static images? For this, we need only a few changes in our app.py file. Using Streamlit's .file_uploader() function, we can provide image uploading option to the user. We need to make the following changes in our app.py file to achieve this functionality-

Here I am going to open the uploaded image using PIL's Image module that's why we don't need to again open the image using cv2.imread() function and also we don't need to convert the image in RGB format. Next change is the comment the left sidebar sections and put the image upload option of Streamlit-

That's it. Our app is now ready. Restart the Streamlit server and you will see upload image option in the app like below screen-

 Click on the browse files link and upload an image to test your model. After uploading an image following look like screen will appear-

See, now our app is ready to test any new image user wants to check. With the Streamlit framework, we can now easily create an app with our ML/DL model. In this post, I shared you the basics of this amazing and powerful framework. The easiest way to master in using Streamlit is to try things out yourself. I know you have many ML/DL models to test and after reading this post you are very excited to create many apps for all of your models. So don't stop yourself! Use this post as reference, start creating your app, do more experiments with it's UI, and deploy your app in Heroku. Till then Go chase your dreams, have an awesome day, make every second count, and see you later in my next post.