Streamlit Full Course

Streamlit can help businesses automate a ton of tasks in a short amount of time. It essentially is a quick UI you can throw on top of Python code allowing you to build models and spreadsheet calculations very quickly.

In this course we are going to cover the basics of Streamlit from creating your first app to building 4 projects that cover APIs and AI.

Below is a full YouTube video you can watch in parallel with this tutorial. Also if you need any Streamlit help, I’m taking on customers

1-1

				
					# ------ Installing and launching Streamlit ------
# In terminal:
# pip install streamlit
# streamlit hello
# ------ streamlit run


# ------ Running your first app ------
import streamlit as st

st.hello()

# Save the file (e.g., app.py) and show web again in browser.
# ------ streamlit run


# ------ Understanding Streamlit's re-execution model ------
st.title("Re-execution Demo")

name = st.text_input("Enter your name")

if name:
    st.write(f"Hello, {name}!")
else:
    st.write("Please type your name above.")

print("Script executed!")

# Save the file and refresh the web app to see changes.
# ------ streamlit run
				
			

1-2

				
					# ------ Using elements: title, header, subheader, markdown, text ------
import streamlit as st

st.title("This is a Title")
st.header("This is a Header")
st.subheader("This is a Subheader")

st.markdown("**Markdown** _is_ supported! [Visit Streamlit](https://streamlit.io)")
st.text("This is plain text")
st.write("`st.write()` can handle *mixed content*, like **bold**, _italic_, and numbers:", 123)

# Save the file and show web again.
# ------ streamlit run


# ------ Displaying formatted text, code blocks, and LaTeX ------
st.markdown("### Code Block Example")
st.code("""
# Python example
def greet(name):
    return f"Hello, {name}!"
print(greet("Streamlit"))
""", language="python")

st.markdown("#### Inline LaTeX: $a^2 + b^2 = c^2$")
st.latex(r"\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}")

# Save and refresh the web app.
# ------ streamlit run


# ------ Showing feedback messages ------
st.success("This is a success message!")
st.warning("Be careful! This is a warning.")
st.error("Oops! Something went wrong.")
st.info("This is some information.")

# Adding a helpful tip:
st.markdown("> **Tip:** Use feedback messages to guide the user.")

# Save and refresh again.
# ------ streamlit run
				
			

1-3

				
					# ------ Basic interaction: button, radio, checkbox ------
import streamlit as st

if st.button("Click Me"):
    st.write("Button clicked!")

choice = st.radio("Choose an option:", ["Option 1", "Option 2", "Option 3"])
st.write("You selected:", choice)

agree = st.checkbox("I agree")
if agree:
    st.write("Thanks for agreeing!")

# Save and refresh.
# ------ streamlit run


# ------ Selectors: selectbox, multiselect ------
fruit = st.selectbox("Pick a fruit:", ["Apple", "Banana", "Orange"])
st.write("Your favorite fruit is:", fruit)

colors = st.multiselect("Pick some colors:", ["Red", "Green", "Blue", "Yellow"])
st.write("You chose:", colors)

# Save and refresh.
# ------ streamlit run


# ------ User inputs: slider, number input, text input, text area ------
age = st.slider("Select your age:", 0, 100, 25)
st.write("Age:", age)

number = st.number_input("Enter a number:", min_value=0, max_value=100, value=10)
st.write("Number:", number)

name = st.text_input("Enter your name:")
st.write("Hello,", name)

bio = st.text_area("Write a short bio:")
st.write("Your bio:", bio)

# Save and refresh.
# ------ streamlit run


# ------ Date and time pickers ------
date = st.date_input("Pick a date")
st.write("Selected date:", date)

time = st.time_input("Pick a time")
st.write("Selected time:", time)

# Save and refresh.
# ------ streamlit run


# ------ File uploader for reading external files ------
uploaded_file = st.file_uploader("Upload a text file", type=["txt"])

if uploaded_file is not None:
    content = uploaded_file.read().decode("utf-8")
    st.text_area("File Content", content, height=200)

# Save and refresh.
# ------ streamlit run
				
			

1-4

				
					# ------ Showing tables and dataframes ------
import streamlit as st
import pandas as pd

data = {
    "Name": ["Alice", "Bob", "Charlie"],
    "Age": [25, 30, 35],
    "City": ["New York", "London", "Paris"]
}
df = pd.DataFrame(data)

st.write("### Using st.write() for DataFrame")
st.write(df)

st.table(df)  # Static table
st.dataframe(df)  # Scrollable and interactive

# Save and refresh.
# ------ streamlit run


