How to Create a Powerful Chatbot in Minutes with Streamlit and OpenAI GPT-3.5: Getting Started with UI Development

Build the chat interface for WardleyGPT

Streamlit

Streamlit is a powerful open-source framework that enables data scientists and developers to easily create web-based user interfaces (UIs) for their machine learning (ML) models. With Streamlit, you can build intuitive and interactive web applications that allow users to interact with your ML models in real-time.

In this article, we’ll take a closer look at how easy it is to use Streamlit to create web UIs for ML models. Specifically, we’ll examine a code snippet that demonstrates how to create a chatbot using the OpenAI GPT-3.5 model.

Let’s take a closer look at the code snippet and see how it works

The first few lines of the code are just importing the required packages, including Streamlit, OpenAI. The streamlit_chat package is also imported, which provides a UI component for displaying messages in a chatbot format.

import streamlit as st
from streamlit_chat import message
import openai

Next, we configure the Streamlit page by setting the page title and displaying a title and sidebar with some information about the chatbot.

st.set_page_config(page_title="Chat with SimonGPT")
st.title("Chat with SimonGPT")
st.sidebar.markdown("Developed by Mark Craddock](https://twitter.com/mcraddock)", unsafe_allow_html=True)
st.sidebar.markdown("Current Version: 0.0.2")
st.sidebar.markdown("Not optimised")
st.sidebar.markdown("May run out of OpenAI credits")

Define the AI Model

We then set the model to use for the chatbot, in this case, the OpenAI GPT-3.5 turbo model.

model = "gpt-3.5-turbo"

Define the prompt

The next few functions are responsible for handling the chatbot messages. get_initial_message() is a function that returns a list of messages that are displayed to the user when the chatbot is first loaded.

This also defines the prompt we are going to use with OpenAI.

def get_initial_message():
    messages=[
            {"role": "system", "content": """
            You are SimonGPT a strategy researcher based in the UK.
            “Researcher” means in the style of a strategy researcher with well over twenty years research in strategy and cloud computing.
            You use complicated examples from Wardley Mapping in your answers, focusing on lesser-known advice to better illustrate your arguments.
            Your language should be for an 12 year old to understand.
            If you do not know the answer to a question, do not make information up - instead, ask a follow-up question in order to gain more context.
            Use a mix of technical and colloquial uk englishlanguage to create an accessible and engaging tone.
            Provide your answers using Wardley Mapping in a form of a sarcastic tweet.
            """},
            {"role": "user", "content": "I want to learn about Wardley Mapping"},
            {"role": "assistant", "content": "Thats awesome, what do you want to know aboout Wardley Mapping"}
        ]
    return messages

Helper functions

get_chatgpt_response() is a function that takes in a list of messages and the model to use, sends the messages to the OpenAI API, and returns the response from the chatbot.

def get_chatgpt_response(messages, model=model):
    response = openai.ChatCompletion.create(
    model=model,
    messages=messages
    )
    return response['choices'][0]['message']['content']

update_chat() is a helper function that adds a new message to the list of messages.

def update_chat(messages, role, content):
    messages.append({"role": role, "content": content})
    return messages

Streamlit Session Variables

As Streamlit always loads the page and runs every piece of code, everytime, we setup some session variables that when checked later, enable us to bypass some code, etc.

The next few lines of the code initialise some session state variables used to keep track of the chatbot messages.

if 'generated' not in st.session_state:
    st.session_state['generated'] = []
    
if 'past' not in st.session_state:
    st.session_state['past'] = []

User Input

We then create a text input field for the user to enter their query and display the chatbot’s response. The query variable is assigned the value of the text input field, and the get_initial_message() function is called to retrieve the initial messages if they haven't already been retrieved.

query = st.text_input("Question: ", "What is Wardley Mapping?", key="input")

if 'messages' not in st.session_state:
    st.session_state['messages'] = get_initial_message()

If the user enters a query, the chatbot messages are updated with the user’s query, and the get_chatgpt_response() function is called to generate a response from the chatbot. The response is then added to the session state variables for generated messages and past queries.

if query:
    with st.spinner("generating..."):
        messages = st.session_state['messages']
        messages = update_chat(messages, "user", query)
        response = get_chatgpt_response(messages, model)
        messages = update_chat(messages, "assistant", response)
        st.session_state.past.append(query)
        st.session_state.generated.append(response)

Finally, if there are generated messages in the session state variables, the message() function from the streamlit_chat package is used to display the chatbot messages in a chat format.

if st.session_state['generated']:
    for i in range(len(st.session_state['generated'])-1, -1, -1):
        message(st.session_state["generated"][i], key=str(i))
        message(st.session_state['past'][i], is_user=True, key=str(i) + '_user')

Deployment

Clone this GitHub repository

Now, pop over to streamlit.io and create an account and link it to your github repository.

Streamlit should start building and deploying your app. If you get the following error when it starts, make sure you add your OpenAI API key to the settings.

You’ll find ‘settings’ on the menu in the bottom right hand corner of the web page.

It should look something like this.

Within seconds, you should have a fully functioning chatbot like this.

Conclusion

As you can see, using Streamlit to create a chatbot with the OpenAI GPT-3.5 model is very straightforward. Streamlit provides a simple and intuitive interface for building web-based user interfaces that can interact with your ML models in real-time.

The streamlit_chat package also makes it easy to display chat messages in a chat format. With these tools, you can easily create powerful and interactive chatbots that can provide a wide range of services to your users.

Hang around and we will expand on this to add additional features and to chat with our own data.