DEV Community: Streamlit

How to build a movie recommendation app without the complexities of vector databases

Streamlit — Tue, 10 Sep 2024 22:52:16 +0000

Originally published on the Streamlit blog by Liz Acosta

You are what you eat; your model is what your model ingests.

Not only does data inform AI systems, data is the output you ultimately receive. That’s why it’s important to have “good” data. It doesn’t matter how powerful your model is, garbage in will always result in garbage out.

In software development, this isn’t a new concept or problem. However, AI demands a more sophisticated data strategy throughout the ETL process. This can slow the delivery of your AI-integrated applications.

In this recipe, you’ll use Weaviate to abstract away the complexity associated with vector databases, allowing you to implement a powerful search and recommendation system with way less technical overhead. Then we’ll use Streamlit to build the chatbot part of the app.

And don’t panic! There’s no frontend involved!

Read on to learn:

What Weaviate is
What Streamlit is
How to build a demo Weaviate movie recommendation Streamlit app
How to query a Collection in Weaviate Cloud

Don’t feel like reading? Here are some other ways to explore this demo:

Find the code in the Streamlit Cookbook repo
Watch a video walkthrough with Weaviate technical curriculum developer, JP Hwang
Check out a deployed version of the app

What is Weaviate?

Weaviate is an AI-native database designed to help you build amazing, scalable, and production-grade AI-powered applications. It offers robust features for data storage, retrieval, and querying as well as integrations with AI models, making it an excellent choice for developers looking to integrate AI capabilities into their apps.

The Streamlit-Weaviate Connection

The Streamlit-Weaviate connection is a wrapper that simplifies the process of integrating Weaviate with Streamlit applications. This connection allows you to perform various operations, such as connecting to a remote or local Weaviate instance, performing queries, and using the underlying Weaviate Python client. The project is open-source so contributions are always welcome.

Key features

Connect to a Weaviate Cloud instance: Easily connect to a Weaviate cloud instance using a URL and API key
Connect to a locally running Weaviate instance: Easily connect to a Weaviate instance running locally
Perform queries: Execute simple and advanced queries using the query or GraphQL query methods
Use the Weaviate Python client: Leverage the full capabilities of the Weaviate Python client for more complex operations
Support for local instances: Connect to a local Weaviate instance using default parameters
Secrets management: Streamlit can handle secret management for secure connections

What is Streamlit?

Streamlit is an open-source Python framework to build highly interactive apps – in only a few lines of code. Streamlit integrates with all the latest tools in generative AI, such as any LLM, vector database, or various AI frameworks like LangChain, LlamaIndex, or Weights & Biases. Streamlit’s chat elements make it especially easy to interact with AI so you can build chatbots that “talk to your data.”

Combined with a platform like Replicate, Streamlit allows you to create generative AI applications without any of the app design overhead.

To learn more about Streamlit, check out the 101 guide.

💡 To learn more about how Streamlit biases you toward forward progress, check out this blog post.

Try the app recipe: Weaviate + Streamlit

In this demo, you’ll spin up a movie recommendation app that utilizes Weaviate for backend data management and Streamlit chat elements on the frontend for interaction. The app accepts a natural language input from a user and uses Weaviate to translate the input into a query and then generate a list of movie titles.

There are three different kinds of search modes available:

Keyword: This search mode uses BM25 to rank documents based on the relative frequencies of search terms. In this particular app, that means the results returned are based on how often the search keywords appear in the different movie properties.

Semantic: This type of search uses vectors to generate results based on their similarity to your search query. In other words, the results returned are based on a similarity of “meaning.” To learn more about vector databases, check out Weaviate’s Gentle Introduction to Vector Databases.

Hybrid: A hybrid search combines vector and BM25 searches to offer best-of-both-worlds search results.

Prerequisites

Python >=3.8, !=3.9.7
A Weaviate sandbox instance (This will give you the API and URL to use in the code as well)
A Cohere API key

In this app, the Cohere API is used for two different operations:

To summarize the query results into a natural language recommendation
To transform the MovieDemo data and queries into high-dimensional vector representations for the semantic and hybrid search modes

