AI Champions Bootcamp
index
CANVAS
index - Part 2
CANVAS
index - Part 3
CANVAS

This is the "Overview" or Table of Content of AI Champions Bootcamp's Course Notes.

  • How to use:
    • 🔬 Zoom in and out using mouse scroll
    • 👆🏼 Click on the colored header of the page to go to the page
    • 🖱️ Quickly locate certain contents by scroll through the thumbnail to have a quick glance of the content
    • 🔎 You can use the "search bar" on the top left of the screen to search our course notes too

Go to Part 2 of the Index from here index - Part 2

Title: Understanding Streamlit

  • Understanding Streamlit
  • Setting up Streamlit Project with pip and venv
  • Working with Streamlit
  • Debugging Streamlit Apps in VS Code

Overview

Streamlit is a Python library that makes it a breeze for us to create and share web applications. Streamlit is gaining traction among developers working with large language models (LLMs) for its ability to streamline web application development.

It's perfect for data scientists and developers eager to display their work, from data visualizations to interactive tools, without diving deep into the complexities of web development. The beauty of Streamlit is its simplicity in transforming data scripts into fully functional web apps with just a few lines of code, making it a go-to for quick project prototyping.


Why Streamlit?

  • ✦ Simplicity in Coding:
    • Streamlit's syntax is user-friendly. You can craft interactive elements like sliders, buttons, and charts effortlessly.
  • ✦ Speedy Development:
    • It cuts down on development time by eliminating the need to handle backend logic, design the frontend, or manage their integration.
  • ✦ Versatility:
    • Sharing Streamlit apps is straightforward, whether it's deploying them on servers or incorporating them into existing Python projects.
    • It's compatible with a wide range of data visualization libraries, including Matplotlib, Plotly, and Altair.
  • ✦ Built-in Interactivity:
    • Streamlit apps are inherently interactive, offering a more dynamic and insightful way to present data analyses compared to static displays.

Tons of Resources for Building LLM Applications

  • Ten of thousands of developers use Streamlit as their go-to platform to experiment and build generative AI apps.
  • There is a big community of developers and online resources.
    • Running into issues? Likely somebody else has also face the same issues before.
    • Just search your issue online and likely you're find a solutions/workarounds
  • You can visit this page Streamlit • A faster way to build and share data apps to see the various "Getting Started" guides on building different types of LLM applications.

You can visit the gallery here to get a sensing of the application that you can build using Streamlit.
App Gallery • Streamlit

1. Understanding Streamlit

Topic 7 - Quick Prototyping with Streamlit

Title: Setting Up Streamlit Project with pip and venv

  • Understanding Streamlit
  • Setting up Streamlit Project with pip and venv
  • Working with Streamlit
  • Debugging Streamlit Apps in VS Code
The virtual environment described in this note is applicable to other Python projects as well, not just limited to Streamlit application development.

Why pip and venv are Essential for Your Streamlit App (Python Projects)

pip and venv are tools essential practices for setting up your Streamlit app project.

  • ✦ They ensure that your development process is smooth, your app is portable, and your project environment is reproducible.

  • ✦ Understand and able to apply these tools means taking a significant step towards building robust, shareable web applications.

  • ✦ Dependency Management with pip:

    • Streamlit apps, like any other Python-based project, rely on specific packages and frameworks
      • We use packages such as LangChain, OpenAI, ragas and many others
    • pip allows you to manage these dependencies efficiently.
      • By using pip to install and manage necessary packages, you ensure that your app has all the right tools to run smoothly.
      • 🔥Moreover, pip helps in specifying the exact versions of these packages, preventing potential conflicts that might arise from updates or incompatibilities.

  • ✦ Isolated Environments with venv:

    • Developing your Streamlit app within a virtual environment created by venv is a best practice that offers several benefits.
    • It isolates your project's dependencies from the global Python environment, ensuring that your app doesn't interfere with or get affected by other Python projects on the same system.
    • This isolation is particularly important when you're working on multiple projects with differing requirements.
    • It also simplifies the process of sharing your app with others or deploying it, as you can easily specify the environment's requirements.

  • ✦ Reproducibility and Collaboration:

    • When working on a Streamlit app, especially in a team or for public release, reproducibility becomes paramount.
    • By using venv and pip together, you can create a requirements.txt file that lists all your project's dependencies.
    • This file ensures that anyone who wants to run your app can set up an identical environment with ease, making collaboration and sharing straightforward.

pip

pip is the package installer for Python.

  • ✦ You can use it to install packages from the Python Package Index (PyPI) and other indexes.
  • ✦ It allows you to install, update, and remove Python packages. Using pip ensures that you can easily share and manage dependencies for your projects.

Why Use pip?

  • ✦ Dependency Management: Easily manage project dependencies.
  • ✦ Consistency: Ensure that you're using the same package versions across different environments.
  • ✦ Ease of Use: Simplify the installation process for Python packages.

pip is included by default with Python versions 3.4 and later. You can check if pip is installed by running: pip --version

Basic pip Commands

  • ✦ Installing Packages: pip install package_name
  • ✦ Uninstalling Packages: pip uninstall package_name
  • ✦ Listing Installed Packages: pip list
  • ✦ Searching Packages: pip search package_name
  • ✦ Upgrading Packages: pip install --upgrade package_name

venv

venv is a module that comes pre-installed with Python 3.3 and later versions, used to create isolated Python environments. Each environment has its own installation directories and doesn’t share libraries with other environments.

Why Use venv?

  • ✦ Isolation: Keep dependencies required by different projects separate.
  • ✦ Control: Have control over your environment and dependencies.
  • ✦ Testing: Test your projects in clean environments to ensure compatibility.

