Gradio, a component library for Machine Learning developers available on Hugging Face, is now up to
version 5. One of its notable new features is “an experimental AI Playground,” which allows you to “use AI to generate or modify Gradio apps and preview the app right in your browser immediately.” Backend devs focusing on AI still need to display their work as visible output, and this is the niche Gradio is servicing. Since I’m nearly always swayed by a first-class
playground, in this post, we’ll do a walk-through of the new feature.
As we
get started, it becomes obvious that we have a
Python frontend generator. The idea is that
AI engineers would find this more appealing than using CSS and JavaScript. As you’ll see, this isn’t tied to AI whatsoever.
We start with a pip install:
👁 Image
We don’t really need a code editor with just a handful of lines, so we can write the example
app.py straight into the terminal.
import gradio as gr
def greet(name, intensity):
return "Hello, " + name + "!" * int(intensity)
demo = gr.Interface(
fn=greet,
inputs=["text", "slider"],
outputs=["text"],
)
demo.launch()
We could indeed have run this in a
Jupyter notebook, and Gradio looks after you if you choose this path.
If you just run the code above, it behaves as a web server:
👁 Image
The output is the following:
👁 Image
On the face of it, this is a very efficient way to produce a User Interface (UI) on a web page. We pointed to a function and mentioned the components we wanted for input and output. We have not indicated how the slider should behave or how the components should be arranged (for example). Fortunately, the components stack sensibly in a responsive manner. The point is that if you are not interested in the UI aesthetics, just the availability, then this works just fine.
To check the version, run this code:
import gradio as gr
print(gr.__version__)
I think a version response from the Gradio command itself would be preferable. Note that I was only able to get v4.44.1, so the newer Gradio 5 features may not be visible yet.
Interestingly, creating this demo on a public server is trivial and can done in code. In fact, this was pointed out in the terminal response above after we ran the code. We simply replace the last line with
demo.launch(share=True) and the app is now publicly hosted. When I did this (I called the code with the gradio command, which runs hot loading), the public URL and conditions were set out below:
👁 Image
So an awful lot of heavy lifting has been done in order to create some quick temporary hosting. For online teaching, this is wildly useful on its own.
Gradio has a
wealth of components to try out, including things like buttons that must explicitly support events. But sensibly they allow for a lower level of building using
Blocks. This is where I’ll spend more time examining, as this potentially puts Gradio on par with other UI designers.
Let’s look at the simple input-output type example but with Blocks. You can just use the
playground; just select “Hello Blocks” from the left-hand side:
👁 Image
All we are doing differently here is driving the experience flow through a button event, as opposed to delegating it to a black box. We explicitly take control of the component labeling but nothing else. I’m not a Python developer, so I had to look up the
with statement. As used here, it is effectively a neater way of writing the exception handling within a try/catch block. Notice that the same component
Textbox is used as both input and output, so it is the role that models its behavior.
As well as a button click, you can listen to change behaviour. So we could alter our first example and force the output box to listen to the slider:
👁 Image
Effectively, the number of inputs (or outputs) has to match the number of function arguments.
You can use the following code in the playground, which is an adaption of the Sepia Filter example. Using the Image component and a quick sepia filter:
import numpy as np
import gradio as gr
def sepia(input_img):
sepia_filter = np.array([
[0.393, 0.769, 0.189],
[0.349, 0.686, 0.168],
[0.272, 0.534, 0.131]
])
sepia_img = input_img.dot(sepia_filter.T)
sepia_img /= sepia_img.max()
return sepia_img
with gr.Blocks() as demo:
image_in= gr.Image(label = "Original image")
image_out = gr.Image(label = "Make me sepia")
image_in.change(fn=sepia, inputs=image_in, outputs=image_out)
if __name__ == "__main__":
demo.launch()
Here is the result on some previously generated art:
👁 Image
At this point, I became a little confused over which examples could be run in the playground and why I could only get the 4.44.1 version, not 5. However, when building from the command line, I did get the following slow writer to work:
import time import
gradio as gr
def slow_echo(message, history):
for i in range(len(message)):
time.sleep(0.3)
yield "You typed: " + message[: i+1]
gr.ChatInterface(slow_echo).launch()
This is using two ideas: a streaming chatbot interface and a
generator function. The result is something that I’ve implemented myself recently: a slow writer. This is when each letter is written out with a short time gap, like in a movie from when digital communication was very slow.
Obviously, the idea of the Chat Interface is that you use your own LLM model as the source (and I might try to build something with Gradio and an LLM in a future post), but in this example, we use the
slow_echo generator function
, which yields a different result from a series each time it is called.
👁 Image
Conclusion
For the cases where the UI is only a temporary framework to display a result or concept, you can see why a Python developer would benefit with Gradio. While some of the logic is a bit obtuse, it is still the case that remarkably little code is needed to get a working interface on-screen — and if you are not innovating around the UI, why waste time?