Please note that both Weaviate and Cohere have limits on their trial accounts. Check their websites for more details.

💡 To learn more about API keys, check out the blog post here.

Environment setup

Local setup: Create a virtual environment

Clone the Cookbook repo: git clone https://github.com/streamlit/cookbook.git
From the Cookbook root directory, change directory into the recipe: cd recipes/weaviate

Add the necessary secrets to the .streamlit/secrets_template.toml file:

WEAVIATE_API_KEY = "your weaviate key goes here"
WEAVIATE_URL = "your weaviate url goes here" 
COHERE_API_KEY = "your cohere api key goes here"

Update the filename from secrets_template.toml to secrets.toml: mv .streamlit/secrets_template.toml .streamlit/secrets.toml
(To learn more about secrets handling in Streamlit, refer to the documentation here.)
Create a virtual environment: python3 -m venv weaviatevenv
Activate the virtual environment: source weaviatevenv/bin/activate
Install the dependencies: pip install -r requirements.txt

Add data to your Weaviate Cloud

Create a Weaviate Cloud Collection and add data to it: python3 helpers/add_data.py
(Optional) Verify the data: python3 helpers/verify_data.py

Query the MovieDemo collection in Weaviate Cloud

You can access the Query panel via the Weaviate Cloud UI.

Copy and paste the following query in the editor:

{ Get
{MovieDemo (limit: 3 where: { 
    path: ["release_year"], 
    operator: Equal, 
    valueInt: 1985}){ 
budget 
movie_id 
overview 
release_year 
revenue 
tagline 
title 
vote_average 
}}}

Click on the arrow to execute the query

The Weaviate Cloud Query tool is a browser-based GraphQL IDE. In the example query above, we are telling Weaviate to return the budget, movie_id, overview, release_year, revenue, tagline, title, vote_average, vote_count properties for the objects in the MovieDemo collection with a release_year of 1985. We do this by setting the path to ["release_year"], the operator to Equal, and the valueInt to 1985. We also limit the query results to three objects with limit: 3.

You should get back a result of three movies with the release year 1985.

This is a simple query that forms the foundation of more complex queries. To learn more about different kinds of searches available with the Weaviate Cloud Query tool, check out the documentation.

Run the demo Weaviate Streamlit recommendation app

To run the demo app, use the Streamlit CLI: streamlit run demo_app.py.

Running this command deploys the app to a port on localhost. When you access this location, you should see a Streamlit app running. Please note that this version of the demo app does not feature the poster images so it will look different from the deployed app.

Vector databases made easy

Using Streamlit-Weaviate Connection means you can easily create and integrate vector databases in your Streamlit apps.

In demo_app.py, the Weaviate connection is created here:

def setup_weaviate_connection(env_vars):
    """Setup Weaviate connection"""
    return st.connection(
        "weaviate",
        type=WeaviateConnection,
        url=env_vars["WEAVIATE_URL"],
        api_key=env_vars["WEAVIATE_API_KEY"],
        additional_headers={"X-Cohere-Api-Key": env_vars["COHERE_API_KEY"]},
    )

Using Streamlit chat elements, a prompt is created and a query is made here:

        with conn.client() as client:
            collection = client.collections.get("MovieDemo")
            response = collection.generate.hybrid(=
                query=movie_type,
                filters=(                 Filter.by_property("release_year").greater_or_equal(year_range[0]) &                  Filter.by_property("release_year").less_or_equal(year_range[1])
                ),
                limit=SEARCH_LIMIT,
                alpha=SEARCH_MODES[mode][1],
                grouped_task=rag_prompt,
                grouped_properties=["title", "tagline"],
            )

The result is a fully interactive recommendation app with no JavaScript experience required!

If you would like to learn more about Weaviate, check out the Weaviate Quickstart and Weaviate Academy.

Unlock the potential of AI with Streamlit

With Streamlit, months and months of app design work are streamlined to just a few lines of Python. It’s the perfect framework for showing off your latest AI inventions.