Creating a Virtual Environment

To create a virtual environment, you can use the following command:

python -m venv myenv

This command creates a directory called myenv in your current directory, containing a fresh, isolated Python environment.

Activating the Virtual Environment

  • ✦ On Windows: 
    • myenv\Scripts\activate.bat
  • ✦ On Unix or MacOS: 
    • source myenv/bin/activate

Managing Packages Within a Virtual Environment

While the virtual environment is activated, you can use pip to install, update, or remove packages. These operations will only affect the current virtual environment.

How it works

  • ✦ Once you activate a virtual environment created by venv, it essentially sets up a secluded sandbox for your Python project.
  • ✦ In this isolated environment, any commands you execute using Python or pip are confined to this sandbox.
  • ✦ This means that if you install, update, or remove Python packages using pip, these actions will only affect the virtual environment and not the global Python installation on your system.
  • ✦ Similarly, running Python scripts will use the Python interpreter and any dependencies within this environment, ensuring that your project runs under the conditions you've explicitly set up.
  • ✦ This isolation is crucial for managing project-specific dependencies without risking conflicts with other projects or the system-wide Python setup, thereby providing a consistent and controlled development and execution environment.

Deactivating the Virtual Environment

To deactivate the virtual environment and use your global Python environment again, simply run:
deactivate

Walkthrough on Setting up the Environment for Streamlit Project

Major Timeline
  • 00:00 - Setting up the Virtual Environment (using venv)
  • 05:55 - Activate the Virtual Environment
  • 08:11 - Install packages within the newly created Virtual Environment (using pip)
  • 11:40 - Export the "versions numbers" of the installed packages (using pip)
  • 14:47 - Install packages from a requirements.txt (using pip)

Suggest to watch @ 1.25x speed and watch it directly on YouTube if you want to able to resize the video windows.

Here is some common packages that give a good starting point for the virtual environment

pip install streamlit openai tiktoken python-dotenv langchain langchain-openai langchain-experimental pandas

Alternatively, you can use this requirements.txt as the starting point.

2. Setting Up Streamlit Project with pip and venv

Title: Working with Streamlit

  • Understanding Streamlit
  • Setting up Streamlit Project with pip and venv
  • Working with Streamlit
  • Debugging Streamlit Apps in VS Code


Create a Streamlit App

  • ✦ The best approach to learn Streamlit is through hands-on experience.
    • As you go through this note, make sure to experiment with each function in your Visual Studio Code.
    • With your app active, Streamlit's interface will prompt you to rerun the app and display updates every time you introduce a new element to your script and save your changes.

Step 1: Get the Sample App Up and Running

  • ✦ Streamlit has a wonderful "Getting Started" tutorial.
    • Going through the tutorial and understand the explanation in there
    • It's a carefully crafted, so after you have gone through the tutorial, you will have a good understanding of How Streamlit works and the different key components that you should be paying attention when you are creating your own Streamlit app.
image

🔥 Create your First Streamlit App
NEW

  • ✦ Next, copy the complete code from the tutorial from below
    • Then, paste the code to replace the content in "hello_world.py".
import streamlit as st
import pandas as pd
import numpy as np


st.title('Uber pickups in NYC')

  
DATE_COLUMN = 'date/time'
DATA_URL = ('https://s3-us-west-2.amazonaws.com/'

            'streamlit-demo-data/uber-raw-data-sep14.csv.gz')

@st.cache_data
def load_data(nrows):
    data = pd.read_csv(DATA_URL, nrows=nrows)
    lowercase = lambda x: str(x).lower()
    data.rename(lowercase, axis='columns', inplace=True)
    data[DATE_COLUMN] = pd.to_datetime(data[DATE_COLUMN])
    return data

data_load_state = st.text('Loading data...')
data = load_data(10000)
data_load_state.text("Done! (using st.cache_data)")

if st.checkbox('Show raw data'):
    st.subheader('Raw data')
    st.write(data)

st.subheader('Number of pickups by hour')
hist_values = np.histogram(data[DATE_COLUMN].dt.hour, bins=24, range=(0,24))[0]
st.bar_chart(hist_values)

# Some number in the range 0-23
hour_to_filter = st.slider('hour', 0, 23, 17)
filtered_data = data[data[DATE_COLUMN].dt.hour == hour_to_filter]

st.subheader('Map of all pickups at %s:00' % hour_to_filter)
st.map(filtered_data)
  • ✦ Run the Streamlit App locally from your computer
    • by running the following line in the Visual Studio Code's terminal
    • streamlit run hello_world.py
  • ✦ Your browser will open up and the working Streamlit app will be displayed there!

Step 2: Understand the Basics by Getting your Hands Dirty

  • ✦ We are not stopping yet.
  • ✦ Now with the sample Streamlit App display on the browser, any changes that you make to the Streamlit code (from your Visual Studio Code) will reflect on the browser. If it doesn't, just hit the fresh button on the browser.
    • Next, please go through the official guide on "Basic Concepts of Streamlit".
    • The guide will provide additional explanation to the sample Streamlit app that you just deployed locally, such as what is magic command and how the interactions between the slider and the data filtering work.
    • Moreover, there are also new components being covered in this guide.
To Do: Copy the Code and Try it on Your Visual Studio Code
  • It's important that while you are going through this guide, copy over the sample code from the guide to your "hello_world.py" and observe the changes on the browser.
  • We think that there is nothing more effective than learning Streamlit, by actually experimenting with the code yourself!
image

