How to Build an LLM-Powered ChatBot with Streamlit

The field of natural language processing has witnessed incredible advancements in recent years, leading to the rise of large language models (LLMs) and AI-powered chatbots. These chatbots are now widely adopted, offering robust support in brainstorming, productivity, and even coding assistance. While LLMs like ChatGPT are popular, their usage can incur significant costs due to token consumption. In this blog, we will build a cost-effective chatbot using an open-source LLM (OpenAssistant/oasst-sft-6-llama-30b-xor) powered by the unofficial HuggingChat API—all without needing API keys!

What You Will Learn

1. How to set up a chatbot app on Streamlit Community Cloud.
2. Step-by-step instructions to build and deploy the chatbot.

Features of the HugChat App

Before diving into the technical setup, let’s briefly explore the app. The chatbot consists of:

• Sidebar: Displays app information and developer credits.
• Main Panel: Allows users to input prompts and view conversations with the chatbot.

Step 1: Set Up and Deploy the App

To begin, clone the app-starter-kit repo as your template. Follow these steps:

1. Clone the Repo:
   • Click “Use this template” and name your new repo (e.g., mychatbot).
   • Create the repository from the template.
2. Deploy on Streamlit Community Cloud:
   • Follow this guide to deploy the cloned repo.
   • Edit the requirements.txt file to include these dependencies: streamlit hugchat streamlit-chat streamlit-extras

Once deployed, your app will spin up with the necessary libraries pre-installed.

Step 2: Building the Chatbot

1. Import Required Libraries

Use the following imports to include all necessary libraries:

import streamlit as st
from streamlit_chat import message
from streamlit_extras.colored_header import colored_header
from streamlit_extras.add_vertical_space import add_vertical_space
from hugchat import hugchat

2. Configure the Page

Define the app title and page settings using:

st.set_page_config(page_title="HugChat - An LLM-powered Streamlit app")

3. Create a Sidebar

Add a sidebar to display information about the app:

with st.sidebar:
    st.title('🤗💬 HugChat App')
    st.markdown('''
    ## About
    This app is an LLM-powered chatbot built using:
    - [Streamlit](https://streamlit.io/)
    - [HugChat](https://github.com/Soulter/hugging-chat-api)
    - [OpenAssistant/oasst-sft-6-llama-30b-xor](https://huggingface.co/OpenAssistant/oasst-sft-6-llama-30b-xor)

    💡 Note: No API key required!
    ''')
    add_vertical_space(5)
    st.write('Made with ❤️ by [Data Professor](https://youtube.com/dataprofessor)')

4. Initialize Session State

Use session state to manage user inputs and chatbot responses:

if 'generated' not in st.session_state:
    st.session_state['generated'] = ["I'm HugChat, How may I help you?"]

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

5. Create App Layout

Define containers for user input and chatbot responses:

input_container = st.container()
colored_header(label='', description='', color_name='blue-30')
response_container = st.container()

6. User Input

Add a text box for user input:

def get_text():
    input_text = st.text_input("You: ", "", key="input")
    return input_text

with input_container:
    user_input = get_text()

7. Generate Bot Responses

Define a function to generate responses using the HugChat API:

def generate_response(prompt):
    chatbot = hugchat.ChatBot()
    response = chatbot.chat(prompt)
    return response

Display responses in the app:

with response_container:
    if user_input:
        response = generate_response(user_input)
        st.session_state.past.append(user_input)
        st.session_state.generated.append(response)

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

Step 3: Full Code

Here’s the complete code for your chatbot app:

import streamlit as st
from streamlit_chat import message
from streamlit_extras.colored_header import colored_header
from streamlit_extras.add_vertical_space import add_vertical_space
from hugchat import hugchat

st.set_page_config(page_title="HugChat - An LLM-powered Streamlit app")

# Sidebar contents
with st.sidebar:
    st.title('🤗💬 HugChat App')
    st.markdown('''
    ## About
    This app is an LLM-powered chatbot built using:
    - [Streamlit](https://streamlit.io/)
    - [HugChat](https://github.com/Soulter/hugging-chat-api)
    - [OpenAssistant/oasst-sft-6-llama-30b-xor](https://huggingface.co/OpenAssistant/oasst-sft-6-llama-30b-xor)

    💡 Note: No API key required!
    ''')
    add_vertical_space(5)
    st.write('Made with ❤️ by [Data Professor](https://youtube.com/dataprofessor)')

# Session state initialization
if 'generated' not in st.session_state:
    st.session_state['generated'] = ["I'm HugChat, How may I help you?"]
if 'past' not in st.session_state:
    st.session_state['past'] = ['Hi!']

# App layout
input_container = st.container()
colored_header(label='', description='', color_name='blue-30')
response_container = st.container()

# User input
def get_text():
    input_text = st.text_input("You: ", "", key="input")
    return input_text

with input_container:
    user_input = get_text()

# Generate response
def generate_response(prompt):
    chatbot = hugchat.ChatBot()
    response = chatbot.chat(prompt)
    return response

with response_container:
    if user_input:
        response = generate_response(user_input)
        st.session_state.past.append(user_input)
        st.session_state.generated.append(response)

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

Wrapping Up

In this tutorial, we demonstrated how to build a chatbot using Streamlit and an open-source LLM via the HuggingChat API. This cost-effective solution eliminates the need for API keys and can be further customized to suit your needs. Start building your chatbot today and explore the endless possibilities of generative AI!