Get up and running fast with other AI recipes in the Streamlit Cookbook. (And don’t forget to show us what you’re building in the forum!)

Happy Streamlit-ing! 🎈

How to create an AI chatbot using one API to access multiple LLMs

Streamlit — Fri, 23 Aug 2024 20:58:30 +0000

Originally published on the Streamlit blog by Liz Acosta

Remember how cool it was playing with an AI image generator for the first time? Those twenty million fingers and nightmare spaghetti-eating images were more than just amusing, they inadvertently revealed that oops! AI models are only as smart as we are. Like us, they also struggle to draw hands.

AI models have quickly become more sophisticated, but now there are so many of them. And – again – like us, some of them are better at certain tasks than others. Take text generation, for example. Even though Llama, Gemma, and Mistral are all LLMs, some of them are better at generating code while others are better at brainstorming, coding, or creative writing. They offer different advantages depending on the prompt, so it may make sense to include more than one model in your AI application.

But how do you integrate all these models into your app without duplicating code? How do you make your use of AI more modular and therefore easier to maintain and scale? That’s where an API can offer a standardized set of instructions for communicating across different technologies.

In this blog post, we’ll take a look at how to use Replicate with Streamlit to create an app that allows you to configure and prompt different LLMs with a single API call. And don’t worry – when I say “app,” I don’t mean having to spin up a whole Flask server or tediously configure your routes or worry about CSS. Streamlit’s got that covered for you 😉

Read on to learn:

What Replicate is
What Streamlit is
How to build a demo Replicate chatbot Streamlit app
And best practices for using Replicate

Don’t feel like reading? Here are some other ways to explore this demo:

Find the code in the Streamlit Cookbook repo here
Try out a deployed version of the app here
Watch a video walkthrough from Replicate founding designer, Zeke Sikelianos, here

What is Replicate?

Replicate is a platform that enables developers to deploy, fine tune, and access open source AI models via a CLI, API, or SDK. The platform makes it easy to programmatically integrate AI capabilities into software applications.

Available models on Replicate

Text: Models like Llama 3 can generate coherent and contextually relevant text based on input prompts.
Image: Models like stable diffusion can generate high-quality images from text prompts.
Speech: Models like whisper can convert speech to text while models like xtts-v2 can generate natural-sounding speech.
Video: Models like animate-diff or variants of stable diffusion like videocrafter can generate and/or edit videos from text and image prompts, respectively.

When used together, Replicate allows you to develop multimodal apps that can accept input and generate output in various formats whether it be text, image, speech, or video.

What is Streamlit?

Combined with a platform like Replicate, Streamlit allows you to create generative AI applications without any of the app design overhead.

💡 To learn more about how Streamlit biases you toward forward progress, check out this blog post.

To learn more about Streamlit, check out the 101 guide.

Try the app recipe: Replicate + Streamlit

But don’t take my word for it. Try out the app yourself or watch a video walk through and see what you think.

In this demo, you’ll spin up a Streamlit chatbot app with Replicate. The app uses a single API to access three different LLMs and adjust parameters such as temperature and top-p. These parameters influence the randomness and diversity of the AI-generated text, as well as the method by which tokens are selected.

💡 What is model temperature? Temperature controls how the model selects tokens. A lower temperature makes the model more conservative, favoring common and “safe” words. Conversely, a higher temperature encourages the model to take more risks by selecting less probable tokens, resulting in more creative outputs.

💡 What is top-p? Also known as “nucleus sampling” — is another method for adjusting randomness. It works by considering a broader set of tokens as the top-p value increases. A higher top-p value leads to a more diverse range of tokens being sampled, producing more varied outputs.

Prerequisites

Python version >=3.8, !=3.9.7
A Replicate API key (Please note that a payment method is required to access features beyond the free trial limits.)

💡 To learn more about API keys, check out the blog post here.

Environment setup

Local setup

