Create a Powerful Streamlit Chatbot in Minutes!

Table of Contents

1. Introduction
2. Installing the Latest Version of Streamlit
3. Building a Simple Chat App
4. Customizing the "Chat_Message" Feature
5. Implementing Session State
6. Creating a Chat History
7. User Input with "Chat Input"
8. Saving User Input and Generating Responses
9. Using the OpenAI Library for a ChatGPT-like Clone
10. Setting Up Streamlit Secrets for API Key
11. Building the ChatGPT Clone
12. Testing and Conclusion

Introduction

In this article, we will explore the new chat feature introduced by Streamlit and learn how to build a ChatGPT clone in under 50 lines of code. We'll cover everything from installing the latest version of Streamlit to customizing the chat message feature, implementing session state, saving user input, generating responses, and even using the OpenAI library for a more advanced ChatGPT-like clone. By the end of this article, You'll have the knowledge and tools to Create your Own Chat application with ease.

1. Installing the Latest Version of Streamlit

Before we dive into building our chat application, it's important to ensure that We Are using the latest version of Streamlit. We can easily update our Streamlit installation by running the following command in our command prompt or terminal:

pip install streamlit --upgrade

Once we have the latest version installed, we can proceed to the next step of building our simple chat app.

2. Building a Simple Chat App

The first step in building our chat app is to import the Streamlit library and initialize our app. We can import Streamlit as st and use the new chat_message element to create a simple chat message. Here's an example:

import streamlit as st

st.chat_message(role='user', content='Hello')

This will create a simple chat message with the role set to "user" and the content set to "Hello". Running the app will display the chat message in the Streamlit interface.

3. Customizing the "Chat_Message" Feature

The chat_message feature in Streamlit allows us to customize the chat messages by changing the role and the Avatar. By default, the role is set to "user" and the avatar is represented by a user icon. We can change the role to "assistant" and see the avatar change to a bot icon. Additionally, we can use different pictures or emojis as avatars. Here's how we can do it:

import streamlit as st

st.chat_message(role='assistant', content='Hello', avatar='🤖')

This will display a chat message with the role set to "assistant" and the content set to "Hello" along with a bot icon as the avatar.

4. Implementing Session State

To make our chat app more interactive and provide a conversation history between the user and the assistant, we need to implement session state. Session state allows our app to remember data between user interactions, similar to a web browser's memory during a browsing session.

To implement session state, we'll first need to create a session variable to store our messages. We can initialize this variable to an empty list. For each message exchanged between the user and the assistant, we'll add a dictionary to this list. The dictionary will have two keys: 'role' and 'content'. The 'role' can be either 'user' or 'assistant', while the 'content' will contain the input or the corresponding response.

Here's an example of setting up session state and displaying the chat history:

import streamlit as st

# Session state setup
session_state = st.session_state

if 'messages' not in session_state:
    session_state.messages = []

# Displaying chat history
for message in session_state.messages:
    st.chat_message(role=message['role'], content=message['content'])

This code will display the chat history stored in the messages list. The role and content of each message will be shown in the chat message container.

5. Creating a Chat History

To get user input and generate responses, we'll need to create a chat input box. Streamlit provides the chat_input feature for this purpose. The chat input box will allow the user to Type their message and send it to the assistant.

We can use the walrus operator or a separate variable to store the user's input. Here's an example:

import streamlit as st

# Get user input with chat input
prompt = st.chat_input("User")

# Check if prompt is not None
if prompt is not None:
    st.chat_message(role='user', content=prompt)

In this example, we use the walrus operator to assign the user's input to the prompt variable and check if it's not None in one line. Alternatively, we can store the chat input in a separate variable and check if the prompt is not None in the next line.

6. Saving User Input and Generating Responses

Once we have the user's input, we can display it in a chat message container and save it to our session state variable. We'll add a dictionary to the messages list, containing the 'role' as 'user' and the 'content' as the prompt.

Next, we'll generate a response from the assistant. In this example, we'll implement an echo-like bot that responds with the same prompt as the answer. However, we can customize the response to ask ChatGPT or any other custom logic. We'll display the response in the chat container and save it to the session state list with the role set to 'assistant'.

Here's an example of saving user input and generating responses:

import streamlit as st

# Get user input with chat input
prompt = st.chat_input("User")

# Check if prompt is not None
if prompt is not None:
    # Display user input message
    st.chat_message(role='user', content=prompt)

    # Generate response from assistant
    response = prompt

    # Display response in chat container
    st.chat_message(role='assistant', content=response)

    # Save response to session state
    session_state.messages.append({'role': 'assistant', 'content': response})