# ------ Displaying JSON and dictionaries ------
person = {
    "name": "Alice",
    "age": 25,
    "skills": ["Python", "Streamlit", "Data Science"]
}

st.json(person)  # Pretty JSON format
st.write("Dictionary displayed with st.write():", person)

# Save and refresh.
# ------ streamlit run


# ------ Using editable tables with data editor ------
editable_df = st.data_editor(df, num_rows="dynamic")  # Editable in the browser
st.write("Updated DataFrame:")
st.write(editable_df)

# Save and refresh.
# ------ streamlit run
				
			

1-5

				
					# ------ Organizing apps: container, columns, expander ------
import streamlit as st

with st.container():
    st.write("This is inside a container")

col1, col2 = st.columns(2)
with col1:
    st.write("Column 1 content")
with col2:
    st.write("Column 2 content")

with st.expander("More info"):
    st.write("Hidden content revealed when expanded")

# Save and refresh.
# ------ streamlit run


# ------ Sidebar integration for navigation and filters ------
option = st.sidebar.selectbox("Select page:", ["Home", "Settings", "About"])
st.sidebar.write("Sidebar content here")

st.write(f"Current page: {option}")

# Save and refresh.
# ------ streamlit run


# ------ Dividers and captions for clean layout ------
st.write("Above the divider")
st.divider()  # horizontal line

st.caption("This is a small caption text below")

# Save and refresh.
# ------ streamlit run
				
			

1-6

				
					# ------ Displaying images and charts ------
import streamlit as st
from PIL import Image
import pandas as pd
import numpy as np
import matplotlib.pyplot as plt

# Display image
img = Image.new('RGB', (200, 100), color='skyblue')
st.image(img, caption="Sample Image", use_column_width=True)

# Simple line chart
data = pd.DataFrame(np.random.randn(20, 3), columns=['a', 'b', 'c'])
st.line_chart(data)

# Save and refresh.
# ------ streamlit run


# ------ Playing audio and video files ------
audio_file = open("sample_audio.mp3", "rb") if False else None  # Replace False with True to test locally
video_file = open("sample_video.mp4", "rb") if False else None  # Replace False with True to test locally

if audio_file:
    st.audio(audio_file.read(), format='audio/mp3')

if video_file:
    st.video(video_file.read())

# Save and refresh.
# ------ streamlit run


# ------ Embedding YouTube or external video ------
st.video("https://www.youtube.com/watch?v=9bZkp7q19f0")  # Example YouTube link

# Save and refresh.
# ------ streamlit run
				
			

1-7

				
					# ------ Using markdown for headings, lists, links, and tables ------
import streamlit as st

st.markdown("# Heading 1")
st.markdown("## Heading 2")
st.markdown("### Heading 3")

st.markdown("""
- Bullet list item 1
- Bullet list item 2
  - Nested item
1. Numbered list item 1
2. Numbered list item 2

[Streamlit website](https://streamlit.io)

| Column 1 | Column 2 | Column 3 |
| -------- | -------- | -------- |
| Row 1    | Data     | More     |
| Row 2    | Data     | More     |
""")

# Save and refresh.
# ------ streamlit run


# ------ Embedding raw HTML (with caution) ------
# HTML rendering can be risky - use carefully.
html_code = """
<div style='background-color: lightyellow; padding: 10px;'>
  <h3>Custom HTML block</h3>
  <p style='color: green;'>This is green text inside a div.</p>
</div>
"""
st.markdown(html_code, unsafe_allow_html=True)

# Save and refresh.
# ------ streamlit run
				
			

1 Project

				
					# ------ Personal Resume App (Advanced with placeholders) ------
import streamlit as st
import pandas as pd

# Sidebar for navigation
st.sidebar.title("Navigation")
section = st.sidebar.radio("Go to", ["About", "Skills", "Experience", "Education", "Contact"])

# Data for skills
skills = {
    "Python": 0.9,
    "Machine Learning": 0.85,
    "Data Visualization": 0.8,
    "SQL": 0.75,
    "Big Data": 0.6,
}

# Header with name and title
st.title("?anyname")
st.subheader("Data Scientist")

if section == "About":
    st.markdown(f"""
    Experienced data scientist with strong skills in analytics, machine learning, and storytelling with data.
    Passionate about turning data into actionable insights.
    """)

elif section == "Skills":
    st.header("Skills Overview")
    for skill, level in skills.items():
        st.write(f"{skill}")
        st.progress(level)
    df_skills = pd.DataFrame({
        "Skill": list(skills.keys()),
        "Proficiency": list(skills.values())
    })
    st.bar_chart(df_skills.set_index("Skill")) #I will write a section and more about plotting in streamlit in the intermediate section, now we can just add it I guess
    