🔥 Experiment new Code on the Fly
NEW


Step 3: Continue to Explore the Other Widgets

if you have been following up to this point, you would have most the required understanding to get started on building on your own Streamlit app.

Most of the time, it's about using the right widgets that allow your applications to:

  • ✦ Take in the inputs from users
  • ✦ Display the outputs to the users
 a widget is an interactive element that can be added to your app, allowing users to input data or adjust parameters in real-time. Widgets can range from simple buttons and text inputs to sliders and selectors, and somethings complex like editable tables or 3D rendering.

Many of these decisions are specific to your PoC project. As we will be starting to work on the PoC project very soon, it is definitely a good time to check out the different widgets available on Streamlit and scout for the widgets that are potentially useful for your project.

  • ✦ The best way to find out how the widgets work?

      1. Understand and see the the widget looks like on the Official API Reference section
      • This is probably the section on Streamlit documentation page that we would visit most often.
      • One reason is because each widget is unique. Different widgets take in different inputs (parameters to the relevant functions) and may have specific ways to produce the output.
      • It is very important for us to know what input and output of the widgets that we want to implement, so that we can implement correctly, without spending time on diagnosing the errors later.
      1. 🔥 Copy the code over to your Visual Studio Code and try it out!!!
image

🔥 Experiment new Code on the Fly
NEW


Create a Multi-Page Streamlit App (Simpler)

As your app grows large, it becomes useful to organize your script into multiple pages. This makes your app easier to manage as a developer and easier to navigate as a user. Streamlit provides a frictionless way to create multipage apps. Pages are automatically shown in a navigation widget inside your app's sidebar. If a user clicks on a page in the sidebar, Streamlit navigates to that page without reloading the frontend — making app browsing incredibly fast! In this guide, let’s learn how to create multipage apps.

Structuring your multipage app

Streamlit identifies pages in a multipage app by directory structure and filenames. The file you pass to streamlit run is called your entrypoint file. This is your app's homepage. When you have a pages/ directory next to your entrypoint file, Streamlit will identify each Python file within it as a page. The following example has three pages. main.py is the entrypoint file and homepage.

your_working_directory/ 
├── pages/ 
│ ├── a_page.py 
│ └── another_page.py 
└── main.py

Run your multipage app just like you would for a single-page app.

streamlit run main.py

Only files with .py extensions are identified as Pages

Only .py files in the pages/ directory will be identified as pages. Streamlit ignores all other files in the pages/ directory and its subdirectories. Streamlit also ignores Python files in subdirectories of pages/.


Naming and Ordering your pages

The entrypoint file is your app's homepage and the first page users will see when visiting your app. Once you've added pages to your app, the entrypoint file appears as the topmost page in the sidebar. Streamlit determines the page label and ordering of each page from your filenames.

Filenames for pages

Filenames are composed of four different parts as follows:

  1. number. A non-negative integer.
  2. separator. Any combination of underscore ("_"), dash ("-"), and space (" ").
  3. label. Everything up to, but not including, ".py".
  4. ".py"

How pages are sorted in the sidebar

The entrypoint file is always displayed first. The remaining pages are sorted as follows:

  • ✦ Files that have a number appear before files without a number.
  • ✦ Files are sorted based on the number (if any), followed by the label (if any).
  • ✦ When files are sorted, Streamlit treats the number as an actual number rather than a string. So 03 is the same as 3.

This table shows examples of filenames and their corresponding labels, sorted by the order in which they appear in the sidebar.

Filename Rendered label
1 - first page.py first page
12 monkeys.py monkeys
123.py 123
123_hello_dear_world.py hello dear world
_12 monkeys.py 12 monkeys
> [!tip] We can also set labels may differ from the page title set in st.set_page_config.

In the script for the particular page, we can place this line st.set_page_config(page_title="Your Preferred Label for the Page") to set the custom label.


Key Takeaways on the working of Streamlit App

Now that you know a little more about all the individual pieces, let's close the loop and review how it works together:

  1. Streamlit apps are Python scripts that run from top to bottom.
  2. Every time a user opens a browser tab pointing to your app, the script is executed and a new session starts.
  3. As the script executes, Streamlit draws its output live in a browser.
  4. Every time a user interacts with a widget, your script is re-executed and Streamlit redraws its output in the browser.
    • The output value of that widget matches the new value during that rerun.
  5. Scripts use the Streamlit cache to avoid recomputing expensive functions, so updates happen very fast.
  6. Session State lets you save information that persists between reruns when you need more than a simple widget. We will look into more of this in next topic.
  7. Streamlit apps can contain multiple pages, which are defined in separate .py files in a pages folder.

3. Working with Streamlit

Title: Debugging Streamlit Apps in VS Code

  • Understanding Streamlit
  • Setting up Streamlit Project with pip and venv
  • Working with Streamlit
  • Debugging Streamlit Apps in VS Code


Intro

As we build Large Language Model (LLM) applications using Streamlit, it's important to aware and have right tools and techniques to streamline our development process. One such tool is the Python Debugger in Visual Studio Code (VS Code).

In this note, we'll explore the importance of being able to debug the Streamlit code, how it enhances our development workflow, and provide a step-by-step tutorial on setting it up in VS Code.


Why Debugging is Essential

  • ✦ A common misunderstanding is that debugging only applicable to lousy programmer or only needed when we have bugs.

  • ✦ Debugging is a fundamental aspect of software development. It allows us to:

    1. Identify and Fix Errors:
      • Debugging helps us pinpoint the exact location and cause of errors in our code, making it easier to fix them.
    2. Understand Code Flow:
      • By stepping through our code, we can better understand how it executes, which is especially useful in complex applications like LLMs.
    3. Optimize Performance:
      • Debugging can reveal performance bottlenecks (by better understand how the code is executed), enabling us to optimize our code for better efficiency.

