Build AI Chatbots with Open-Source LLMs, LangChain, and Streamlit/

...

/

Introduction to Streamlit: Advanced Concepts

Introduction to Streamlit: Advanced Concepts

Learn about the functions and utilities of a Streamlit app.

We'll cover the following...

Advanced concepts

This covers more complex functionalities like caching and session management, which are essential for optimizing performance and maintaining state across reruns.

Architecture and pages

Streamlit allows us to build a website with multiple pages. To construct multi-page applications, we need to understand the structure of the Streamlit's multi-page architecture.

%0 node_1 main-repository/ node_3 pages/ node_1->node_3 node_1717228684883 src/ node_1->node_1717228684883 node_1717228414484 .streamlit/ node_1->node_1717228414484 node_1717228923380 .env node_1->node_1717228923380 node_1717228561282 requirements.txt node_1->node_1717228561282 node_1717228663215 app.py node_1->node_1717228663215 node_1717228316896 page_1.py node_3->node_1717228316896 node_1717228293278 page_2.py node_3->node_1717228293278 node_1717228802099 chatbot.py node_1717228684883->node_1717228802099 node_1717228699155 config.toml node_1717228414484->node_1717228699155 node_1717233549427 st.set_page_config() node_1717228663215->node_1717233549427
Directory structure

Description of files and folders

  • Main repository: This is the root folder of our Streamlit project.

  • Pages folder (pages/): This contains all the individual page scripts with the .py extension. Ensure this folder is always named pages.

  • Source folder (src/): This contains the main Python files necessary to run our chatbot.

  • Streamlit folder (.streamlit/): This contains the config.toml file, which holds all Streamlit configurations and styles. The [theme] sets all the colors and font styles. The colors can be white, black, cyan, magenta, etc... or HEX colors such as #00A1FF for blue color. The [server] part sets the maximum upload size in megabytes for files while using the streamlit upload widget. Ensure this folder is always named .streamlit and the file is always named config.toml.

[theme]
primaryColor="darkgrey"
backgroundColor="white"
secondaryBackgroundColor="white"
textColor="darkgrey"
font="sans serif"
base="light"
[server]
maxUploadSize = 150
config.toml

  • Environment file (.env): This file stores connection strings, endpoints, API keys, etc., in key-value pairs. It keeps secrets hidden from other users. For example, we can set the OpenAI key here in the ...

Access this course and 1400+ top-rated courses and projects.