How To Create A UI For Your Python App

Python is among the frequent programming languages for automating search engine marketing processes.

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

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

What Is Streamlit?

Streamlit is an open-source app framework (a Python package deal) that offers us the facility for creating nice-looking apps with none front-end improvement data.

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

You employ pure Python to develop your front-end.

When Will The Streamlit Library Turn out to be Helpful?

To start with, if you’re coding Python scripts that run repeatedly on a machine with a job scheduler like cron, Streamlit isn’t helpful for you.

However if you’re growing a software that you simply need to share together with your workforce members, for instance, a key phrase analysis app, you should use Streamlit.

Additionally, if you happen to want a consumer authentication technique, the Streamlit group developed a package deal that may deal with it for you.

Create A Streamlit App: Getting Began

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

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

Additionally, I’ll assume you may have 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.

Additionally, we’ll import a Python normal library:

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

Putting in The Streamlit Bundle

To start with, I desire to create a digital atmosphere by working python3 -m venv .env, after which putting in the Streamlit package deal by working pip3 set up streamlit.

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

In advanced initiatives which have too many capabilities, I desire to have separate Python script information for my completely different capabilities 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 capabilities that get information 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 package deal. To get this package deal, you’ll want to run pip3 set up requests.

Additionally, to parse the autocomplete API response, we have to import the Python normal JSON library.

To start with, we import the JSON normal library, the Requests package deal for making requests, and Streamlit for creating our app.

Then, I outlined a operate for getting the Google autocomplete queries as a listing of strings.

I used exchange operate twice to maintain all the things easy, however you should 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) -> record[str]:
    """Get Google autocomplete queries for a seed key phrase

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

    Returns:
        record[str]: A listing of the autocomplete queries
    """
    google_autocomplete_api: str = "https://www.google.com/full/search"
    google_autocomplete_params: dict = {
        "q": key phrase,
        "cp": 8,
        "shopper": "gws-wiz",
        "xssi": "t",
        "hl": "en-US"
    }

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

    list_google_autocomplete_uncleaned: record[list] = json.masses((response.content material).decode("UTF-8")[5:])[0]
    list_google_autocomplete_cleaned: record[str] = [
        element[0].exchange('<b>', '').exchange('</b>', '')
        for aspect in list_google_autocomplete_uncleaned
        ]

    return list_google_autocomplete_cleaned

The Streamlit App

Up till now, we now have put in the Streamlit package deal and outlined our operate 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 domestically. After you run this command, by going to the http://localhost:8501/ URL, you possibly can view the app.

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

Screenshot from creator, October 2022

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() operate, we will add a heading to the web page with a title model. Let’s say st.title(“This can be a subsequent stage search engine marketing app”).

Keep in mind that after enhancing your streamlit_app.py file and saving it, an icon seems within the prime proper nook of the web page, and you will need to press All the time return to view the app adjustments with none web page refresh.

Screenshot from creator, October 2022

Now our app appears just like the picture under. In case your system theme is darkish, your app is with a darkish theme.

Screenshot from creator, October 2022

Add Textual content To The Streamlit App

For including a textual content paragraph to the app, you’ll want to use the st.write() operate. For instance, st.write(“Make your concepts actual”).

Screenshot from creator, October 2022

Add A Textual content Enter To The Streamlit App

As you noticed within the Google autocomplete operate, there was an argument referred to as “key phrase”.

This argument should come from the consumer enter.

To get the consumer enter, we will use a textual content enter discipline in Streamlit. With st.text_input() we will add a textual content enter. For instance, st.text_input(“What’s your seed key phrase?”).

Additionally, as a way to use the enter key phrase later to cross to our operate, we should assign it to a variable.

input_google_autocomplete_keyword: str = st.text_input(
    "What's your seed key phrase?")

Now we need to run our app when there’s an enter key phrase. Right here, we use an if assertion to test if the variable is empty or not.

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

Screenshot from creator, October 2022

Obtain 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 consumer seed key phrase.

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

if output_list_google_autocomplete:
        st.download_button("Obtain the output",
                           ("n").be a part of(output_list_google_autocomplete))

Screenshot from creator, October 2022

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

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

Screenshot from creator, October 2022

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 alter the title and favicon, we should use the st.set_page_config().

Additionally, I desire the app structure to be large (you possibly can check it).

st.set_page_config(
    page_title="Oh My App!",
    page_icon="😎",
    structure="large"
)

Screenshot from creator, October 2022

Set The App’s Default Theme

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

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

Contained in the config.toml you will need to insert the under traces to set your app’s default theme.

[theme]
base = "mild"

Screenshot from creator, October 2022

Authenticating Customers In Streamlit

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

To guard your app, you will need to authorize the customers earlier than they will use the app – like most SASSs we use every single day.

For a Streamlit app, we will use the Streamlit-Authenticator package deal. To put in it, within the terminal positioned in your app folder, kind the pip3 set up streamlit-authenticator command, and import the package deal into your app.

I like to recommend you learn the Streamlit authenticator package deal 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:
      e mail: firstuser@gmail.com
      title: The primary username
      password: 12345 # Should be changed with the hashed password
    secondUser:
      e mail: seconduser@gmail.com
      title: The second username
      password: 111213 # Should be changed with the hashed password
cookie:
  expiry_days: 30
  key: some_signature_key
  title: some_cookie_name
preauthorized:
  emails:
    - my@gmail.com

As within the package deal doc you possibly can see, now we should hash the passwords with the Hasher modules. I desire to open an IPython and run the under 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, you’ll want to set up the PyYAML package deal 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.SafeLoader)

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

title, authentication_status, username = authenticator.login("Login", "foremost")

Screenshot from creator, October 2022

Present The App To Efficiently Logged In Customers

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

if authentication_status:
    authenticator.logout('Logout', 'foremost')
    # 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 last step of growing our app.

You should utilize completely different providers for deploying your app, like AWS, Google Cloud, Azure, Heroku, DigitalOcean, and many others.

Earlier than the Dockerfile, let’s create the necessities.txt file. To take action, we will use the pip3 freeze > necessities.txt command.

Streamlit Dockerfile

For deploying our app, I take advantage of 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

On this tutorial, we noticed how we will 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.

Extra sources: 

Featured Picture: Yaran/Shutterstock