Codecademy Logo

Build a RAG App

Streamlit’s built-in functions

Streamlit widgets can be created with Streamlit’s built-in functions and code such as st.title('This is a title').

  • Text components such as st.title(), st.header(), st.subheader(), st.markdown(), st.text(), and st.code() allow for the display of different types of textual content, including titles, headers, subheaders, markdown text, plain text, and code snippets.

  • Layout components like st.sidebar(), st.columns(), and st.expander() help organize the app’s structure. They enable the addition of a sidebar for configurations, the division of the page into columns, and the creation of expandable sections for additional content. These can be combined using st.sidebar.text('Text in a sidebar') to organize content.

Interactive Widgets with Streamlit

  • To create a widget, you can use Streamlit’s built-in functions, such as st.button("Click Me") and st.text_area('Enter your text here') to create a button with the label “Click Me” and a text area for user input.

  • When a widget is interacted with, it changes the app’s state. For example, clicking a button sets its state to True, and the text entered in the text area can be saved as a variable using syntax like user_input = st.text_area('Enter your text here'). The app can then react to these state changes and user inputs to perform specific actions.

Persistent Clients in Chroma

A persistent client, instantiated using chromadb.PersistentClient("./"), ensures that the Chroma vector database is stored on disk, making the data persist across sessions. This means that even if the application is closed or restarted, the data remains intact and can be accessed in subsequent sessions.

Streamlit Buttons and Chroma Queries

To use buttons to trigger actions in Streamlit, you can create a button using st.button("Button Label"), executing specified actions when clicked. You can capture user inputs through various Streamlit widgets such as st.text_area() and st.slider(), and display these inputs using st.write().

For data collection queries, make sure you include your query logic within the button’s action block to dynamically retrieve and display results. For example, in the code snippet provided, clicking the “Get Answers” button captures the user’s question and number of results, executes a query on the Chroma collection, and displays the retrieved documents.

if st.button("Get Answers"):
    st.write(f"Question: {user_question}")
    st.write(f"Number of Results: {n_results}")


    # Query the Chroma collection
    results = collection.query(query_texts=[user_question], n_results=n_results)
    for res in results["documents"]:
        for txt in res:
            st.write(txt)

What is Streamlit?

Streamlit is an open-source Python library that enables the creation of interactive web applications. For example, a basic application can be saved as app.py containing:

import streamlit as st
st.title("Welcome to My Streamlit App")

To run the app, run streamlit run app.py from the command line, and it will be available at http://localhost:8501.

Querying Chroma Collections

The collection.query() method performs a search within a Chroma collection, returning documents that match the given query texts. Parameters include query_texts, a list of strings containing the texts to query, and n_results, the number of matching results to retrieve. 

results = collection.query(query_text='What is the oldest cooked food?', n_results=5)

RAG Components

  • The retriever searches a large corpus to find relevant documents based on the input query, exemplified by the collection.query() method in the provided code, which retrieves relevant documents and metadata from a Chroma database based on the user’s question. These retrieved documents and metadata are then processed and formatted into a coherent string.

  • A prompt is created, incorporating the user question and the formatted search results, which is then fed to the OpenAI API using the get_completion(prompt) function to generate the final response. This generated response is displayed to the user using st.write(response). This process ensures that the context from the retrieved documents is used to generate coherent and contextually relevant responses, demonstrating the integration of retrieval and generation in RAG.

results = collection.query(query_texts=[user_question], n_results=n_results, include=["documents", "metadatas"])
search_results = []
# Zip through the documents and metadatas together to create a list of results with the document and metadata
for res in results["documents"]:
    for doc, meta in zip(res, results["metadatas"][0]):
        # Format the document text and its metadata
        metadata_str = ", ".join(f"{key}: {value}" for key, value in meta.items())
        search_results.append(f"{doc}\nMetadata: {metadata_str}")
#Combine all search results together in a final string        
search_text = "\n\n".join(search_results)


prompt = f"""Your task is to answer the following user question using the supplied search results.


User Question: {user_question}


Search Results:
{search_text}
"""
#Use helper function to get complete results from OpenAI
response = get_completion(prompt)


# Display the response from OpenAI using Streamlit's st.write()
st.write(response)
Previous
Next

Learn more on Codecademy