How To Create A UI For Your Python App

Python is likely one of the frequent programming languages for automating search engine marketing processes.

One of the best libraries for making a front-end for our apps with none HTML, CSS data, or coding with a JavaScript-powered framework is Streamlit bundle.

In this Streamlit tutorial, we’ll dive into how one can create a ravishing app with Python and the Dockerfile for deploying your Streamlit app.

What Is Streamlit?

Streamlit is an open-source app framework (a Python bundle) that provides us the ability for creating nice-looking apps with none front-end growth data.

This makes us free from involvement in any front-end framework or coding in HTML, CSS, and JavaScript.

You use pure Python to develop your front-end.

When Will The Streamlit Library Become Useful?

First of all, in case you are coding Python scripts that run frequently on a machine with a job scheduler like cron, Streamlit isn’t helpful for you.

But in case you are growing a instrument that you simply need to share together with your group members, for instance, a key phrase analysis app, you need to use Streamlit.

Also, in case you want a person authentication methodology, the Streamlit group developed a bundle that may deal with it for you.

Create A Streamlit App: Getting Started

Let’s create a easy app that will get autocomplete queries for a seed key phrase from the Google public API.

Before starting, create a folder in your machine, and title it what you need.

Also, I’ll assume you’ve gotten put in Python earlier than and know the fundamentals of Python programming.

For the entire course of, we have to use these Python libraries:

• Requests.
• Streamlit.
• Streamlit-Authenticator.
• PyYAML.

Also, we’ll import a Python customary library:

The tutorial code could be present in my Streamlit starter template repository on Github.

Installing The Streamlit Package

First of all, I favor to create a digital setting by working python3 -m venv .env, after which putting in the Streamlit bundle by working pip3 set up streamlit.

Now create a Python script. Let’s name it streamlit_app.py.

In complicated tasks which have too many features, I favor to have separate Python script information for my completely different features after which import these into the streamlit_app.py or create a separate app with Flask or FastAPI.

For instance, in a key phrase analysis app, I’ve a Python script for various features that get knowledge from Semrush, a script for getting the highest 10 or 20 outcomes from Google, a script to get the Google autocomplete and Google-related searches, and many others.

Get The Google Autocomplete Queries

For making requests, we have to use the Requests bundle. To get this bundle, it’s good to run pip3 set up requests.

Also, to parse the autocomplete API response, we have to import the Python customary JSON library.

First of all, we import the JSON customary library, the Requests bundle for making requests, and Streamlit for creating our app.

Then, I outlined a perform for getting the Google autocomplete queries as an inventory of strings.

I used change perform twice to maintain every little thing easy, however you need to use re library for utilizing regex.

“””A Streamlit app for getting the Google autocomplete queries
“””
import json

import requests
import streamlit as st

def google_autocomplete(key phrase: str) -> checklist[str]:
“””Get Google autocomplete queries for a seed key phrase

Args:
key phrase (str): The seed key phrase

Returns:
checklist[str]: A checklist of the autocomplete queries
“””
google_autocomplete_api: str = “https://www.google.com/complete/search”
google_autocomplete_params: dict = {
“q”: key phrase,
“cp”: 8,
“client”: “gws-wiz”,
“xssi”: “t”,
“hl”: “en-US”
}

response = requests.get(google_autocomplete_api, params=google_autocomplete_params)

list_google_autocomplete_uncleaned: checklist[list] = json.hundreds((response.content material).decode(“UTF-8”)[5:])[0]
list_google_autocomplete_cleaned: checklist[str] = [
element[0].change(‘‘, ”).change(‘‘, ”)
for ingredient in list_google_autocomplete_uncleaned
]

return list_google_autocomplete_cleaned

The Streamlit App

Up till now, we now have put in the Streamlit bundle and outlined our perform to get the Google autocomplete queries. Now, let’s create the precise app.

To view the Streamlit app, we have to run the Streamlit with the run streamlit_app.py command within the terminal for working our app regionally. After you run this command, by going to the http://localhost:8501/ URL, you’ll be able to view the app.

Yes, it’s clean as a result of we didn’t add any heading, and many others., to it.

Add A Heading To The Streamlit App

Let’s add a heading to our app. As you see above, I imported the Streamlit as st.

Now by calling the st.title() perform, we are able to add a heading to the web page with a title type. Let’s say st.title(“This is a next level SEO app”).

Remember that after enhancing your streamlit_app.py file and saving it, an icon seems within the prime proper nook of the web page, and it’s essential to press Always return to view the app adjustments with none web page refresh.

Now our app seems just like the picture beneath. If your system theme is darkish, your app is with a darkish theme.

Add Text To The Streamlit App

For including a textual content paragraph to the app, it’s good to use the st.write() perform. For instance, st.write(“Make your ideas real”).

Add A Text Input To The Streamlit App

As you noticed within the Google autocomplete perform, there was an argument referred to as “keyword”.

This argument should come from the person enter.

