Building Chat Applications with OpenAI's GPT-3.5-turbo using Streamlit, Chainlit, and Gradio
Tags: python, opensource, openai, tutorial
Published: 2024-06-01 17:40:22

In this post, I will walk you through how to create chat applications using OpenAI's GPT-3.5-turbo on three different platforms: Streamlit, Chainlit, and Gradio. I will provide the complete code for each platform and explain how it works.

### Introduction

Chat applications have become an integral part of modern web applications, providing users with instant support and information. With OpenAI's powerful GPT-3.5-turbo model, building an intelligent chatbot is easier than ever. I'll demonstrate how to create a chat interface using three popular Python libraries: Streamlit, Chainlit, and Gradio.

### Prerequisites

Before I begin, ensure you have the following:
- Python installed on your system
- An OpenAI API key (You can get one by signing up on the [OpenAI website](https://www.openai.com/))

### Common Functionality

I will use a common function to interact with the OpenAI GPT-3.5-turbo API. This function will be used in all three implementations.

## Install the required libraries:
```
pip install openai
pip install streamlit
pip install chainlit
pip install gradio
```

### Import the OpenAI library

```python
import openai
```
This line imports the `openai` library, which is required to interact with OpenAI's API. This library provides functions to make API calls to OpenAI's language models.

### Set the OpenAI API key

```python
openai.api_key = "sk-xxxxxxxxxxxxxxxxxxxxxxxxxx"
```
This line sets the API key required to authenticate with OpenAI's API. The API key is a unique identifier that allows access to OpenAI's services. Replace `"sk-xxxxxxxxxxxxxxxxxxxxxxxxxx"` with your actual OpenAI API key.

### Define the function to get a response from OpenAI's model

```python
def get_response(text):
    response = openai.chat.completions.create(
        model="gpt-3.5-turbo",
        messages=[{"role":"user","content":text}]
    )
    return response.choices[0].message.content.strip()
```
This block defines a function `get_response` which takes a string `text` as input and returns a response generated by OpenAI's model.

1. **Function Definition:** `def get_response(text):`
   - This defines a function named `get_response` that accepts a single parameter `text`.

2. **Create API Request:** `response = openai.chat.completions.create(...)`
   - This line makes an API request to OpenAI to generate a completion based on the given input text.
   - The `model` parameter specifies which model to use, in this case, `"gpt-3.5-turbo"`.
   - The `messages` parameter is a list of message objects. Each object should have a `role` and `content`. Here, it indicates that the user is providing a text input.

3. **Return Response:** `return response.choices[0].message.content.strip()`
   - This line extracts the content of the first message from the response and removes any leading or trailing whitespace using `.strip()`.
   - `response.choices` is a list of possible completions generated by the model. In this case, we take the first completion (`choices[0]`), then access the `message` and `content` of that message.

### Main block to handle user input and display chatbot responses

```python
if __name__ == "__main__":
    while True:
        user_input = input("You: ")
        if user_input.lower() in ["bye", "exit"]:
            break
        response = get_response(user_input)
        print("Chatbot: ", response)
```
This block is the main part of the script that runs if the script is executed directly.

1. **Check if Script is Main:** `if __name__ == "__main__":`
   - This checks if the script is being run as the main module. If it is, the code inside this block will execute.

2. **Infinite Loop:** `while True:`
   - This creates an infinite loop that will keep running until explicitly broken out of.

3. **Get User Input:** `user_input = input("You: ")`
   - This prompts the user for input and stores it in the `user_input` variable.

4. **Check for Exit Condition:** `if user_input.lower() in ["bye", "exit"]:`
   - This checks if the user input is either "bye" or "exit" (in any case). If it is, the loop breaks, ending the program.

5. **Get Response from OpenAI:** `response = get_response(user_input)`
   - This calls the `get_response` function with the user's input to get a response from the OpenAI model.

6. **Print Chatbot Response:** `print("Chatbot: ", response)`
   - This prints the response from the chatbot to the console.

This script effectively creates a simple chatbot using OpenAI's GPT-3.5-turbo model, allowing for interactive text-based conversations.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bxtpnnv2m32je3t917ty.png)

## Building Chat Applications with OpenAI's GPT-3.5-turbo using Streamlit, Chainlit, and Gradio.

### 1. Streamlit Implementation

Streamlit is a powerful library for creating web applications with minimal effort. Below is the complete code for a Streamlit chat application.

```python
import streamlit as st
import openai

# Set your OpenAI API key
openai.api_key = "sk-xxxxxxxxxxxxxxxxxxxxxxxxxx"

# Function to get response from OpenAI
def get_response(text):
    response = openai.chat.completions.create(
        model="gpt-3.5-turbo",
        messages=[{"role": "user", "content": text}]
    )
    return response.choices[0].message.content.strip()

# Streamlit UI
st.title("Chat with OpenAI GPT-3.5-turbo")
user_input = st.text_input("You: ")

if st.button("Send"):
    if user_input:
        response = get_response(user_input)
        st.write(f"Chatbot: {response}")
```

#### Explanation

1. **Import Libraries**: Import `streamlit` and `openai`.
2. **OpenAI API Key**: Set your OpenAI API key.
3. **get_response Function**: Define a function to send user input to the OpenAI API and return the response.
4. **Streamlit UI**: Create a simple UI with a text input box and a button. When the button is clicked, the user's input is sent to the `get_response` function, and the response is displayed.

### 2. Chainlit Implementation

Chainlit is another library that simplifies the creation of web applications. Here’s how to create a chat application using Chainlit.

```python
import chainlit as cl
import openai

# Set your OpenAI API key
openai.api_key = "sk-xxxxxxxxxxxxxxxxxxxxxxxxxx"

# Function to get response from OpenAI
def get_response(text):
    response = openai.chat.completions.create(
        model="gpt-3.5-turbo",
        messages=[{"role": "user", "content": text}]
    )
    return response.choices[0].message.content.strip()

@cl.on_message
async def main(message: str):
    response = get_response(message)
    await cl.Message(content=response).send()
```

#### Explanation

1. **Import Libraries**: Import `chainlit` and `openai`.
2. **OpenAI API Key**: Set your OpenAI API key.
3. **get_response Function**: Define the same function to get the response from OpenAI.
4. **Chainlit Event**: Use `@cl.on_message` decorator to define an asynchronous function that processes incoming messages. When a message is received, the function gets a response from OpenAI and sends it back.

### 3. Gradio Implementation

Gradio provides an easy way to create web interfaces. Here’s the complete code for a Gradio chat application.

```python
import gradio as gr
import openai

# Set your OpenAI API key
openai.api_key = "sk-xxxxxxxxxxxxxxxxxxxxxxxxxx"

# Function to get response from OpenAI
def get_response(text):
    response = openai.chat.completions.create(
        model="gpt-3.5-turbo",
        messages=[{"role": "user", "content": text}]
    )
    return response.choices[0].message.content.strip()

# Gradio interface
def chat_interface(user_input):
    response = get_response(user_input)
    return response

iface = gr.Interface(
    fn=chat_interface,
    inputs=gr.inputs.Textbox(lines=2, placeholder="Enter your message here..."),
    outputs="text",
    title="Chat with OpenAI"
)

iface.launch()
```

#### Explanation

1. **Import Libraries**: Import `gradio` and `openai`.
2. **OpenAI API Key**: Set your OpenAI API key.
3. **get_response Function**: Define the same function to get the response from OpenAI.
4. **Gradio Interface**: Define a function `chat_interface` that takes user input and returns the response from OpenAI. Create a Gradio interface with text input and text output, then launch it.

### Running the Applications

To run these applications, save each code snippet in a separate Python file and execute it.

- **Streamlit**: Save the code in a file, e.g., `streamlit_chat.py`, and run `streamlit run streamlit_chat.py`.
- **Chainlit**: Save the code in a file, e.g., `chainlit_chat.py`, and run `python chainlit_chat.py`.
- **Gradio**: Save the code in a file, e.g., `gradio_chat.py`, and run `python gradio_chat.py`.

Each command will start a local web server, and you can access the chat application via the provided URL.

You can find the complete Github repository _[here](https://github.com/samagra44/openai_chatbot)_
If you find this project helpful, consider giving it a ⭐ star and forking it to contribute or stay updated!

### Conclusion

In this post, I've shown how to create a chat application using OpenAI's GPT-3.5-turbo on three different platforms: Streamlit, Chainlit, and Gradio. Each platform has its strengths, and you can choose the one that best fits your needs. With minimal code, you can create a powerful and interactive chat interface for your users.

Happy coding 😀

---