Clone the Cookbook repo: git clone https://github.com/streamlit/cookbook.git
From the Cookbook root directory, change directory into the Replicate recipe: cd recipes/replicate
Add your Replicate API key to the .streamlit/secrets_template.toml file
Update the filename from secrets_template.toml to secrets.toml: mv .streamlit/secrets_template.toml .streamlit/secrets.toml (To learn more about secrets handling in Streamlit, refer to the documentation here.)
Create a virtual environment: python -m venv replicatevenv
Activate the virtual environment: source replicatevenv/bin/activate
Install the dependencies: pip install -r requirements.txt

GitHub Codespaces setup

From the Cookbook repo on GitHub, create a new codespace by selecting the Codespaces option from the Code button
Once the codespace has been generated, add your Replicate API key to the recipes/replicate/.streamlit/secrets_template.toml file
Update the filename from secrets_template.toml to secrets.toml
(To learn more about secrets handling in Streamlit, refer to the documentation here.)
From the Cookbook root directory, change directory into the Replicate recipe: cd recipes/replicate
Install the dependencies: pip install -r requirements.txt

Run a text generation model with Replicate

Create a file in the recipes/replicate directory called replicate_hello_world.py

Add the following code to the file:

import replicate   

import toml

import os

# Read the secrets from the secrets.toml file
with open(".streamlit/secrets.toml", "r") as f:
    secrets = toml.load(f)

# Create an environment variable for the Replicate API token 
os.environ['REPLICATE_API_TOKEN'] = secrets["REPLICATE_API_TOKEN"]

# Run a model
for event in replicate.stream("meta/meta-llama-3-8b",
                             input={"prompt": "What is Streamlit?"},):
    print(str(event), end="")

Run the script: python replicate_hello_world.py

You should see a print out of the text generated by the model.

To learn more about Replicate models and how they work, you can refer to their documentation here. At its core, a Replicate “model” refers to a trained, packaged, and published software program that accepts inputs and returns outputs.

In this particular case, the model is meta/meta-llama-3-8b and the input is "prompt": "What is Streamlit?". When you run the script, a call is made to the Replicate endpoint and the printed text is the output returned from the model via Replicate.

Run the demo Replicate Streamlit chatbot app

To run the demo app, use the Streamlit CLI: streamlit run streamlit_app.py.

Running this command deploys the app to a port on localhost. When you access this location, you should see a Streamlit app running.

You can use this app to prompt different LLMs via Replicate and produce generative text according to the configurations you provide.

A common API for multiple LLM models

Using Replicate means you can prompt multiple open source LLMs with one API which helps simplify AI integration into modern software flows.

This is accomplished in the following block of code:

for event in replicate.stream(model, 
                             input={"prompt": prompt_str,
                             "prompt_template": r"{prompt}", 
                             "temperature": temperature,
                             "top_p": top_p,}):
    yield str(event)

The model, temperature, and top p configurations are provided by the user via Streamlit’s input widgets. Streamlit’s chat elements make it easy to integrate chatbot features in your app. The best part is you don’t need to know JavaScript or CSS to implement and style these components – Streamlit provides all of that right out of the box.

Replicate best practices

Use the best model for the prompt

Replicate provides an API endpoint to search for public models. You can also explore featured models and use cases on their website. This makes it easy to find the right model for your specific needs.

Different models have different performance characteristics. Use the appropriate model based on your needs for accuracy and speed.

Improve performance with webhooks, streaming, and image URLs

Replicate's output data is only available for an hour. Use webhooks to save the data to your own storage. You can also set up webhooks to handle asynchronous responses from models. This is crucial for building scalable applications.

Leverage streaming when possible. Some models support streaming, allowing you to get partial results as they are being generated. This is ideal for real-time applications.

Using image URLs provides improved performance over the use of uploaded images encoded by base 64.

Unlock the potential of AI with Streamlit

With Streamlit, months and months of app design work are streamlined to just a few lines of Python. It’s the perfect framework for showing off your latest AI inventions.

Get up and running fast with other AI recipes in the Streamlit Cookbook. (And don’t forget to show us what you’re building in the forum!)

Happy Streamlit-ing! 🎈

Streamlit 101: The fundamentals of a Python data app

Streamlit — Tue, 20 Aug 2024 20:28:49 +0000