To get the person enter, we are able to use a textual content enter discipline in Streamlit. With st.text_input() we are able to add a textual content enter. For instance, st.text_input(“What is your seed keyword?”).

Also, as a way to use the enter key phrase later to move to our perform, we should assign it to a variable.

input_google_autocomplete_keyword: str = st.text_input(
“What is your seed keyword?”)

Now we need to run our app when there may be an enter key phrase. Here, we use an if assertion to verify if the variable is empty or not.

if input_google_autocomplete_keyword:
output_list_google_autocomplete: checklist[str] = google_autocomplete(
input_google_autocomplete_keyword)

Download From The Streamlit App

So, we now have added a heading, a line of textual content, and an enter textual content discipline to get the person seed key phrase.

Now we should execute our written perform and make a obtain button for the person to get the leads to a textual content file.

if output_list_google_autocomplete:
st.download_button(“Download the output”,
(“n”).be a part of(output_list_google_autocomplete))

We constructed our easy app! Let’s change the app title and favicon.

Before that, let’s see the Streamlit app part code up till now.

Change The App Title And Favicon

The default title of the app is streamlit_app · Streamlit, and the favicon of the app is the Streamlit icon.

To change the title and favicon, we should use the st.set_page_config().

Also, I favor the app structure to be huge (you’ll be able to check it).

st.set_page_config(
page_title=”Oh My App!”,
page_icon=”😎”,
structure=”wide”
)

Set The App’s Default Theme

The app theme relies on the person’s system settings, however personally, most instances, I discover out the sunshine theme has higher distinction – and I don’t need my group to place their time into discovering out learn how to change the app theme.

To set a default theme for the Streamlit app, first, it’s essential to create a folder, and title it .streamlit. Inside this folder create a file, and title it config.toml.

Inside the config.toml it’s essential to insert the beneath strains to set your app’s default theme.

[theme]
base = “light”

Authenticating Users In Streamlit

Imagine that after you deploy your app, somebody finds out the app URL and accesses it.

To shield your app, it’s essential to authorize the customers earlier than they will use the app – like most SASSs we use on daily basis.

For a Streamlit app, we are able to use the Streamlit-Authenticator bundle. To set up it, within the terminal situated in your app folder, sort the pip3 set up streamlit-authenticator command, and import the bundle into your app.

I like to recommend you learn the Streamlit authenticator package documentation to get a greater understanding of what’s going on.

import streamlit_authenticator as stauth

Now create a config.yaml file for inserting our customers’ credentials.

credentials:
usernames:
firstUser:
electronic mail: [email protected]
title: The first username
password: 12345 # Must get replaced with the hashed password
secondUser:
electronic mail: [email protected]
title: The second username
password: 111213 # Must get replaced with the hashed password
cookie:
expiry_days: 30
key: some_signature_key
title: some_cookie_name
preauthorized:
emails:
– [email protected]

As within the bundle doc you’ll be able to see, now we should hash the passwords with the Hasher modules. I favor to open an IPython and run the beneath code line.

hashed_passwords = stauth.Hasher([‘12345’, ‘111213’]).generate()

Creating A Login Widget

Now we should create a login widget the place customers can enter their username, password, after which login into the app.

First, it’s good to set up the PyYAML bundle with the pip3 set up pyyaml command and import it with the import yaml.

Then create an authenticator object, and render the login module.

with open(“./config.yaml”) as file:
config = yaml.load(file, Loader=yaml.SecureLoader)

authenticator = stauth.Authenticate(
config[“credentials”],
config[“cookie”][“name”],
config[“cookie”][“key”],
config[“cookie”][“expiry_days”],
config[“preauthorized”]
)

title, authentication_status, username = authenticator.login(“Login”, “main”)

Show The App To Successfully Logged In Users

Now we are able to use the authentication_status variable to see the app for our efficiently logged-in customers.

if authentication_status:
authenticator.logout(‘Logout’, ‘predominant’)
# OUR APP CODE COMES HERE
elif authentication_status == False:
st.error(‘Username/password is wrong’)
elif authentication_status == None:
st.warning(‘Please enter your username and password’)

Deploy The Streamlit App With Docker

Now we’re within the closing step of growing our app.

You can use completely different companies for deploying your app, like AWS, Google Cloud, Azure, Heroku, DigitalOcean, and many others.

Before the Dockerfile, let’s create the necessities.txt file. To achieve this, we are able to use the pip3 freeze > necessities.txt command.

Streamlit Dockerfile

For deploying our app, I exploit Python 3.9.10.

FROM python:3.9.10
WORKDIR /app
COPY . .
RUN pip3 set up -r necessities.txt
CMD [“streamlit”, “run”, “streamlit_app.py”]
EXPOSE 8501

Wrap Up

In this tutorial, we noticed how we are able to create a shocking UI with pure Python, and deploy it with Docker.

To be taught extra about completely different Streamlit widgets, see their well-documented API reference.

More sources: 

Featured Image: Yaran/Shutterstock