gradio

1---2name: gradio3description: Build Gradio web UIs and demos in Python. Use when creating, modifying, debugging, or answering questions about Gradio and its capabilties, components, event listeners, or layouts.4---5 6# Gradio7 8Gradio is a Python library for building interactive web UIs and ML demos. This skill covers the core API, patterns, and examples.9 10## References11- `references/examples.md` -  Illustrative examples showcasing the core Gradio API.12- `references/api-signatures.md` - API signatures of commonly used components.13- `references/event-listeners.md` - API signatures of events supported by each component.14 15## Guides16 17Detailed guides on specific topics (read these when relevant):18 19- [Quickstart](https://www.gradio.app/guides/quickstart)20- [The Interface Class](https://www.gradio.app/guides/the-interface-class)21- [Blocks and Event Listeners](https://www.gradio.app/guides/blocks-and-event-listeners)22- [Controlling Layout](https://www.gradio.app/guides/controlling-layout)23- [More Blocks Features](https://www.gradio.app/guides/more-blocks-features)24- [Custom CSS and JS](https://www.gradio.app/guides/custom-CSS-and-JS)25- [Streaming Outputs](https://www.gradio.app/guides/streaming-outputs)26- [Streaming Inputs](https://www.gradio.app/guides/streaming-inputs)27- [Sharing Your App](https://www.gradio.app/guides/sharing-your-app)28- [Custom HTML Components](https://www.gradio.app/guides/custom-HTML-components)29- [Workflows](https://www.gradio.app/guides/workflows)30- [Getting Started with the Python Client](https://www.gradio.app/guides/getting-started-with-the-python-client)31- [Getting Started with the JS Client](https://www.gradio.app/guides/getting-started-with-the-js-client)32 33## Core Patterns34 35**Interface** (high-level): wraps a function with input/output components.36 37```python38import gradio as gr39 40def greet(name):41    return f"Hello {name}!"42 43gr.Interface(fn=greet, inputs="text", outputs="text").launch()44```45 46**Blocks** (low-level): flexible layout with explicit event wiring.47 48```python49import gradio as gr50 51with gr.Blocks() as demo:52    name = gr.Textbox(label="Name")53    output = gr.Textbox(label="Greeting")54    btn = gr.Button("Greet")55    btn.click(fn=lambda n: f"Hello {n}!", inputs=name, outputs=output)56 57demo.launch()58```59 60**ChatInterface**: high-level wrapper for chatbot UIs.61 62```python63import gradio as gr64 65def respond(message, history):66    return f"You said: {message}"67 68gr.ChatInterface(fn=respond).launch()69```70 71**Workflow**: builds a visual, node-based pipeline from Hugging Face Spaces,72models, datasets, and Python functions. `gr.Workflow` is a standalone app, so73do not create it inside a `gr.Blocks` context.74 75```python76import gradio as gr77 78def clean(text: str) -> str:79    return text.strip().lower()80 81def tag(text: str) -> str:82    return f"[processed] {text}"83 84gr.Workflow(85    bind={"clean": clean, "tag": tag},86    edges=[("clean", "tag")],87).launch()88```89 90## Custom HTML Components91 92If a task requires significant customization of an existing component or a component that doesn't exist in Gradio, you can create one with `gr.HTML`. It supports `html_template` (with `${}` JS expressions and `{{}}` Handlebars syntax), `css_template` for scoped styles, and `js_on_load` for interactivity — where `props.value` updates the component value and `trigger('event_name')` fires Gradio events. For reuse, subclass `gr.HTML` and define `api_info()` for API/MCP support. 93 94See the [full guide](https://www.gradio.app/guides/custom-HTML-components) as well as example in `references/examples.md`95 96## Server Mode97 98Use `gr.Server` instead of gr.Blocks when the users requests any of the following:99- Completely custom UI (your own HTML, React, Svelte, etc.) powered by Gradio's backend.100- Full control of FastAPI server (custom GET/POST routes, middleware, dependency injection) alongside Gradio API endpoints101 102See the [full guide](https://www.gradio.app/guides/server-mode) and example in `references/examples.md`.103 104If the user's use case can be handled by Gradio's built-in components or customizable HTML components, prefer not to use `gr.Server`.105