elif section == "Experience":
    st.header("Work Experience")

    with st.expander(f"Data Scientist | ?anycompanyname | Jan 2021 - Present"):
        st.write(f"""
        - Developed predictive models that increased sales by 15%.  
        - Automated data pipelines saving 10+ hours/week.  
        - Collaborated with cross-functional teams to deploy ML models in production.
        """)

    with st.expander(f"Data Analyst | ?anycompanyname | Jun 2018 - Dec 2020"):
        st.write(f"""
        - Created dashboards that improved decision-making.  
        - Analyzed customer data to improve retention by 12%.
        """)

elif section == "Education":
    st.header("Education")
    st.write(f"**M.S. in Data Science** — University of Data, 2020")
    st.write(f"**B.S. in Computer Science** — Tech University, 2017")

elif section == "Contact":
    st.header("Get in Touch")
    col1, col2 = st.columns(2)
    with col1:
        email = st.text_input("Email")
        phone = st.text_input("Phone")
    with col2:
        linkedin = st.text_input("LinkedIn URL")
        portfolio = st.text_input("Portfolio URL")

    message = st.text_area("Message")

    if st.button("Send"):
        st.success("Thanks for reaching out! I'll get back to you soon.")

# Save and refresh.
# ------ streamlit run
				
			

2-1

				
					# ------ Using session state to store user interactions ------
import streamlit as st

st.title("Session State Demo")

# Initialize a counter if it doesn't exist
if "counter" not in st.session_state:
    st.session_state.counter = 0

if st.button("Increment"):
    st.session_state.counter += 1

st.write("Counter value:", st.session_state.counter)

# Save and refresh.
# ------ streamlit run


# ------ Initializing, updating, and persisting session data ------
# Default values for multiple keys
if "name" not in st.session_state:
    st.session_state.name = "Guest"

name_input = st.text_input("Enter your name", st.session_state.name)
if name_input != st.session_state.name:
    st.session_state.name = name_input

st.write("Hello,", st.session_state.name)

# Save and refresh.
# ------ streamlit run


# ------ Conditional display based on user state ------
if "logged_in" not in st.session_state:
    st.session_state.logged_in = False

if not st.session_state.logged_in:
    if st.button("Login"):
        st.session_state.logged_in = True
        st.success("You are now logged in!")
else:
    st.write("Welcome back!")
    if st.button("Logout"):
        st.session_state.logged_in = False

# Save and refresh.
# ------ streamlit run
				
			

2-2

				
					# ------ Reading CSV, Excel, and JSON files ------
import streamlit as st
import pandas as pd
import json

st.title("File Upload and Preview")

uploaded_file = st.file_uploader("Upload a CSV, Excel, or JSON file", type=["csv", "xlsx", "json"])

if uploaded_file:
    if uploaded_file.name.endswith(".csv"):
        df = pd.read_csv(uploaded_file)
        st.write("CSV Preview:")
        st.dataframe(df.head())

    elif uploaded_file.name.endswith(".xlsx"):
        df = pd.read_excel(uploaded_file)
        st.write("Excel Preview:")
        st.dataframe(df.head())

    elif uploaded_file.name.endswith(".json"):
        data = json.load(uploaded_file)
        st.write("JSON Preview:")
        st.json(data)

# Save and refresh.
# ------ streamlit run


# ------ Validating uploaded files and showing previews ------
if uploaded_file:
    file_size = uploaded_file.size / 1024  # size in KB
    st.write(f"File name: {uploaded_file.name}, Size: {file_size:.2f} KB")
    if file_size > 500:
        st.warning("File is large! Preview may be limited.")

# Save and refresh.
# ------ streamlit run


# ------ Caching data and resources for performance ------
@st.cache_data
def load_large_csv(file):
    return pd.read_csv(file)

st.write("Upload a large CSV for caching demo")
large_csv = st.file_uploader("Upload CSV for caching", type=["csv"], key="large")

if large_csv:
    df_large = load_large_csv(large_csv)
    st.write("Cached CSV Loaded:")
    st.dataframe(df_large.head())

# Save and refresh.
# ------ streamlit run
				
			

2-3

				
					# ------ Using built-in charting options: line, bar, area charts ------
import streamlit as st
import pandas as pd
import numpy as np

st.title("Built-in Charts")

data = pd.DataFrame(np.random.randn(20, 3), columns=['A', 'B', 'C'])