Setting Up Python Debugger in Visual Studio Code

Let's dive into the practical steps of setting up and using the Python Debugger in VS Code for our Streamlit app.

Here, we assume we all have installed and set up our Visual Studio code correctly for Streamlit app development. For details on setting up, see 3. Setting Up Streamlit Project with pip and venv from Topic 7.

Install the Python Debugger extension developed by Microsoft.

Step 1: Configure the Debugger

To configure the debugger, we need to create a launch.json file in our project. This file contains the configuration settings for debugging.

  1. Open your Streamlit project in VS Code.
  2. Go to the Run view by clicking on the Run icon in the Activity Bar or by pressing Ctrl+Shift+D.
  3. Click on "create a launch.json file" link.
  4. Select "Python" from the list of environments.
  5. A launch.json file will be created with a default configuration. Modify it to match the following configuration:
{
    "configurations": [
        {
            "name": "Streamlit Debug",
            "type": "python",
            "request": "launch",
            "module": "streamlit",
            "args": [
                "run",
                "${file}"
            ]
        }
    ]
}

Step 3: Set Breakpoints

Breakpoints allow us to pause the execution of our code at specific lines, so we can inspect variables and the program state.

  1. Open the Streamlit app file in VS Code.
  2. Click in the gutter to the left of the line numbers where you want to set a breakpoint. A red dot will appear, indicating the breakpoint.

Step 4: Start Debugging

Now that we have configured the debugger and set breakpoints, we can start debugging.

  1. Go to the Run view.
  2. Select "Python: Streamlit" from the dropdown menu.
  3. Click the green play button or press F5 to start debugging.

VS Code will launch the Streamlit app and pause execution at the breakpoints we set. We can now inspect variables, step through the code, and evaluate expressions in the Debug Console.

Step 5: Inspect Variables and Step Through Code

While debugging, we can use the following controls:

  • ✦ Continue (F5): Resume execution until the next breakpoint.
  • ✦ Step Over (F10): Execute the next line of code, but don't step into functions.
  • ✦ Step Into (F11): Step into functions to see their execution.
  • ✦ Step Out (Shift+F11): Step out of the current function.
  • ✦ Restart (Ctrl+Shift+F5): Restart the debugging session.
  • ✦ Stop (Shift+F5): Stop the debugging session.

We can also hover over variables to see their current values or use the Variables pane to inspect them.


Video Walkthrough

Major Timeline

00:00 - Intro and Setup "Python Debugger" extension
01:45 - Configure the Debugging Session (launch.json)
03:15 - Set Breakpoints in the code
06:46 - Starting the Debugging Session
10:08 - Examine the variables and their values
14:41 - Jupyter Notebook-like Interactive Python session (Debug Console)
16:32 - Navigating the code in Debugging Session (Continue, Step Over, Step into, and etc)

4. Debugging Streamlit Apps in VS Code

Title: Streamlit - A Deep Dive

  • Streamlit - A Deep Dive
  • Password Protect Streamlit App
  • Intro to Git and GitHub (Version Control)
  • Deploying Streamlit App on Streamlit Community Cloud

# Overview

Now that you have experience with the basics of Streamlit, we will look into some important concepts of Streamlit that have caught some developers off guard and led to unexpected behavior in their applications.

Understanding these concepts is crucial for designing and developing efficient and effective Streamlit apps. In this deep dive, we will explore session state, button behavior, and dynamic widget management, providing you with the knowledge to avoid common pitfalls and enhance your app's functionality.

By having a solid understanding of these elements, you will be better equipped to create user-friendly applications and make the most of Streamlit's features in your projects.

About this Note

This note provides a concise introduction to key "advanced" concepts in Streamlit, aiming to familiarize you with the framework's mechanics and empower you to begin building apps quickly. That's the best way to understand the concepts is to open up your VS Code and try to experiment with the code.

However, it's essential to understand that this is not an exhaustive resource. The official Streamlit documentation remains the definitive guide, offering comprehensive explanations, advanced techniques, and best practices.

To ensure a thorough understanding of Streamlit, we strongly recommend reading the official documentation. We will be including the links to the corresponding section in the official documentation in the different parts of the note below.

We recommend that you first try working with the content in this note. This should be sufficient to get you started. Remember to revisit this note for the links to the official documentation after you have gained some hands-on experience or when you encounter challenges implementing certain things. This approach is more effective.


1 What is State?

Streamlit defines access to a Streamlit app in a browser tab as a session.

  • ✦ For each browser tab that connects to the Streamlit server, a new session is created.
  • ✦ Streamlit reruns your script from top to bottom every time you interact with your app.
  • ✦ Each reruns takes place in a blank slate: no variables are shared between runs.
  • ✦ Widget states are dependent on a particular session (browser connection). The actions of one user do not affect the widgets of any other user.
  • ✦ If a user opens up multiple tabs to access an app, each tab will be a unique session. Changing a widget in one tab will not affect the same widget in another tab.

A session is a single instance of viewing an app. If you view an app from two different tabs in your browser, each tab will have its own session. So each viewer of an app will have a Session State tied to their specific view. Streamlit maintains this session as the user interacts with the app. If the user refreshes their browser page or reloads the URL to the app, their Session State resets and they begin again with a new session.


1.1 Session State

