Interactive UI using Streamlit: Python

Introduction

When you're building an app, one of the most important things is making sure it looks good and is easy to use. That's where an interactive user interface (UI) comes in. An interactive UI helps users understand how to use your app and makes it more enjoyable. If you're using Python to build your app, Streamlit is a fantastic tool to create an interactive UI quickly and easily.

What is Streamlit?

Streamlit is a free and open-source Python library that allows you to create beautiful web apps for your data projects with just a few lines of code. It's designed to be simple and intuitive, so you don't need to be a web developer to build a great-looking app.

Why Use Streamlit?

  • Ease of Use: Streamlit is very user-friendly. You write your code in Python, and Streamlit handles the web development part for you.
  • Quick Setup: You can get a basic app up and running in just a few minutes.
  • Interactive Widgets: Streamlit comes with a range of interactive widgets like sliders, buttons, and text inputs that make your app engaging.

Implementation

Let's create a streamlit demo UI for your understanding.

import streamlit as st
from streamlit_option_menu import option_menu # import this if you want to add option menu 
import pandas as pd # to create sample data for chart 
# add  image to your app 
st.image("icon.png")

# Set up the title and header
st.title('Streamlit Demo App')
st.header('Welcome to Streamlit!')
# Add an option menu 
selected = option_menu(
            menu_title= None,
            options=["Option1", "Option2", "Option3","Option4"],
            icons = ["cast", "cloud-upload", "cast"],
            default_index=0,
            orientation="horizontal",
        )
st.markdown("Welcome to my app....................")
# Add an expender to your app 
st.markdown("""\n""")
with st.expander("About App"):
        st.write("""
        This is a simple app that displays a title, header, and an image.
        - We working on this project """)

# add sidebar
with st.sidebar:
    st.title('Your Sidebar')
    st.markdown("Add content")
    st.button("Button")


# Inorder to Chart create sample data
data = pd.DataFrame({
    'x': range(10),
    'y': [i**2 for i in range(10)]
})

# Create a line chart
st.line_chart(data.set_index('x'))

st.markdown("""\n""")
# Add a slider
number = st.slider('Select a number', 0, 100)
# Show the selected number
st.write(f'You selected: {number}')

# Add a button
if st.button('Say Hello'):
    st.write('Hello, Streamlit!')

Streamlit Chart

Conclusion

Streamlit is a powerful tool for making interactive UIs for your Python apps. It's easy to use and can help you create engaging applications without needing extensive web development skills. By using Streamlit, you can focus on your app's functionality and let the library handle the user interface. Give it a try, and you’ll see how quickly you can turn your Python code into a polished, interactive app!


Recommended Free Ebook
Similar Articles