Build LLM-powered chatbot in 5 minutes using HugChat and Streamlit
Tags: llm, chatbot, python, beginners
Published: 2023-05-27 17:08:52

In the rapidly evolving world of artificial intelligence (AI), chatbots have emerged as powerful tools for businesses to enhance customer interactions and streamline operations. Leveraging the capabilities of Language Models, chatbots are becoming increasingly intelligent, capable of understanding and responding to human language with remarkable accuracy.

In this blog, we will explore the fascinating world of building a chatbot using LLM (Large Language Models) and two popular frameworks: HugChat and Streamlit. LLMs, such as OpenAI’s GPT-3.5, have revolutionized natural language processing and understanding, enabling chatbots to converse more naturally and provide contextually relevant responses.

We will dive into a step-by-step process of developing an LLM-powered chatbot using HugChat, a powerful Python library that simplifies the integration of LLMs into chatbot applications. Furthermore, we will leverage Streamlit, a user-friendly framework for creating interactive web applications, to provide a seamless user interface and deployment platform for our chatbot.

## Getting Started
### Table of contents
- What is HugChat
- Creating a basic chatbot
- What is Streamlit
- Creating a basic streamlit app
- Building a LLM powered chatbot

### What is HugChat
HugChat is an innovative and versatile Python package designed to simplify the development of chatbot applications. With HugChat, developers can quickly and effortlessly create intelligent conversational agents that interact with users in a natural and engaging manner.

HuggingChat is a freely available and open source option that serves as an alternative to commercial chat platforms like ChatGPT. It utilizes the LLaMa 30B SFT 6 (oasst-sft-6-llama-30b) model developed by OpenAssistant. Although the model may not be on par with GPT-4 in terms of capabilities, it is a highly competent LLM with a fascinating training background that is worth exploring.

