Bootstrapping Apps with Gradio and ZeroGPU 🥾

Bootstrapping refers to creating something (a business, an application) with the resources at hand. In this post, we’ll be “bootstrapping” an entirely new application from public Hugging Face Spaces. The Gradio client libraries will be crucial to this effort.

The app we’ll be building is a “Compliment Bot”. Our users will upload a photo of themselves and our bot will generate a nice compliment based on the image and hopefully cheer up their day!

Spaces as Building Blocks

All Gradio applications expose a REST API that you can use from your own software apps. Basically, every Gradio application in the world is a building block you can use to add AI functionality to your app!

The best place to look for interesting Gradio applications is on the Hugging Face Hub - there are upwards of ten thousand Gradio applications. In particular, we’ll be looking at ZeroGPU spaces. ZeroGPU spaces are gradio apps that are backed by a “serverless” cluster GPUs. This cluster is free to use and naturally handles spikes in incoming traffic. Best of all, they are free to use!

This page has all of the spaces running on ZeroGPU. We will use it to find spaces that can help us build the Compliment Bot.

Finding Our Building Blocks

For our Compliment Bot, we’ll need to do two things. The first is to get a textual understanding of the image and secondly we’ll use that LLM to turn that description into a compliment.

For the first task, we’ll use an image captioning model. After looking through the list of ZeroGPU spaces, I settled on gokaygokay/SD3-Long-Captioner. After playing with it, I saw that it generated very detailed descriptions of the subject of an image. For the second task, a small-ish LLM should do the trick and so I settled on the Zephyr 7B model. I know from previous experience the Zephyr class of models is strong and this space has it running on Zero GPU - hysts/zephyr-7b.

Building Our App with Gradio

The fastest way to build an AI application is by using Gradio so that’s what we’ll use first. I will also show how you can build the same app with vanilla HTML and javascript.

To begin, we’ll import the necessary python packages (Make sure you install gradio with pip install gradio beforehand). The gradio_client library comes installed with gradio and it is what we’ll be using to interact with the spaces programmatically. You can do the same with just the requests module but using the client is far far easier and quicker.

Then we’ll use the Client class to connect to the two spaces we found before -

In order to generate the compliment, we’ll “chain” these two spaces together. First, I’ll generate the caption by sending the image to the SD3-Long-Captioner space via the predict method. Then we’ll send the caption to our LLM space and stream the generation by yielding each successive token with a for loop.

I’m omitting the SYSTEM_PROMPT I’m using for brevity but I will link the full source code at the end of this section.

The last bit is the easiest (and most fun) part. Building the UI!

All it took was ~30 lines of python code! You can play with the bot (and see all the source code) here. I’m leaving a sample generation here so you can see.

Building Our App with HTML/js

The gradio clients are portable so you are not limited to only building Gradio apps. You can use the python client in your preferred web framework (Django, Flask) and the javascript client can bring Gradio to all browsers.

We can build a Compliment Bot using just HTML and javascript. I’ll only show the code related to the gradio client but you can see the full implementation (and play with the bot) here.

Conclusion

It’s possible to use public Gradio applications as the building blocks of entirely new applications. The Gradio ecosystem can help you quickly experiment and iterate for free. In order to turn our Compliment Bot into a “production application”, I’d move the spaces we’re using into private spaces using dedicated hardware but everything else can stay the same!

Here are all the resources we used in this project:

• Gradio client docs
• ZeroGPU Spaces
• gokaygokay/SD3-Long-Captioner space
• hysts/zephyr-7b space

And here are the apps we built -

The Gradio App

The HTML/javascript App