Huggingface Gradio

What This Skill Does

• The Huggingface Gradio skill provides tools for building interactive web UIs and ML demos using the Gradio library.
• It covers core API usage, patterns like Interface and Blocks, and examples for creating various types of interfaces.
• This skill is useful for developers who want to create interactive demos for their machine learning models.

When to Use

• Create a simple interface for a function with text input/output.
• Build a flexible layout with explicit event wiring using Blocks.
• Develop a chatbot UI using Chat Interface.
• Create a streaming output interface.
• Create a streaming input interface.
• Share your Gradio app with others.

Key Features

• Provides the Interface class for high-level function wrapping.
• Offers the Blocks class for flexible layout and event wiring.
• Includes the Chat Interface class for chatbot UIs.
• Supports streaming outputs for real-time updates.
• Supports streaming inputs for handling continuous data.
• Provides guides and examples for various use cases.

Manual Installation

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.

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.

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()

Chat Interface: high-level wrapper for chatbot UIs.

import gradio as gr

def respond(message, history): return f"You said: {message}"

• gr.
• Chat Interface(fn=respond).launch().

Key Component Signatures

Textbox(value: str | I18n Data | Callable | None = None, type: Literal['text', 'password', 'email'] = "text", lines: int = 1, max_lines: int | None = None, placeholder: str | I18n Data | None = None, label: str | I18n Data | None = None, info: str | I18n Data | 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: Input HTMLAttributes | None = None)

Creates a textarea for user to enter string input or display string output..

Number(value: float | Callable | None = None, label: str | I18n Data | None = None, placeholder: str | I18n Data | None = None, info: str | I18n Data | 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, 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", buttons: list[Button] | None = None, precision: int | None = None, minimum: float | None = None, maximum: float | None = None, step: float = 1)

Creates a numeric field for user to enter numbers as input or display numeric output..

Slider(minimum: float = 0, maximum: float = 100, value: float | Callable | None = None, step: float | None = None, precision: int | None = None, label: str | I18n Data | None = None, info: str | I18n Data | 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, 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", randomize: bool = False, buttons: list[Literal['reset']] | None = None)

Creates a slider that ranges from {minimum} to {maximum} with a step size of {step}..

Checkbox(value: bool | Callable = False, label: str | I18n Data | None = None, info: str | I18n Data | 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, 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", buttons: list[Button] | None = None)

Creates a checkbox that can be set to True or False.

Dropdown(choices: Sequence[str | int | float | tuple[str, str | int | float]] | None = None, value: str | int | float | Sequence[str | int | float] | Callable | Default Value | None = Default Value(), type: Literal['value', 'index'] = "value", multiselect: bool | None = None, allow_custom_value: bool = False, max_choices: int | None = None, filterable: bool = True, label: str | I18n Data | None = None, info: str | I18n Data | 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, 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", buttons: list[Button] | None = None)

Creates a dropdown of choices from which a single entry or multiple entries can be selected (as an input component) or displayed (as an output component)..

Radio(choices: Sequence[str | int | float | tuple[str, str | int | float]] | None = None, value: str | int | float | Callable | None = None, type: Literal['value', 'index'] = "value", label: str | I18n Data | None = None, info: str | I18n Data | 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, 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", rtl: bool = False, buttons: list[Button] | None = None)

Creates a set of (string or numeric type) radio buttons of which only one can be selected..

Image(value: str |