st.subheader("Line Chart")
st.line_chart(data)

st.subheader("Area Chart")
st.area_chart(data)

st.subheader("Bar Chart")
st.bar_chart(data)

# Save and refresh.
# ------ streamlit run


# ------ Creating visualizations with Plotly ------
import plotly.express as px

st.subheader("Plotly Example")
fig = px.scatter(data, x='A', y='B', color='C', title="Plotly Scatter")
st.plotly_chart(fig)

# Save and refresh.
# ------ streamlit run


# ------ Creating visualizations with Altair ------
import altair as alt

st.subheader("Altair Example")
chart = alt.Chart(data).mark_line().encode(
    x='A',
    y='B',
    color='C'
)
st.altair_chart(chart, use_container_width=True)

# Save and refresh.
# ------ streamlit run


# ------ Creating visualizations with Seaborn and Matplotlib ------
import matplotlib.pyplot as plt
import seaborn as sns

st.subheader("Seaborn Example")
fig, ax = plt.subplots()
sns.histplot(data['A'], kde=True, ax=ax)
st.pyplot(fig)

# Save and refresh.
# ------ streamlit run


# ------ Adding interactivity and themes to charts ------
# Example: Theme toggle with a checkbox
st.subheader("Interactive Theme Example")
dark_mode = st.checkbox("Enable Dark Theme")

fig = px.line(data, x=data.index, y='A', title="Interactive Line Chart")
if dark_mode:
    fig.update_layout(template="plotly_dark")

st.plotly_chart(fig)

# Save and refresh.
# ------ streamlit run
				
			

2-4

				
					# ------ Grouping widgets into forms ------
import streamlit as st

st.title("Forms Demo")

with st.form("contact_form"):
    name = st.text_input("Name")
    email = st.text_input("Email")
    message = st.text_area("Message")
    submitted = st.form_submit_button("Submit")

if submitted:
    st.success(f"Thanks {name}, we'll contact you at {email}!")

# Save and refresh.
# ------ streamlit run


# ------ Using form submit buttons with logic ------
with st.form("calc_form"):
    num1 = st.number_input("Enter first number", step=1)
    num2 = st.number_input("Enter second number", step=1)
    calculate = st.form_submit_button("Calculate Sum")

if calculate:
    st.write(f"Result: {num1 + num2}")

# Save and refresh.
# ------ streamlit run


# ------ Creating step-by-step workflows ------

st.title("Step-by-Step Workflow")

# Initialize state
if "step" not in st.session_state:
    st.session_state.step = 1
if "name" not in st.session_state:
    st.session_state.name = ""
if "choice" not in st.session_state:
    st.session_state.choice = ""

# Step transition functions
def next_step():
    st.session_state.step += 1

def restart():
    st.session_state.step = 1
    st.session_state.name = ""
    st.session_state.choice = ""

# Step 1
if st.session_state.step == 1:
    st.write("Step 1: Enter your name")
    st.text_input("Name", value=st.session_state.name, key="name")
    st.button("Next", on_click=next_step)

# Step 2
elif st.session_state.step == 2:
    st.write(f"Hello {st.session_state.name}, Step 2: Choose your preference")
    st.radio("Choose your favorite fast casual spot:", ["Chipotle", "Moe's"], key="choice")
    st.button("Next", on_click=next_step)

# Step 3
elif st.session_state.step == 3:
    st.write(f"Final Step: You selected {st.session_state.choice}")
    st.button("Restart", on_click=restart)

# Save and refresh.
# ------ streamlit run
				
			

2-5

				
					import streamlit as st
import requests
import pandas as pd

st.title("Bitcoin Price Tracker (via CoinGecko)")

# --------- Current Price ---------
price_url = "https://api.coingecko.com/api/v3/simple/price?ids=bitcoin&vs_currencies=usd"

try:
    price_response = requests.get(price_url, timeout=10)
    price_response.raise_for_status()
    price = price_response.json()["bitcoin"]["usd"]
    st.metric(label="Bitcoin Price (USD)", value=f"${price:,}")
except requests.exceptions.RequestException as e:
    st.error(f"Failed to fetch current price: {e}")

# --------- Historical Data ---------
history_url = "https://api.coingecko.com/api/v3/coins/bitcoin/market_chart"
params = {"vs_currency": "usd", "days": "30", "interval": "daily"}

try:
    history_response = requests.get(history_url, params=params, timeout=10)
    history_response.raise_for_status()
    prices = history_response.json()["prices"]

    df = pd.DataFrame(prices, columns=["Timestamp", "Price"])
    df["Date"] = pd.to_datetime(df["Timestamp"], unit='ms')
    st.line_chart(df.set_index("Date")["Price"])

