Build Interactive ML Demos with Gradio

This is the official Hugging Face skill for building Gradio web UIs and ML demos in Python, covering the core API, patterns, and examples. It documents three ways to build an app: Interface, a high-level wrapper around a function's inputs and outputs; Blocks, a low-level API for flexible layouts with explicit event wiring (btn.click(fn=..., inputs=..., outputs=...)); and ChatInterface, a high-level wrapper for chatbot UIs. It also links twelve official Gradio guides covering quickstart, the Interface class, Blocks and event listeners, layout control, streaming inputs/outputs, custom CSS/JS, app sharing, and both the Python and JS clients.

Use it when creating or editing Gradio apps, components, event listeners, layouts, or chatbots in Python.

The skill documents the full signature and purpose of every major input/output component - Textbox, Number, Slider, Checkbox, Dropdown, Radio, Image, Audio, Video, File, Chatbot, Button, Markdown, and HTML - each as an input (collecting user data) or output (displaying results). For a component that doesn't exist in Gradio or needs heavy customization, gr.HTML can be subclassed with an html_template (supporting ${} JS expressions and {{}} Handlebars syntax), a css_template, and js_on_load for interactivity, where props.value updates the component and trigger('event_name') fires Gradio events - reusable custom components define api_info() to support API/MCP access. Every event listener shares one signature (fn, inputs, outputs, plus options like queue, batch, concurrency_limit, api_visibility, and trigger_mode), and the skill lists exactly which events each component supports (e.g. Button only supports click; Textbox supports change, input, select, submit, focus, blur, stop, copy; Audio supports streaming and recording events).

A standout feature for programmatic use is the gradio CLI's info and predict commands, useful for coding agents that need to call Spaces directly:

gradio info <space_id_or_url>
gradio predict <space_id_or_url> <endpoint> <json_payload>

gradio info returns a JSON payload of every endpoint, its typed parameters and defaults, and its return values (file parameters show "type": "filepath" with a "meta": {"_type": "gradio.FileData"} marker signaling upload); gradio predict sends a prediction and returns named output keys - both commands accept --token for private Spaces.

Interoperates with the Gradio Python and JS clients for calling a running app programmatically, and with Hugging Face Spaces via the gradio CLI's info/predict commands for endpoint discovery and remote inference calls - including file uploads and image-generation outputs.

A linked examples.md reference holds complete end-to-end working apps for further study beyond the API reference itself.

Python developers building Gradio web UIs, ML demos, or chatbot interfaces, and coding agents that need to discover and call a Gradio Space's endpoints programmatically via the CLI rather than reading its source. Apache-2.0 licensed, maintained by Hugging Face.