huggingface-gradio
🤖 AI Summary
This skill enables developers to build interactive web UIs and ML demos using the Gradio Python library, covering core APIs, Interface and Blocks patterns, layout control, custom styling, and streaming inputs/outputs.
How to Install
Claude Code:
git clone --depth 1 https://github.com/huggingface/skills.git && cp skills/skills/huggingface-gradio ~/.claude/skills/huggingface-gradio -r# 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](https://www.gradio.app/guides/quickstart)
- [The Interface Class](https://www.gradio.app/guides/the-interface-class)
- [Blocks and Event Listeners](https://www.gradio.app/guides/blocks-and-event-listeners)
- [Controlling Layout](https://www.gradio.app/guides/controlling-layout)
- [More Blocks Features](https://www.gradio.app/guides/more-blocks-features)
- [Custom CSS and JS](https://www.gradio.app/guides/custom-CSS-and-JS)
- [Streaming Outputs](https://www.gradio.app/guides/streaming-outputs)
- [Streaming Inputs](https://www.gradio.app/guides/streaming-inputs)
- [Sharing Your App](https://www.gradio.app/guides/sharing-your-app)
- [Custom HTML Components](https://www.gradio.app/guides/custom-HTML-components)
- [Getting Started with the Python Client](https://www.gradio.app/guides/getting-started-with-the-python-client)
- [Getting Started with the JS Client](https://www.gradio.app/guides/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()
```
## Key Component Signatures
### `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,
Details
| Category | Coding → generation |
| Source | huggingface/skills |
| SKILL.md | View on GitHub → |
| Repo Stars | ★ 10.7K |
| Est. per Skill | 357 (shared across 30 skills from this repo) |
| Difficulty | Beginner |
| Risk Level | N/A |
Related Skills
jq
jq — JSON Querying and Transformation Overview jq is the standard CLI tool for querying and reshapin
makepad-font
Makepad Font Skill Version: makepad-widgets (dev branch) | Last Updated: 2026-01-19 Check for update
pubmed-database
PubMed Database Overview PubMed is the U.S. National Library of Medicine's comprehensive database pr
angular-ui-patterns
Angular UI Patterns Core Principles Never show stale UI - Loading states only when actually loading
Works Well With
Skills from the same repository — often designed to work together
hf-mem
hfmem estimates the required memory for inference, including model weights and an optional KV cache,
hf-cli
Install: curl -LsSf https://hf.co/cli/install.sh | bash -s. The Hugging Face Hub CLI tool hf is avai
trl-training
TRL Training Skill You are an expert at using the TRL (Transformers Reinforcement Learning) library