Students read the music data with pandas, filter it in one line, and put it behind a Gradio dashboard with a dropdown, a table and a bar chart, then add a year slider, sort the rows and build a dashboard of their own.
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.
Predict and Run 10 min · Investigate 10 min · Modify 15 min · Make 15 min
Read the unit primer first. The playground runs a small stand-in for Gradio (Textbox, Number, Slider, Dropdown, Checkbox, Dataframe, BarPlot with gr.Interface), written so the same file runs unchanged in real Gradio; on a computer, pip install gradio pandas and python app.py runs it as a real web app, and a teacher can host it as a Hugging Face Space (Hugging Face accounts need age 13+). pandas takes a few seconds to load the first time. pd.read_csv reads the file into a table (a DataFrame) and keeps numbers as numbers. songs[songs["genre"] == genre] keeps the rows where the test is true: Lesson 1's loop and if in one line. Gradio calls the function with one argument per input, in order, and puts each returned value in an output, in order. import gradio as gr and the gr. / pd. forms are recipes here.
Lining up inputs, parameters and outputs when adding the slider. Ask students to count each list aloud before running.
| What you will see | A question to ask | The fix |
|---|---|---|
| TypeError: by_genre() takes 1 positional argument but 2 were given. | How many inputs are there, and how many parameters does the function have? | Add a parameter for every input, in the same order. |
| The table shows but the chart is empty or wrong. | Do x and y name columns that are in the table? | x="title", y="minutes": column names exactly as in the file. |
| KeyError: 'Genre'. | How is the column named in the file? | Column names must match exactly, including capitals. |
One possible solution for each task. Other correct programs are fine.
import gradio as gr
import pandas as pd
songs = pd.read_csv("music.csv")
def by_genre(genre, year):
rows = songs[songs["genre"] == genre]
rows = rows[rows["year"] >= year]
return rows, rows
genres = sorted(songs["genre"].unique())
gr.Interface(
fn=by_genre,
inputs=[gr.Dropdown(genres, label="Genre"), gr.Slider(1970, 2025, step=1, label="From year")],
outputs=[gr.Dataframe(label="Songs"), gr.BarPlot(x="title", y="minutes", label="Length in minutes")],
title="Music detective",
).launch()
import gradio as gr
import pandas as pd
songs = pd.read_csv("music.csv")
def by_genre(genre):
rows = songs[songs["genre"] == genre]
rows = rows.sort_values("minutes", ascending=False)
return rows, rows
genres = sorted(songs["genre"].unique())
gr.Interface(
fn=by_genre,
inputs=gr.Dropdown(genres, label="Genre"),
outputs=[gr.Dataframe(label="Songs"), gr.BarPlot(x="title", y="minutes", label="Length in minutes")],
title="Music detective",
).launch()
import gradio as gr
import pandas as pd
songs = pd.read_csv("music.csv")
def by_artist(name):
rows = songs[songs["artist"].str.lower().str.contains(name.strip().lower())]
return rows, str(len(rows)) + " songs"
gr.Interface(
fn=by_artist,
inputs=gr.Textbox(label="Artist (or part of a name)"),
outputs=[gr.Dataframe(label="Songs"), gr.Textbox(label="How many")],
title="Find an artist",
).launch()
Open task: any program that does what the step asks.
Stretch: Add a Checkbox "Australian artists only" with a list of artist names and isin(...), or a second chart of counts per year.
Support: Give students the Slider line written out, and ask them only to add the parameter and the filter line.
How does Gradio know what to pass to your function?
It calls the function with one value for each input, in the order the inputs are listed, and shows each returned value in the outputs, in order.
Machine learning with Gradio (coming later) trains small models on the same tables. Web apps with Flask builds the pages behind an app by hand.