except requests.exceptions.RequestException as e:
    st.error(f"Failed to fetch historical data: {e}")

				
			

2-6-1

				
					[theme]
base = "dark"
primaryColor = "#FF5722"
backgroundColor = "#1E1E1E"
secondaryBackgroundColor = "#2C2C2C"
textColor = "#FAFAFA"
font = "monospace"

				
			
				
					# ------ Creating multipage apps using folders and config files ------
# Project structure:
# my_app/
# ├── Home.py
# ├── pages/
# │   ├── 1_About.py
# │   ├── 2_Contact.py
# └── .streamlit/
#     └── config.toml

# Example Home.py content:
import streamlit as st

st.title("Welcome to My Multipage App")
st.write("Use the sidebar to navigate between pages.")

# ------ streamlit run Home.py

# config.toml example (inside .streamlit folder):
# [theme]
# base="light"
# primaryColor="#4CAF50"
# font="sans serif"
				
			

2-6-2

				
					# ------ Sidebar or header-based navigation ------
import streamlit as st

st.title("Sidebar Navigation Example")

pages = ["Home", "Dashboard", "Settings"]
choice = st.sidebar.radio("Go to", pages)

if choice == "Home":
    st.header("Home Page")
    st.write("Welcome!")
elif choice == "Dashboard":
    st.header("Dashboard Page")
    st.write("Metrics and charts go here.")
elif choice == "Settings":
    st.header("Settings Page")
    st.write("User preferences here.")

# ------ streamlit run
				
			

2-6-3

				
					import streamlit as st

# ------ Organizing large apps with reusable components ------
# Example of using functions for reusable UI components
def show_header(title):
    st.markdown(f"## {title}")

def show_metric(label, value):
    st.metric(label=label, value=value)

# Using the reusable functions
show_header("Dashboard")
show_metric("Revenue", "$10,000")
show_metric("Users", "1,250")

# ------ streamlit run
				
			

2-7

				
					# ------ Setting up config files for layout and branding ------
# Create a folder: .streamlit/
# Inside it, create config.toml file:
#
# Example config.toml:
# [theme]
# base="light"
# primaryColor="#4CAF50"
# backgroundColor="#FFFFFF"
# secondaryBackgroundColor="#F0F0F0"
# textColor="#000000"
# font="sans serif"
#
# [server]
# headless = true
# runOnSave = true
#
# [browser]
# gatherUsageStats = false

# Save and restart Streamlit to apply config.
# ------ streamlit run


# ------ Adding custom titles, icons, and styles ------
import streamlit as st

# Set page title, icon, layout
st.set_page_config(
    page_title="My Custom App",
    page_icon="📊",
    layout="wide",  # Options: "centered", "wide"
    initial_sidebar_state="expanded"
)

st.title("Custom Branding Example")
st.write("This app has a custom page title, icon, and wide layout.")

# ------ streamlit run

				
			

2 - Project 1

				
					# ------ Realtime Dashboard with yfinance API ------
import streamlit as st
import yfinance as yf
import pandas as pd
from datetime import date

st.set_page_config(page_title="Stock Dashboard", page_icon="📈", layout="wide")

st.title("📈 Realtime Stock Dashboard")

# Sidebar for user input
st.sidebar.header("Stock Settings")
ticker_symbol = st.sidebar.text_input("Enter Stock Symbol", "AAPL")  # Default: Apple
period = st.sidebar.selectbox("Select Period", ["1d", "5d", "1mo", "6mo", "1y", "5y"])
interval = st.sidebar.selectbox("Select Interval", ["1m", "5m", "15m", "1h", "1d"])

# Fetch data
ticker = yf.Ticker(ticker_symbol)
data = ticker.history(period=period, interval=interval)

# Show latest price
latest_price = data["Close"].iloc[-1] if not data.empty else "N/A"
st.metric(label=f"Current Price: {ticker_symbol}", value=f"${latest_price:.2f}" if latest_price != "N/A" else "No Data")

# Chart section
st.subheader(f"Price Chart for {ticker_symbol}")
if not data.empty:
    st.line_chart(data["Close"])
else:
    st.warning("No data available for this symbol.")

# Add additional info in columns
col1, col2, col3 = st.columns(3)
with col1:
    st.write("**Previous Close:**", ticker.info.get("previousClose", "N/A"))
with col2:
    st.write("**Market Cap:**", ticker.info.get("marketCap", "N/A"))
