[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6F7AM0S71GVXY8TFGGZ1316":3,"skill-same:01M6F7AM0S71GVXY8TFGGZ1316":83},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":22,"publishedAt":48,"linkOnly":49,"markdownContent":50,"markdownBody":51,"frontMatter":52,"refName":27,"commitSha":57,"skillDirectory":58,"forksCount":59,"repositoryHtmlUrl":60,"repositoryHomepageUrl":6,"ownerHtmlUrl":61,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":62,"install":63,"resources":76},"01M6F7AM0S71GVXY8TFGGZ1316","hugging-face-gradio",null,"Build Gradio web UIs and demos in Python. Use when creating or editing Gradio apps, components, event listeners, layouts, or chatbots.","boisenoise\u002Fskills-collections","boisenoise","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F193180?v=4","01M6CDBDQK6BDN55ZMA6B6PKBM","01M6CDBDVSJ3JPTBYN26FZ7TZK",12,"Apache-2.0","https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections\u002Fblob\u002Fmain\u002Fskills\u002Fantigravity-hugging-face-gradio\u002FSKILL.md",[17],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000016","图像与多媒体","SCENARIO","使用场景",[23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47],"face","gradio","hugging face","hugging face gradio","main","2026","when","listeners","tree","event","demos","chatbots","apps","critical","wed","python","build","use","editing","HuggingFace","license","official","components","web","github","2026-11-10 10:12:30",false,"---\nname: hugging-face-gradio\ndescription: Build Gradio web UIs and demos in Python. Use when creating or editing Gradio apps, components, event listeners, layouts, or chatbots.\nrisk: critical\nsource: https:\u002F\u002Fgithub.com\u002Fhuggingface\u002Fskills\u002Ftree\u002Fmain\u002Fskills\u002Fhuggingface-gradio\nsource_repo: huggingface\u002Fskills\nsource_type: official\ndate_added: 2026-07-01\nlicense: Apache-2.0\nlicense_source: https:\u002F\u002Fgithub.com\u002Fhuggingface\u002Fskills\u002Fblob\u002Fmain\u002FLICENSE\n---\n\n# Gradio\n## When to Use\n\nUse this skill when you need build Gradio web UIs and demos in Python. Use when creating or editing Gradio apps, components, event listeners, layouts, or chatbots.\n\n\nGradio is a Python library for building interactive web UIs and ML demos. This skill covers the core API, patterns, and examples.\n\n## Guides\n\nDetailed guides on specific topics (read these when relevant):\n\n- [Quickstart](https:\u002F\u002Fwww.gradio.app\u002Fguides\u002Fquickstart)\n- [The Interface Class](https:\u002F\u002Fwww.gradio.app\u002Fguides\u002Fthe-interface-class)\n- [Blocks and Event Listeners](https:\u002F\u002Fwww.gradio.app\u002Fguides\u002Fblocks-and-event-listeners)\n- [Controlling Layout](https:\u002F\u002Fwww.gradio.app\u002Fguides\u002Fcontrolling-layout)\n- [More Blocks Features](https:\u002F\u002Fwww.gradio.app\u002Fguides\u002Fmore-blocks-features)\n- [Custom CSS and JS](https:\u002F\u002Fwww.gradio.app\u002Fguides\u002Fcustom-CSS-and-JS)\n- [Streaming Outputs](https:\u002F\u002Fwww.gradio.app\u002Fguides\u002Fstreaming-outputs)\n- [Streaming Inputs](https:\u002F\u002Fwww.gradio.app\u002Fguides\u002Fstreaming-inputs)\n- [Sharing Your App](https:\u002F\u002Fwww.gradio.app\u002Fguides\u002Fsharing-your-app)\n- [Custom HTML Components](https:\u002F\u002Fwww.gradio.app\u002Fguides\u002Fcustom-HTML-components)\n- [Getting Started with the Python Client](https:\u002F\u002Fwww.gradio.app\u002Fguides\u002Fgetting-started-with-the-python-client)\n- [Getting Started with the JS Client](https:\u002F\u002Fwww.gradio.app\u002Fguides\u002Fgetting-started-with-the-js-client)\n\n## Version and security boundaries\n\nSignatures below are an imported API snapshot, not valid Python stubs or a universal version contract. Inspect the installed Gradio version and its official docs before using newer parameters\u002FCLI commands. Keep demos on loopback by default; public sharing\u002Flistening, remote predictions and uploads require explicit authorization. Validate upload size\u002Ftype\u002Fcontent and output paths, keep HTML sanitization enabled, and use authentication\u002Frate limits for exposed endpoints. Do not expose arbitrary local directories, secrets or server-side execution tools through a demo.\n\n## Core Patterns\n\n**Interface** (high-level): wraps a function with input\u002Foutput components.\n\n```python\nimport gradio as gr\n\ndef greet(name):\n    return f\"Hello {name}!\"\n\ngr.Interface(fn=greet, inputs=\"text\", outputs=\"text\").launch()\n```\n\n**Blocks** (low-level): flexible layout with explicit event wiring.\n\n```python\nimport gradio as gr\n\nwith gr.Blocks() as demo:\n    name = gr.Textbox(label=\"Name\")\n    output = gr.Textbox(label=\"Greeting\")\n    btn = gr.Button(\"Greet\")\n    btn.click(fn=lambda n: f\"Hello {n}!\", inputs=name, outputs=output)\n\ndemo.launch()\n```\n\n**ChatInterface**: high-level wrapper for chatbot UIs.\n\n```python\nimport gradio as gr\n\ndef respond(message, history):\n    return f\"You said: {message}\"\n\ngr.ChatInterface(fn=respond).launch()\n```\n\n## Key Component Signatures\n\n### `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)`\nCreates a textarea for user to enter string input or display string output..\n\n### `Number(value: float | Callable | None = None, label: str | I18nData | None = None, placeholder: 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, 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)`\nCreates a numeric field for user to enter numbers as input or display numeric output..\n\n### `Slider(minimum: float = 0, maximum: float = 100, value: float | Callable | None = None, step: float | None = None, precision: int | 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, 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)`\nCreates a slider that ranges from {minimum} to {maximum} with a step size of {step}..\n\n### `Checkbox(value: bool | Callable = False, 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, 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)`\nCreates a checkbox that can be set to `True` or `False`.\n\n### `Dropdown(choices: Sequence[str | int | float | tuple[str, str | int | float]] | None = None, value: str | int | float | Sequence[str | int | float] | Callable | DefaultValue | None = DefaultValue(), type: Literal['value', 'index'] = \"value\", multiselect: bool | None = None, allow_custom_value: bool = False, max_choices: int | None = None, filterable: bool = True, 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, 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)`\nCreates 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)..\n\n### `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 | 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, 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)`\nCreates a set of (string or numeric type) radio buttons of which only one can be selected..\n\n### `Image(value: str | PIL.Image.Image | np.ndarray | Callable | None = None, format: str = \"webp\", height: int | str | None = None, width: int | str | None = None, image_mode: Literal['1', 'L', 'P', 'RGB', 'RGBA', 'CMYK', 'YCbCr', 'LAB', 'HSV', 'I', 'F'] | None = \"RGB\", sources: list[Literal['upload', 'webcam', 'clipboard']] | Literal['upload', 'webcam', 'clipboard'] | None = None, type: Literal['numpy', 'pil', 'filepath'] = \"numpy\", label: str | I18nData | None = None, every: Timer | float | None = None, inputs: Component | Sequence[Component] | set[Component] | None = None, show_label: bool | None = None, buttons: list[Literal['download', 'share', 'fullscreen'] | Button] | None = None, container: bool = True, scale: int | None = None, min_width: int = 160, interactive: bool | None = None, visible: bool | Literal['hidden'] = True, streaming: bool = False, 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\", webcam_options: WebcamOptions | None = None, placeholder: str | None = None, watermark: WatermarkOptions | None = None)`\nCreates an image component that can be used to upload images (as an input) or display images (as an output)..\n\n### `Audio(value: str | Path | tuple[int, np.ndarray] | Callable | None = None, sources: list[Literal['upload', 'microphone']] | Literal['upload', 'microphone'] | None = None, type: Literal['numpy', 'filepath'] = \"numpy\", label: 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, streaming: bool = False, 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\", format: Literal['wav', 'mp3'] | None = None, autoplay: bool = False, editable: bool = True, buttons: list[Literal['download', 'share'] | Button] | None = None, waveform_options: WaveformOptions | dict | None = None, loop: bool = False, recording: bool = False, subtitles: str | Path | list[dict[str, Any]] | None = None, playback_position: float = 0)`\nCreates an audio component that can be used to upload\u002Frecord audio (as an input) or display audio (as an output)..\n\n### `Video(value: str | Path | Callable | None = None, format: str | None = None, sources: list[Literal['upload', 'webcam']] | Literal['upload', 'webcam'] | None = None, height: int | str | None = None, width: int | str | None = None, label: 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, 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\", webcam_options: WebcamOptions | None = None, include_audio: bool | None = None, autoplay: bool = False, buttons: list[Literal['download', 'share'] | Button] | None = None, loop: bool = False, streaming: bool = False, watermark: WatermarkOptions | None = None, subtitles: str | Path | list[dict[str, Any]] | None = None, playback_position: float = 0)`\nCreates a video component that can be used to upload\u002Frecord videos (as an input) or display videos (as an output).\n\n### `File(value: str | list[str] | Callable | None = None, file_count: Literal['single', 'multiple', 'directory'] = \"single\", file_types: list[str] | None = None, type: Literal['filepath', 'binary'] = \"filepath\", label: 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, height: int | str | float | None = None, 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\", allow_reordering: bool = False, buttons: list[Button] | None = None)`\nCreates a file component that allows uploading one or more generic files (when used as an input) or displaying generic files or URLs for download (as output).\n\n### `Chatbot(value: list[MessageDict | Message] | Callable | None = None, label: 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, visible: bool | Literal['hidden'] = True, elem_id: str | None = None, elem_classes: list[str] | str | None = None, autoscroll: bool = True, render: bool = True, key: int | str | tuple[int | str, ...] | None = None, preserved_by_key: list[str] | str | None = \"value\", height: int | str | None = 400, resizable: bool = False, max_height: int | str | None = None, min_height: int | str | None = None, editable: Literal['user', 'all'] | None = None, latex_delimiters: list[dict[str, str | bool]] | None = None, rtl: bool = False, buttons: list[Literal['share', 'copy', 'copy_all'] | Button] | None = None, watermark: str | None = None, avatar_images: tuple[str | Path | None, str | Path | None] | None = None, sanitize_html: bool = True, render_markdown: bool = True, feedback_options: list[str] | tuple[str, ...] | None = ('Like', 'Dislike'), feedback_value: Sequence[str | None] | None = None, line_breaks: bool = True, layout: Literal['panel', 'bubble'] | None = None, placeholder: str | None = None, examples: list[ExampleMessage] | None = None, allow_file_downloads: \u003Cclass 'inspect._empty'> = True, group_consecutive_messages: bool = True, allow_tags: list[str] | bool = True, reasoning_tags: list[tuple[str, str]] | None = None, like_user_message: bool = False)`\nCreates a chatbot that displays user-submitted messages and responses.\n\n### `Button(value: str | I18nData | Callable = \"Run\", every: Timer | float | None = None, inputs: Component | Sequence[Component] | set[Component] | None = None, variant: Literal['primary', 'secondary', 'stop', 'huggingface'] = \"secondary\", size: Literal['sm', 'md', 'lg'] = \"lg\", icon: str | Path | None = None, link: str | None = None, link_target: Literal['_self', '_blank', '_parent', '_top'] = \"_self\", visible: bool | Literal['hidden'] = True, interactive: bool = 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\", scale: int | None = None, min_width: int | None = None)`\nCreates a button that can be assigned arbitrary .click() events.\n\n### `Markdown(value: str | I18nData | Callable | None = None, label: str | I18nData | None = None, every: Timer | float | None = None, inputs: Component | Sequence[Component] | set[Component] | None = None, show_label: bool | None = None, rtl: bool = False, latex_delimiters: list[dict[str, str | 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\", sanitize_html: bool = True, line_breaks: bool = False, header_links: bool = False, height: int | str | None = None, max_height: int | str | None = None, min_height: int | str | None = None, buttons: list[Literal['copy']] | None = None, container: bool = False, padding: bool = False)`\nUsed to render arbitrary Markdown output.\n\n### `HTML(value: Any | Callable | None = None, label: str | I18nData | None = None, html_template: str = \"${value}\", css_template: str = \"\", js_on_load: str | None = \"element.addEventListener('click', function() { trigger('click') });\", apply_default_css: bool = True, every: Timer | float | None = None, inputs: Component | Sequence[Component] | set[Component] | None = None, show_label: bool = False, 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\", min_height: int | None = None, max_height: int | None = None, container: bool = False, padding: bool = False, autoscroll: bool = False, buttons: list[Button] | None = None, server_functions: list[Callable] | None = None, props: Any)`\nCreates a component with arbitrary HTML.\n\n\n## Custom HTML Components\n\nIf 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\u002FMCP support. See the [full guide](https:\u002F\u002Fwww.gradio.app\u002Fguides\u002Fcustom-HTML-components).\n\nHere's an example that shows how to create and use these kinds of components:\n\n```python\nimport gradio as gr\n\nclass StarRating(gr.HTML):\n    def __init__(self, label, value=0, **kwargs):\n        html_template = \"\"\"\n        \u003Ch2>${label} rating:\u003C\u002Fh2>\n        ${Array.from({length: 5}, (_, i) => `\u003Cimg class='${i \u003C value ? '' : 'faded'}' src='https:\u002F\u002Fupload.wikimedia.org\u002Fwikipedia\u002Fcommons\u002Fd\u002Fdf\u002FAward-star-gold-3d.svg'>`).join('')}\n        \"\"\"\n        css_template = \"\"\"\n            img { height: 50px; display: inline-block; cursor: pointer; }\n            .faded { filter: grayscale(100%); opacity: 0.3; }\n        \"\"\"\n        js_on_load = \"\"\"\n            const imgs = element.querySelectorAll('img');\n            imgs.forEach((img, index) => {\n                img.addEventListener('click', () => {\n                    props.value = index + 1;\n                });\n            });\n        \"\"\"\n        super().__init__(value=value, label=label, html_template=html_template, css_template=css_template, js_on_load=js_on_load, **kwargs)\n\n    def api_info(self):\n        return {\"type\": \"integer\", \"minimum\": 0, \"maximum\": 5}\n\n\nwith gr.Blocks() as demo:\n    gr.Markdown(\"# Restaurant Review\")\n    food_rating = StarRating(label=\"Food\", value=3)\n    service_rating = StarRating(label=\"Service\", value=3)\n    ambience_rating = StarRating(label=\"Ambience\", value=3)\n    average_btn = gr.Button(\"Calculate Average Rating\")\n    rating_output = StarRating(label=\"Average\", value=3)\n    def calculate_average(food, service, ambience):\n        return round((food + service + ambience) \u002F 3)\n    average_btn.click(\n        fn=calculate_average,\n        inputs=[food_rating, service_rating, ambience_rating],\n        outputs=rating_output\n    )\n\ndemo.launch()\n```\n\n## Event Listeners\n\nAll event listeners share the same signature:\n\n```python\ncomponent.event_name(\n    fn: Callable | None | Literal[\"decorator\"] = \"decorator\",\n    inputs: Component | Sequence[Component] | set[Component] | None = None,\n    outputs: Component | Sequence[Component] | set[Component] | None = None,\n    api_name: str | None = None,\n    api_description: str | None | Literal[False] = None,\n    scroll_to_output: bool = False,\n    show_progress: Literal[\"full\", \"minimal\", \"hidden\"] = \"full\",\n    show_progress_on: Component | Sequence[Component] | None = None,\n    queue: bool = True,\n    batch: bool = False,\n    max_batch_size: int = 4,\n    preprocess: bool = True,\n    postprocess: bool = True,\n    cancels: dict[str, Any] | list[dict[str, Any]] | None = None,\n    trigger_mode: Literal[\"once\", \"multiple\", \"always_last\"] | None = None,\n    js: str | Literal[True] | None = None,\n    concurrency_limit: int | None | Literal[\"default\"] = \"default\",\n    concurrency_id: str | None = None,\n    api_visibility: Literal[\"public\", \"private\", \"undocumented\"] = \"public\",\n    time_limit: int | None = None,\n    stream_every: float = 0.5,\n    key: int | str | tuple[int | str, ...] | None = None,\n    validator: Callable | None = None,\n) -> Dependency\n```\n\nSupported events per component:\n\n- **AnnotatedImage**: select\n- **Audio**: stream, change, clear, play, pause, stop, pause, start_recording, pause_recording, stop_recording, upload, input\n- **BarPlot**: select, double_click\n- **BrowserState**: change\n- **Button**: click\n- **Chatbot**: change, select, like, retry, undo, example_select, option_select, clear, copy, edit\n- **Checkbox**: change, input, select\n- **CheckboxGroup**: change, input, select\n- **ClearButton**: click\n- **Code**: change, input, focus, blur\n- **ColorPicker**: change, input, submit, focus, blur\n- **Dataframe**: change, input, select, edit\n- **Dataset**: click, select\n- **DateTime**: change, submit\n- **DeepLinkButton**: click\n- **Dialogue**: change, input, submit\n- **DownloadButton**: click\n- **Dropdown**: change, input, select, focus, blur, key_up\n- **DuplicateButton**: click\n- **File**: change, select, clear, upload, delete, download\n- **FileExplorer**: change, input, select\n- **Gallery**: select, upload, change, delete, preview_close, preview_open\n- **HTML**: change, input, click, double_click, submit, stop, edit, clear, play, pause, end, start_recording, pause_recording, stop_recording, focus, blur, upload, release, select, stream, like, example_select, option_select, load, key_up, apply, delete, tick, undo, retry, expand, collapse, download, copy\n- **HighlightedText**: change, select\n- **Image**: clear, change, stream, select, upload, input\n- **ImageEditor**: clear, change, input, select, upload, apply\n- **ImageSlider**: clear, change, stream, select, upload, input\n- **JSON**: change\n- **Label**: change, select\n- **LinePlot**: select, double_click\n- **LoginButton**: click\n- **Markdown**: change, copy\n- **Model3D**: change, upload, edit, clear\n- **MultimodalTextbox**: change, input, select, submit, focus, blur, stop\n- **Navbar**: change\n- **Number**: change, input, submit, focus, blur\n- **ParamViewer**: change, upload\n- **Plot**: change\n- **Radio**: select, change, input\n- **ScatterPlot**: select, double_click\n- **SimpleImage**: clear, change, upload\n- **Slider**: change, input, release\n- **State**: change\n- **Textbox**: change, input, select, submit, focus, blur, stop, copy\n- **Timer**: tick\n- **UploadButton**: click, upload\n- **Video**: change, clear, start_recording, stop_recording, stop, play, pause, end, upload, input\n\n## Prediction CLI\n\nThe `gradio` CLI includes `info` and `predict` commands for interacting with Gradio apps programmatically. These are especially useful for coding agents that need to use Spaces in their workflows.\n\n### `gradio info` — Discover endpoints and parameters\n\n```bash\ngradio info \u003Cspace_id_or_url>\n```\n\nReturns a JSON payload describing all endpoints, their parameters (with types and defaults), and return values.\n\n```bash\ngradio info gradio\u002Fcalculator\n# {\n#   \"\u002Fpredict\": {\n#     \"parameters\": [\n#       {\"name\": \"num1\", \"required\": true, \"default\": null, \"type\": {\"type\": \"number\"}},\n#       {\"name\": \"operation\", \"required\": true, \"default\": null, \"type\": {\"enum\": [\"add\", \"subtract\", \"multiply\", \"divide\"], \"type\": \"string\"}},\n#       {\"name\": \"num2\", \"required\": true, \"default\": null, \"type\": {\"type\": \"number\"}}\n#     ],\n#     \"returns\": [{\"name\": \"output\", \"type\": {\"type\": \"number\"}}],\n#     \"description\": \"\"\n#   }\n# }\n```\n\nFile-type parameters show `\"type\": \"filepath\"` with instructions to include `\"meta\": {\"_type\": \"gradio.FileData\"}` — this signals the file will be uploaded to the remote server.\n\n### `gradio predict` — Send predictions\n\n```bash\ngradio predict \u003Cspace_id_or_url> \u003Cendpoint> \u003Cjson_payload>\n```\n\nReturns a JSON object with named output keys.\n\n```bash\n# Simple numeric prediction\ngradio predict gradio\u002Fcalculator \u002Fpredict '{\"num1\": 5, \"operation\": \"multiply\", \"num2\": 3}'\n# {\"output\": 15}\n\n# Image generation\ngradio predict black-forest-labs\u002FFLUX.2-dev \u002Finfer '{\"prompt\": \"A majestic dragon\"}'\n# {\"Result\": \"\u002Ftmp\u002Fgradio\u002F...\u002Fimage.webp\", \"Seed\": 1117868604}\n\n# File upload (must include meta key)\ngradio predict gradio\u002Fimage_mod \u002Fpredict '{\"image\": {\"path\": \"\u002Fpath\u002Fto\u002Fimage.png\", \"meta\": {\"_type\": \"gradio.FileData\"}}}'\n# {\"output\": \"\u002Ftmp\u002Fgradio\u002F...\u002Foutput.png\"}\n```\n\nVerify authentication options for the installed CLI; avoid passing tokens in argv or logs and prefer supported protected environment\u002Fcredential storage. Remote prediction uploads data and may incur compute costs.\n\n## Additional Reference\n\n- [End-to-End Examples](examples.md) — complete working apps\n\n## Limitations\n\n- Use this skill only when the task clearly matches its upstream product or API scope.\n- Verify commands, API behavior, pricing, quotas, credentials, and deployment effects against current official documentation before making changes.\n- Do not treat generated examples as a substitute for environment-specific tests, security review, or user approval for destructive or costly actions.\n","# Gradio\n## When to Use\n\nUse this skill when you need build Gradio web UIs and demos in Python. Use when creating or editing Gradio apps, components, event listeners, layouts, or chatbots.\n\n\nGradio is a Python library for building interactive web UIs and ML demos. This skill covers the core API, patterns, and examples.\n\n## Guides\n\nDetailed guides on specific topics (read these when relevant):\n\n- [Quickstart](https:\u002F\u002Fwww.gradio.app\u002Fguides\u002Fquickstart)\n- [The Interface Class](https:\u002F\u002Fwww.gradio.app\u002Fguides\u002Fthe-interface-class)\n- [Blocks and Event Listeners](https:\u002F\u002Fwww.gradio.app\u002Fguides\u002Fblocks-and-event-listeners)\n- [Controlling Layout](https:\u002F\u002Fwww.gradio.app\u002Fguides\u002Fcontrolling-layout)\n- [More Blocks Features](https:\u002F\u002Fwww.gradio.app\u002Fguides\u002Fmore-blocks-features)\n- [Custom CSS and JS](https:\u002F\u002Fwww.gradio.app\u002Fguides\u002Fcustom-CSS-and-JS)\n- [Streaming Outputs](https:\u002F\u002Fwww.gradio.app\u002Fguides\u002Fstreaming-outputs)\n- [Streaming Inputs](https:\u002F\u002Fwww.gradio.app\u002Fguides\u002Fstreaming-inputs)\n- [Sharing Your App](https:\u002F\u002Fwww.gradio.app\u002Fguides\u002Fsharing-your-app)\n- [Custom HTML Components](https:\u002F\u002Fwww.gradio.app\u002Fguides\u002Fcustom-HTML-components)\n- [Getting Started with the Python Client](https:\u002F\u002Fwww.gradio.app\u002Fguides\u002Fgetting-started-with-the-python-client)\n- [Getting Started with the JS Client](https:\u002F\u002Fwww.gradio.app\u002Fguides\u002Fgetting-started-with-the-js-client)\n\n## Version and security boundaries\n\nSignatures below are an imported API snapshot, not valid Python stubs or a universal version contract. Inspect the installed Gradio version and its official docs before using newer parameters\u002FCLI commands. Keep demos on loopback by default; public sharing\u002Flistening, remote predictions and uploads require explicit authorization. Validate upload size\u002Ftype\u002Fcontent and output paths, keep HTML sanitization enabled, and use authentication\u002Frate limits for exposed endpoints. Do not expose arbitrary local directories, secrets or server-side execution tools through a demo.\n\n## Core Patterns\n\n**Interface** (high-level): wraps a function with input\u002Foutput components.\n\n```python\nimport gradio as gr\n\ndef greet(name):\n    return f\"Hello {name}!\"\n\ngr.Interface(fn=greet, inputs=\"text\", outputs=\"text\").launch()\n```\n\n**Blocks** (low-level): flexible layout with explicit event wiring.\n\n```python\nimport gradio as gr\n\nwith gr.Blocks() as demo:\n    name = gr.Textbox(label=\"Name\")\n    output = gr.Textbox(label=\"Greeting\")\n    btn = gr.Button(\"Greet\")\n    btn.click(fn=lambda n: f\"Hello {n}!\", inputs=name, outputs=output)\n\ndemo.launch()\n```\n\n**ChatInterface**: high-level wrapper for chatbot UIs.\n\n```python\nimport gradio as gr\n\ndef respond(message, history):\n    return f\"You said: {message}\"\n\ngr.ChatInterface(fn=respond).launch()\n```\n\n## Key Component Signatures\n\n### `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)`\nCreates a textarea for user to enter string input or display string output..\n\n### `Number(value: float | Callable | None = None, label: str | I18nData | None = None, placeholder: 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, 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)`\nCreates a numeric field for user to enter numbers as input or display numeric output..\n\n### `Slider(minimum: float = 0, maximum: float = 100, value: float | Callable | None = None, step: float | None = None, precision: int | 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, 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)`\nCreates a slider that ranges from {minimum} to {maximum} with a step size of {step}..\n\n### `Checkbox(value: bool | Callable = False, 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, 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)`\nCreates a checkbox that can be set to `True` or `False`.\n\n### `Dropdown(choices: Sequence[str | int | float | tuple[str, str | int | float]] | None = None, value: str | int | float | Sequence[str | int | float] | Callable | DefaultValue | None = DefaultValue(), type: Literal['value', 'index'] = \"value\", multiselect: bool | None = None, allow_custom_value: bool = False, max_choices: int | None = None, filterable: bool = True, 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, 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)`\nCreates 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)..\n\n### `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 | 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, 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)`\nCreates a set of (string or numeric type) radio buttons of which only one can be selected..\n\n### `Image(value: str | PIL.Image.Image | np.ndarray | Callable | None = None, format: str = \"webp\", height: int | str | None = None, width: int | str | None = None, image_mode: Literal['1', 'L', 'P', 'RGB', 'RGBA', 'CMYK', 'YCbCr', 'LAB', 'HSV', 'I', 'F'] | None = \"RGB\", sources: list[Literal['upload', 'webcam', 'clipboard']] | Literal['upload', 'webcam', 'clipboard'] | None = None, type: Literal['numpy', 'pil', 'filepath'] = \"numpy\", label: str | I18nData | None = None, every: Timer | float | None = None, inputs: Component | Sequence[Component] | set[Component] | None = None, show_label: bool | None = None, buttons: list[Literal['download', 'share', 'fullscreen'] | Button] | None = None, container: bool = True, scale: int | None = None, min_width: int = 160, interactive: bool | None = None, visible: bool | Literal['hidden'] = True, streaming: bool = False, 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\", webcam_options: WebcamOptions | None = None, placeholder: str | None = None, watermark: WatermarkOptions | None = None)`\nCreates an image component that can be used to upload images (as an input) or display images (as an output)..\n\n### `Audio(value: str | Path | tuple[int, np.ndarray] | Callable | None = None, sources: list[Literal['upload', 'microphone']] | Literal['upload', 'microphone'] | None = None, type: Literal['numpy', 'filepath'] = \"numpy\", label: 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, streaming: bool = False, 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\", format: Literal['wav', 'mp3'] | None = None, autoplay: bool = False, editable: bool = True, buttons: list[Literal['download', 'share'] | Button] | None = None, waveform_options: WaveformOptions | dict | None = None, loop: bool = False, recording: bool = False, subtitles: str | Path | list[dict[str, Any]] | None = None, playback_position: float = 0)`\nCreates an audio component that can be used to upload\u002Frecord audio (as an input) or display audio (as an output)..\n\n### `Video(value: str | Path | Callable | None = None, format: str | None = None, sources: list[Literal['upload', 'webcam']] | Literal['upload', 'webcam'] | None = None, height: int | str | None = None, width: int | str | None = None, label: 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, 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\", webcam_options: WebcamOptions | None = None, include_audio: bool | None = None, autoplay: bool = False, buttons: list[Literal['download', 'share'] | Button] | None = None, loop: bool = False, streaming: bool = False, watermark: WatermarkOptions | None = None, subtitles: str | Path | list[dict[str, Any]] | None = None, playback_position: float = 0)`\nCreates a video component that can be used to upload\u002Frecord videos (as an input) or display videos (as an output).\n\n### `File(value: str | list[str] | Callable | None = None, file_count: Literal['single', 'multiple', 'directory'] = \"single\", file_types: list[str] | None = None, type: Literal['filepath', 'binary'] = \"filepath\", label: 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, height: int | str | float | None = None, 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\", allow_reordering: bool = False, buttons: list[Button] | None = None)`\nCreates a file component that allows uploading one or more generic files (when used as an input) or displaying generic files or URLs for download (as output).\n\n### `Chatbot(value: list[MessageDict | Message] | Callable | None = None, label: 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, visible: bool | Literal['hidden'] = True, elem_id: str | None = None, elem_classes: list[str] | str | None = None, autoscroll: bool = True, render: bool = True, key: int | str | tuple[int | str, ...] | None = None, preserved_by_key: list[str] | str | None = \"value\", height: int | str | None = 400, resizable: bool = False, max_height: int | str | None = None, min_height: int | str | None = None, editable: Literal['user', 'all'] | None = None, latex_delimiters: list[dict[str, str | bool]] | None = None, rtl: bool = False, buttons: list[Literal['share', 'copy', 'copy_all'] | Button] | None = None, watermark: str | None = None, avatar_images: tuple[str | Path | None, str | Path | None] | None = None, sanitize_html: bool = True, render_markdown: bool = True, feedback_options: list[str] | tuple[str, ...] | None = ('Like', 'Dislike'), feedback_value: Sequence[str | None] | None = None, line_breaks: bool = True, layout: Literal['panel', 'bubble'] | None = None, placeholder: str | None = None, examples: list[ExampleMessage] | None = None, allow_file_downloads: \u003Cclass 'inspect._empty'> = True, group_consecutive_messages: bool = True, allow_tags: list[str] | bool = True, reasoning_tags: list[tuple[str, str]] | None = None, like_user_message: bool = False)`\nCreates a chatbot that displays user-submitted messages and responses.\n\n### `Button(value: str | I18nData | Callable = \"Run\", every: Timer | float | None = None, inputs: Component | Sequence[Component] | set[Component] | None = None, variant: Literal['primary', 'secondary', 'stop', 'huggingface'] = \"secondary\", size: Literal['sm', 'md', 'lg'] = \"lg\", icon: str | Path | None = None, link: str | None = None, link_target: Literal['_self', '_blank', '_parent', '_top'] = \"_self\", visible: bool | Literal['hidden'] = True, interactive: bool = 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\", scale: int | None = None, min_width: int | None = None)`\nCreates a button that can be assigned arbitrary .click() events.\n\n### `Markdown(value: str | I18nData | Callable | None = None, label: str | I18nData | None = None, every: Timer | float | None = None, inputs: Component | Sequence[Component] | set[Component] | None = None, show_label: bool | None = None, rtl: bool = False, latex_delimiters: list[dict[str, str | 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\", sanitize_html: bool = True, line_breaks: bool = False, header_links: bool = False, height: int | str | None = None, max_height: int | str | None = None, min_height: int | str | None = None, buttons: list[Literal['copy']] | None = None, container: bool = False, padding: bool = False)`\nUsed to render arbitrary Markdown output.\n\n### `HTML(value: Any | Callable | None = None, label: str | I18nData | None = None, html_template: str = \"${value}\", css_template: str = \"\", js_on_load: str | None = \"element.addEventListener('click', function() { trigger('click') });\", apply_default_css: bool = True, every: Timer | float | None = None, inputs: Component | Sequence[Component] | set[Component] | None = None, show_label: bool = False, 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\", min_height: int | None = None, max_height: int | None = None, container: bool = False, padding: bool = False, autoscroll: bool = False, buttons: list[Button] | None = None, server_functions: list[Callable] | None = None, props: Any)`\nCreates a component with arbitrary HTML.\n\n\n## Custom HTML Components\n\nIf 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\u002FMCP support. See the [full guide](https:\u002F\u002Fwww.gradio.app\u002Fguides\u002Fcustom-HTML-components).\n\nHere's an example that shows how to create and use these kinds of components:\n\n```python\nimport gradio as gr\n\nclass StarRating(gr.HTML):\n    def __init__(self, label, value=0, **kwargs):\n        html_template = \"\"\"\n        \u003Ch2>${label} rating:\u003C\u002Fh2>\n        ${Array.from({length: 5}, (_, i) => `\u003Cimg class='${i \u003C value ? '' : 'faded'}' src='https:\u002F\u002Fupload.wikimedia.org\u002Fwikipedia\u002Fcommons\u002Fd\u002Fdf\u002FAward-star-gold-3d.svg'>`).join('')}\n        \"\"\"\n        css_template = \"\"\"\n            img { height: 50px; display: inline-block; cursor: pointer; }\n            .faded { filter: grayscale(100%); opacity: 0.3; }\n        \"\"\"\n        js_on_load = \"\"\"\n            const imgs = element.querySelectorAll('img');\n            imgs.forEach((img, index) => {\n                img.addEventListener('click', () => {\n                    props.value = index + 1;\n                });\n            });\n        \"\"\"\n        super().__init__(value=value, label=label, html_template=html_template, css_template=css_template, js_on_load=js_on_load, **kwargs)\n\n    def api_info(self):\n        return {\"type\": \"integer\", \"minimum\": 0, \"maximum\": 5}\n\n\nwith gr.Blocks() as demo:\n    gr.Markdown(\"# Restaurant Review\")\n    food_rating = StarRating(label=\"Food\", value=3)\n    service_rating = StarRating(label=\"Service\", value=3)\n    ambience_rating = StarRating(label=\"Ambience\", value=3)\n    average_btn = gr.Button(\"Calculate Average Rating\")\n    rating_output = StarRating(label=\"Average\", value=3)\n    def calculate_average(food, service, ambience):\n        return round((food + service + ambience) \u002F 3)\n    average_btn.click(\n        fn=calculate_average,\n        inputs=[food_rating, service_rating, ambience_rating],\n        outputs=rating_output\n    )\n\ndemo.launch()\n```\n\n## Event Listeners\n\nAll event listeners share the same signature:\n\n```python\ncomponent.event_name(\n    fn: Callable | None | Literal[\"decorator\"] = \"decorator\",\n    inputs: Component | Sequence[Component] | set[Component] | None = None,\n    outputs: Component | Sequence[Component] | set[Component] | None = None,\n    api_name: str | None = None,\n    api_description: str | None | Literal[False] = None,\n    scroll_to_output: bool = False,\n    show_progress: Literal[\"full\", \"minimal\", \"hidden\"] = \"full\",\n    show_progress_on: Component | Sequence[Component] | None = None,\n    queue: bool = True,\n    batch: bool = False,\n    max_batch_size: int = 4,\n    preprocess: bool = True,\n    postprocess: bool = True,\n    cancels: dict[str, Any] | list[dict[str, Any]] | None = None,\n    trigger_mode: Literal[\"once\", \"multiple\", \"always_last\"] | None = None,\n    js: str | Literal[True] | None = None,\n    concurrency_limit: int | None | Literal[\"default\"] = \"default\",\n    concurrency_id: str | None = None,\n    api_visibility: Literal[\"public\", \"private\", \"undocumented\"] = \"public\",\n    time_limit: int | None = None,\n    stream_every: float = 0.5,\n    key: int | str | tuple[int | str, ...] | None = None,\n    validator: Callable | None = None,\n) -> Dependency\n```\n\nSupported events per component:\n\n- **AnnotatedImage**: select\n- **Audio**: stream, change, clear, play, pause, stop, pause, start_recording, pause_recording, stop_recording, upload, input\n- **BarPlot**: select, double_click\n- **BrowserState**: change\n- **Button**: click\n- **Chatbot**: change, select, like, retry, undo, example_select, option_select, clear, copy, edit\n- **Checkbox**: change, input, select\n- **CheckboxGroup**: change, input, select\n- **ClearButton**: click\n- **Code**: change, input, focus, blur\n- **ColorPicker**: change, input, submit, focus, blur\n- **Dataframe**: change, input, select, edit\n- **Dataset**: click, select\n- **DateTime**: change, submit\n- **DeepLinkButton**: click\n- **Dialogue**: change, input, submit\n- **DownloadButton**: click\n- **Dropdown**: change, input, select, focus, blur, key_up\n- **DuplicateButton**: click\n- **File**: change, select, clear, upload, delete, download\n- **FileExplorer**: change, input, select\n- **Gallery**: select, upload, change, delete, preview_close, preview_open\n- **HTML**: change, input, click, double_click, submit, stop, edit, clear, play, pause, end, start_recording, pause_recording, stop_recording, focus, blur, upload, release, select, stream, like, example_select, option_select, load, key_up, apply, delete, tick, undo, retry, expand, collapse, download, copy\n- **HighlightedText**: change, select\n- **Image**: clear, change, stream, select, upload, input\n- **ImageEditor**: clear, change, input, select, upload, apply\n- **ImageSlider**: clear, change, stream, select, upload, input\n- **JSON**: change\n- **Label**: change, select\n- **LinePlot**: select, double_click\n- **LoginButton**: click\n- **Markdown**: change, copy\n- **Model3D**: change, upload, edit, clear\n- **MultimodalTextbox**: change, input, select, submit, focus, blur, stop\n- **Navbar**: change\n- **Number**: change, input, submit, focus, blur\n- **ParamViewer**: change, upload\n- **Plot**: change\n- **Radio**: select, change, input\n- **ScatterPlot**: select, double_click\n- **SimpleImage**: clear, change, upload\n- **Slider**: change, input, release\n- **State**: change\n- **Textbox**: change, input, select, submit, focus, blur, stop, copy\n- **Timer**: tick\n- **UploadButton**: click, upload\n- **Video**: change, clear, start_recording, stop_recording, stop, play, pause, end, upload, input\n\n## Prediction CLI\n\nThe `gradio` CLI includes `info` and `predict` commands for interacting with Gradio apps programmatically. These are especially useful for coding agents that need to use Spaces in their workflows.\n\n### `gradio info` — Discover endpoints and parameters\n\n```bash\ngradio info \u003Cspace_id_or_url>\n```\n\nReturns a JSON payload describing all endpoints, their parameters (with types and defaults), and return values.\n\n```bash\ngradio info gradio\u002Fcalculator\n# {\n#   \"\u002Fpredict\": {\n#     \"parameters\": [\n#       {\"name\": \"num1\", \"required\": true, \"default\": null, \"type\": {\"type\": \"number\"}},\n#       {\"name\": \"operation\", \"required\": true, \"default\": null, \"type\": {\"enum\": [\"add\", \"subtract\", \"multiply\", \"divide\"], \"type\": \"string\"}},\n#       {\"name\": \"num2\", \"required\": true, \"default\": null, \"type\": {\"type\": \"number\"}}\n#     ],\n#     \"returns\": [{\"name\": \"output\", \"type\": {\"type\": \"number\"}}],\n#     \"description\": \"\"\n#   }\n# }\n```\n\nFile-type parameters show `\"type\": \"filepath\"` with instructions to include `\"meta\": {\"_type\": \"gradio.FileData\"}` — this signals the file will be uploaded to the remote server.\n\n### `gradio predict` — Send predictions\n\n```bash\ngradio predict \u003Cspace_id_or_url> \u003Cendpoint> \u003Cjson_payload>\n```\n\nReturns a JSON object with named output keys.\n\n```bash\n# Simple numeric prediction\ngradio predict gradio\u002Fcalculator \u002Fpredict '{\"num1\": 5, \"operation\": \"multiply\", \"num2\": 3}'\n# {\"output\": 15}\n\n# Image generation\ngradio predict black-forest-labs\u002FFLUX.2-dev \u002Finfer '{\"prompt\": \"A majestic dragon\"}'\n# {\"Result\": \"\u002Ftmp\u002Fgradio\u002F...\u002Fimage.webp\", \"Seed\": 1117868604}\n\n# File upload (must include meta key)\ngradio predict gradio\u002Fimage_mod \u002Fpredict '{\"image\": {\"path\": \"\u002Fpath\u002Fto\u002Fimage.png\", \"meta\": {\"_type\": \"gradio.FileData\"}}}'\n# {\"output\": \"\u002Ftmp\u002Fgradio\u002F...\u002Foutput.png\"}\n```\n\nVerify authentication options for the installed CLI; avoid passing tokens in argv or logs and prefer supported protected environment\u002Fcredential storage. Remote prediction uploads data and may incur compute costs.\n\n## Additional Reference\n\n- [End-to-End Examples](examples.md) — complete working apps\n\n## Limitations\n\n- Use this skill only when the task clearly matches its upstream product or API scope.\n- Verify commands, API behavior, pricing, quotas, credentials, and deployment effects against current official documentation before making changes.\n- Do not treat generated examples as a substitute for environment-specific tests, security review, or user approval for destructive or costly actions.\n",{"name":5,"risk":36,"source":53,"license":14,"date_added":54,"description":7,"source_repo":55,"source_type":44,"license_source":56},"https:\u002F\u002Fgithub.com\u002Fhuggingface\u002Fskills\u002Ftree\u002Fmain\u002Fskills\u002Fhuggingface-gradio",1782864000000,"huggingface\u002Fskills","https:\u002F\u002Fgithub.com\u002Fhuggingface\u002Fskills\u002Fblob\u002Fmain\u002FLICENSE","7bf2279c8a65758319526a721d5c4b75683aec9c","skills\u002Fantigravity-hugging-face-gradio",3,"https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections","https:\u002F\u002Fgithub.com\u002Fboisenoise","2026-11-13 14:20:47",{"source":8,"skillName":5,"commands":64,"prompt":74,"zipAvailable":75},[65,68,71],{"tool":66,"command":67},"npx","npx skills add boisenoise\u002Fskills-collections --skill hugging-face-gradio",{"tool":69,"command":70},"bunx","bunx skills add boisenoise\u002Fskills-collections --skill hugging-face-gradio",{"tool":72,"command":73},"pnpm","pnpm dlx skills add boisenoise\u002Fskills-collections --skill hugging-face-gradio","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections\u002Fblob\u002Fmain\u002Fskills\u002Fantigravity-hugging-face-gradio\u002FSKILL.md",true,[77],{"path":78,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":81,"sourceHtmlUrl":82},"examples.md","REFERENCE","参考文档",15149,"https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections\u002Fblob\u002Fmain\u002Fskills\u002Fantigravity-hugging-face-gradio\u002Fexamples.md",[84,108,131,157,176,199],{"skillNo":85,"name":86,"nameZh":6,"description":87,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":88,"sourceHtmlUrl":89,"categories":90,"keywords":91,"publishedAt":48},"01M6WNH92BHVFXHGPDZCPJ0AG0","web-access","Use Treg for public web or platform data only when existing search, browser and connected tools cannot cover the task, with explicit cost and data boundaries.","https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections\u002Fblob\u002Fmain\u002Fskills\u002Fantigravity-web-access\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections\u002Fblob\u002Fmain\u002Fskills\u002Fantigravity-web-access\u002FSKILL.md",[],[46,92,93,44,94,95,96,97,98,99,100,101,102,103,104,36,105,106,107,29,28],"access","web access","development","browser","search","data","Tools","read","fetch","only","youtube","free tools","platform","free","cover","normal",{"skillNo":109,"name":110,"nameZh":6,"description":111,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":112,"sourceHtmlUrl":113,"categories":114,"keywords":118,"publishedAt":48},"01M6WNF9XAYAB2CZDDJBAKNM93","treg","Use the Treg CLI or MCP catalog to discover, price and call authorized external tools with team-scoped credentials and a user-approved budget.","https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections\u002Fblob\u002Fmain\u002Fskills\u002Fantigravity-treg\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections\u002Fblob\u002Fmain\u002Fskills\u002Fantigravity-treg\u002FSKILL.md",[115],{"categoryNo":116,"categoryName":117,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",[110,119,120,47,44,94,43,98,121,122,123,124,40,125,126,36,127,128,129,130,28],"MCP","cli","Budget","credentials","team","catalog","call","discover","external tools","with","scoped","blob",{"skillNo":132,"name":133,"nameZh":6,"description":134,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":135,"sourceHtmlUrl":136,"categories":137,"keywords":143,"publishedAt":48},"01M6WN93MEAZ4E41DYAHJRPHQT","recruit","Turn a job description into an evidence-linked candidate shortlist through Treg, with job-related ranking and optional authorized business contact enrichment.","https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections\u002Fblob\u002Fmain\u002Fskills\u002Fantigravity-recruit\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections\u002Fblob\u002Fmain\u002Fskills\u002Fantigravity-recruit\u002FSKILL.md",[138],{"categoryNo":139,"categoryName":140,"taxonomyType":141,"taxonomyTypeDesc":142},"01JBSEEDCAT000000000000038","人力资源","PROFESSION","适用职业",[133,47,44,43,144,145,146,147,148,149,36,150,151,152,128,153,154,155,156,130,110,28],"https","email","enrichment","business","evidence","phone","ranking","post","job description","for","person","candidate","reason",{"skillNo":158,"name":159,"nameZh":6,"description":160,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":161,"sourceHtmlUrl":162,"categories":163,"keywords":164,"publishedAt":48},"01M6WN8R5RXSMHM9B4D9FAFX42","rea-growth","Analyze a company’s public growth and content through Treg, distinguish observations from hypotheses, and produce an evidence-linked playbook within an approved budget.","https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections\u002Fblob\u002Fmain\u002Fskills\u002Fantigravity-rea-growth\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections\u002Fblob\u002Fmain\u002Fskills\u002Fantigravity-rea-growth\u002FSKILL.md",[],[165,166,167,47,44,43,168,169,144,170,121,171,172,173,148,36,174,175,130,110,28],"growth","rea","rea growth","produce","content","playbook","marketing","analyze","public","observations","company",{"skillNo":177,"name":178,"nameZh":6,"description":179,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":180,"sourceHtmlUrl":181,"categories":182,"keywords":183,"publishedAt":48},"01M6WN2EVE3RQRGWAKBT4S7YT2","make-ugc","Create original AI UGC-style product videos through Treg: research hooks, approve a licensed presenter and voice, generate clips, add captions and report costs.","https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections\u002Fblob\u002Fmain\u002Fskills\u002Fantigravity-make-ugc\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections\u002Fblob\u002Fmain\u002Fskills\u002Fantigravity-make-ugc\u002FSKILL.md",[],[184,185,47,186,44,187,43,188,189,190,191,192,36,193,194,195,196,197,198,130],"make","make ugc","research","create","Video","Captions","ads","short","hooks","head","style","niche","trending","talking-head","approve",{"skillNo":200,"name":201,"nameZh":6,"description":202,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":203,"sourceHtmlUrl":204,"categories":205,"keywords":206,"publishedAt":48},"01M6WN10ARAA63Y8K1YNGXJ2RM","lead-signals","Find and qualify public buying signals through Treg, rank fitting business accounts and optionally enrich authorized business contact information.","https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections\u002Fblob\u002Fmain\u002Fskills\u002Fantigravity-lead-signals\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fboisenoise\u002Fskills-collections\u002Fblob\u002Fmain\u002Fskills\u002Fantigravity-lead-signals\u002FSKILL.md",[],[207,208,209,47,44,43,210,211,147,212,213,36,214,215,216,217,218,219,220,130],"signals","lead","lead signals","how","find","ready","as","how to","qualify","people","information","enrich","changes","funding"]