gradio/guides/06_other-tutorials/creating-a-chatbot.md

106 lines
6.8 KiB
Markdown
Raw Normal View History

# How to Create a Chatbot
Live website changes (#1578) * fix audio output cache (#804) * fix audio output cache * changes * version update Co-authored-by: Ali Abid <aliabid94@gmail.com> * Website Tracker Slackbot (#797) * added commands to reload script * catch errors with git pull * read new webhook from os variable * correcting bash * bash fixes * formatting * more robust error checking * only sends success if git changes * catching error from script * escaping error text to send with curl * correct text escaping for error message * fix search bug in guides (#809) * Update getting_started.md (#808) * Fix type of server returned by `Launchable` (#810) * `Launchable` returns a FastAPI now * Update .gitignore * Add a missing line to getting started (#816) Former-commit-id: 81e271ca22e838e1ee618d48cdb0e904fd233cf3 [formerly 96f203108bf1222fe333a0175687293abdc669d7] Former-commit-id: eaff13262853078e0c6c0baa54c731d9e56bc73f * Add a missing line to getting started (#816) Former-commit-id: 81e271ca22e838e1ee618d48cdb0e904fd233cf3 [formerly 81e271ca22e838e1ee618d48cdb0e904fd233cf3 [formerly 96f203108bf1222fe333a0175687293abdc669d7]] Former-commit-id: eaff13262853078e0c6c0baa54c731d9e56bc73f Former-commit-id: b5112c3f425c0ea961461854efae9c28a73aea01 * Add a missing line to getting started (#816) Former-commit-id: 81e271ca22e838e1ee618d48cdb0e904fd233cf3 [formerly 81e271ca22e838e1ee618d48cdb0e904fd233cf3 [formerly 81e271ca22e838e1ee618d48cdb0e904fd233cf3 [formerly 96f203108bf1222fe333a0175687293abdc669d7]]] Former-commit-id: eaff13262853078e0c6c0baa54c731d9e56bc73f Former-commit-id: b5112c3f425c0ea961461854efae9c28a73aea01 Former-commit-id: bce6f9c4c5254301eb73e76eb47cddab3e132c24 * Add a missing line to getting started (#816) Former-commit-id: 81e271ca22e838e1ee618d48cdb0e904fd233cf3 [formerly 81e271ca22e838e1ee618d48cdb0e904fd233cf3 [formerly 81e271ca22e838e1ee618d48cdb0e904fd233cf3 [formerly 81e271ca22e838e1ee618d48cdb0e904fd233cf3 [formerly 96f203108bf1222fe333a0175687293abdc669d7]]]] Former-commit-id: eaff13262853078e0c6c0baa54c731d9e56bc73f Former-commit-id: b5112c3f425c0ea961461854efae9c28a73aea01 Former-commit-id: bce6f9c4c5254301eb73e76eb47cddab3e132c24 Former-commit-id: feba0888e3d488b82a3518343f607517d0836f13 * Add a missing line to getting started (#816) * Clean-History - Remove 51MB file with this commit Former-commit-id: 34b6a2325d613eeef622410f2d1ff3d869d3133c * Clean-History - Remove 51MB file with this commit Former-commit-id: 34b6a2325d613eeef622410f2d1ff3d869d3133c Former-commit-id: dd700c33cca3f560621219530444b631b7767392 * Clean-History - Remove 51MB file with this commit Former-commit-id: 34b6a2325d613eeef622410f2d1ff3d869d3133c Former-commit-id: dd700c33cca3f560621219530444b631b7767392 Former-commit-id: 0d80e6a056abad1c4d1fd6f162eb725e0db5fb4f * Clean-History - Remove 51MB file with this commit Former-commit-id: 34b6a2325d613eeef622410f2d1ff3d869d3133c Former-commit-id: dd700c33cca3f560621219530444b631b7767392 Former-commit-id: 0d80e6a056abad1c4d1fd6f162eb725e0db5fb4f Former-commit-id: 20523b05194438209cf64cb688008b4599eb847e * changes * changes * Homepage: header image size (#1347) * image size * image in local assets * add dall-e mini banner * undo ui changes * changes * changes * updates * updates * changes * changes * changes * h11 dependency * add npm build-mac * expand demo button to all classes * add demos to docstrings * add anchor tags to headers * add required tag to param table * add consistent styling for headers * skip param beginning with underscore from docs * skip kwargs param from docs * remove types in param docstring * override signature to reflect usage * add supported events * add step-by-step guides * fix guide contribution link * add related spaces * fix img styling on guides * pin quickstart, advanced, and block guides to top * margin fix * autogenerated copy buttons for all codeblocks * changes * documentaiton * format * launch * formatting * style changes * remove backticks * changes * changes Co-authored-by: Ali Abid <aliabid94@gmail.com> Co-authored-by: Ali Abdalla <ali.si3luwa@gmail.com> Co-authored-by: Julien Chaumond <julien@huggingface.co> Co-authored-by: Ömer Faruk Özdemir <farukozderim@gmail.com> Co-authored-by: Ali <ali.abid@huggingface.co> Co-authored-by: Victor Muštar <victor.mustar@gmail.com> Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
2022-07-07 07:22:10 +08:00
Related spaces: https://huggingface.co/spaces/abidlabs/chatbot-minimal, https://huggingface.co/spaces/ThomasSimonini/Chat-with-Gandalf-GPT-J6B, https://huggingface.co/spaces/gorkemgoknar/moviechatbot, https://huggingface.co/spaces/Kirili4ik/chat-with-Kirill
Tags: NLP, TEXT, HTML
## Introduction
Chatbots are widely studied in natural language processing (NLP) research and are a common use case of NLP in industry. Because chatbots are designed to be used directly by customers and end users, it is important to validate that chatbots are behaving as expected when confronted with a wide variety of input prompts.
Using `gradio`, you can easily build a demo of your chatbot model and share that with a testing team, or test it yourself using an intuitive chatbot GUI.
This tutorial will show how to take a pretrained chatbot model and deploy it with a Gradio interface in 4 steps. The live chatbot interface that we create will look something like this (try it!):
<iframe src="https://abidlabs-chatbot-stylized.hf.space" frameBorder="0" height="350" title="Gradio app" class="container p-0 flex-grow space-iframe" allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"></iframe>
Chatbots are *stateful*, meaning that the model's prediction can change depending on how the user has previously interacted with the model. So, in this tutorial, we will also cover how to use **state** with Gradio demos.
### Prerequisites
Make sure you have the `gradio` Python package already [installed](/quickstart). To use a pretrained chatbot model, also install `transformers` and `torch`.
Let's get started! Here's how to build your own chatbot:
1. [Set up the Chatbot Model](#1-set-up-the-chatbot-model)
2. [Define a `predict` function](#2-define-a-predict-function)
3. [Create a Gradio Interface](#3-create-a-gradio-interface)
## 1. Set up the Chatbot Model
First, you will need to have a chatbot model that you have either trained yourself or you will need to download a pretrained model. In this tutorial, we will use a pretrained chatbot model, `DialoGPT`, and its tokenizer from the [Hugging Face Hub](https://huggingface.co/microsoft/DialoGPT-medium), but you can replace this with your own model.
Here is the code to load `DialoGPT` from Hugging Face `transformers`.
```python
from transformers import AutoModelForCausalLM, AutoTokenizer
import torch
tokenizer = AutoTokenizer.from_pretrained("microsoft/DialoGPT-medium")
model = AutoModelForCausalLM.from_pretrained("microsoft/DialoGPT-medium")
```
## 2. Define a `predict` function
Next, you will need to define a function that takes in the *user input* as well as the previous *chat history* to generate a response.
In the case of our pretrained model, it will look like this:
```python
def predict(input, history=[]):
# tokenize the new input sentence
new_user_input_ids = tokenizer.encode(input + tokenizer.eos_token, return_tensors='pt')
# append the new user input tokens to the chat history
bot_input_ids = torch.cat([torch.LongTensor(history), new_user_input_ids], dim=-1)
# generate a response
history = model.generate(bot_input_ids, max_length=1000, pad_token_id=tokenizer.eos_token_id).tolist()
2022-02-19 07:54:18 +08:00
# convert the tokens to text, and then split the responses into lines
2022-02-19 07:54:18 +08:00
response = tokenizer.decode(history[0]).split("<|endoftext|>")
response = [(response[i], response[i+1]) for i in range(0, len(response)-1, 2)] # convert to tuples of list
return response, history
```
Let's break this down. The function takes two parameters:
* `input`: which is what the user enters (through the Gradio GUI) in a particular step of the conversation.
* `history`: which represents the **state**, consisting of the list of user and bot responses. To create a stateful Gradio demo, we *must* pass in a parameter to represent the state, and we set the default value of this parameter to be the initial value of the state (in this case, the empty list since this is what we would like the chat history to be at the start).
Then, the function tokenizes the input and concatenates it with the tokens corresponding to the previous user and bot responses. Then, this is fed into the pretrained model to get a prediction. Finally, we do some cleaning up so that we can return two values from our function:
2022-02-19 07:54:18 +08:00
* `response`: which is a list of tuples of strings corresponding to all of the user and bot responses. This will be rendered as the output in the Gradio demo.
* `history` variable, which is the token representation of all of the user and bot responses. In stateful Gradio demos, we *must* return the updated state at the end of the function.
## 3. Create a Gradio Interface
Now that we have our predictive function set up, we can create a Gradio Interface around it.
In this case, our function takes in two values, a text input and a state input. The corresponding input components in `gradio` are `"text"` and `"state"`.
2022-02-19 07:54:18 +08:00
The function also returns two values. We will display the list of responses using the dedicated `"chatbot"` component and use the `"state"` output component type for the second return value.
Note that the `"state"` input and output components are not displayed.
```python
import gradio as gr
gr.Interface(fn=predict,
inputs=["text", "state"],
2022-05-28 02:28:19 +08:00
outputs=["chatbot", "state"]).launch()
```
This produces the following interface, which you can try right here in your browser (try typing in some simple greetings like "Hi!" to get started):
<iframe src="https://abidlabs-chatbot-stylized.hf.space" frameBorder="0" height="350" title="Gradio app" class="container p-0 flex-grow space-iframe" allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"></iframe>
----------
And you're done! That's all the code you need to build an interface for your chatbot model. Here are some references that you may find useful:
* Gradio's [Quickstart guide](https://gradio.app/quickstart/)
* The final [chatbot demo](https://huggingface.co/spaces/abidlabs/chatbot-stylized) and [complete code](https://huggingface.co/spaces/abidlabs/chatbot-stylized/tree/main) (on Hugging Face Spaces)