with col3:
    st.write("**52-Week High:**", ticker.info.get("fiftyTwoWeekHigh", "N/A"))

# Refresh notice
st.caption("Refresh the page or adjust interval for updated data.")

# ------ streamlit run
				
			

2 - Project 2

				
					import pandas as pd 
import streamlit as st
import googlemaps
import requests


API_KEY = ""


denver_locations = [
    {'location': 'Pikes Peak', 'Address': '515 Ruxton Ave, Manitou Springs, CO 80829'},
    {'location': 'Magnolia Road', 'Address': '45 Peak to Peak Hwy, Nederland, CO 80466'},
    
    {'location': 'Coors Field', 'Address': '2001 Blake Street, Denver, CO 80205'},
    {'location': 'Denver Card Show', 'Address': '5004 National Western Dr, Denver, CO 80216'},

    
    {'location': 'Fillmore Auditorium', 'Address': '2001 Blake Street, Denver, CO 80205'},
    {'location': 'Mission Ballroom', 'Address': '4242 Wynkoop St, Denver, CO 80216'},
    {'location': 'Red Rock Ampitheater', 'Address': '18300 W Alameda Pkwy, Morrison, CO 80465'},   

  
]

st.title("House Distance Finder (Routes API)")
st.write("Enter your starting address:")

with st.form("address_form"):
    street = st.text_input("Street Address")
    city = st.text_input("City")
    state = st.text_input("State")
    zip_code = st.text_input("ZIP Code")
    submitted = st.form_submit_button("Submit")

if submitted:
    user_address = f"{street}, {city}, {state} {zip_code}"
    st.success(f"Calculating distances from: {user_address}")
    
    def get_distance_miles(origin, destination):
        url = f"https://routes.googleapis.com/directions/v2:computeRoutes?key={API_KEY}"

        headers = {
            "Content-Type": "application/json",
            "X-Goog-FieldMask": "routes.distanceMeters"
        }

        body = {
            "origin": {"address": origin},
            "destination": {"address": destination},
            "travelMode": "DRIVE"
        }

        try:
            response = requests.post(url, headers=headers, json=body)
            response.raise_for_status()
            data = response.json()

            meters = data["routes"][0]["distanceMeters"]
            miles = round(meters / 1609.34, 2)
            return miles
        except Exception as e:
            st.warning(f"Error for {destination}: {e}")
            return None

    # Collect results
    results = []
    for loc in nemours_locations:
        miles = get_distance_miles(user_address, loc["Address"])
        results.append({
            "location": loc["location"],
            "Address": loc["Address"],
            "Distance (mi)": miles
        })

    # Create and display DataFrame
    df = pd.DataFrame(results).set_index("location")
    df2 = df.sort_values('Distance (mi)')
    st.dataframe(df2)

				
			

3-1

				
					# ------ Advanced usage of session state ------
import streamlit as st

st.title("Advanced Session State Demo")

# Initialize state variables
if "count" not in st.session_state:
    st.session_state.count = 0

# Buttons to modify session state
if st.button("Increment"):
    st.session_state.count += 1
if st.button("Reset"):
    st.session_state.count = 0

st.write(f"Current Count: {st.session_state.count}")

# ------ streamlit run
				
			

3-2

				
					# ------ Overview of Streamlit Components system ------
import streamlit as st

st.title("Streamlit Components Overview")

st.write("""
Streamlit Components allow embedding of custom frontend elements
built with JavaScript/React inside Streamlit apps.
They enable enhanced interactivity beyond built-in widgets.
""")

# ------ streamlit run

# ------ Using third-party components from the community ------
import streamlit as st
from streamlit_lottie import st_lottie
import requests

st.title("Using Third-Party Components")

# Example: Display animated Lottie JSON animation
def load_lottieurl(url):
    r = requests.get(url)
    if r.status_code == 200:
        return r.json()
    return None

lottie_url = "https://assets10.lottiefiles.com/packages/lf20_1pxqjqps.json"
lottie_json = load_lottieurl(lottie_url)
st_lottie(lottie_json, height=200)

# ------ streamlit run


# ------ Creating a custom component with JavaScript or React ------
# Note: This requires Node.js and streamlit-component-template setup
#
# Steps:
# 1. Use Streamlit Component Template (https://github.com/streamlit/component-template)
# 2. Build your React/JS component inside the frontend folder
# 3. Use `streamlit run` for Python and `npm start` for frontend during dev
# 4. Import your component in Python and use it like a widget
#
# Minimal example usage:
# import my_component
# val = my_component.my_widget(label="Custom input")
# st.write(f"Value from component: {val}")
#
# we can say ssee Streamlit docs for detailed guide.