Session State is a way to share variables between reruns, for each user session. In addition to the ability to store and persist state, Streamlit also exposes the ability to manipulate state using Callbacks. Session state also persists across apps inside a multipage app.

Check out this video by Streamlit Developer Advocate Dr. Marisa Smith to on two very essential concepts for Streamlit app development:

  1. session state
  2. callback

Session State provides a dictionary-like interface where you can save information that is preserved between script reruns. Use st.session_state with key or attribute notation to store and recall values. For example, st.session_state["my_key"] or st.session_state.my_key. Remember that widgets handle their statefulness all by themselves, so you won't always need to use Session State!

There are a few common scenarios where Session State is helpful. As demonstrated in the video above, Session State is used when you have a progressive process that you want to build upon from one rerun to the next. Session State can also be used to prevent recalculation, similar to caching. However, the differences are important:

  • ✦ Caching associates stored values to specific functions and inputs. Cached values are accessible to all users across all sessions.
  • ✦ Session State associates stored values to keys (strings). Values in session state are only available in the single session where it was saved.

2 Behaviors of st.button

Buttons created with st.button do not retain state.

They return True on the script rerun resulting from their click and immediately return to Falseon the next script rerun.

  • ✦ If a displayed element is nested inside if st.button('Click me'):
  • ✦ the element will be visible when the button is clicked and disappear as soon as the user takes their next action.
  • ✦ This is because the script reruns and the button return value becomes False.

This note explains the use of buttons and explain common misconceptions.


2.1 When to use if st.button()

When code is conditioned on a button's value, it will execute once in response to the button being clicked and not again (until the button is clicked again).

  • ✅ Good to nest inside buttons:

    • Transient messages that immediately disappear.
    • Once-per-click processes that saves data to session state, a file, or a database.

  • ❌ Bad to nest inside buttons:

    • Displayed items that should persist as the user continues.
    • Other widgets which cause the script to rerun when used.
    • Processes that neither modify session state nor write to a file/database.*

2.2 Common logic with buttons

2.2.1 Show a temporary message with a button

If you want to give the user a quick button to check if an entry is valid, but not keep that check displayed as the user continues.

  • ✦ In this example, a user can click a button to check if their animal string is in the animal_shelter list.
  • ✦ When the user clicks "Check availability" they will see "We have that animal!" or "We don't have that animal."
  • ✦ If they change the animal in st.text_input, the script reruns and the message disappears until they click "Check availability" again.
import streamlit as st 

animal_shelter = ['cat', 'dog', 'rabbit', 'bird'] 

animal = st.text_input('Type an animal') 

if st.button('Check availability'): 
	have_it = animal.lower() in animal_shelter 
	'We have that animal!' if have_it else 'We don\'t have that animal.'

2.2.2 Stateful button

If you want a clicked button to continue to be True, create a value in st.session_state and use the button to set that value to True in a callback.

import streamlit as st 

if 'clicked' not in st.session_state: 
	st.session_state.clicked = False 
	
def click_button(): 
	st.session_state.clicked = True 
	
st.button('Click me', on_click=click_button) 

if st.session_state.clicked: 
	# The message and nested widget will remain on the page 
	st.write('Button clicked!') 
	st.slider('Select a value')

2.2.3 Buttons to modify st.session_state

If you modify st.session_state inside of a button, you must consider where that button is within the script.

2.2.3.1 A slight problem

In this example, we access st.session_state.name both before and after the buttons which modify it. When a button ("Jane" or "John") is clicked, the script reruns. The info displayed before the buttons lags behind the info written after the button. The data in st.session_state before the button is not updated. When the script executes the button function, that is when the conditional code to update st.session_state creates the change. Thus, this change is reflected after the button.

import streamlit as st 
import pandas as pd 

if 'name' not in st.session_state: 
	st.session_state['name'] = 'John Doe' 
	
st.header(st.session_state['name']) 

if st.button('Jane'): 
	st.session_state['name'] = 'Jane Doe' 
	
if st.button('John'): 
	st.session_state['name'] = 'John Doe' 
	
st.header(st.session_state['name'])

2.2.3.2 Logic used in a callback

Callbacks are a clean way to modify st.session_state. Callbacks are executed as a prefix to the script rerunning, so the position of the button relative to accessing data is not important.


import streamlit as st 
import pandas as pd 

if 'name' not in st.session_state: 
	st.session_state['name'] = 'John Doe' 
	
def change_name(name): 
	st.session_state['name'] = name 
	
st.header(st.session_state['name']) 

st.button('Jane', on_click=change_name, args=['Jane Doe']) 
st.button('John', on_click=change_name, args=['John Doe']) 

st.header(st.session_state['name'])

2.2.4 Buttons to modify or reset other widgets

When a button is used to modify or reset another widget, it is the same as the above examples to modify st.session_state. However, an extra consideration exists: you cannot modify a key-value pair in st.session_state if the widget with that key has already been rendered on the page for the current script run.

Don't do this!
import streamlit as st 
st.text_input('Name', key='name') 

# These buttons will error because their nested code changes 
# a widget's state after that widget within the script. 
if st.button('Clear name'): 
	st.session_state.name = '' 
	
if st.button('Streamlit!'): 
	st.session_state.name = ('Streamlit')

2.2.4.1 Option 1: Use a key for the button and put the logic before the widget

If you assign a key to a button, you can condition code on a button's state by using its value in st.session_state. This means that logic depending on your button can be in your script before that button.

In the following example, we use the .get() method on st.session_state because the keys for the buttons will not exist when the script runs for the first time. The .get() method will return False if it can't find the key. Otherwise, it will return the value of the key.

import streamlit as st 

