Final Output - Trainline App Review AI - Assistant

SITUATION

In part I, we finished building the backend of the chatbot using OpenAI GPT-4o mini as the Large Language Model (LLM), Chroma as the vector store, OpenAI Embedding as the embedding model and simailry search as the retriever configuration. Today, we continue our journey by integrating the backend to the frontend using Streamlit, free and open-source framework to rapidly build data science web apps.

<aside> 💡 Build a fully function App Review ChatBot Web Application… - Feature 1: Answer users prompt → Two chat message containers to show messages from the user and the bot → A chat input widget for the user type their messages → Bonus: write out repsonse with a typewriter effect - Feature 2: Able to recall previous conversation → A way to store all the chat history and display in the chat message containers

</aside>

We are going to build these design components using Streamlit and then plug the backend to generate the repsonse from our large language model.

Streamlit

Streamlit - A faster way to build and share data apps

What is Streamlit?

Streamlit is a tool that makes it easy to create interactive web applications, especially those that display data or visualizations. Imagine we have some data on our computer, like sales numbers or survey results, and we want to create a simple, user-friendly web page where people can explore this data. Streamlit helps us do that without needing to be experts in web development.

How Does Streamlit Work?

Think of Streamlit as a bridge between our data and a web page. Here’s how it works, step-by-step:

1. Prepare Our Data: We have some data that we want to show. This could be anything from a simple spreadsheet to more complex data stored in databases.
2. Write a Script: Using Streamlit, we write a short script in Python, a popular programming language. This script tells Streamlit what data to display and how to display it. For example, we might tell it to show a line chart of our sales numbers over time.
3. Run the Script: We run our script using Streamlit, and it automatically creates a web page based on our instructions. We don’t have to worry about the technical details of web development—Streamlit handles that for us.
4. Interact with the Web Page: The resulting web page is interactive. This means we can add sliders, buttons, and other controls to let users explore the data in different ways. For example, we might add a slider to filter data by date or a button to switch between different types of charts.

Why Use Streamlit?

1. Simplicity: Streamlit is designed to be easy to use, even if we’re not web developers. We can go from data to a web page in just a few lines of code.
2. Interactivity: We can create interactive web pages that let users explore our data in real-time. This is great for presentations, reports, or sharing insights with our team.
3. Fast Development: Because it’s so easy to use, we can quickly create and update our web pages as our data changes or as we get new ideas for how to display it.