10. Chatbot Lab

🎯 Learning Goals

• Explain what Hugging Face is and the role it plays in the machine learning community

• Build a Hugging Face Space that hosts a Gradio application

• Understand the structure and input requirements of functions used by Gradio components

📗 Technical Vocabulary

• Hugging Face

• Gradio

• ChatInterface

• Version control

def calculate_mean(numbers):
  total = 0
  for num in numbers:
    total += num
  return total / len(numbers)

nums = [10, 20, 30, 40, 50]
print(calculate_mean(nums))

import numpy as np

nums = [10, 20, 30, 40, 50]
print(np.mean(nums))

What is Gradio?

What is Hugging Face?

Hugging Face Spaces

Version Control

Getting Started

1. Create a Hugging Face Account:
• Visit the Hugging Face website and click on “Sign Up.”
• Complete the registration process and verify your email address.

2. Take a Tour of Hugging Face:
• Once logged in, check out the “Models”, “Datasets”, and “Spaces” sections.
• What kinds of models are available on Hugging Face?
• Click on a few Spaces to see what’s possible!

3. Set Up Your First Space:
• Navigate to the “Spaces” section.
• Click on “+ New Space.”
• Choose a name for your Space. You can skip the description and license for now.
• Choose Gradio for the SDK and select Blank for the template.
• We’ll be writing the code ourselves, so we won’t use the “chatbot” template! 😉
• Keep the CPU Basic selection.
• Select public visibility and “Create Space”!
Click here to see a screenshot of this step!

4. Create the app.py file!
• To get started with your Hugging Face space, you need an app.py file.
• This file contains the primary code that defines and launches your application. When your Space starts, the code in app.py is executed automatically.
• Scroll down and click on the link in the option that says, “Alternatively, you can create the app.py file directly in your browser.” This will create your Python file and open a text editor where you can write your code, very similar to the code cells in Google Colab.
Click here to see a screenshot of this step!

5. You’re ready to start coding! 🎉
When your screen looks like the image below, you’re ready to begin.

Getting Started: Code-Along

1. Import Gradio with import gradio as gr.

2. Now we’ll use the ChatInterface() from Gradio to quickly build a chatbot UI with two sections: the conversation history and an input for the user to type their questions. We’ll assign that ChatInterface() to a variable called chatbot: chatbot = gr.ChatInterface().

3. Finally, we need to launch the chatbot by calling the launch() function on the chatbot object: chatbot.launch().

4. If you run this file right now, you’ll see an error message! The ChatInterface function requires one argument, a function that controls the response of the chatbot based on the user input and chat history. For now, we’ll make our chatbot simply respond with the exact same message the user enters. Above the chatbot = gr.ChatInterface() line, let’s define a function called echo and then pass it to the ChatInterface() function. At this point, your entire app.py file should match this:

import gradio as gr

def echo(message, history):
	return message

chatbot = gr.ChatInterface(echo)

chatbot.launch()

Let’s clarify a few things we wrote here:
• When you build a normal function, you're usually the one who calls it and decides what values to pass in. In this case, you never call echo yourself! Instead, you hand it off to gr.ChatInterface(), and Gradio calls it automatically each time the user submits a message.
• The echo function has two parameters that Gradio is responsible for passing in every time the user sends a message. When Gradio calls the echo function, it always passes in two values: the user's most recent input (a string of text) as the first argument, and a list of all the previous back-and-forth messages in the conversation as the second. We've named these message and history here, but those names are entirely up to you! You could just as easily write def echo(user_input, chat_log): and it would work exactly the same way.
• What Gradio actually cares about is position, not name. That means the order does matter: Gradio will always pass the current user input first and the conversation history second, regardless of what you call them. If you accidentally flip the order and write def echo(history, message):, your function will treat the conversation history as the current input and vice versa, causing your chatbot to behave in unexpected ways. For now, our simple echo bot ignores the history entirely and just returns whatever the user typed, but once you start building more sophisticated chatbots, you'll use that second parameter to craft responses that reference earlier parts of the conversation!

5. To save the changes, click the “Commit new file to main” button.
💡
Pro-Tip: It’s best to change the commit message to something specific about what you changed, so that if you wanted to go back to this version, you’d know what changed at that moment in time!

6. It may take a few minutes for your app to load, especially the first time. Be patient! The little pill at the top that shows the app status will turn green and display a “Running” message when it’s ready. Click the “App” option in the menu under the name of your app to see your app in action! Try sending a message to see how it works.
Click here to see a screenshot of this step!

YOU DID IT! 🎉

1. Click the Files button. Here, you can see that you have not just one, but three files in your project!
• The app.py file that we already edited! It’s the main file that defines and launches the application.
• The .gitattributes is a configuration file used by Git to define how it should handle tracking changes to your files. You never need to edit this one!
• The README.md file is a markdown file that serves as the primary documentation for your project. You’re welcome to make changes to this file, but it won’t be visible in the main App view. It’s usually used to share information about your project with other developers and it’s only visible to people who navigate to your project files.

2. If you click on the Logs icon, you can see error messages or warnings that might pop up when you launch your app. This is also where any logs from print() statements will appear!

ChatInterface Options

Practice

💼 Takeaways

• Hugging Face is a community and platform where you can deploy and share your interactive projects using Spaces

• Gradio is a user-friendly Python library for building interactive web apps quickly

• Gradio’s ChatInterface requires a function with two inputs: message and history

For a summary of this lesson, check out the 10. Chatbot Lab One-Pager!