[hugchat - HuggingChat Python API Leave a star |pypi.org](https://pypi.org/project/hugchat/)

### Creating a basic chatbot
In this section, we will create a basic chatbot using hugchat python package.

#### Installing the dependencies
Install the hugchat package using the following commands.

- Create and activate a virtual environment by executing the following command.

```
python -m venv venv
source venv/bin/activate #for ubuntu
venv/Scripts/activate #for windows
```
- Install hugchat package using pip.

```
pip install hugchat
```
#### Setting up the authentication
Hugchat chatbot class requires a `cookie_path` parameter to authenticate the server. Use the following steps provided by the author to create a `cookies.json` file.

- Install the Cookie-Editor extension for [Chrome](https://chrome.google.com/webstore/detail/cookie-editor/hlkenndednhfkekhgcdicdfddnkalmdm) or [Firefox](https://addons.mozilla.org/en-US/firefox/addon/cookie-editor/)
- Go to HuggingChat and login
- Open the extension
- Click Export on the bottom right, then Export as JSON(This saves your cookies to the clipboard)
- Create a cookies.json file and paste the clipboard content to it.

### Creating the app
Create a python file `basic.py` and add the following code to it.

```
from hugchat import hugchat

chatbot = hugchat.ChatBot(cookie_path="cookies.json")
id = chatbot.new_conversation()
chatbot.change_conversation(id)

print('Welcome to chatMATE')
print('\'q\' or \'quit\' to exit')
print('\'c\' or \'change\' to change conversation')
print('\'n\' or \'new\' to start a new conversation')

while True:
 user_input = input('> ')
 if user_input.lower() == '':
  pass
 elif user_input.lower() in ['q', 'quit']:
  break
 elif user_input.lower() in ['c', 'change']:
  print('Choose a conversation to switch to:')
  print(chatbot.get_conversation_list())
 elif user_input.lower() in ['n', 'new']:
  print('Clean slate!')
  id = chatbot.new_conversation()
  chatbot.change_conversation(id)
 else:
  print(chatbot.chat(user_input))
```
### Running the app
Execute the following command to run the app.

```
python basic.py
```
You will get the output as below.
![output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3jcu1loikbcpvdcx1657.png)

### What is Streamlit
Streamlit is an open-source Python library that simplifies the process of building interactive web applications for data science and machine learning tasks. It provides a user-friendly framework for creating and sharing data-focused applications, without requiring extensive web development knowledge. With Streamlit, developers can quickly prototype and deploy interactive dashboards, visualizations, and data-driven applications.

[Streamlit * A faster way to build and share data apps | streamlit.io](https://streamlit.io/)

- Install streamlit using the following command

```
pip install streamlit
```
- Start a basic hello from streamlit using the following command

```
streamlit hello
```

![output2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v3mykgcnddv5k020uudl.png)
![output3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1fjynwqomr8trr4f4brn.png)

### Creating a basic streamlit app
In this section we will create a basic streamlit app.

#### Installing the dependencies
Install the streamlit package using the following commands.

- Create and activate a virtual environment by executing the following command.

```
python -m venv venv
source venv/bin/activate #for ubuntu
venv/Scripts/activate #for windows
```
- Install streamlit package using pip.

```
pip install streamlit
```
### Creating the app
Create a python file `greeting.py` and add the following code to it.

```
import streamlit as st
 
st.title("ChatMATE")
st.write("Your new virtual assistant")
name = st.text_input(label="",placeholder="Enter your name", max_chars=50)
if st.button('Submit'):
    st.write('Hi ' + name + ". How can I assist you today ?")
```
For more information on inputs controls and methods, checkout the following streamlit documentation reference.

[Get started - Streamlit Docs | docs.streamlit.io](https://docs.streamlit.io/library/get-started)

#### Running the app
Execute the following command to run the app.

```
streamlit run greeting.py
```
You will get the output as below.

![output4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4slm2kj84caoap6g3slr.png)
![output5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8zvnrqga2laovntah3bv.png)

## Building a LLM powered chatbot
We have discussed HugChat package and Streamlit so far. In this session, we will build a chatbot that can generate responses to the user input using a free, open-source LLM model OpenAssistant/oasst-sft-6-llama-30b-xor from the unofficial HuggingChat API known as HugChat and Streamlit.

### Installing the dependencies
Install the hugchat and streamlit packages using the following commands.

- Create and activate a virtual environment by executing the following command.

```
python -m venv venv
source venv/bin/activate #for ubuntu
venv/Scripts/activate #for windows
```
- Install streamlit, streamlit-chat, streamlit-extras, hugchat packages using pip.

```
pip install streamlit streamlit-chat streamlit-extras hugchat
```
- Generate `cookies.json` file using the steps mentioned in the “Setting up the authentication” part or use the existing `cookies.json` file. Place the `cookies.json` file in the root folder where the `app.py` is located.
- Create a file app.py and add the following code to it.

```
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="ChatMATE - Chat Multi-purpose AI Technology")

# Generate empty lists for bot_response and user_input.
## bot_response stores AI generated responses
if 'bot_response' not in st.session_state:
    st.session_state['bot_response'] = ["I'm ChatMATE, How may I help you?"]
## user_input stores User's questions
if 'user_input' not in st.session_state:
    st.session_state['user_input'] = ['Hi!']

# Layout of input/response containers
input_container = st.container()
colored_header(label='', description='', color_name='blue-30')
response_container = st.container()

# User input
## Function for taking user provided prompt as input
def get_input():
    input_text = st.text_input("You: ", "", key="input")
    return input_text
## Applying the user input box
with input_container:
    user_input = get_input()

# Response output
## Function for taking user prompt as input followed by producing AI generated responses
def generate_response(prompt):
    chatbot = hugchat.ChatBot(cookie_path="cookies.json")
    response = chatbot.chat(prompt)
    return response

## Conditional display of AI generated responses as a function of user provided prompts
with response_container:
    if user_input:
        response = generate_response(user_input)
        st.session_state.user_input.append(user_input)
        st.session_state.bot_response.append(response)
        
    if st.session_state['bot_response']:
        for i in range(len(st.session_state['bot_response'])):
            message(st.session_state['user_input'][i], is_user=True, key=str(i) + '_user')
            message(st.session_state['bot_response'][i], key=str(i))
```
#### Understanding the code:
- Import prerequisite Python libraries such as `streamlit` and `hugchat`.
- Name the app using the `page_title` input argument in the `st.set_page_config` method.
- Initialize the chatbot by providing it a starter message, keep data in `bot_response` and `user_input` states.
- Create a general app layout using `st.container()` as a placeholder where the `input_container` and `response_container` variables correspond to the user and chatbot respectively.
- The `get_input()` method takes inputs from the user using `st.text_input()`.
- The `generate_response(prompt)` method takes user input as an argument to generate response using the HuggingChat API via `hugchat.ChatBot()`.

### Running the app
Execute the following command to run the app.
```
streamlit run app.py
```
You will get the output as below,

![output final](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qq13da1tqoeh4idaxmhd.png)

There you have it! Your first free open source LLM based chatbot :)

Thanks for reading this article.

Thanks Gowri M Bhatt for reviewing the content.

If you enjoyed this article, please click on the heart button ♥ and share to help others find it!

The full source code for this tutorial can be found here,

[GitHub - codemaker2015/chatMATE: An LLM-powered ChatBot with HugChat and Streamlit | github.com](https://github.com/codemaker2015/chatMATE)

The article is also available on [Medium](https://codemaker2016.medium.com/build-llm-powered-chatbot-in-5-minutes-using-hugchat-and-streamlit-d6b5102eea65).

Here are some useful links,

- [hugchat - HuggingChat Python API Leave a star | pypi.org](https://pypi.org/project/hugchat/)
- [Streamlit * A faster way to build and share data apps | streamlit.io](https://streamlit.io/)