Stylish yet simple GUI for Python that users, backend developers and data scientists would immediately fall for
By: Smslova Daria
Tags: Web App Development, Streamlit, Pythongui, Topic Modeling, Machine Learning

This article will provide a step-by-step guide on how to create a simple Streamlit ML topic recognition app and some useful tips on how to customize its design.

Step 1: Getting started

First, you need to install the library.

pip install streamlit

Then, you create a directory my_streamlit_app (or any other name) and add the file My_app.py where you import all necessary libraries. Our app would predict the topic.

import streamlit as st

import topic_recognition

I have already trained my Multi-label classifier using Scikit-learn and tfidf vectorizer. Here is a similar problem explained in detail.I have three separate files: one for creation and fitting the model; one for the input text preprocessing and topic prediction, and one more with my Streamlit app. In the app I imported the file where the topic would be predicted for the user input text. The dataset, trained model, vocabulary and binarizer are saved in the my_streamlit_app directory.

Step 2: Design your app

from PIL import Image

st.title("Topic recognition app :memo:")

img = Image.open("Image.jpg")

st.image(img)

st.subheader("This tool can predict the topic of your text.")

The syntax of Streamlit is pretty straightforward. It supports markdown, you can paste emojis and include quite standard for such libraries widgets as a slider, radio buttons, checkboxes, select boxes, and also videos and audios. The full guide on interactive features could be found in its documentation.

Now we need to add the text area for the user to input text and a ‘Submit’ button.

text_input = st.text_input(label='Your text')

submit_button = st.button(label='Submit', value="Type here...")

This is what the user will see:

Alternatively, you can upload a user’s text using through the upload file option.

pip install PyMuPDF

After you have installed the packages for reading a pdf file, open and read it in your app.

import fitz uploaded_pdf = st.file_uploader("Load your pdf file: ", type=['pdf'])



if uploaded_pdf is not None:

with fitz.open(stream=uploaded_pdf.read(), filetype="pdf") as doc:

text_input = ""

for page in doc:

text_input += page.getText()

st.write(text_input)

doc.close()

else:

st.write("File not found")

The output would be as below:

If you want to customize background you can add these functions and upload your image.

import base64 @st.cache( allow_output_mutation=True )

def get_base64_of_bin_file(bin_file):

with open( bin_file, 'rb' ) as f:

data = f.read()

return base64.b64encode( data ).decode()



def set_png_as_page_bg(png_file):

bin_str = get_base64_of_bin_file(png_file)

page_bg_img = '''

<style>

body {

background-image: url("data:image/png;base64,%s");

background-size: cover;

}

</style>

'''% bin_str



st.markdown(page_bg_img, unsafe_allow_html=True)

return



set_png_as_page_bg('background.png')

Background image credit: https://icon-library.com/

You can also choose one of the themes or a customized one. More information in Streamlit blog.

Step 3: Add your model

Simply add one line of code:

st.write('Predicted topic: {topic}.'.format(topic= topic_recognition.predict_topic(text_input)))

We can also add some editing features to make our results more readable.

Markdown

st.write('Predicted topic: **{topic}**.'.format(topic= topic_recognition.predict_topic(text_input)))

2. Text annotation

from __init__ import annotated_text def annotation(text):

topics = topic_recognition.predict_topic(text)

text_with_annotations = []

for i in range(0,len(topics)):

topic = topics[i]

text_with_annotations.append((topic, "", "#8ef"))

annotated_text(50,"Predicted topic: ", *text_with_annotations)



annotation(text_input)

The full guide on how to work with annotated text can be found here. Streamlit works with JavaScript and HTML components as we could see and that could be rendered in your apps.

Step 4: Running your app

To run your app in a browser just type in your terminal:

streamlit run app.py

and your app would start on http://localhost:8501.

Step 5: Deployment

After you have added all the features you wanted you can deploy your app. To do this you need to click your mouse at the top right corner and choose ‘Deploy this app’.

Once you press it, you go to https://share.streamlit.io/ where you can authorize using your GitHub account and choose repository name or paste the link to your app.py file. In order to deploy your app, you need to have the file requirements.txt with the list of all libraries that need to be installed. In my case this file looks like this:

You can read more here on how to set requirements for further packaging.

You can also deploy your app using Docker and Heroku.

Conclusion:

Pros of using Streamlit:

quite easy intuitive syntax

support of HTML and JavaScript components

active community

fast adding of new features

cover most UI widgets

support multiple interactive visualizations

Cons:

inability to embed your own chunks of code, hence, it is impossible to go far from the standard Streamlit interface

My app included multiple models and I could deploy it both through docker and git, however, the models in the shared version did not predict anything. I would further investigate this and will be glad to hear suggestions.

All in all, thank you very much for reading. Please leave comments if you have any questions and clap if you like this story.