Streamlit Tutorial For SEOs: How To Develop A UI For Your Python App

Posted by

Python is one of the typical programs languages for automating SEO procedures.

Among the best libraries for creating a front-end for our apps with no HTML, CSS knowledge, or coding with a JavaScript-powered framework is Streamlit bundle.

In this Streamlit tutorial, we will dive into how you can produce a gorgeous app with Python and the Dockerfile for releasing your Streamlit app.

What Is Streamlit?

Streamlit is an open-source app framework (a Python bundle) that provides us the power for creating nice-looking apps without any front-end development understanding.

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

You utilize pure Python to develop your front-end.

When Will The Streamlit Library End Up Being Useful?

First of all, if you are coding Python scripts that run frequently on a maker with a task scheduler like cron, Streamlit isn’t helpful for you.

However if you are establishing a tool that you want to share with your team members, for instance, a keyword research study app, you can utilize Streamlit.

Also, if you need a user authentication approach, the Streamlit community established a bundle that can manage it for you.

Produce A Streamlit App: Beginning

Let’s create a simple app that gets autocomplete inquiries for a seed keyword from the Google public API.

Before beginning, develop a folder on your maker, and call it what you desire.

Also, I will assume you have set up Python prior to and understand the essentials of Python programming.

For the entire procedure, we require to use these Python libraries:

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

Also, we will import a Python standard library:

The tutorial code can be discovered in my Streamlit starter design template repository on Github.

Installing The Streamlit Plan

First of all, I prefer to develop a virtual environment by running python3 -m venv.env, and after that setting up the Streamlit package by running pip3 set up streamlit.

Now produce a Python script. Let’s call it streamlit_app. py.

In intricate jobs that have too many functions, I choose to have separate Python script files for my various functions and after that import those into the streamlit_app. py or develop a separate app with Flask or FastAPI.

For instance, in a keyword research app, I have a Python script for different functions that get data from Semrush, a script for getting the top 10 or 20 arise from Google, a script to get the Google autocomplete and Google-related searches, etc.

Get The Google Autocomplete Queries

For making demands, we require to use the Requests plan. To get this bundle, you require to run pip3 set up requests.

Also, to parse the autocomplete API action, we need to import the Python requirement JSON library.

To start with, we import the JSON standard library, the Requests bundle for making demands, and Streamlit for developing our app.

Then, I specified a function for getting the Google autocomplete queries as a list of strings.

I utilized change function two times to keep whatever basic, but you can use re library for using regex.

“””A Streamlit app for getting the Google autocomplete queries “”” import json import requests import streamlit as st def google_autocomplete(keyword: str) -> list [str]: “””Get Google autocomplete inquiries for a seed keyword Args: keyword (str): The seed keyword Returns: list [str]: A list of the autocomplete questions “”” google_autocomplete_api: str=”https://www.google.com/complete/search” google_autocomplete_params: dict = action = requests.get(google_autocomplete_api, params=google_autocomplete_params) list_google_autocomplete_uncleaned: list [list] = json.loads((response.content). decipher(“UTF-8”) [5:] [0] list_google_autocomplete_cleaned: list [str] = [aspect [0] change(“, “). change(“, “) for element in list_google_autocomplete_uncleaned] return list_google_autocomplete_cleaned

The Streamlit App

Up until now, we have installed the Streamlit plan and defined our function to get the Google autocomplete queries. Now, let’s create the real app.

To view the Streamlit app, we require to run the Streamlit with the run streamlit_app. py command in the terminal for running our app in your area. After you run this command, by going to the http://localhost:8501/ URL, you can view the app.

Yes, it’s blank because we didn’t include any heading, etc, to it.

Screenshot from author, 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() function, we can add a heading to the page with a title style. Let’s say st.title(“This is a next level SEO app”).

Remember that after modifying your streamlit_app. py file and saving it, an icon appears in the leading right corner of the page, and you should push Always returnto see the app modifications without any page refresh.

Screenshot from author, October 2022 Now our app looks like the image below. If your system style is dark, your app is with a dark theme. Screenshot

from author, October 2022 Include Text To The Streamlit App For including a text paragraph to the app, you require to use the st.write()function. For example, st.write(“Make your concepts real”). Screenshot from author, October 2022 Add A Text Input To The Streamlit App As you saw in the Google autocomplete function

, there was an argument called”keyword “. This argument needs to come from the user input. To get the user input, we can use a text input field