With this code, the user's input will be displayed in the chat container along with the generated response from the assistant. The response will also be saved to the session state for future interactions.

7. Using the OpenAI Library for a ChatGPT-like Clone

To create a more advanced ChatGPT-like clone, we can utilize the OpenAI library. Before we proceed, we need to install the OpenAI library by running the following command in our command prompt or terminal:

pip install openai

Once we have the library installed, we can import it into our code and set up our OpenAI API Key. To keep our API key secure, we'll use Streamlit's secrets manager. We'll create a secrets.toml file in the .streamlit folder and store our API key there.

Here's an example of setting up the OpenAI library and using Streamlit secrets for the API key:

import streamlit as st
import openai
import os

# Set OpenAI API key
openai_key = st.secrets["openai_api_key"]
openai.api_key = openai_key

In this code, we load the OpenAI API key from the secrets.toml file using Streamlit's secrets manager. Make sure to replace "openai_api_key" with the name you provided in the secrets.toml file.

8. Building the ChatGPT Clone

Now that we have the OpenAI library set up, we can modify our chat app to use ChatGPT for generating responses. Instead of returning the same prompt as the answer, we want to ask ChatGPT for a response. We'll call the OpenAI API with our model and the conversation history so far.

To simulate a typing effect and make our app more interactive, we'll use the stream parameter in the OpenAI API call. This will allow us to slowly receive the ChatGPT response and Show it in the chat window as if the assistant is typing.

Here's an example of building the ChatGPT clone:

import streamlit as st
import openai

# Call OpenAI API for response
response = openai.ChatCompletion.create(
    model='gpt-3.5-turbo',
    messages=session_state.messages
)

# Display response in chat container with typing effect
for message in response.choices:
    role = 'assistant' if message['role'] == 'system' else 'user'
    content = message['message']['content']

    st.chat_message(role=role, content=content)

In this code, we call the OpenAI API with our model set to 'gpt-3.5-turbo' and the conversation history stored in our session state. The response.choices will contain the ChatGPT response, and we can display it in the chat container with a typing effect.

9. Testing and Conclusion

Once we have built our ChatGPT clone, we can test it by engaging in a conversation. We can type messages in the chat input box and see the chat history and the generated responses from the assistant.

In just a few steps and less than 50 lines of code, we have created our own ChatGPT clone. This demonstrates the power of Streamlit and the OpenAI library in building interactive and intelligent chat applications.

In conclusion, the Streamlit chat feature and the OpenAI library provide a seamless way to create interactive chat applications with minimal code. With the ability to customize chat messages, implement session state, and use advanced NLP models, developers can create engaging and dynamic chat applications that provide Meaningful interactions with users.

Make sure to check out the thorough Streamlit documentation and the OpenAI library for more details and examples.

Thank you for reading this article, and happy coding!

Highlights

• Streamlit introduced a new chat feature that allows users to build interactive chat applications.
• With less than 50 lines of code, it's possible to create a ChatGPT clone.
• The session state feature enables the app to remember data between user interactions, creating a conversation history.
• Streamlit provides the chat_input and chat_message features for user input and displaying chat messages.
• By using the OpenAI library, it's possible to enhance the chat app by utilizing advanced NLP models.
• Streamlit's secrets manager can be used to securely store API keys.

FAQ

Q: Can I customize the appearance of the chat messages, such as the avatar or the role? A: Yes, the chat_message feature in Streamlit allows you to customize the role and the avatar. You can use different pictures or emojis as avatars and change the role to "user" or "assistant".

Q: How can I make my chat app more interactive with a typing effect? A: By using the OpenAI library and the stream parameter in the API call, you can receive the ChatGPT response gradually, simulating a typing effect. This enhances the user experience and makes the app feel more interactive.

Q: Can I use a different NLP model instead of ChatGPT? A: Yes, with the OpenAI library, you have access to various NLP models. You can specify the model you want to use in the API call, such as "gpt-3.5-turbo". You can experiment with different models to achieve the desired behavior in your chat app.

Q: How can I secure my API key when using the OpenAI library? A: Streamlit provides a secrets manager that allows you to store sensitive information, such as API keys, securely. By creating a secrets.toml file in the .streamlit folder and adding your API key there, you can access it in your code without exposing it directly.

Q: Is it possible to create more complex chat applications with Streamlit? A: Absolutely! Streamlit provides a versatile platform for building interactive data applications, including chat apps. With the flexibility of Python and the convenience of Streamlit's components, you can create chat applications of varying complexity and customize them to suit your specific needs.