AI SummaryA skill booster for building interactive web UIs and ML demos using Gradio in Python. Developers creating data applications, ML interfaces, and chatbots benefit from guided assistance with Gradio components and patterns.
Install
# Add to your project root as SKILL.md curl -o SKILL.md "https://raw.githubusercontent.com/huggingface/skills/main/skills/huggingface-gradio/SKILL.md"
Description
Build Gradio web UIs and demos in Python. Use when creating or editing Gradio apps, components, event listeners, layouts, or chatbots.
Gradio
Gradio is a Python library for building interactive web UIs and ML demos. This skill covers the core API, patterns, and examples.
Guides
Detailed guides on specific topics (read these when relevant): • Quickstart • The Interface Class • Blocks and Event Listeners • Controlling Layout • More Blocks Features • Custom CSS and JS • Streaming Outputs • Streaming Inputs • Sharing Your App • Custom HTML Components • Getting Started with the Python Client • Getting Started with the JS Client
Core Patterns
Interface (high-level): wraps a function with input/output components. `python import gradio as gr def greet(name): return f"Hello {name}!" gr.Interface(fn=greet, inputs="text", outputs="text").launch() ` Blocks (low-level): flexible layout with explicit event wiring. `python import gradio as gr with gr.Blocks() as demo: name = gr.Textbox(label="Name") output = gr.Textbox(label="Greeting") btn = gr.Button("Greet") btn.click(fn=lambda n: f"Hello {n}!", inputs=name, outputs=output) demo.launch() ` ChatInterface: high-level wrapper for chatbot UIs. `python import gradio as gr def respond(message, history): return f"You said: {message}" gr.ChatInterface(fn=respond).launch() `
`Textbox(value: str | I18nData | Callable | None = None, type: Literal['text', 'password', 'email'] = "text", lines: int = 1, max_lines: int | None = None, placeholder: str | I18nData | None = None, label: str | I18nData | None = None, info: str | I18nData | None = None, every: Timer | float | None = None, inputs: Component | Sequence[Component] | set[Component] | None = None, show_label: bool | None = None, container: bool = True, scale: int | None = None, min_width: int = 160, interactive: bool | None = None, visible: bool | Literal['hidden'] = True, elem_id: str | None = None, autofocus: bool = False, autoscroll: bool = True, elem_classes: list[str] | str | None = None, render: bool = True, key: int | str | tuple[int | str, ...] | None = None, preserved_by_key: list[str] | str | None = "value", text_align: Literal['left', 'right'] | None = None, rtl: bool = False, buttons: list[Literal['copy'] | Button] | None = None, max_length: int | None = None, submit_btn: str | bool | None = False, stop_btn: str | bool | None = False, html_attributes: InputHTMLAttributes | None = None)`
Creates a textarea for user to enter string input or display string output..
Quality Score
Good
76/100
Trust & Transparency
Open Source — Apache-2.0
Source code publicly auditable
Verified Open Source
Hosted on GitHub — publicly auditable
Actively Maintained
Last commit Yesterday
7.5k stars — Strong Community
438 forks