A Look at Gradio’s AI Playground for Machine Learning Devs

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: 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. 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: The output is the following: 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: 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: 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: 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: Here is the result on some previously generated art: 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: 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.

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?