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

Posted by

Python is among the common shows languages for automating SEO processes.

Among the best libraries for producing a front-end for our apps with no HTML, CSS understanding, or coding with a JavaScript-powered structure is Streamlit package.

In this Streamlit tutorial, we will dive into how you can develop a lovely 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 gives us the power for producing nice-looking apps with no front-end development understanding.

This makes us free from participation 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 device with a task scheduler like cron, Streamlit isn’t beneficial for you.

But if you are developing a tool that you wish to share with your employee, for instance, a keyword research app, you can use Streamlit.

Likewise, if you require a user authentication approach, the Streamlit community established a package that can handle it for you.

Produce A Streamlit App: Getting Started

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

Prior to beginning, produce a folder on your maker, and call it what you desire.

Also, I will presume you have actually installed Python before and know the essentials of Python programs.

For the whole procedure, we need to utilize these Python libraries:

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

Also, we will import a Python basic library:

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

Setting Up The Streamlit Package

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

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

In complex jobs that have too many functions, I prefer to have separate Python script apply for my various functions and after that import those into the streamlit_app. py or create a different app with Flask or FastAPI.

For example, in a keyword research app, I have a Python script for various functions that get information from Semrush, a script for getting the leading 10 or 20 arise from Google, a script to get the Google autocomplete and Google-related searches, and so on.

Get The Google Autocomplete Queries

For making requests, we require to use the Requests plan. To get this package, you require to run pip3 install requests.

Also, to parse the autocomplete API reaction, we need to import the Python standard JSON library.

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

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

I used replace function two times to keep whatever basic, but you can use re library for utilizing regex.

“””A Streamlit app for getting the Google autocomplete queries “”” import json import demands import streamlit as st def google_autocomplete(keyword: str) -> list [str]: “””Get Google autocomplete questions for a seed keyword Args: keyword (str): The seed keyword Returns: list [str]: A list of the autocomplete queries “”” google_autocomplete_api: str=”” google_autocomplete_params: dict = reaction = 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] replace(“, “). replace(“, “) for component in list_google_autocomplete_uncleaned] return list_google_autocomplete_cleaned

The Streamlit App

Up previously, we have actually installed the Streamlit plan and specified our function to get the Google autocomplete queries. Now, let’s create the actual app.

To see 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 see the app.

Yes, it’s blank due to the fact that we didn’t include any heading, and so on, to it.

Screenshot from author, October 2022

Include 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 design. Let’s state 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 top 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 theme 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 need to utilize the st.write()function. For example, st.write(“Make your ideas 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 should originate 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?”). Likewise, in order to utilize the input keyword later to pass to our function, we should assign 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 utilize an if declaration

to inspect 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 included a heading, a line of text, and an input text field to get the user seed keyword. Now we must execute our written function and make a download button for the user to get the

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

join(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 area code up until now. Screenshot from author, 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 utilize the st.set _ page_config (). Likewise, I choose the app

layout to be wide (you can evaluate it). st.set _ page_config

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

based on the user’s system settings,

but personally, the majority of times, I discover the light style has better contrast– and I do not desire my team to put their time into finding out how to alter the app theme. To set a default theme for the Streamlit app, initially, you need to create a folder, and name

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

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

authorize the users prior to they can use the app– like many SASSs we use every day.

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

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

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

Initially, you need to set up the PyYAML plan with the pip3 install pyyaml command and import it with the import yaml. Then produce 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 [“qualifications”], config [“cookie”] [“name”], config [“cookie”] [” crucial”], config [” cookie “] [” expiry_days”], config [” preauthorized “] name, authentication_status, username=authenticator.login(” Login”, “main”) Screenshot from author, October 2022 Program The App To Effectively Logged In Users Now we can use the authentication_status variable to see the app for our successfully logged-in users. if authentication_status: authenticator.logout(‘ Logout’,’primary’)# 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 step of establishing our app. You can utilize

different services for deploying your app, like

AWS, Google Cloud, Azure, Heroku, DigitalOcean, etc.

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

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

CMD [“streamlit”

,”run”, “streamlit_app. py”] EXPOSE 8501 Conclude In this tutorial, we saw how we can develop a stunning UI with pure Python, and deploy it with Docker. For more information

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