Lesson: Build and share a demo

You can run, fine-tune, and share models, but so far everything has lived in a notebook, reachable only by someone who can read Python. This lesson closes that gap. A demo turns your model into something a non-coder can try in a browser: a colleague, a stakeholder, a user, anyone with a link. The tool is Gradio, and the remarkable part is how little it asks of you. A working web interface around a model is a few lines, and you write zero HTML, CSS, or JavaScript.

Keep a notebook open; install Gradio (it runs in notebooks, Colab, or a script).

The simplest possible demo

A Gradio demo is one object, the Gradio Interface class, wrapped around one function. Here is the “hello world”:

import gradio as gr

def greet(name):
    return "Hello " + name

demo = gr.Interface(fn=greet, inputs="text", outputs="text")
demo.launch()

Three arguments tell the whole story. The first is the Python function to run; the next two are the types of the input and output components (here, text boxes). Call launch and Gradio renders the interface inline in a notebook, or serves it at a local URL (on port 7860) from a script. That is a complete web app: a labeled text box, a submit button, and an output area, from five lines.

The function can be anything. The greet example is trivial, but in an AI app this function is where you call your model.

Wrap a real model

To demo a model, write a function that takes the user’s input, runs the model, and returns the result, then point Interface at it. Using a text-generation pipeline from lesson 2:

from transformers import pipeline
import gradio as gr

model = pipeline("text-generation")

def predict(prompt):
    completion = model(prompt)[0]["generated_text"]
    return completion

gr.Interface(fn=predict, inputs="text", outputs="text").launch()

That is a working text-generation app. The user types a prompt, the predict function runs the model and returns the completion, and Gradio handles the entire interface. Everything you learned about loading models plugs straight in here: the function you pass is just your inference code, and Gradio wraps a UI around it.

Customize the components

Passing the string text as the input type gives you a default text box (Gradio even infers the label from your function’s parameter name). When you want control, instantiate the component class instead of passing a string:

textbox = gr.Textbox(label="Type your prompt:", placeholder="Once upon a time", lines=3)
gr.Interface(fn=predict, inputs=textbox, outputs="text").launch()

Now the box has a custom label, placeholder text, and three lines. Gradio has a component for every common input and output type, not just text: an Image component for images, an Audio component for sound, a Label component for classification scores, a Slider component for numbers, and more. You match the component to your model’s input and output, and the type of demo follows: an image component in and a label out is an image classifier; audio in and text out is a transcriber. The components are how you describe what your model consumes and produces.

A local demo is useful, but the point is to let others try it. Gradio gives you two levels.

For a quick share, set the share flag to true when you call launch:

demo.launch(share=True)

This creates a temporary public URL (it lasts about 72 hours) that tunnels to the demo running on your machine. It is perfect for sending a colleague a link to try right now, no deployment, but it only works while your notebook or script keeps running.

For a permanent home, publish to Hugging Face Spaces, the same Hub you pushed models and datasets to in lesson 4. A Space is a Git repository holding your Gradio code (in an app.py file) and its dependencies (in a requirements.txt file); push those and the Hub builds and hosts the demo for free at a stable URL, running on its own machine rather than yours. That is the difference between “try this in the next three days” and “here is the permanent link to the app.”

When Interface is not enough

The Gradio Interface shape covers the common case of one function with some inputs and some outputs. When you need a custom layout (multiple panels, tabs, components that update each other), Gradio offers the lower-level Blocks API, which lets you arrange components freely and wire up events between them. You do not need it for most demos; reach for it only when the simple Interface shape genuinely does not fit, the same elevator-versus-stairs choice you saw with pipelines and the Auto classes.

Why this matters when you use AI

A model nobody can try is a model nobody trusts. The gap between “I trained something that scores well” and “people are using it” is almost entirely an interface gap, and historically that gap meant a frontend engineer, a backend, and a deployment. Gradio plus Spaces collapses it to a few lines and a Git push, which changes what you can do alone: get feedback from a non-technical stakeholder in an afternoon, let a domain expert poke at your model and find the failure cases your test set missed, or put a research result in front of the public. The demo is also an honesty forcing-function: a model that looked great on a metric often reveals its rough edges the moment a real person types something you did not anticipate, which is exactly the kind of feedback that makes the next iteration better. Shipping a demo is not a nice-to-have at the end; it is how a model meets reality.

What you should remember

A Gradio demo wraps the Gradio Interface class around a function and launches it. The function does the work; the inputs and outputs are the component types. Five lines is a working web app.
To demo a model, put your inference code in the function you pass. Load a pipeline or model, write a function that runs it, and point Interface at that function.
Components describe your model’s input and output. Passing a string gives defaults (like the string text); instantiate the Textbox, Image, Audio, and other components to customize and to match non-text models.
Calling launch with the share flag set to true gives a temporary public link (about 72 hours) that runs on your machine, good for a quick share.
Hugging Face Spaces is the permanent home: push your Gradio app and its requirements file to a Space and the Hub hosts the demo for free at a stable URL.
Use the Blocks API only when Interface does not fit, for custom layouts and components that interact.

You do not need a frontend team to put a model in front of people. A few lines of Gradio and a Space turn the thing in your notebook into a link anyone can open, which is how a model stops being a private result and starts being a tool.