Spaces:
Running
Running
import streamlit as st | |
def main(): | |
st.set_page_config( | |
page_title="Learn Streamlit", | |
page_icon="π", | |
layout="wide", | |
initial_sidebar_state="expanded" | |
) | |
st.title("π Streamlit Learning App") | |
st.markdown("Learn Streamlit by exploring this interactive app!") | |
# Sidebar navigation | |
st.sidebar.title("Navigation") | |
page = st.sidebar.radio( | |
"Go to", | |
["Home", "Basic Elements", "Layouts", "Widgets", "Advanced Features"] | |
) | |
if page == "Home": | |
show_home() | |
elif page == "Basic Elements": | |
show_basic_elements() | |
elif page == "Layouts": | |
show_layouts() | |
elif page == "Widgets": | |
show_widgets() | |
elif page == "Advanced Features": | |
show_advanced_features() | |
def show_home(): | |
st.header("Welcome to Streamlit Learning!") | |
st.markdown(""" | |
This app demonstrates various Streamlit features while teaching you how to use them. | |
**How to use this app:** | |
1. Select a topic from the sidebar | |
2. See live examples of Streamlit code | |
3. View the code that creates each example | |
4. Try modifying the code in the expanders | |
""") | |
st.image("https://streamlit.io/images/brand/streamlit-logo-secondary-colormark-darktext.png", width=300) | |
with st.expander("Quick Streamlit Facts"): | |
st.markdown(""" | |
- Streamlit turns data scripts into shareable web apps in minutes | |
- No front-end experience required | |
- Pure Python | |
- Open source (Apache License 2.0) | |
- First released in October 2019 | |
""") | |
def show_basic_elements(): | |
st.header("Basic Streamlit Elements") | |
st.subheader("Text Elements") | |
st.code(""" | |
st.title("This is a title") # Displays text in title formatting | |
st.header("This is a header") # Section header | |
st.subheader("This is a subheader") # Subsection header | |
st.text("This is plain text") # Fixed-width and monospace text | |
st.markdown("This is **markdown**") # Markdown formatting | |
st.write("This is multi-purpose write") # Can handle multiple arguments | |
""") | |
st.subheader("Display Elements") | |
st.code(""" | |
st.dataframe(pandas_dataframe) # Interactive dataframe | |
st.table(static_data) # Static table | |
st.json({"key": "value"}) # Interactive JSON | |
st.metric("Metric", 42, delta=1.2) # Metric display | |
""") | |
col1, col2 = st.columns(2) | |
with col1: | |
st.info("This is an info message") | |
st.success("This is a success message!") | |
with col2: | |
st.warning("This is a warning message") | |
st.error("This is an error message") | |
def show_layouts(): | |
st.header("Streamlit Layouts") | |
st.subheader("Columns") | |
st.code(""" | |
col1, col2 = st.columns(2) # Create two columns | |
with col1: | |
st.write("Content in column 1") | |
with col2: | |
st.write("Content in column 2") | |
""") | |
# Example of columns | |
col1, col2, col3 = st.columns([1, 2, 1]) | |
with col1: | |
st.write("Narrow column") | |
with col2: | |
st.write("Wide column") | |
with col3: | |
st.write("Another narrow column") | |
st.subheader("Expander") | |
st.code(""" | |
with st.expander("Click to expand"): | |
st.write("Hidden content that appears when expanded") | |
""") | |
with st.expander("Example Expander"): | |
st.write("This content was hidden but now it's visible!") | |
st.image("https://via.placeholder.com/150", width=100) | |
st.subheader("Tabs") | |
st.code(""" | |
tab1, tab2 = st.tabs(["Tab 1", "Tab 2"]) | |
with tab1: | |
st.write("Content for tab 1") | |
with tab2: | |
st.write("Content for tab 2") | |
""") | |
tab1, tab2 = st.tabs(["First Tab", "Second Tab"]) | |
with tab1: | |
st.write("This is the first tab") | |
with tab2: | |
st.write("This is the second tab") | |
def show_widgets(): | |
st.header("Streamlit Widgets") | |
st.subheader("Input Widgets") | |
st.code(""" | |
st.button("Click me") # Button | |
st.checkbox("I agree") # Checkbox | |
st.radio("Choose one", ["A", "B", "C"]) # Radio buttons | |
st.selectbox("Select", ["Option 1", "Option 2"]) # Dropdown select | |
st.multiselect("Choose many", ["A", "B", "C"]) # Multi-select | |
st.slider("Slide", 0, 100) # Slider | |
st.select_slider("Slide to select", ["Bad", "Good", "Excellent"]) # Select slider | |
st.text_input("Enter text") # Text input | |
st.number_input("Enter number") # Number input | |
st.text_area("Enter long text") # Text area | |
st.date_input("Pick a date") # Date input | |
st.time_input("Pick a time") # Time input | |
st.file_uploader("Upload a file") # File uploader | |
st.color_picker("Pick a color") # Color picker | |
""") | |
# Interactive widget demo | |
col1, col2 = st.columns(2) | |
with col1: | |
name = st.text_input("What's your name?") | |
age = st.slider("How old are you?", 0, 100, 25) | |
color = st.color_picker("Pick your favorite color") | |
with col2: | |
if name: | |
st.write(f"Hello, {name}!") | |
st.write(f"You're {age} years old") | |
st.write("Your favorite color is:") | |
st.markdown(f'<div style="width:100%; height:50px; background:{color};"></div>', unsafe_allow_html=True) | |
def show_advanced_features(): | |
st.header("Advanced Streamlit Features") | |
st.subheader("Session State") | |
st.code(""" | |
# Initialize session state | |
if 'counter' not in st.session_state: | |
st.session_state.counter = 0 | |
# Increment counter | |
if st.button('Increment'): | |
st.session_state.counter += 1 | |
st.write('Count:', st.session_state.counter) | |
""") | |
# Session state example | |
if 'counter' not in st.session_state: | |
st.session_state.counter = 0 | |
col1, col2, col3 = st.columns(3) | |
with col1: | |
if st.button('Increment'): | |
st.session_state.counter += 1 | |
with col2: | |
if st.button('Decrement'): | |
st.session_state.counter -= 1 | |
with col3: | |
if st.button('Reset'): | |
st.session_state.counter = 0 | |
st.write('Current count:', st.session_state.counter) | |
st.subheader("Caching") | |
st.code(""" | |
@st.cache_data # Cache data processing functions | |
def expensive_computation(a, b): | |
time.sleep(2) # Simulate slow computation | |
return a * b | |
result = expensive_computation(5, 10) | |
st.write(result) | |
""") | |
import time | |
def expensive_computation(a, b): | |
time.sleep(2) # Simulate slow computation | |
return a * b | |
if st.button("Run expensive computation (cached)"): | |
result = expensive_computation(5, 10) | |
st.write("Result:", result) | |
st.info("Notice how the cached version runs instantly after the first run!") | |
if __name__ == "__main__": | |
main() |