Your first app

Classroom resources

Load these into Waypoints Prepare: choose Load URL and paste the copied address, or download the file and import it. In Prepare, the worksheet's Teacher edition shows the answers; the student copy hides them.

• Slides Download Copy address for Prepare Present from the browser, or export to PowerPoint or PDF.
• Worksheet Download Copy address for Prepare Print the student copy; the Teacher edition has the answers.

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.

Timing

Predict and Run 10 min · Investigate 10 min · Modify 15 min · Make 10 min

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

1. Predict: call greet three times on the board before anyone sees an app.
2. Run: ask which line made each part of the screen.
3. Investigate: swap the inputs on purpose and read the error together.
4. 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

Answers to the checks

1. Predict: What does the second line print?
   Hello, Ada!!!. excited is True, so the function returns the message with three !s. The others print Hello, Ada. and Hello, !!!
2. No brackets: fn=greet has no brackets after greet. Why?
   It hands Gradio the function itself, to call later when Submit is pressed
   greet() would call it straight away. fn=greet gives Gradio the function, and Gradio calls it each time someone presses Submit.
3. A tick box: What does the Checkbox give greet when it is ticked?
   True
   A Checkbox gives True or False, which is what if excited: needs.
4. Spot the bug: Typing Ada and pressing Submit gives TypeError: can only concatenate str (not "bool") to str. Click the line that is wrong.
   line 12
   Gradio passes inputs in order: the Checkbox (True or False) goes to name, and the text goes to excited. The inputs must be in the same order as the parameters.
5. Where this leads: Why test the function with print before making the app?
   If it is wrong, you find out from one line, before buttons and boxes are in the way
   The app only calls your function. A tested function makes a working app; an untested one makes an app that is hard to debug.

Solutions

One possible solution for each task. Other correct programs are fine.

Modify › How excited?

import gradio as gr

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


gr.Interface(
    fn=greet,
    inputs=[gr.Textbox(label="Name"), gr.Slider(1, 5, step=1, label="Excitement")],
    outputs=gr.Textbox(label="Greeting"),
    title="My first Gradio app",
).launch()

Modify › A second output

import gradio as gr

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


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

a tiny tool

import gradio as gr

def initials(full_name):
    letters = ""
    for word in full_name.split():
        letters = letters + word[0].upper()
    return letters


print(initials("ada lovelace"))

gr.Interface(fn=initials, inputs=gr.Textbox(label="Full name"), outputs=gr.Textbox(label="Initials")).launch()

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.

Exit ticket

How does Gradio know which input goes to which parameter?

By order: the first input goes to the first parameter, the second to the second.

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.

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.