# ------ streamlit run
				
			

3-3-1

				
					# ------ Multi-tab or segmented views ------
import streamlit as st

st.title("Multi-Tab Example")

tabs = st.tabs(["Summary", "Details", "Settings"])

with tabs[0]:
    st.header("Summary")
    st.write("Overview content here.")

with tabs[1]:
    st.header("Details")
    st.write("Detailed info goes here.")

with tabs[2]:
    st.header("Settings")
    st.write("User preferences here.")

# ------ streamlit run

				
			

3-3-2

				
					# ------ Drill-down and filterable dashboards ------
import streamlit as st
import pandas as pd
import numpy as np

st.title("Drill-Down Dashboard")

data = pd.DataFrame({
    "Category": ["A", "A", "B", "B", "C", "C"],
    "Subcategory": ["A1", "A2", "B1", "B2", "C1", "C2"],
    "Value": np.random.randint(10, 100, 6)
})

category = st.selectbox("Select Category", data["Category"].unique())

filtered = data[data["Category"] == category]

st.write(f"Values for Category {category}")
st.table(filtered)

# ------ streamlit run
				
			

3-3-3

				
					# ------ Theming, CSS customization, and brand consistency ------
import streamlit as st

st.title("Custom Theming Example")

st.markdown(
    """
    <style>
    .css-1aumxhk {
        background-color: #f0f8ff;
    }
    .stButton>button {
        background-color: #4CAF50;
        color: white;
    }
    </style>
    """,
    unsafe_allow_html=True
)

st.button("Styled Button")

# Use .streamlit/config.toml for global themes

# ------ streamlit run
				
			

3-4-1

				
					# ------ Password protection using secrets ------
import streamlit as st

# Store password securely in .streamlit/secrets.toml:
# [auth]
# password = "your_password_here"

password_input = st.text_input("Enter password", type="password")

if password_input == st.secrets["auth"]["password"]:
    st.success("Access granted")
    st.write("Protected content goes here.")
else:
    st.warning("Enter the correct password")

# ------ streamlit run
# ------ OAuth integration with Auth0 or Firebase ------
# Note: Requires setup outside Streamlit and use of libraries like `authlib` or `pyrebase`
#
# Basic flow:
# 1. Redirect user to OAuth provider login page
# 2. Get access token and user info
# 3. Store user info in session state
#
# Streamlit-specific OAuth packages (e.g., streamlit-auth0) can simplify this.
#
# Example placeholder (no real code):
st.info("OAuth integration requires external setup.")
st.write("Use libraries like `authlib` or services like Auth0/Firebase.")

# ------ streamlit run
				
			

3-4-2

				
					# ------ Building role-based access systems ------
import streamlit as st

# Dummy user role stored in session_state for demo
if "user_role" not in st.session_state:
    st.session_state.user_role = None

def login(user):
    # Normally verify user here
    roles = {"admin": "admin", "user": "viewer"}
    st.session_state.user_role = roles.get(user, "viewer")

user = st.text_input("Username")
if st.button("Login"):
    login(user)

if st.session_state.user_role == "admin":
    st.success("Welcome Admin! You have full access.")
    st.write("Admin content here.")
elif st.session_state.user_role == "viewer":
    st.info("Welcome Viewer! You have limited access.")
    st.write("Viewer content here.")
else:
    st.warning("Please log in.")

# ------ streamlit run
				
			

3-5

				
					# ------ Allow users to download Excel, CSV, or PDF reports ------
import streamlit as st
import pandas as pd
from io import BytesIO
import base64

st.title("Export Data Demo")

# Sample data
df = pd.DataFrame({
    "Name": ["Alice", "Bob", "Charlie"],
    "Age": [25, 30, 35],
    "Score": [88, 92, 95]
})

st.dataframe(df)

# CSV download
csv = df.to_csv(index=False).encode()
st.download_button("Download CSV", csv, "data.csv", "text/csv")

# Excel download
def to_excel(df):
    output = BytesIO()
    with pd.ExcelWriter(output, engine="xlsxwriter") as writer:
        df.to_excel(writer, index=False, sheet_name="Sheet1")
    processed_data = output.getvalue()
    return processed_data

