Build Interactive ML Demos with Gradio

A Gradio skill covering the core API for building Python-based ML demos and interactive web UIs. It documents three top-level patterns: Interface (high-level, wraps a function with input/output components), Blocks (low-level, for flexible layouts with explicit event wiring), and ChatInterface (a high-level wrapper for chatbot UIs). It lists the standard input/output components - Textbox, Number, Slider, Checkbox, Dropdown, Radio, Image, Audio, Video, File, Chatbot, Button, Markdown, and HTML - with their constructor signatures, and documents building fully custom components by subclassing gr.HTML with an html_template, css_template, and js_on_load script plus an api_info() method for API/MCP support, shown through a worked StarRating example. It also documents the shared event-listener signature (fn, inputs, outputs, queue, batch, trigger_mode, concurrency_limit, and more) and lists which events each component type supports - for example Audio supports stream/start_recording/upload, and Chatbot supports like/retry/undo/copy. It links out to twelve official Gradio guides covering quickstart, layout, custom CSS/JS, streaming inputs and outputs, sharing apps, and both the Python and JS clients.

Use it when a user wants a Gradio demo, UI prototype, or Python-based ML interface - choosing Interface for a simple function-in/function-out demo, Blocks when the layout or event wiring needs more control, and ChatInterface specifically for chatbot UIs. The skill is written as an API and pattern reference rather than a decision framework for when Gradio itself is the wrong tool, so it does not document alternatives to reach for instead.

Input is a description of the desired demo - a function to wrap, the components it needs, or an existing Gradio Space to inspect. Output is working Gradio Python code using the correct component constructor and event-listener signatures, or, for interacting with an already-deployed Space, a gradio info/gradio predict CLI invocation. gradio info <space_id_or_url> returns a JSON payload describing every endpoint's parameters and return types; gradio predict <space_id_or_url> <endpoint> <json_payload> sends a prediction and returns named output keys, with file-type parameters requiring a "meta": {"_type": "gradio.FileData"} wrapper.

Built entirely on the gradio Python package (gr.Interface, gr.Blocks, gr.ChatInterface, and the full component library), plus the gradio CLI's info and predict subcommands - useful for coding agents that need to call Hugging Face Spaces programmatically, with both commands supporting a --token flag for accessing private Spaces.

Python developers and ML engineers building demo UIs or prototypes for models, and coding agents that need to discover and call the API of an existing Gradio Space through the CLI rather than a browser.