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

Posted by

Python is among the typical programming languages for automating SEO processes.

One of 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 plan.

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 plan) that gives us the power for producing nice-looking apps with no front-end development knowledge.

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

You use pure Python to establish your front-end.

When Will The Streamlit Library End Up Being Useful?

Firstly, if you are coding Python scripts that run routinely on a device with a job scheduler like cron, Streamlit isn’t useful for you.

But if you are establishing a tool that you want to share with your staff member, for instance, a keyword research study app, you can utilize Streamlit.

Also, if you require a user authentication technique, the Streamlit community developed a plan that can handle it for you.

Produce A Streamlit App: Starting

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

Before beginning, produce a folder on your maker, and call it what you want.

Also, I will presume you have actually installed Python prior to and know the basics of Python shows.

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

  • Demands.
  • 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.

Installing The Streamlit Package

First off, I prefer to create a virtual environment by running python3 -m venv.env, and after that setting up the Streamlit plan by running pip3 install streamlit.

Now create 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 apply for my different 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 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 requests, we need to utilize the Requests bundle. To get this package, you need to run pip3 install demands.

Likewise, to parse the autocomplete API response, we require to import the Python requirement JSON library.

First off, we import the JSON standard library, the Demands plan for making demands, and Streamlit for producing our app.

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

I utilized change function two times to keep everything easy, however you can utilize re library for using 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 queries for a seed keyword Args: keyword (str): The seed keyword Returns: list [str]: A list of the autocomplete queries “”” google_autocomplete_api: str=”https://www.google.com/complete/search” google_autocomplete_params: dict = reaction = requests.get(google_autocomplete_api, params=google_autocomplete_params) list_google_autocomplete_uncleaned: list [list] = json.loads((response.content). decode(“UTF-8”) [5:] [0] list_google_autocomplete_cleaned: list [str] = [component [0] change(“, “). change(“, “) for element in list_google_autocomplete_uncleaned] return list_google_autocomplete_cleaned

The Streamlit App

Up until now, we have set up the Streamlit plan and defined our function to get the Google autocomplete queries. Now, let’s produce the actual app.

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

Yes, it’s blank since we didn’t include any heading, and so on, 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 include 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 need to push Always returnto view the app modifications with no page refresh.

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

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

, there was an argument called”keyword “. This argument should 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 example, st.text _ input(“What is your seed keyword?”). Also, in order to use the input keyword later on to pass to our function, we should appoint it to a variable. input_google_autocomplete_keyword: str= st.text _ input( “What is your seed keyword?”)Now we wish to run our app when there is an input keyword. Here, we utilize an if statement

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 actually added a heading, a line of text, and an input text field to get the user seed keyword. Now we should 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”).

join(output_list_google_autocomplete )) Screenshot from author, October 2022 We built our simple app! Let’s alter the app title and favicon. Before that

, let’s see the Streamlit app section code up previously. 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 change the title and favicon

, we must utilize the st.set _ page_config (). Also, I choose the app

layout to be large (you can test it). st.set _ page_config

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

based upon the user’s system settings,

however personally, a lot of times, I learn the light style has much better contrast– and I do not desire my group to put their time into learning how to alter the app theme. To set a default theme for the Streamlit app, first, you need to create a folder, and name

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

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

license 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 package. To install it, in the terminal

located in your app folder, type the pip3 install streamlit-authenticator command, and import the plan into your app. I suggest you read the Streamlit authenticator bundle 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. credentials: usernames: firstUser: email: [email protected] name: The first username password: 12345 # Must 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: e-mails:[email protected] As in the bundle file you can see, now we need to 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 ()Developing A Login Widget Now we need to produce a login widget where users can input their username, password, and then login into the app.

First, you need to install the PyYAML plan with the pip3 set up pyyaml command and import it with the import yaml. Then create 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 [“credentials”], 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 Show The App To Successfully Logged In Users Now we can utilize 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 inaccurate’)elif authentication_status == None: st.warning(‘Please enter your username and password ‘)Deploy The Streamlit App With Docker Now we remain in the final action of establishing our app. You can utilize

various services for deploying your app, like

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

Before the Dockerfile, let’s develop 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 Finish up In this tutorial, we saw how we can create a sensational UI with pure Python, and release it with Docker. For more information

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