excel_data = to_excel(df)
st.download_button("Download Excel", excel_data, "data.xlsx", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet")

# PDF download (simple text PDF example)
from fpdf import FPDF

pdf = FPDF()
pdf.add_page()
pdf.set_font("Arial", size=12)
for i, row in df.iterrows():
    pdf.cell(200, 10, txt=f"{row['Name']}, Age: {row['Age']}, Score: {row['Score']}", ln=True)

pdf_bytes = pdf.output(dest='S').encode('latin1')  # Correct way to get PDF as bytes
st.download_button("Download PDF", pdf_bytes, "report.pdf", "application/pdf")

# ------ streamlit run

# ------ Enable upload history or file versioning ------
import streamlit as st

st.title("File Upload with History")

if "uploads" not in st.session_state:
    st.session_state.uploads = []

uploaded_file = st.file_uploader("Upload a file")

if uploaded_file:
    # Save metadata to session state for history
    st.session_state.uploads.append({
        "filename": uploaded_file.name,
        "size": uploaded_file.size,
        "type": uploaded_file.type
    })
    st.success(f"Uploaded {uploaded_file.name}")

st.write("Upload History:")
st.table(st.session_state.uploads)

# ------ streamlit run
				
			

3-6

				
					import streamlit as st
import time

st.title("Long-Running Task Demo")

with st.spinner("Processing... Please wait"):
    progress_bar = st.progress(0)  # create the progress bar once
    for i in range(100):
        time.sleep(0.05)  # simulate work
        progress_bar.progress(i + 1)  # update the existing progress bar

st.success("Task completed!")



# ------ streamlit run
# ------ Using Python async features for background work ------
import streamlit as st
import asyncio

st.title("Async Example")

async def async_task():
    for i in range(5):
        st.write(f"Async step {i+1}")
        await asyncio.sleep(1)

# Run async function inside sync Streamlit app
asyncio.run(async_task())

st.success("Async task done!")

# ------ streamlit run
# ------ Queue-based solutions for long tasks ------
# Example using Streamlit’s experimental queue (requires Streamlit version supporting this)
import streamlit as st

st.title("Queue-Based Background Tasks")

@st.cache_resource
def expensive_task(x):
    time.sleep(5)  # Simulate a time-consuming task
    return f"Result for input {x}"

input_val = st.text_input("Enter something")

if st.button("Run task"):
    with st.spinner("Running task in queue..."):
        result = expensive_task(input_val)
    st.success(result)

				
			

3-7

				
					# ------ Connecting to MySQL and executing queries ------
import streamlit as st
import mysql.connector
import pandas as pd

st.title("MySQL Database Query")

# Input connection details
host = st.text_input("MySQL Host", "localhost")
user = st.text_input("Username", "root")
password = st.text_input("Password", type="password")
database = st.text_input("Database Name")

query = st.text_area("SQL Query", "SELECT * FROM your_table LIMIT 10")

if st.button("Run Query"):
    try:
        # Connect to MySQL
        conn = mysql.connector.connect(
            host=host,
            user=user,
            password=password,
            database=database,
        )
        cursor = conn.cursor(dictionary=True)
        cursor.execute(query)
        result = cursor.fetchall()
        cursor.close()
        conn.close()

        # Convert result to DataFrame
        df = pd.DataFrame(result)
        st.dataframe(df)

    except Exception as e:
        st.error(f"Error: {e}")

# ------ streamlit run
				
			

3 Project

				
					OPENAI_API_KEY = "your_openai_api_key_here"



import os
import streamlit as st
from langchain.chat_models import ChatOpenAI
from langchain.chains import ConversationChain
from langchain.memory import ConversationBufferMemory

# App title
st.title("AI Chat Assistant with Memory")

# Load OpenAI API key
os.environ["OPENAI_API_KEY"] = st.secrets["OPENAI_API_KEY"]

# Initialize memory and chain
if "memory" not in st.session_state:
    st.session_state.memory = ConversationBufferMemory()
if "chain" not in st.session_state:
    llm = ChatOpenAI(model_name="gpt-4o", temperature=0)
    st.session_state.chain = ConversationChain(llm=llm, memory=st.session_state.memory)

# Input form
with st.form("chat_form", clear_on_submit=True):
    user_input = st.text_input("You:", key="user_input")
    submitted = st.form_submit_button("Send")

# Run chain
if submitted and user_input:
    response = st.session_state.chain.invoke(user_input)
    st.session_state.last_response = response  # Optional display variable

# Show conversation history
if st.session_state.memory.buffer:
    st.markdown("### Conversation History")
    for line in st.session_state.memory.buffer.strip().split("\n"):
        if line.strip():
            st.write(line)

				
			

Leave a Reply

Your email address will not be published. Required fields are marked *