Read the table with pandas and put it behind a Gradio app: choose a genre, see its songs as a table and a bar chart.
Dashboards are how organisations look at their data every day: choose something, and the tables and charts update.
You have done it all by hand: reading rows, filtering, counting, charting. Now meet the tools data scientists use for the same jobs. pandas reads a CSV into a table in one line (and numbers stay numbers), and Gradio turns a function into an app with inputs and outputs.
The playground runs a small stand-in for Gradio, so it works in the browser. The same program runs unchanged in real Gradio on a computer or a Hugging Face Space.
Make your prediction first. Help opens once you've locked it in.
import gradio as gr
def pick(genre):
return "You picked " + genre
gr.Interface(fn=pick, inputs=gr.Dropdown(["pop", "rock"], label="Genre"), outputs="text").launch()
gr.Interface takes a function (fn), what to ask for (inputs) and what to show (outputs). What does it do when you press Submit?
Run it (pandas takes a few seconds to load the first time). The app opens in the App tab: choose a genre, press Submit.
import gradio as gr
import pandas as pd
songs = pd.read_csv("music.csv")
def by_genre(genre):
rows = songs[songs["genre"] == genre]
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_genre(genre):
rows = songs[songs["genre"] == genre]
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()
What one line of pandas does.
One value for each output.
What pandas did for you.
Add a slider that chooses the first year to show, so the dashboard can answer "pop songs since 2015".
inputs=[gr.Dropdown(...), gr.Slider(1970, 2025, step=1, label="From year")], and def by_genre(genre, year):.
In the function: rows = rows[rows["year"] >= year].
Sort the rows so the longest songs come first in the table and the chart.
rows = rows.sort_values("minutes", ascending=False) before the return.
Add a slider for the first year to show, and keep only songs from that year on.
Run your program. This ticks when your code does all of the above.
Show the longest songs first.
Run your program. This ticks when your code does all of the above.
Build a dashboard that answers a question you choose: songs by an artist, songs longer than a number of minutes, the songs of one decade.
Choose a question first, such as: which songs has this artist got? Then: what input asks it, and what output answers it?
songs["artist"].str.contains(name) is True for each artist whose name contains name.
Try it with at least three inputs, including one that finds nothing.
Build a dashboard of your own with gr.Interface, a function, and at least one input and one output.
Run your program. This ticks when your code does all of the above.
On a computer, pip install gradio pandas runs this same file as a real web app, and your teacher can host it as a Hugging Face Space for the class. The same table and the same pandas lead to machine learning: training a model to predict a column from the others.
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. About 50 minutes.
Open the teacher guide: answers, solutions, slides and a worksheet.
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.
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.
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.