A movie-night calculator with sliders, a dropdown and two outputs: each input is a parameter, each output a returned value, all in order.
Booking sites, calculators and quizzes are the same shape: some inputs go in, a function works something out, some outputs come back.
Real apps ask for several things and show several answers. In Gradio each input is one parameter of the function, and each output is one value it returns, separated by commas. Both lists go in order.
Make your prediction first. Help opens once you've locked it in.
def two_things(n):
return n * 2, n + 1
doubled, plus_one = two_things(4)
print(doubled)
print(plus_one)
return a, b gives back two values at once. x, y = ... names them, in order.
Run it: move the sliders, choose a day, press Submit. Try 2 adults and 3 children on a weekend.
import gradio as gr
def price(adults, children, day):
if day == "Weekend":
total = adults * 18 + children * 12
else:
total = adults * 15 + children * 10
summary = str(int(adults)) + " adults and " + str(int(children)) + " children on a " + day.lower()
return total, summary
gr.Interface(
fn=price,
inputs=[
gr.Slider(0, 10, step=1, label="Adults"),
gr.Slider(0, 10, step=1, label="Children"),
gr.Dropdown(["Weekday", "Weekend"], value="Weekday", label="Day"),
],
outputs=[gr.Number(label="Total ($)"), gr.Textbox(label="Summary")],
title="Movie night",
).launch()
import gradio as gr
def price(adults, children, day):
if day == "Weekend":
total = adults * 18 + children * 12
else:
total = adults * 15 + children * 10
summary = str(int(adults)) + " adults and " + str(int(children)) + " children on a " + day.lower()
return total, summary
gr.Interface(
fn=price,
inputs=[
gr.Slider(0, 10, step=1, label="Adults"),
gr.Slider(0, 10, step=1, label="Children"),
gr.Dropdown(["Weekday", "Weekend"], value="Weekday", label="Day"),
],
outputs=[gr.Number(label="Total ($)"), gr.Textbox(label="Summary")],
title="Movie night",
).launch()
A kind of value for each kind of input.
Why int() then str().
An output with nothing to show.
Match each input with what it gives the function.
The total appears, but the Summary box stays empty. Click the line that is wrong.
Add a Popcorn ($8) checkbox that adds $8 to the total.
Add gr.Checkbox(label="Popcorn ($8)") at the end of inputs, and popcorn at the end of the parameters.
if popcorn: total = total + 8
Add a Radio choice of seat: Standard, or Recliner for $5 more per person.
gr.Radio(["Standard", "Recliner"], value="Standard", label="Seat"), a seat parameter, and $5 more per person for a recliner.
Add a popcorn checkbox that adds $8 to the total.
Run your program. This ticks when your code does all of the above.
Add a choice of seat (Standard or Recliner, $5 more per person) with a Radio.
Run your program. This ticks when your code does all of the above.
Make a calculator of your own with at least three inputs of different kinds and two outputs: a pizza planner, a sports-day points tally, pocket money savings, a recipe scaler. Write down the inputs and outputs first.
Make a calculator app with at least three inputs of different kinds and two outputs.
Run your program. This ticks when your code does all of the above.
Next: a quiz app, where the inputs are made from a list of questions.
Students build a movie-night ticket calculator with sliders, a dropdown and two outputs, learn that inputs match parameters and outputs match returned values in order, then add a popcorn checkbox, a seat radio and a calculator of their own. About 45 minutes.
Open the teacher guide: answers, solutions, slides and a worksheet.
Read the unit primer first. return total, summary returns two values; Gradio puts them in the two outputs, in order (the Predict shows the same thing with a, b = ...). Each input is one parameter, in order. Kinds of value: Slider and Number give numbers (possibly 2.0, hence int()), Dropdown and Radio give the chosen text, Checkbox gives True or False, Textbox gives text. The bug task works out the summary but returns only the total, so one output stays empty. Encourage planning: inputs and outputs on paper before code.
Adding an input in the right place in both lists. Ask them to count inputs and parameters aloud.
Stretch: Add a Number input for a discount code percentage, and show the saving as a third output.
Support: Give students the popcorn checkbox line and the if, and ask them to put each in the right place.
Next lesson builds a quiz whose inputs come from a list of questions.