Originally published on the Streamlit blog by Chanin Nantasenamat

Picture this: You’re a data scientist and the company you work for needs to make some decisions – fast! You need a way to munge the numbers, investigate emerging trends, and help your stakeholders take action on those trends. You know that a data app would be the perfect solution for the job, but you don’t have time to get bogged down in complex web development, tedious UI styling, or slow iteration cycles.

Creating interactive data applications shouldn't be this hard! 😭

This is exactly why Streamlit exists.

In this blog post, we'll cover the fundamentals of Streamlit, how it works, and how you can get started with it. You can find the example code for this post here or watch the step-by-step video tutorial on YouTube.

What is Streamlit?

Streamlit is an open-source Python framework to build highly interactive data apps – in only a few lines of code. The point of Streamlit is to allow you to focus on what’s most important to you: Your data analysis!

Intuitive syntax

One of Streamlit’s standout features is that it has intuitive default styles “baked in” so you can deploy and share polished apps with anyone anywhere. For example, to write a header, you use st.header(). To add some text, you use st.write(). Need a divider? Just use st.divider(). No CSS, HTML, or JavaScript experience required!

Seamlessly composable, AI compatible

With Streamlit, you don’t have to do any “app thinking” – you don’t have to think about the UI, the styling, or the routing. Streamlit simply extends what you’re already doing in Python.

It's compatible with a wide range of data libraries, including Pandas, NumPy, and Altair. Streamlit integrates with all the latest tools in generative AI, such as any LLM, vector database, or various AI frameworks like LangChain, LlamaIndex, or Weights & Biases. Streamlit’s chat elements make it especially easy to interact with AI so you can build chatbots that “talk to your data.”

Your go-to UI

Streamlit gets you to a working version 0 of your app faster. You can get your app in front of users faster, get feedback faster, and improve faster. Streamlit makes your iteration cycles shorter.

Today the Streamlit community has over 300k monthly active developers and is used by 80% of Fortune 50 companies. Whether you’re on a data team, a seasoned data scientist, or a new Python developer, the possibilities with Streamlit are endless.

Getting started with Streamlit using Codespaces

There are many ways to get started with Streamlit. For this blog post, we are going to use GitHub Codespaces. Codespaces is a cloud-hosted development environment where you can use an in-browser editor to start coding with Streamlit.

Launch Codespaces

Start by launching Codespaces from within your GitHub account.
Spin up a new instance

Create a new instance using a blank Codespaces template.
Install Streamlit

Run pip install streamlit to install the framework.
Create a simple app

You can create a basic “Hello world” app in just two lines of code by creating a new Python file called streamlit_app.py and adding the following code to it:
```
import streamlit as st

st.write("My first Streamlit app 🎈")
```
Run your app

Run your new app with the command streamlit run streamlit_app.py.
View your app

Your app should appear in a new browser tab – see how quick that was?

Now that we have our first Streamlit app built out, let’s see how we can extend the app.

Building a typical Streamlit app

The most important part of a good data app is effectively visualizing your data analysis so insights are easier to glean. Interactivity helps users explore the data.

Let’s take a look at different ways to visualize data and add interaction with Streamlit.

Load your data

Before we get into any of the example data visualizations, we need to load our data. The following code uses Pandas to create a function that loads the data from a CSV file.

Then we use the @st.cache_data decorator to speed up our app. Learn more about caching in Streamlit here.

Make sure to add Pandas to your imports before you use it.

@st.cache_data

def load_data():