in Streamlit. With st.text _ input(

)we can include a text input. For instance, st.text _ input(“What is your seed keyword?”). Also, in order to use the input keyword later to pass to our function, we should designate it to a variable. input_google_autocomplete_keyword: str= st.text _ input( “What is your seed keyword?”)Now we want to run our app when there is an input keyword. Here, we use an if declaration

to examine if the variable is empty or not. if input_google_autocomplete_keyword: output_list_google_autocomplete: list [str]=google_autocomplete( input_google_autocomplete_keyword) Screenshot from author, October 2022 Download From The Streamlit App So, we have actually added a heading, a line of text, and an input text field to get the user seed keyword. Now we must perform our written function and make a download button for the user to get the

results in a text file. if output_list_google_autocomplete: st.download _ button (“Download the output”,(” n”).

sign up with(output_list_google_autocomplete )) Screenshot from author, October 2022 We built our basic app! Let’s change the app title and favicon. Before that

, let’s see the Streamlit app section code up until now. Screenshot from author, October 2022 Modification 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 need to use the st.set _ page_config (). Also, I prefer the app

layout to be broad (you can check it). st.set _ page_config

(page_title=”Oh My App!”, page_icon=””, design=”wide”) Screenshot from author, October 2022 Set The App’s Default Theme The app theme is

based upon the user’s system settings,

but personally, a lot of times, I learn the light theme has better contrast– and I don’t desire my group to put their time into finding out how to alter the app theme. To set a default theme for the Streamlit app, first, you must create a folder, and name

it.streamlit. Inside this folder create a file, and call it config.toml. Inside the config.toml you need to place the below lines to set your app’s default theme. [. theme] base =”light” Screenshot from author, October 2022 Authenticating Users In Streamlit Envision that after you deploy your app, somebody finds out the app URL

and accesses it. To secure your app, you need to

license the users before they can use the app– like most SASSs we use every day.

For a Streamlit app, we can utilize the Streamlit-Authenticator plan. To install it, in the terminal

located in your app folder, type the pip3 install streamlit-authenticator command, and import the package into your app. I recommend you check out the Streamlit authenticator plan documents to get a better understanding of what is going on. import streamlit_authenticator as stauth Now create a config.yaml declare placing our users’qualifications. qualifications: usernames: firstUser: e-mail: [email protected] name: The first username password: 12345 # Need to be replaced with the hashed password secondUser: e-mail: [email protected] name: The second username password: 111213 # Need to be replaced with the hashed password cookie: expiry_days: 30 key: some_signature_key name: some_cookie_name preauthorized: e-mails:[email protected] As in the plan document you can see, now we must hash the passwords with the Hasher modules. I prefer to open an IPython and run

the below code line. hashed_passwords =stauth.Hasher([ 12345′,’ 111213′]. produce ()Producing A Login Widget Now we must create a login widget where users can input their username, password, and after that login into the app.

First, you need to install the PyYAML plan with the pip3 install pyyaml command and import it with the import yaml. Then produce an authenticator item, and render the login module. with open(“./ config.yaml”) as file: config=yaml.load(file, Loader =yaml.SafeLoader)authenticator =stauth.Authenticate(config [“qualifications”], config [“cookie”] [“name”], config [“cookie”] [” key”], config [” cookie “] [” expiry_days”], config [” preauthorized “] name, authentication_status, username=authenticator.login(” Login”, “primary”) Screenshot from author, October 2022 Program The App To Successfully Visited Users Now we can use the authentication_status variable to see the app for our effectively logged-in users. if authentication_status: authenticator.logout(‘ Logout’,’main’)# OUR APP CODE COMES HERE

elif authentication_status ==False: st.error(‘Username/password is incorrect’)elif authentication_status == None: st.warning(‘Please enter your username and password ‘)Deploy The Streamlit App With Docker Now we are in the last action of developing our app. You can use

various services for releasing your app, like

AWS, Google Cloud, Azure, Heroku, DigitalOcean, and so on.

Before the Dockerfile, let’s create the requirements.txt file. To do so, we can utilize the pip3 freeze > requirements.txt command.

Streamlit Dockerfile For releasing our app, I use Python 3.9.10. FROM python:3.9.10 WORKDIR/ app COPY. RUN pip3 install-r requirements.txt

CMD [“streamlit”

,”run”, “streamlit_app. py”] EXPOSE 8501 Finish up In this tutorial, we saw how we can develop a sensational UI with pure Python, and release it with Docker. To find out more

about various Streamlit widgets, see their well-documented API recommendation. More resources: Included Image: Yaran/Best SMM Panel