Machine Learning Demos
Machine learning demos are an increasingly vital a part of releasing a model. Demos allow anyone — not only ML engineers — to check out a model within the browser, give feedback on predictions, and construct trust within the model if it performs well.
Greater than 600,000 ML demos have been built with the Gradio library since its first version in 2019, and today, we’re thrilled to announce Gradio 3.0: a ground-up redesign of the Gradio library 🥳
What’s Recent in Gradio 3.0?
🔥 An entire redesign of the frontend, based on the feedback we’re hearing from Gradio users:
-
We have switched to modern technologies (like Svelte) to construct the Gradio frontend. We’re seeing much smaller payloads and far faster page loads consequently!
-
We have also embranced a much cleaner design that can allow Gradio demos to slot in visually in additional settings (resembling being embedded in blog posts).

- We have revamped our existing components, like
Dataframeto be more user-friendly (try dragging-and-dropping a CSV file right into a Dataframe) in addition to added latest components, resembling theGallery, to let you construct the correct UI to your model.

- We have added a
TabbedInterfaceclass which lets you group together related demos as multiple tabs in a single web app

Take a look at all of the components you should use on our (redesigned) docs 🤗!
🔥 We have created a brand new low-level language called Gradio Blocks that helps you to construct complex custom web apps, right in Python:

Why did we create Blocks? Gradio demos are very easy to construct, but what for those who want more control over the layout of your demo, or more flexibility on how the information flows? For instance, it is advisable to:
- Change the layout of your demo as a substitute of just having the entire inputs on the left and outputs on the correct
- Have multi-step interfaces, wherein the output of 1 model becomes the input to the subsequent model, or have more flexible data flows usually
- Change a component’s properties (for instance, the alternatives in a Dropdown) or its visibilty based on user input
The low-level Blocks API lets you do all of this, right in Python.
Here’s an example of a Blocks demo that creates two easy demos and uses tabs to group them together:
import numpy as np
import gradio as gr
def flip_text(x):
return x[::-1]
def flip_image(x):
return np.fliplr(x)
with gr.Blocks() as demo:
gr.Markdown("Flip text or image files using this demo.")
with gr.Tabs():
with gr.TabItem("Flip Text"):
text_input = gr.Textbox()
text_output = gr.Textbox()
text_input.change(flip_text, inputs=text_input, outputs=text_output)
with gr.TabItem("Flip Image"):
with gr.Row():
image_input = gr.Image()
image_output = gr.Image()
button = gr.Button("Flip")
button.click(flip_image, inputs=image_input, outputs=image_output)
demo.launch()
When you run launch(), the next demo will appear:

For a step-by-step introduction to Blocks, try the dedicated Blocks Guide
The Gradio Blocks Party
We’re very enthusiastic about Gradio Blocks — and we would love so that you can try it out — so we’re organizing a contest, the Gradio Blocks Party (😉), to see who can construct one of the best demos with Blocks. By constructing these demos, we are able to make state-of-the-art machine learning accessible, not only to engineers, but anyone who can use an Web browser!
Even for those who’ve never used Gradio before, that is the proper time to start out, since the Blocks Party is running until the top of May. We’ll be giving out 🤗 merch and other prizes at the top of the Party for demos built using Blocks.
Learn more about Blocks Party here: https://huggingface.co/spaces/Gradio-Blocks/README