# Use the get method since the keys won't be in session_state 
# on the first script run 
if st.session_state.get('clear'): 
	st.session_state['name'] = '' 
	
if st.session_state.get('streamlit'): 
	st.session_state['name'] = 'Streamlit' 
	
st.text_input('Name', key='name') 

st.button('Clear name', key='clear') 
st.button('Streamlit!', key='streamlit')

2.2.4.2 Option 2: Use a callback

import streamlit as st 

st.text_input('Name', key='name') 

def set_name(name): 
	st.session_state.name = name 
	
st.button('Clear name', on_click=set_name, args=['']) 
st.button('Streamlit!', on_click=set_name, args=['Streamlit'])`

2.2.4.3 Option 3: Use containers

By using st.container you can have widgets appear in different orders in your script and frontend view (webpage).

import streamlit as st 

begin = st.container() 

if st.button('Clear name'): 
	st.session_state.name = '' 
	
if st.button('Streamlit!'): 
	st.session_state.name = ('Streamlit') 
	
# The widget is second in logic, but first in display 
begin.text_input('Name', key='name')
Relevant Sections in Official Documentation
  1. Button behavior and examples - Streamlit Docs
  2. Widget behavior - Streamlit Docs ⭐️⭐️⭐️

3 Secrets Management

Storing unencrypted secrets in a git repository is a bad practice. For applications that require access to sensitive credentials, the recommended solution is to store those credentials outside the repository - such as using a credentials file not committed to the repository or passing them as environment variables.

Streamlit provides native file-based secrets management to easily store and securely access your secrets in your Streamlit app.


3.1 How to use secrets management

3.1.1 Develop locally and set up secrets

Create a file secrets.toml in the $CWD/.streamlit folder where $CWD is the folder you're running Streamlit from. For example, $CWD/.streamlit/secrets.toml. 

# Everything in this section will be available as an environment variable 
OPENAPI_API_KEY = "sk-1241infjsenfuhnh81n8cdn"

# You can also add other sections if you like. 
# The contents of sections as shown below will not become environment variables, # but they'll be easily accessible from within Streamlit anyway as we show 
# later. 
[my_other_secrets] 
things_i_like = ["Streamlit", "Python"]
Warning
  • Add this file to your .gitignore so you don't upload your secrets to online repository
  • We will look at how to do this in later section of this topic.

3.1.2 Use secrets in your app

Access your secrets by querying the st.secrets dict, or as environment variables. For example, if you enter the secrets from the section above, the code below shows you how to access them within your Streamlit app

import streamlit as st 

# Everything is accessible via the st.secrets dict:
st.write("OPENAPI_API_KEY:", st.secrets["OPENAPI_API_KEY"]) 

# Store the value in "Environment Variable"
# This is required by some packages like LangChain
os.environ['OPENAPI_API_KEY'] = st.secrets['OPENAPI_API_KEY']
Use secrets on Streamlit Community Cloud
  • This is the default deployment method for your Streamlit application in this Bootcamp
  • When you deploy your app to Streamlit Community Cloud, you can use the same secrets management workflow as you would locally.
  • However, you'll need to also set up your secrets in the Community Cloud Secrets Management console. Learn how to do so via the Cloud-specific Secrets management documentation.
  • We will cover how to do this in our Walkthrough later.

4 Other Recommended Reads

1. Streamlit - A Deep Dive

Title: Password Protect the Streamlit App

  • Streamlit - A Deep Dive
  • Password Protect Streamlit App
  • Intro to Git and GitHub (Version Control)
  • Deploying Streamlit App on Streamlit Community Cloud

Overview

Password protection help ensures that sensitive data and proprietary information within the app are shielded from unauthorized access, thereby preserving confidentiality and preventing data breaches.

While password protection provides a basic level of security for our Streamlit application, it is not the most secure or robust method for safeguarding sensitive data and proprietary information. This simple mechanism is suitable for prototypes and initial development stages.
However, if the developers intend to transition the prototype to more serious development or production environments, it is crucial to consider more advanced access control mechanisms. For comprehensive security guidelines and best practices, please refer to IM8 or consult the relevant teams in your agency.

We strongly recommend you to password protect your Streamlit App

  • Most of us will deploy the application on Streamlit Communitu Cloud, so it's obvious that we need to prevent our applications from unauthorised access.

  • For project teams that go for hosting services that is within Government Commercial Cloud (GCC), such as CStack Cloud and Streamlit on Snowflake, the Streamlit web application itself can still be accessed from any device that has internet access. Therefore, we want to restricted the access to our Streamlit application.

How to Password Protect a Streamlit App

Step 1: Create the file that store the password

  • ✦ Create a new folder called .streamlit at the root of the project folder
  • ✦ Add a new file secrets.toml in the new folder
  • ✦ Add this line to the file password = "<your app password>"

Step 2: Add this Script to your project

# filename: utility.py
import streamlit as st  
import random  
import hmac  
  
# """  
# This file contains the common components used in the Streamlit App.  
# This includes the sidebar, the title, the footer, and the password check.  
# """  
  
  
def check_password():  
    """Returns `True` if the user had the correct password."""  
    def password_entered():  
        """Checks whether a password entered by the user is correct."""  
        if hmac.compare_digest(st.session_state["password"], st.secrets["password"]):  
            st.session_state["password_correct"] = True  
            del st.session_state["password"]  # Don't store the password.  
        else:  
            st.session_state["password_correct"] = False  
    # Return True if the passward is validated.  
    if st.session_state.get("password_correct", False):  
        return True  
    # Show input for password.  
    st.text_input(  
        "Password", type="password", on_change=password_entered, key="password"  
    )  
    if "password_correct" in st.session_state:  
        st.error("😕 Password incorrect")  
    return False

We may need to install hmac into the venv (virtual environment)

Step 3: Add this code block into any of the scripts that render a Streamlit page

from utility import check_password()

# Do not continue if check_password is not True.  
if not check_password():  
    st.stop()

Here is an example, based on a main.py file

import streamlit as st
from utility import check_password

  

# region <--------- Streamlit Page Configuration --------->

st.set_page_config(
    layout="centered",
    page_title="My Streamlit App"
)

# Do not continue if check_password is not True.  
if not check_password():  
    st.stop()

# endregion <--------- Streamlit Page Configuration --------->


st.title("Streamlit App")
form = st.form(key="form")
form.subheader("Prompt")
  

user_prompt = form.text_area("Enter your prompt here", height=200)


if form.form_submit_button("Submit"):
    print(f"User has submitted {user_prompt}")
2. Password Protect the Streamlit App

Title: Intro to Git and GitHub (Version Control)

  • Streamlit - A Deep Dive
  • Password Protect Streamlit App
  • Intro to Git and GitHub (Version Control)
  • Deploying Streamlit App on Streamlit Community Cloud

Intro

This guide will walk you through the essential GitHub basics required to upload your Streamlit project to a GitHub repository, enabling you to deploy your application on the Streamlit Community Cloud.

An Intro to Git and Github
  • ✦ Version control is a big technical topic by itself, encompassing a wide range of concepts, commands, and best practices.
  • ✦ The purpose of this note is to provide a high-level introduction to Git and GitHub, focusing on the essential aspects that will help us get started.
  • ✦ As we become more comfortable with these tools, we should to explore more advanced features and workflows to fully leverage the power of version control in your development process.
  • ✦ There is no lack of resources on Internet on Git and GitHub for us to explore and learn!

What is GitHub?

GitHub is a web-based platform that uses Git, a version control system, to help developers collaborate on projects. It allows you to store your code in repositories, track changes, manage project versions, and collaborate with others seamlessly.

GitHub is a web-based platform that hosts Git repositories. It provides additional features for collaboration and project management, such as:

  • ✦ Remote Repositories: Store and share code in the cloud, making it accessible from anywhere.
  • ✦ Pull Requests: Propose changes to the codebase, review them, and discuss with team members before merging.
  • ✦ Issues and Project Management: Track bugs, feature requests, and manage project tasks.
  • ✦ Continuous Integration/Continuous Deployment (CI/CD): Automate testing and deployment processes. Imagine a magical pipeline: every time you save your work, it's automatically tested for errors and if everything looks good, instantly becomes available for users to try or use. That's CI/CD in a nutshell!

For deploying Streamlit applications, GitHub serves as the central repository where your project files reside, which Streamlit Community Cloud can access to run your app.

What is Git?

Git is a distributed version control system that allows us to track changes in our codebase over time. It enables us to:

  • Track Changes: Keep a history of all changes made to the code, making it easy to revert to previous versions if needed.
  • Collaborate: Work seamlessly with other developers by merging changes and resolving conflicts.
  • Branching and Merging: Experiment with new features or fixes in isolated branches without affecting the main codebase, and merge them when ready.
  • In essence, Git is the version control system that powers GitHub.
    • While Git handles the behind-the-scenes tracking of code changes locally on your computer, GitHub provides the user-friendly interface and additional tools that make collaborating and managing projects with Git more accessible.
    • GitHub adds a layer of social coding, enabling features like pull requests, issue tracking, and project management tools.

Setting Up a GitHub Account and GitHub Desktop

GitHib Acount

Before you can use GitHub, you need to create an account.
✦ Steps to Create an Account:

  1. Visit GitHub: Go to GitHub’s website.
  2. Sign Up: 
    1. Click on the "Sign up" button typically located at the top-right corner.
    2. You can use your personal or official email for the registration.
  3. Enter Details: Provide a username, your email address, and a strong password.
  4. Verify Email: GitHub will send a verification email. Click the link in the email to verify your account.
  5. Complete Setup: Follow the on-screen instructions to complete your profile setup.
We will cover the details on how to use GitHub Desktop for the purpose of deploying Streamlit App in the next note.

Download and Install GitHub Desktop

Download GitHub Desktop from here and install the software on your laptop that you are using for this Bootcamp.

There is no need to install git separately since GitHub comes with its own bundled version of git.

Getting Started with Git (GitHub) in VS Code

💪🏼 This is a great tutorial from Official YouTube channel of Visual Studio Code. This 7-min video covers all the key steps to use Git within VC Code, allows you to efficiently manage your code repositories, push your code to the remote repository, and track changes, directly from the code editor.

Since we have installed GitHub Desktop, we can skip the step for installing git. The rest of the video is still applicable.

.gitignore

What is .gitignore?

The .gitignore file is a special file used by Git to determine which files and directories to ignore in a project. When you add files to your repository, Git tracks changes to those files. However, some files should not be tracked—for example, temporary files, sensitive information, or dependencies that can be recreated. The .gitignore file tells Git to exclude these files from version control.

Key Points:

  • ✦ Purpose: Prevents specific files or directories from being tracked by Git.
  • ✦ Format: A plain text file named .gitignore placed in the root directory of your project.

Why Use .gitignore?

Using a .gitignore file offers several benefits:

  1. Security: 
    • Protect sensitive information like API keys or passwords by excluding them from your repository. (e.g., our .env or secrets.toml files)
  2. Efficiency: 
    • Avoid cluttering your repository with unnecessary files (e.g., temporary files)
  3. Collaboration: 
    • Ensure that all collaborators are not burdened with irrelevant files, maintaining a clean project structure. (e.g., our venv folder)
  4. Deployment: Streamlit Community Cloud and other deployment platforms require a clean repository. Excluding unnecessary files ensures smoother deployments.

How to Create .gitignore?

within VS Code,  create a plain text file named .gitignore placed in the root directory of your project. Add the filenames or directories for the file or folders that you want to exclude from being tracked by git or GitHub into the .gitignore file.

Below are some common entries in the .gitingore for a Python project.

# Byte-compiled / optimized / DLL files
__pycache__/
*.py[cod]
*$py.class

# Virtual environments
venv/
env/
ENV/
.venv/
.env/

# Distribution / packaging
build/
dist/
*.egg-info/

# VS Code 
.vscode/ 
# PyCharm 
.idea/


# Streamlit
.streamlit/secrets.toml
It's okay to include entries in the .gitignore file, even if the files do not exist in the current project. This will not cause any errors.

[Extra] Additional Great Videos for VS Code

💡👨🏻‍💻👩🏻‍💻 If you want to collaborate in real-time with your team members in VS Code, this is a great video to get started:

🍽️ Wanting more? Here is a series from GitHub's official YouTube channel designed to help you master the basics of GitHub, whether you're new to coding or looking to enhance your version control skills.

3. Intro to Git and GitHub (Version Control)

Title: Deploying Streamlit App on Streamlit Community Cloud

  • Streamlit - A Deep Dive
  • Password Protect Streamlit App
  • Intro to Git and GitHub (Version Control)
  • Deploying Streamlit App on Streamlit Community Cloud

Streamlit has great documentation on how to deploy on Streamlit Community Cloud. Instead of replicating the content, we direct you to the official resources so you can always refer to the most up-to-date information.

💻 Minimally, complete the following subsections in the "Streamlit Community Cloud" section:

  • ✦ Getting Started
    • Quickstart
    • Create your account
    • Connect your GitHub account
    • Explore your workspace
  • ✦ Deploy your app
    • App dependencies
    • Secrets Management
image

🔥 Create your First Streamlit App
NEW

4. Deploying Streamlit App on Streamlit Community Cloud

Topic 8 - Deploying Streamlit App

Interactive Graph
Table Of Contents
This is the "Overview" or Table of Content of AI Champions Bootcamp's Course Notes.
Go to Part 2 of the Index from here index - Part 2
Title: Understanding Streamlit
Overview
Why Streamlit?
Tons of Resources for Building LLM Applications
Topic 7 - Quick Prototyping with Streamlit
Title: Setting Up Streamlit Project with pip and venv
Table of Contents
Why pip and venv are Essential for Your Streamlit App (Python Projects)
pip
Why Use pip?
Basic pip Commands
venv
Why Use venv?
Creating a Virtual Environment
Activating the Virtual Environment
Managing Packages Within a Virtual Environment
Deactivating the Virtual Environment
Walkthrough on Setting up the Environment for Streamlit Project
Title: Working with Streamlit
Table of Contents
Create a Streamlit App
Step 1: Get the Sample App Up and Running
🔥 Create your First Streamlit App NEW
Step 2: Understand the Basics by Getting your Hands Dirty
🔥 Experiment new Code on the Fly NEW
Step 3: Continue to Explore the Other Widgets
🔥 Experiment new Code on the Fly NEW
Create a Multi-Page Streamlit App (Simpler)
Structuring your multipage app
Naming and Ordering your pages
Filenames for pages
How pages are sorted in the sidebar
Key Takeaways on the working of Streamlit App
Title: Debugging Streamlit Apps in VS Code
Table of Contents
Intro
Why Debugging is Essential
Setting Up Python Debugger in Visual Studio Code
Step 1: Configure the Debugger
Step 3: Set Breakpoints
Step 4: Start Debugging
Step 5: Inspect Variables and Step Through Code
Video Walkthrough
Title: Streamlit - A Deep Dive
Table of Contents
1 What is State?
1.1 Session State
2 Behaviors of st.button
2.1 When to use if st.button()
2.2 Common logic with buttons
2.2.1 Show a temporary message with a button
2.2.2 Stateful button
2.2.3 Buttons to modify st.session_state
2.2.3.1 A slight problem
2.2.3.2 Logic used in a callback
2.2.4 Buttons to modify or reset other widgets
2.2.4.1 Option 1: Use a key for the button and put the logic before the widget
2.2.4.2 Option 2: Use a callback
2.2.4.3 Option 3: Use containers
3 Secrets Management
3.1 How to use secrets management
3.1.1 Develop locally and set up secrets
3.1.2 Use secrets in your app
4 Other Recommended Reads
Title: Password Protect the Streamlit App
Table of Contents
Overview
How to Password Protect a Streamlit App
Step 1: Create the file that store the password
Step 2: Add this Script to your project
Step 3: Add this code block into any of the scripts that render a Streamlit page
Title: Intro to Git and GitHub (Version Control)
Table of Contents
Intro
What is GitHub?
Setting Up a GitHub Account and GitHub Desktop
GitHib Acount
Download and Install GitHub Desktop
Getting Started with Git (GitHub) in VS Code
.gitignore
What is .gitignore?
Why Use .gitignore?
How to Create .gitignore?
[Extra] Additional Great Videos for VS Code
Title: Deploying Streamlit App on Streamlit Community Cloud
🔥 Create your First Streamlit App NEW
Topic 8 - Deploying Streamlit App