Update src/streamlit_app.py

src/streamlit_app.py

@@ -1,40 +1,96 @@
-import altair as alt
-import numpy as np
-import pandas as pd
 import streamlit as st
+import time
+
+# --- Page Configuration ---
+# This should be the first Streamlit command in your app
+st.set_page_config(
+    page_title="Streamlit Basics",
+    page_icon="🎈",
+    layout="wide",
+)
+
+# --- Sidebar ---
+# You can add widgets to the sidebar using `st.sidebar.`
+st.sidebar.title("App Controls")
+st.sidebar.markdown("Use these widgets to see the app update!")
+
+# WIDGET 1: Checkbox (Boolean)
+show_balloons = st.sidebar.checkbox("Show balloons on button click?", value=True)
+
+# WIDGET 2: Slider (Number)
+number_of_items = st.sidebar.slider(
+    "How many items?",
+    min_value=1,
+    max_value=10,
+    value=5
+)
+
+# --- Main Page Content ---
+st.title("Welcome to Streamlit Basics! 🎈")
+st.markdown(
+    """
+    This is a super simple app to show you how Streamlit works.
+    Notice how the app reruns from top to bottom every time you
+    interact with a widget in the sidebar.
+    """
+)
+st.divider()
+
+# --- Section 1: Text Input ---
+st.header("1. Text Input")
+st.markdown("Whatever you type here is stored in a Python variable.")
+
+# WIDGET 3: Text Input
+user_name = st.text_input("What's your name?", "Streamlit User")
+
+# The app's output reacts to the widget's current value
+st.write(f"Hello, **{user_name}**!")
+st.divider()
+
+# --- Section 2: Using Widget Values ---
+st.header("2. Using Widget Values")
+st.markdown("Here, we use the values from the sidebar widgets.")
+
+st.write(f"You've selected **{number_of_items}** items.")
+
+# We can use standard Python `if` statements
+if show_balloons:
+    st.write("The 'Show balloons' checkbox is **checked**! 👍")
+else:
+    st.write("The 'Show balloons' checkbox is **unchecked**. 👎")
+st.divider()
+
+# --- Section 3: Buttons and State ---
+st.header("3. Buttons")
+st.markdown(
+    """
+    Buttons are special. They are 'event' widgets.
+    They are only `True` for the *single rerun* right after they are clicked.
+    """
+)
+
+# WIDGET 4: Button
+if st.button("Click me!", type="primary"):
+    # This block of code only runs when the button is clicked
+    st.success(f"You clicked the button, {user_name}!")
+    
+    # Let's use the checkbox value
+    if show_balloons:
+        st.balloons()
+    
+    # Buttons can also trigger longer processes
+    st.write("Running a 'long' process...")
+    
+    # A progress bar
+    progress_bar = st.progress(0, text="Starting...")
+    
+    for i in range(100):
+        time.sleep(0.01) # Simulate some work
+        progress_bar.progress(i + 1, text=f"Processing item {i+1}")
+        
+    progress_bar.empty() # Clear the progress bar
+    st.write("Done!")
+else:
+    # This shows when the button hasn't just been clicked
+    st.info("Click the button to see what happens.")
 
-"""
-# Welcome to Streamlit!
-
-Edit `/streamlit_app.py` to customize this app to your heart's desire :heart:.
-If you have any questions, checkout our [documentation](https://docs.streamlit.io) and [community
-forums](https://discuss.streamlit.io).
-
-In the meantime, below is an example of what you can do with just a few lines of code:
-"""
-
-num_points = st.slider("Number of points in spiral", 1, 10000, 1100)
-num_turns = st.slider("Number of turns in spiral", 1, 300, 31)
-
-indices = np.linspace(0, 1, num_points)
-theta = 2 * np.pi * num_turns * indices
-radius = indices
-
-x = radius * np.cos(theta)
-y = radius * np.sin(theta)
-
-df = pd.DataFrame({
-    "x": x,
-    "y": y,
-    "idx": indices,
-    "rand": np.random.randn(num_points),
-})
-
-st.altair_chart(alt.Chart(df, height=700, width=700)
-    .mark_point(filled=True)
-    .encode(
-        x=alt.X("x", axis=None),
-        y=alt.Y("y", axis=None),
-        color=alt.Color("idx", legend=None, scale=alt.Scale()),
-        size=alt.Size("rand", legend=None, scale=alt.Scale(range=[1, 150])),
-    ))