return pd.read_csv("https://github.com/dataprofessor/population-dashboard/raw/master/data/us-population-2010-2019-reshaped.csv", index_col=0

Example 1: Inspect your data

st.data_editor displays data in an editable table.

st.header("1. Inspect the data 🔍")

st.write("`st.data_editor` allows us to display AND edit data")

st.data_editor(df)

Example 2: A simple bar chart

st.bar_chart displays the data in a bar chart form. In the following code, we create a bar chart with our data and declare the x and y axis as states and population, respectively.

st.header("2. Get started with a simple bar chart 📊")

st.write("Let's chart the US state population data from the year 2019")

st.bar_chart(df[['year', 'states', 'population']],

             x='states',

             y='population')

Example 3: Add interactivity to a bar chart

The more interactive your app, the more your data comes to life for your users. With Streamlit, it’s easy to add selection boxes, sliders, and numerical inputs so users can explore your data.

The following code contains three different types of interactivity. Comment and uncomment the code to see which one suits your needs the best.

st.header("3. Now make it interactive")

st.write("It's your turn to select a year")

# Using st.selectbox

selected_year = st.selectbox("Select a year",

                             list(df.year.unique())[::-1])

# Using st.slider

# selected_year = st.slider("Select a year", 2010, 2019)

# Using st.number_input

# selected_year = st.number_input("Enter a year",

# placeholder="Enter a year from 2010-2019", value=2019)

if selected_year:

    df_selected_year = df[df.year == selected_year]

    # Display chart

    st.bar_chart(df_selected_year,

                 x='states',

                 y='population')

Example 4: Integrate another Python library to create a line chart

st.altair_chart uses the Vega-Altair library to display data as a line chart. Please note that you’ll have to import Altair before you can use it.


st.header("4. How about a line chart? 📈")

st.write("Track changes over time")

df_line_chart = df.copy()

df_line_chart['year'] = df_line_chart['year'].astype(str)

c = (

    alt.Chart(df_line_chart)

     .mark_line()

     .encode(x=alt.X('year'),

             y=alt.Y('population'),

             color='states')

)

st.altair_chart(c, use_container_width=True)

Example 5: Add interactivity to an Altair line chart

Like the bar chart above, you can add interactivity to a line chart with st.multiselect.

st.header("5. Sprinkle in more interactivity")

st.write("Use `st.multiselect` and `st.slider` for data filter before chart creation")

states = st.multiselect("Pick your states",

                        list(df.states.unique())[::-1],

                        "California")

date_range = st.slider("Pick your date range",

                       2010, 2019,

                       (2010, 2019))

if states:

    chart_data = df[df['states'].isin(states)]

    chart_data = chart_data[chart_data['year'].between(date_range[0], date_range[1])]

    chart_data['year'] = chart_data['year'].astype(str)

    c = (

        alt.Chart(chart_data)

         .mark_line()

         .encode(x=alt.X('year'),

                 y=alt.Y('population'),

                 color='states')

    )

    st.altair_chart(c, use_container_width=True)

The best part is you don’t have to deal with styling all of these different elements – Streamlit takes care of that for you!

Extending Streamlit functionality

And that’s just the beginning! To find the right API for your needs, check out the documentation.

While Streamlit's native framework is flexible enough for most use cases, there may be times when you need to extend its functionality. The Streamlit community has built hundreds of reusable components that you can easily integrate into your app. These custom-built components turn complex JavaScript code into a single line of Python, making it easier than ever to add advanced features to your app.

You can find available components here.

Deploying Streamlit apps

Deploying your Streamlit app is straightforward and can be done in several ways:

Local Deployment: Run your app locally.
Server Deployment: Deploy your app on your preferred server.
Streamlit Community Cloud: A completely free way to deploy and share your apps. With millions of views each month, public apps on Streamlit Community Cloud are indexable by Google and can be discovered by anyone around the world. It's a fantastic way to showcase your creativity – whether you're building chatbots, visualizing machine learning models, creating internal tools, or working on your latest passion project.

To learn more about different deployment options, read the documentation here.

Scaling with Snowflake

For those looking for extended scale and security, Streamlit also works seamlessly on the Snowflake platform, where all infrastructure and role-based governance are handled for you. To learn more about Streamlit in Snowflake, refer to the documentation here.

What will you build?

Streamlit is revolutionizing the way we build and share data applications. Its speed, intuitive syntax, and seamless composability make it an invaluable tool for anyone working with data. Dive into Streamlit today and start building your own interactive data apps.

We can't wait to see what you create!

Happy Streamlit-ing! 🎈

Just build it

Streamlit — Tue, 13 Aug 2024 01:29:31 +0000

Originally published on the Streamlit blog by Thiago Teixeira

If you’re reading this, you’re probably already familiar with Streamlit. If not, here’s a summary: Streamlit is a Python framework for building data apps. It’s opinionated, it has batteries included, and it’s deeply tied to a specific design system.

It’s focused on data apps. Everything we do stems from this. We don’t target generic apps like the ones on your phone or your favorite SaaS, but the kinds of apps data scientists and ML engineers need to make their work impactful at their organizations.
It’s opinionated because we want to promote a fast, iterative workflow, and to uphold what we think are best practices in engineering.
It has batteries included so most of what you need to get started is in the library itself.
And finally, it’s tied to a design system so you don’t spend time building a component library, visual language, or identity. You just get started — and fast.

At this point, I could tell you about how we started Streamlit. About how it started from a good hunch, based on our previous experience in industry and academia. About how we dove deep into different companies and observed their data scientists and ML engineers at work in order to shape Streamlit. But Adrien already did that very well 5 years ago, and I don’t think I can top it!

So instead, I’ll talk about how our deep focus on data apps translates into product decisions we make every day. And for this, I’ll start with a tale …

The 10x new hire

Once upon a time, a Data Science team built a powerful forecast model of the company’s most important metrics. The Finance Team saw it and loved it, and then asked for a live version they could use in their weekly meetings. So the Data Team filed a request with the Tools Team to build a data app, and the Tools Team put it on their queue.

Three months and many meetings later, the app was delivered and it was beautiful.

But there was a wrinkle: When Finance tried it out, it wasn’t quite what they needed. So they filed another request with the Data Team, who passed it onto the Tools Team, and the Tools Team put it on their queue. Many months passed.

At that point, an unsuspecting New Hire joined the Data Team and was assigned a starter project: Putting together a quick data app to unblock the Finance Team while they waited for the real app from the Tools Team.

After some googling, the New Hire discovered Streamlit and, within a day, was able to share a minimal app with colleagues. It wasn’t perfect, but she addressed some of the feedback and updated the app. The next day, she showed it to her contact in the Finance Team, got more feedback, and refined the app accordingly.

Within three days, the Finance Team was regularly using the app in their meetings. They had more feedback and the New Hire quickly addressed it in newer versions.

Within a week, the CEO was using the app and the New Hire was hailed as a hero 💪

Why this happens

We’ve seen that story transpire countless times. The reason the New Hire’s app wins in the end is because a simple app today is better than an over-designed app 3 months late.

In fact, this is exactly how the best startups build their products! They ship a minimum viable product (MVP), put it in customers’ hands as soon as possible, and iterate relentlessly.

And in the process, they incrementally harden the underlying infrastructure. Because there’s a corollary to the New Hire’s story: As the team continues to use the app, they gradually productionize it.

That set of bespoke Pandas transformations that are super slow? They pull it into a separate data pipeline and some materialized tables.

That complex computation that other apps want to use? They move it into a RESTful service. They refactor the app into multiple pages as it grows. They write tests, they set up CI. And the app becomes bullet-proof.

The benefits of this flow are clear:

You build better apps because you often don’t know what you need until you try it out. So by building and user-testing, and building and user-testing again, you end up with a better app than if you had planned the whole thing ahead of time only to belatedly realize it’s not the solution you thought it was.
You get value from day 1. As you’re building and user-testing, you already have a useful app. And it only gets more and more useful along the way.
You don’t overbuild. Instead of building a pipeline at the same time as you build your app, you just get the app out and then harden it as it proves its usefulness. However, not all apps are useful, and not all useful apps live for long enough to require hardening. So you only spend your precious brain cycles on apps that are both useful and long-lived.

The way you start is simple: You just build it.

Intentional design

We like to think that it’s no accident the New Hire’s story happens at so many different companies. We like to think this story happens because we intentionally design Streamlit to promote forward progress.

When you first start writing an app, forward progress means having a draft in 5 minutes that is already useful in some way. And one thing that definitely makes an app more useful is interactivity. So, from early on, we had a strong sense that we should make interactivity as simple as possible.

For example, you shouldn’t have to create a “View” with a slider in it, then a “Controller” with a callback function that modifies the “Model” used by the slider (in other words, the MVC paradigm). Instead we came up with a single-line solution:

value = st.slider("Pick a number", 0, 100)

You type that and get an app that already does something. Forward progress!

Then, when building Session State two years later, we quickly learned that the proposed API would easily lead to off-by-one errors, and the only solution that worked was callbacks. Scarred by our past experiences with MVC and similar paradigms, we spent quite some time on the problem to come up with a decidedly “Streamlit-y” version of callbacks that avoided all that complexity. And — more importantly — the solution doesn’t force you to use callbacks from the get-go, but allows you to layer them on later as needed. Forward progress!

Another example that is near and dear to us —and certainly to the community— is styling. On one hand, the easiest thing for us to do would be to simply tack on support for CSS directly into Streamlit, with something like st.css(...) or st.write(..., style="css goes here"). But when we experiment with it, we notice unfettered access to styling quickly becomes a hindrance toward forward progress. Rather than get that first version out to stakeholders, people get stuck combing through MDN, fighting the cascade, tweaking selectors, and obsessing about single pixels. And, to top it off, the end result is often flaky and distracting.

So we tackle these requests by asking ourselves these questions:

“What is the underlying problem people are trying to solve?”
“How common is that problem?”
“Can we solve it ourselves and help free the developer?”

Depending on the answers to these questions, we follow one of two approaches:

Provide a one-line, opinionated solution to the problem

This happened a few months ago. We noticed tons of developers using CSS hacks to place a logo at the top-left corner of their apps, so we decided to give them a one-line solution with st.logo(). This new command draws their custom logo, makes it responsive to the sidebar’s state, makes sure it doesn’t overlap any content, and just looks good by default.

That’s also how we added text colors, lines under headers, borders around containers, vertical alignment, Material icons, and so on. They’re certainly opinionated solutions in terms of visuals and behavior, but the advantage is you just say what you want, Streamlit does it, and you move on to the next thing. Forward progress!
Provide a curated set of knobs … and watch

When a one-line opinionated solution won’t cut it, we introduce a minimal set of “knobs,” observe the result, and iterate. Since we don’t want to break compatibility, most of our features are one-way doors, meaning we must proceed with caution.

An example of this is theming. Everyone wants their apps to match their company’s colors and, of course, the exact colors vary by company. But Streamlit’s interface is made up of several dozen colors, and selecting a visually-pleasing combination can consume several hours. So our first stab at this problem was to let you pick just 4 colors, and Streamlit calculates all the others for you. Forward progress!

We’re now busy behind the scenes thinking up a second stab at this problem — an expanded solution that gives you more knobs (beyond colors, even!) without sacrificing iteration speed. Similarly, we’re also considering new, more flexible layout options beyond columns.

We have nothing to announce right now, but definitely keep an eye out 😉

In sum, we don’t want anything to distract you from forward progress. With every step we take, we try our hardest to provide a framework that abstracts away HTML, JS, CSS, HTTP, routes, serialization, callbacks, and all sorts of engineering details. This way, you’re able to focus on putting the power of data at the fingertips of your stakeholders so they, too, can make forward progress.

Iteration makes perfect

At Streamlit, we are avid users of Streamlit ourselves, which means we have our own pet peeves and feature requests. We share your pain points, and we’re always iterating on the library. We never want to stop iterating! Our commitment to this is demonstrated in the way we ship a new release each month.

We’re also inspired by the Streamlit community and your ingenuity. We constantly encounter apps and custom components that push the boundaries of Streamlit in ways we never thought possible, giving us new ideas for things to bring into the core library. The community is easily the best part of this job!

Because of that, we have so much more in store for you. We develop in the open, so you can always find our roadmap at roadmap.streamlit.app or attend the next Quarterly Showcase, where our product managers discuss the latest in Streamlit, like vertical alignment and advanced theming.

The beauty about iterating is that the best days are always ahead. We’re humbled to have you along for the ride.

Happy Streamlit-ing! 🎈