ChatGPT, Gradio and Hugging Face Spaces

This is a small test of how to integrate ChatGPT / OpenAI GPT3 models into a Gradio application running on Hugging Face Spaces.

ChatGPT Demo

90% of this application was directly generated by OpenAI CODEX. It’s a perfect example of how AI tools can accelerate development.

OpenAI CODEX Prompt for Gradio

OpenAI Configuration

First of all, you need an OpenAI account. You can get one here (OpenAI Sign up). You’ll be assigned an $18 credit for your first tests. We’ll use the code-davinci-002 engine to generate code.

After signing up, you’ll need to create an API Key in the API Key section.

Prompt for OpenAI CODEX

Here is the prompt I used for this demo. You can copy it directly into the Playground:

# python3
# build a demo for OpenAI API and gradio
# define the "api_call_results" function for the gradio interface as a single text input (prompt).
# - Do not include any examples
# - live = False
# - for OpenAI API Completion method:
# - engine="text-davinci-003"
# - params: max_tokens, temperature and top_p
import gradio as gr
import openai
import os
import re
# openai API key
openai.api_key = os.getenv("OPENAI_API_KEY")

Testing on Colab

Now that we have the code, let’s check that everything is ok using Colab.

pip install gradio==3.15.0
pip install openai

After installing them, create another code cell and paste the result. And if everything goes well, you’ll have something very similar to this:

Gradio App on Colab

As you can read in the execution notes, if you add the share parameter to launch, you’ll have a link you can share for 72 hours: iface.launch(share=True).

Hugging Face Spaces

It’s time to take the code to Hugging Face Spaces. Once registered, create a new Space. You’ll see a form like this:

When it’s available, we’ll create two files in the Files and Versions tab.

Files and Versions Tab

First, the dependencies file (requirements.txt):

openai
transformers

Second, we’ll define a SECRET in Settings named OPENAI_API_KEY to protect your key.

Definition / Management of repository secrets

Third, the application file (app.py). Copy the code you tested on Colab.

Hugging Face Spaces will go into [Building] mode and then to [Running]. You’ll have your app running in the [App] tab.

App Tab

Embedding your app in a web

Finally, to integrate your app into your web, go to the […] button in the space.

Access Menu

You have three options:

Embedding Options

I chose the iframe option to integrate it into my website.

Next Steps

The demo you saw at the beginning includes improvements such as:

• Option for the user to enter their own API Key.
• OpenAI parameters configurable via sliders.
• Labels to improve usability.

I hope you found it interesting and useful.