Your first app

Turn a Python function into an app you can click, in an in-browser stand-in for Gradio that runs the same code as the real thing.

Behind most tools you use online is a small function with an interface wrapped around it. You can make one in a few lines.

Gradio is a Python library that turns a function into an app: you say what the inputs and outputs are, and it draws the boxes and the button. The playground runs a small stand-in for Gradio, so it works in the browser; the same file runs unchanged in real Gradio on a computer.

Predict: Read the code and say what it will do before you run anything. A wrong guess is fine: it shows you what to look for.
Run: Run it and compare the result with your prediction.
Investigate: Trace how each line of code connects to what you see.
Modify: Change the code on purpose and check the result.
Make: Build something new using what you have learned. Expect a few tries; that is normal.

PredictRead the code and say what it will do before you run anything. A wrong guess is fine: it shows you what to look for.

Predict

app.py

def greet(name, excited):
    message = "Hello, " + name
    if excited:
        return message + "!!!"
    return message + "."


print(greet("Ada", False))
print(greet("Ada", True))
print(greet("", True))

Before any app, it is just a function. Work out what each of the three calls prints.

What does the second line print?Hello, AdaTrueHello, Ada.Hello, Ada!!!

RunRun it and compare the result with your prediction.

Run

Run it. The app opens in the App tab: type a name, tick or untick Excited?, and press Submit. Try the three calls from the Predict step.

app.py

import gradio as gr

def greet(name, excited):
    message = "Hello, " + name
    if excited:
        return message + "!!!"
    return message + "."


gr.Interface(
    fn=greet,
    inputs=[gr.Textbox(label="Name"), gr.Checkbox(label="Excited?")],
    outputs=gr.Textbox(label="Greeting"),
    title="My first Gradio app",
).launch()

Try it yourselfYour edits are saved in this browser.

I tried the three calls from the Predict step in the app, and they matched what greet returns.

InvestigateTrace how each line of code connects to what you see.

Investigate

app.py

import gradio as gr

def greet(name, excited):
    message = "Hello, " + name
    if excited:
        return message + "!!!"
    return message + "."


gr.Interface(
    fn=greet,
    inputs=[gr.Textbox(label="Name"), gr.Checkbox(label="Excited?")],
    outputs=gr.Textbox(label="Greeting"),
    title="My first Gradio app",
).launch()

What fn=greet hands over.

What a Checkbox gives.

Inputs in the wrong order.

fn=greet has no brackets after greet. Why?It hands Gradio the function itself, to call later when Submit is pressedIt is a mistake, but Gradio fixes itBrackets are not allowed inside gr.Interfacegreet has no parameters

What does the Checkbox give greet when it is ticked?"Excited?""ticked"True1

Typing Ada and pressing Submit gives TypeError: can only concatenate str (not "bool") to str. Click the line that is wrong.

ModifyChange the code on purpose and check the result.

Modify

Replace the checkbox with a slider from 1 to 5 that sets how many ! the greeting ends with.

Need a hint?

Swap the Checkbox for gr.Slider(1, 5, step=1, label="Excitement").

Another hint

def greet(name, excitement): return "Hello, " + name + "!" * excitement

Add a second output box that says how many letters the name has. A function gives two outputs by returning two values with a comma between them.

Need a hint?

outputs=[gr.Textbox(label="Greeting"), gr.Textbox(label="Name length")]

Another hint

Return two values, separated by a comma: return message + ".", str(len(name)) + " letters"

Try it yourselfYour edits are saved in this browser.

Replace the checkbox with a slider that chooses how many ! to add.

Run your program. This ticks when your code does all of the above.

Add a second output that says how many letters the name has.

Run your program. This ticks when your code does all of the above.

MakeBuild something new using what you have learned. Expect a few tries; that is normal.

A tiny tool

Build a small tool of your own. Write the function first and test it with print, then wrap it in gr.Interface. Ideas: initials from a full name, a word counter, a shout converter (upper case and !), a "how many days until" counter.

Try it yourselfYour edits are saved in this browser.

Make an app of your own: a function, tested with print, wrapped in gr.Interface.

Run your program. This ticks when your code does all of the above.

Info

Where this leads

On a computer, pip install gradio and python app.py run this same file as a real web app at http://127.0.0.1:7860. Next: apps with several inputs and outputs.

Why test the function with print before making the app?print saves the functionGradio needs print firstThe app runs fasterIf it is wrong, you find out from one line, before buttons and boxes are in the way

For teachers

Students turn a greeting function into a Gradio app with a Textbox and a Checkbox, see that Gradio passes inputs to parameters in order, then add a slider and a second output, and make a small tool of their own. About 45 minutes.

Open the teacher guide: answers, solutions, slides and a worksheet.

Students will be able to

I can turn a function into an app with gr.Interface, inputs and outputs.
I can explain how Gradio matches inputs to parameters (in order).
I can add an input or an output and change the function to match.

Before class

Read the unit primer first. This course runs in the Python playground (real Python in the browser, Pyodide) with a small stand-in for Gradio (Textbox, Number, Slider, Dropdown, Radio, Checkbox, Dataframe, BarPlot and gr.Interface), written so the same file runs unchanged in real Gradio. To show the real thing, on a teacher computer: pip install -r requirements.txt (in this lesson's folder of the site's source) or pip install gradio, then python app.py, and open http://127.0.0.1:7860; a teacher can also host an app as a Hugging Face Space (accounts need age 13+). Before teaching it, open the site's Check your school page once on a student device at school. fn=greet hands Gradio the function (no brackets); Gradio calls it on Submit with one argument per input in order, and shows each returned value in an output, in order (the bug task swaps the inputs). A Checkbox gives True or False; a Slider gives a number. Two outputs means returning two values with a comma.

Running the lesson

Predict: call greet three times on the board before anyone sees an app.
Run: ask which line made each part of the screen.
Investigate: swap the inputs on purpose and read the error together.
Make: insist on a print test before the gr.Interface line.

The hard part (on purpose)

Matching inputs to parameters by order. Ask students to point at each input and its parameter before they run.

When students get stuck

TypeError: can only concatenate str (not "bool") to str. Ask: Which input goes to which parameter? Fix: Put the inputs in the same order as the parameters.
The second output box stays empty. Ask: How many values does the function return, and how many outputs are there? Fix: Return one value per output, separated by commas.
TypeError: can't multiply sequence by non-int of type 'float'. Ask: Is the slider value a whole number? Fix: Use step=1 on the slider, or int(excitement).

Stretch and support

Stretch: Add a Dropdown of languages (English, Māori, French) and greet in the chosen one.

Support: Give students the Slider line, and ask them only to change the function to match.

Where it leads

Next lesson: several inputs and outputs in a calculator. Data detective's dashboard and Machine learning with Gradio (coming later) build on this.

What each step is for

Investigate: An app is a function plus a list of inputs and outputs; Gradio passes the inputs to the parameters in order, and shows each returned value in an output.
Modify: An input is a component in inputs and a parameter of the function; an output is a component in outputs and a value the function returns.
a tiny tool: Goals only: write and test the function first, then wrap it in an app.

Now you can

Turn a function into an app with gr.Interface, inputs and outputs.
Explain how Gradio matches inputs to parameters (in order).
Add an input or an output and change the function to match.

Next lesson2. More inputs, more outputsA movie-night calculator with sliders, a dropdown and two outputs: each input is a parameter, each output a returned value, all in order.

Source: content/code/gradio/intro/lesson.md