[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-huggingface-huggingface-gradio":3,"mdc-gm48tk-key":38,"related-repo-huggingface-huggingface-gradio":2339,"related-org-huggingface-huggingface-gradio":2437},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":27,"repoUrl":28,"updatedAt":29,"license":30,"forks":31,"topics":32,"repo":33,"sourceUrl":36,"mdContent":37},"huggingface-gradio","build web UIs and demos with Gradio","Build Gradio web UIs and demos in Python. Use when creating or editing Gradio apps, components, event listeners, layouts, or chatbots.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},"huggingface","Hugging Face","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fhuggingface.png",[12,16,18,21,24],{"name":13,"slug":14,"type":15},"Gradio","gradio","tag",{"name":9,"slug":17,"type":15},"hugging-face",{"name":19,"slug":20,"type":15},"LLM","llm",{"name":22,"slug":23,"type":15},"Python","python",{"name":25,"slug":26,"type":15},"Frontend","frontend",10861,"https:\u002F\u002Fgithub.com\u002Fhuggingface\u002Fskills","2026-04-06T18:25:37.756438",null,721,[],{"repoUrl":28,"stars":27,"forks":31,"topics":34,"description":35},[],"Give your agents the power of the Hugging Face ecosystem","https:\u002F\u002Fgithub.com\u002Fhuggingface\u002Fskills\u002Ftree\u002FHEAD\u002Fskills\u002Fhuggingface-gradio","---\nname: huggingface-gradio\ndescription: Build Gradio web UIs and demos in Python. Use when creating or editing Gradio apps, components, event listeners, layouts, or chatbots.\n---\n\n# Gradio\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## 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\nBoth commands accept `--token` for accessing private Spaces.\n\n## Additional Reference\n\n- [End-to-End Examples](examples.md) — complete working apps\n",{"data":39,"body":40},{"name":4,"description":6},{"type":41,"children":42},"root",[43,50,56,63,68,195,201,212,279,289,368,378,430,436,447,452,462,467,477,482,492,513,523,528,538,543,553,558,568,573,583,588,598,603,613,618,628,633,643,648,658,663,668,759,764,1130,1136,1141,1348,1353,1810,1816,1844,1856,1901,1906,2018,2039,2051,2123,2128,2300,2313,2319,2333],{"type":44,"tag":45,"props":46,"children":47},"element","h1",{"id":14},[48],{"type":49,"value":13},"text",{"type":44,"tag":51,"props":52,"children":53},"p",{},[54],{"type":49,"value":55},"Gradio is a Python library for building interactive web UIs and ML demos. This skill covers the core API, patterns, and examples.",{"type":44,"tag":57,"props":58,"children":60},"h2",{"id":59},"guides",[61],{"type":49,"value":62},"Guides",{"type":44,"tag":51,"props":64,"children":65},{},[66],{"type":49,"value":67},"Detailed guides on specific topics (read these when relevant):",{"type":44,"tag":69,"props":70,"children":71},"ul",{},[72,85,95,105,115,125,135,145,155,165,175,185],{"type":44,"tag":73,"props":74,"children":75},"li",{},[76],{"type":44,"tag":77,"props":78,"children":82},"a",{"href":79,"rel":80},"https:\u002F\u002Fwww.gradio.app\u002Fguides\u002Fquickstart",[81],"nofollow",[83],{"type":49,"value":84},"Quickstart",{"type":44,"tag":73,"props":86,"children":87},{},[88],{"type":44,"tag":77,"props":89,"children":92},{"href":90,"rel":91},"https:\u002F\u002Fwww.gradio.app\u002Fguides\u002Fthe-interface-class",[81],[93],{"type":49,"value":94},"The Interface Class",{"type":44,"tag":73,"props":96,"children":97},{},[98],{"type":44,"tag":77,"props":99,"children":102},{"href":100,"rel":101},"https:\u002F\u002Fwww.gradio.app\u002Fguides\u002Fblocks-and-event-listeners",[81],[103],{"type":49,"value":104},"Blocks and Event Listeners",{"type":44,"tag":73,"props":106,"children":107},{},[108],{"type":44,"tag":77,"props":109,"children":112},{"href":110,"rel":111},"https:\u002F\u002Fwww.gradio.app\u002Fguides\u002Fcontrolling-layout",[81],[113],{"type":49,"value":114},"Controlling Layout",{"type":44,"tag":73,"props":116,"children":117},{},[118],{"type":44,"tag":77,"props":119,"children":122},{"href":120,"rel":121},"https:\u002F\u002Fwww.gradio.app\u002Fguides\u002Fmore-blocks-features",[81],[123],{"type":49,"value":124},"More Blocks Features",{"type":44,"tag":73,"props":126,"children":127},{},[128],{"type":44,"tag":77,"props":129,"children":132},{"href":130,"rel":131},"https:\u002F\u002Fwww.gradio.app\u002Fguides\u002Fcustom-CSS-and-JS",[81],[133],{"type":49,"value":134},"Custom CSS and JS",{"type":44,"tag":73,"props":136,"children":137},{},[138],{"type":44,"tag":77,"props":139,"children":142},{"href":140,"rel":141},"https:\u002F\u002Fwww.gradio.app\u002Fguides\u002Fstreaming-outputs",[81],[143],{"type":49,"value":144},"Streaming Outputs",{"type":44,"tag":73,"props":146,"children":147},{},[148],{"type":44,"tag":77,"props":149,"children":152},{"href":150,"rel":151},"https:\u002F\u002Fwww.gradio.app\u002Fguides\u002Fstreaming-inputs",[81],[153],{"type":49,"value":154},"Streaming Inputs",{"type":44,"tag":73,"props":156,"children":157},{},[158],{"type":44,"tag":77,"props":159,"children":162},{"href":160,"rel":161},"https:\u002F\u002Fwww.gradio.app\u002Fguides\u002Fsharing-your-app",[81],[163],{"type":49,"value":164},"Sharing Your App",{"type":44,"tag":73,"props":166,"children":167},{},[168],{"type":44,"tag":77,"props":169,"children":172},{"href":170,"rel":171},"https:\u002F\u002Fwww.gradio.app\u002Fguides\u002Fcustom-HTML-components",[81],[173],{"type":49,"value":174},"Custom HTML Components",{"type":44,"tag":73,"props":176,"children":177},{},[178],{"type":44,"tag":77,"props":179,"children":182},{"href":180,"rel":181},"https:\u002F\u002Fwww.gradio.app\u002Fguides\u002Fgetting-started-with-the-python-client",[81],[183],{"type":49,"value":184},"Getting Started with the Python Client",{"type":44,"tag":73,"props":186,"children":187},{},[188],{"type":44,"tag":77,"props":189,"children":192},{"href":190,"rel":191},"https:\u002F\u002Fwww.gradio.app\u002Fguides\u002Fgetting-started-with-the-js-client",[81],[193],{"type":49,"value":194},"Getting Started with the JS Client",{"type":44,"tag":57,"props":196,"children":198},{"id":197},"core-patterns",[199],{"type":49,"value":200},"Core Patterns",{"type":44,"tag":51,"props":202,"children":203},{},[204,210],{"type":44,"tag":205,"props":206,"children":207},"strong",{},[208],{"type":49,"value":209},"Interface",{"type":49,"value":211}," (high-level): wraps a function with input\u002Foutput components.",{"type":44,"tag":213,"props":214,"children":218},"pre",{"className":215,"code":216,"language":23,"meta":217,"style":217},"language-python shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import gradio as gr\n\ndef greet(name):\n    return f\"Hello {name}!\"\n\ngr.Interface(fn=greet, inputs=\"text\", outputs=\"text\").launch()\n","",[219],{"type":44,"tag":220,"props":221,"children":222},"code",{"__ignoreMap":217},[223,234,244,253,262,270],{"type":44,"tag":224,"props":225,"children":228},"span",{"class":226,"line":227},"line",1,[229],{"type":44,"tag":224,"props":230,"children":231},{},[232],{"type":49,"value":233},"import gradio as gr\n",{"type":44,"tag":224,"props":235,"children":237},{"class":226,"line":236},2,[238],{"type":44,"tag":224,"props":239,"children":241},{"emptyLinePlaceholder":240},true,[242],{"type":49,"value":243},"\n",{"type":44,"tag":224,"props":245,"children":247},{"class":226,"line":246},3,[248],{"type":44,"tag":224,"props":249,"children":250},{},[251],{"type":49,"value":252},"def greet(name):\n",{"type":44,"tag":224,"props":254,"children":256},{"class":226,"line":255},4,[257],{"type":44,"tag":224,"props":258,"children":259},{},[260],{"type":49,"value":261},"    return f\"Hello {name}!\"\n",{"type":44,"tag":224,"props":263,"children":265},{"class":226,"line":264},5,[266],{"type":44,"tag":224,"props":267,"children":268},{"emptyLinePlaceholder":240},[269],{"type":49,"value":243},{"type":44,"tag":224,"props":271,"children":273},{"class":226,"line":272},6,[274],{"type":44,"tag":224,"props":275,"children":276},{},[277],{"type":49,"value":278},"gr.Interface(fn=greet, inputs=\"text\", outputs=\"text\").launch()\n",{"type":44,"tag":51,"props":280,"children":281},{},[282,287],{"type":44,"tag":205,"props":283,"children":284},{},[285],{"type":49,"value":286},"Blocks",{"type":49,"value":288}," (low-level): flexible layout with explicit event wiring.",{"type":44,"tag":213,"props":290,"children":292},{"className":215,"code":291,"language":23,"meta":217,"style":217},"import 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",[293],{"type":44,"tag":220,"props":294,"children":295},{"__ignoreMap":217},[296,303,310,318,326,334,342,351,359],{"type":44,"tag":224,"props":297,"children":298},{"class":226,"line":227},[299],{"type":44,"tag":224,"props":300,"children":301},{},[302],{"type":49,"value":233},{"type":44,"tag":224,"props":304,"children":305},{"class":226,"line":236},[306],{"type":44,"tag":224,"props":307,"children":308},{"emptyLinePlaceholder":240},[309],{"type":49,"value":243},{"type":44,"tag":224,"props":311,"children":312},{"class":226,"line":246},[313],{"type":44,"tag":224,"props":314,"children":315},{},[316],{"type":49,"value":317},"with gr.Blocks() as demo:\n",{"type":44,"tag":224,"props":319,"children":320},{"class":226,"line":255},[321],{"type":44,"tag":224,"props":322,"children":323},{},[324],{"type":49,"value":325},"    name = gr.Textbox(label=\"Name\")\n",{"type":44,"tag":224,"props":327,"children":328},{"class":226,"line":264},[329],{"type":44,"tag":224,"props":330,"children":331},{},[332],{"type":49,"value":333},"    output = gr.Textbox(label=\"Greeting\")\n",{"type":44,"tag":224,"props":335,"children":336},{"class":226,"line":272},[337],{"type":44,"tag":224,"props":338,"children":339},{},[340],{"type":49,"value":341},"    btn = gr.Button(\"Greet\")\n",{"type":44,"tag":224,"props":343,"children":345},{"class":226,"line":344},7,[346],{"type":44,"tag":224,"props":347,"children":348},{},[349],{"type":49,"value":350},"    btn.click(fn=lambda n: f\"Hello {n}!\", inputs=name, outputs=output)\n",{"type":44,"tag":224,"props":352,"children":354},{"class":226,"line":353},8,[355],{"type":44,"tag":224,"props":356,"children":357},{"emptyLinePlaceholder":240},[358],{"type":49,"value":243},{"type":44,"tag":224,"props":360,"children":362},{"class":226,"line":361},9,[363],{"type":44,"tag":224,"props":364,"children":365},{},[366],{"type":49,"value":367},"demo.launch()\n",{"type":44,"tag":51,"props":369,"children":370},{},[371,376],{"type":44,"tag":205,"props":372,"children":373},{},[374],{"type":49,"value":375},"ChatInterface",{"type":49,"value":377},": high-level wrapper for chatbot UIs.",{"type":44,"tag":213,"props":379,"children":381},{"className":215,"code":380,"language":23,"meta":217,"style":217},"import gradio as gr\n\ndef respond(message, history):\n    return f\"You said: {message}\"\n\ngr.ChatInterface(fn=respond).launch()\n",[382],{"type":44,"tag":220,"props":383,"children":384},{"__ignoreMap":217},[385,392,399,407,415,422],{"type":44,"tag":224,"props":386,"children":387},{"class":226,"line":227},[388],{"type":44,"tag":224,"props":389,"children":390},{},[391],{"type":49,"value":233},{"type":44,"tag":224,"props":393,"children":394},{"class":226,"line":236},[395],{"type":44,"tag":224,"props":396,"children":397},{"emptyLinePlaceholder":240},[398],{"type":49,"value":243},{"type":44,"tag":224,"props":400,"children":401},{"class":226,"line":246},[402],{"type":44,"tag":224,"props":403,"children":404},{},[405],{"type":49,"value":406},"def respond(message, history):\n",{"type":44,"tag":224,"props":408,"children":409},{"class":226,"line":255},[410],{"type":44,"tag":224,"props":411,"children":412},{},[413],{"type":49,"value":414},"    return f\"You said: {message}\"\n",{"type":44,"tag":224,"props":416,"children":417},{"class":226,"line":264},[418],{"type":44,"tag":224,"props":419,"children":420},{"emptyLinePlaceholder":240},[421],{"type":49,"value":243},{"type":44,"tag":224,"props":423,"children":424},{"class":226,"line":272},[425],{"type":44,"tag":224,"props":426,"children":427},{},[428],{"type":49,"value":429},"gr.ChatInterface(fn=respond).launch()\n",{"type":44,"tag":57,"props":431,"children":433},{"id":432},"key-component-signatures",[434],{"type":49,"value":435},"Key Component Signatures",{"type":44,"tag":437,"props":438,"children":440},"h3",{"id":439},"textboxvalue-str-i18ndata-callable-none-none-type-literaltext-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-sequencecomponent-setcomponent-none-none-show_label-bool-none-none-container-bool-true-scale-int-none-none-min_width-int-160-interactive-bool-none-none-visible-bool-literalhidden-true-elem_id-str-none-none-autofocus-bool-false-autoscroll-bool-true-elem_classes-liststr-str-none-none-render-bool-true-key-int-str-tupleint-str-none-none-preserved_by_key-liststr-str-none-value-text_align-literalleft-right-none-none-rtl-bool-false-buttons-listliteralcopy-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",[441],{"type":44,"tag":220,"props":442,"children":444},{"className":443},[],[445],{"type":49,"value":446},"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)",{"type":44,"tag":51,"props":448,"children":449},{},[450],{"type":49,"value":451},"Creates a textarea for user to enter string input or display string output..",{"type":44,"tag":437,"props":453,"children":455},{"id":454},"numbervalue-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-sequencecomponent-setcomponent-none-none-show_label-bool-none-none-container-bool-true-scale-int-none-none-min_width-int-160-interactive-bool-none-none-visible-bool-literalhidden-true-elem_id-str-none-none-elem_classes-liststr-str-none-none-render-bool-true-key-int-str-tupleint-str-none-none-preserved_by_key-liststr-str-none-value-buttons-listbutton-none-none-precision-int-none-none-minimum-float-none-none-maximum-float-none-none-step-float-1",[456],{"type":44,"tag":220,"props":457,"children":459},{"className":458},[],[460],{"type":49,"value":461},"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)",{"type":44,"tag":51,"props":463,"children":464},{},[465],{"type":49,"value":466},"Creates a numeric field for user to enter numbers as input or display numeric output..",{"type":44,"tag":437,"props":468,"children":470},{"id":469},"sliderminimum-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-sequencecomponent-setcomponent-none-none-show_label-bool-none-none-container-bool-true-scale-int-none-none-min_width-int-160-interactive-bool-none-none-visible-bool-literalhidden-true-elem_id-str-none-none-elem_classes-liststr-str-none-none-render-bool-true-key-int-str-tupleint-str-none-none-preserved_by_key-liststr-str-none-value-randomize-bool-false-buttons-listliteralreset-none-none",[471],{"type":44,"tag":220,"props":472,"children":474},{"className":473},[],[475],{"type":49,"value":476},"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)",{"type":44,"tag":51,"props":478,"children":479},{},[480],{"type":49,"value":481},"Creates a slider that ranges from {minimum} to {maximum} with a step size of {step}..",{"type":44,"tag":437,"props":483,"children":485},{"id":484},"checkboxvalue-bool-callable-false-label-str-i18ndata-none-none-info-str-i18ndata-none-none-every-timer-float-none-none-inputs-component-sequencecomponent-setcomponent-none-none-show_label-bool-none-none-container-bool-true-scale-int-none-none-min_width-int-160-interactive-bool-none-none-visible-bool-literalhidden-true-elem_id-str-none-none-elem_classes-liststr-str-none-none-render-bool-true-key-int-str-tupleint-str-none-none-preserved_by_key-liststr-str-none-value-buttons-listbutton-none-none",[486],{"type":44,"tag":220,"props":487,"children":489},{"className":488},[],[490],{"type":49,"value":491},"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)",{"type":44,"tag":51,"props":493,"children":494},{},[495,497,503,505,511],{"type":49,"value":496},"Creates a checkbox that can be set to ",{"type":44,"tag":220,"props":498,"children":500},{"className":499},[],[501],{"type":49,"value":502},"True",{"type":49,"value":504}," or ",{"type":44,"tag":220,"props":506,"children":508},{"className":507},[],[509],{"type":49,"value":510},"False",{"type":49,"value":512},".",{"type":44,"tag":437,"props":514,"children":516},{"id":515},"dropdownchoices-sequencestr-int-float-tuplestr-str-int-float-none-none-value-str-int-float-sequencestr-int-float-callable-defaultvalue-none-defaultvalue-type-literalvalue-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-sequencecomponent-setcomponent-none-none-show_label-bool-none-none-container-bool-true-scale-int-none-none-min_width-int-160-interactive-bool-none-none-visible-bool-literalhidden-true-elem_id-str-none-none-elem_classes-liststr-str-none-none-render-bool-true-key-int-str-tupleint-str-none-none-preserved_by_key-liststr-str-none-value-buttons-listbutton-none-none",[517],{"type":44,"tag":220,"props":518,"children":520},{"className":519},[],[521],{"type":49,"value":522},"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)",{"type":44,"tag":51,"props":524,"children":525},{},[526],{"type":49,"value":527},"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)..",{"type":44,"tag":437,"props":529,"children":531},{"id":530},"radiochoices-sequencestr-int-float-tuplestr-str-int-float-none-none-value-str-int-float-callable-none-none-type-literalvalue-index-value-label-str-i18ndata-none-none-info-str-i18ndata-none-none-every-timer-float-none-none-inputs-component-sequencecomponent-setcomponent-none-none-show_label-bool-none-none-container-bool-true-scale-int-none-none-min_width-int-160-interactive-bool-none-none-visible-bool-literalhidden-true-elem_id-str-none-none-elem_classes-liststr-str-none-none-render-bool-true-key-int-str-tupleint-str-none-none-preserved_by_key-liststr-str-none-value-rtl-bool-false-buttons-listbutton-none-none",[532],{"type":44,"tag":220,"props":533,"children":535},{"className":534},[],[536],{"type":49,"value":537},"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)",{"type":44,"tag":51,"props":539,"children":540},{},[541],{"type":49,"value":542},"Creates a set of (string or numeric type) radio buttons of which only one can be selected..",{"type":44,"tag":437,"props":544,"children":546},{"id":545},"imagevalue-str-pilimageimage-npndarray-callable-none-none-format-str-webp-height-int-str-none-none-width-int-str-none-none-image_mode-literal1-l-p-rgb-rgba-cmyk-ycbcr-lab-hsv-i-f-none-rgb-sources-listliteralupload-webcam-clipboard-literalupload-webcam-clipboard-none-none-type-literalnumpy-pil-filepath-numpy-label-str-i18ndata-none-none-every-timer-float-none-none-inputs-component-sequencecomponent-setcomponent-none-none-show_label-bool-none-none-buttons-listliteraldownload-share-fullscreen-button-none-none-container-bool-true-scale-int-none-none-min_width-int-160-interactive-bool-none-none-visible-bool-literalhidden-true-streaming-bool-false-elem_id-str-none-none-elem_classes-liststr-str-none-none-render-bool-true-key-int-str-tupleint-str-none-none-preserved_by_key-liststr-str-none-value-webcam_options-webcamoptions-none-none-placeholder-str-none-none-watermark-watermarkoptions-none-none",[547],{"type":44,"tag":220,"props":548,"children":550},{"className":549},[],[551],{"type":49,"value":552},"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)",{"type":44,"tag":51,"props":554,"children":555},{},[556],{"type":49,"value":557},"Creates an image component that can be used to upload images (as an input) or display images (as an output)..",{"type":44,"tag":437,"props":559,"children":561},{"id":560},"audiovalue-str-path-tupleint-npndarray-callable-none-none-sources-listliteralupload-microphone-literalupload-microphone-none-none-type-literalnumpy-filepath-numpy-label-str-i18ndata-none-none-every-timer-float-none-none-inputs-component-sequencecomponent-setcomponent-none-none-show_label-bool-none-none-container-bool-true-scale-int-none-none-min_width-int-160-interactive-bool-none-none-visible-bool-literalhidden-true-streaming-bool-false-elem_id-str-none-none-elem_classes-liststr-str-none-none-render-bool-true-key-int-str-tupleint-str-none-none-preserved_by_key-liststr-str-none-value-format-literalwav-mp3-none-none-autoplay-bool-false-editable-bool-true-buttons-listliteraldownload-share-button-none-none-waveform_options-waveformoptions-dict-none-none-loop-bool-false-recording-bool-false-subtitles-str-path-listdictstr-any-none-none-playback_position-float-0",[562],{"type":44,"tag":220,"props":563,"children":565},{"className":564},[],[566],{"type":49,"value":567},"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)",{"type":44,"tag":51,"props":569,"children":570},{},[571],{"type":49,"value":572},"Creates an audio component that can be used to upload\u002Frecord audio (as an input) or display audio (as an output)..",{"type":44,"tag":437,"props":574,"children":576},{"id":575},"videovalue-str-path-callable-none-none-format-str-none-none-sources-listliteralupload-webcam-literalupload-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-sequencecomponent-setcomponent-none-none-show_label-bool-none-none-container-bool-true-scale-int-none-none-min_width-int-160-interactive-bool-none-none-visible-bool-literalhidden-true-elem_id-str-none-none-elem_classes-liststr-str-none-none-render-bool-true-key-int-str-tupleint-str-none-none-preserved_by_key-liststr-str-none-value-webcam_options-webcamoptions-none-none-include_audio-bool-none-none-autoplay-bool-false-buttons-listliteraldownload-share-button-none-none-loop-bool-false-streaming-bool-false-watermark-watermarkoptions-none-none-subtitles-str-path-listdictstr-any-none-none-playback_position-float-0",[577],{"type":44,"tag":220,"props":578,"children":580},{"className":579},[],[581],{"type":49,"value":582},"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)",{"type":44,"tag":51,"props":584,"children":585},{},[586],{"type":49,"value":587},"Creates a video component that can be used to upload\u002Frecord videos (as an input) or display videos (as an output).",{"type":44,"tag":437,"props":589,"children":591},{"id":590},"filevalue-str-liststr-callable-none-none-file_count-literalsingle-multiple-directory-single-file_types-liststr-none-none-type-literalfilepath-binary-filepath-label-str-i18ndata-none-none-every-timer-float-none-none-inputs-component-sequencecomponent-setcomponent-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-literalhidden-true-elem_id-str-none-none-elem_classes-liststr-str-none-none-render-bool-true-key-int-str-tupleint-str-none-none-preserved_by_key-liststr-str-none-value-allow_reordering-bool-false-buttons-listbutton-none-none",[592],{"type":44,"tag":220,"props":593,"children":595},{"className":594},[],[596],{"type":49,"value":597},"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)",{"type":44,"tag":51,"props":599,"children":600},{},[601],{"type":49,"value":602},"Creates 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).",{"type":44,"tag":437,"props":604,"children":606},{"id":605},"chatbotvalue-listmessagedict-message-callable-none-none-label-str-i18ndata-none-none-every-timer-float-none-none-inputs-component-sequencecomponent-setcomponent-none-none-show_label-bool-none-none-container-bool-true-scale-int-none-none-min_width-int-160-visible-bool-literalhidden-true-elem_id-str-none-none-elem_classes-liststr-str-none-none-autoscroll-bool-true-render-bool-true-key-int-str-tupleint-str-none-none-preserved_by_key-liststr-str-none-value-height-int-str-none-400-resizable-bool-false-max_height-int-str-none-none-min_height-int-str-none-none-editable-literaluser-all-none-none-latex_delimiters-listdictstr-str-bool-none-none-rtl-bool-false-buttons-listliteralshare-copy-copy_all-button-none-none-watermark-str-none-none-avatar_images-tuplestr-path-none-str-path-none-none-none-sanitize_html-bool-true-render_markdown-bool-true-feedback_options-liststr-tuplestr-none-like-dislike-feedback_value-sequencestr-none-none-none-line_breaks-bool-true-layout-literalpanel-bubble-none-none-placeholder-str-none-none-examples-listexamplemessage-none-none-allow_file_downloads-class-inspect_empty-true-group_consecutive_messages-bool-true-allow_tags-liststr-bool-true-reasoning_tags-listtuplestr-str-none-none-like_user_message-bool-false",[607],{"type":44,"tag":220,"props":608,"children":610},{"className":609},[],[611],{"type":49,"value":612},"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)",{"type":44,"tag":51,"props":614,"children":615},{},[616],{"type":49,"value":617},"Creates a chatbot that displays user-submitted messages and responses.",{"type":44,"tag":437,"props":619,"children":621},{"id":620},"buttonvalue-str-i18ndata-callable-run-every-timer-float-none-none-inputs-component-sequencecomponent-setcomponent-none-none-variant-literalprimary-secondary-stop-huggingface-secondary-size-literalsm-md-lg-lg-icon-str-path-none-none-link-str-none-none-link_target-literal_self-_blank-_parent-_top-_self-visible-bool-literalhidden-true-interactive-bool-true-elem_id-str-none-none-elem_classes-liststr-str-none-none-render-bool-true-key-int-str-tupleint-str-none-none-preserved_by_key-liststr-str-none-value-scale-int-none-none-min_width-int-none-none",[622],{"type":44,"tag":220,"props":623,"children":625},{"className":624},[],[626],{"type":49,"value":627},"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)",{"type":44,"tag":51,"props":629,"children":630},{},[631],{"type":49,"value":632},"Creates a button that can be assigned arbitrary .click() events.",{"type":44,"tag":437,"props":634,"children":636},{"id":635},"markdownvalue-str-i18ndata-callable-none-none-label-str-i18ndata-none-none-every-timer-float-none-none-inputs-component-sequencecomponent-setcomponent-none-none-show_label-bool-none-none-rtl-bool-false-latex_delimiters-listdictstr-str-bool-none-none-visible-bool-literalhidden-true-elem_id-str-none-none-elem_classes-liststr-str-none-none-render-bool-true-key-int-str-tupleint-str-none-none-preserved_by_key-liststr-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-listliteralcopy-none-none-container-bool-false-padding-bool-false",[637],{"type":44,"tag":220,"props":638,"children":640},{"className":639},[],[641],{"type":49,"value":642},"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)",{"type":44,"tag":51,"props":644,"children":645},{},[646],{"type":49,"value":647},"Used to render arbitrary Markdown output.",{"type":44,"tag":437,"props":649,"children":651},{"id":650},"htmlvalue-any-callable-none-none-label-str-i18ndata-none-none-html_template-str-value-css_template-str-js_on_load-str-none-elementaddeventlistenerclick-function-triggerclick-apply_default_css-bool-true-every-timer-float-none-none-inputs-component-sequencecomponent-setcomponent-none-none-show_label-bool-false-visible-bool-literalhidden-true-elem_id-str-none-none-elem_classes-liststr-str-none-none-render-bool-true-key-int-str-tupleint-str-none-none-preserved_by_key-liststr-str-none-value-min_height-int-none-none-max_height-int-none-none-container-bool-false-padding-bool-false-autoscroll-bool-false-buttons-listbutton-none-none-server_functions-listcallable-none-none-props-any",[652],{"type":44,"tag":220,"props":653,"children":655},{"className":654},[],[656],{"type":49,"value":657},"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)",{"type":44,"tag":51,"props":659,"children":660},{},[661],{"type":49,"value":662},"Creates a component with arbitrary HTML.",{"type":44,"tag":57,"props":664,"children":666},{"id":665},"custom-html-components",[667],{"type":49,"value":174},{"type":44,"tag":51,"props":669,"children":670},{},[671,673,679,681,687,689,695,697,703,705,711,713,719,721,727,729,735,737,742,744,750,752,758],{"type":49,"value":672},"If a task requires significant customization of an existing component or a component that doesn't exist in Gradio, you can create one with ",{"type":44,"tag":220,"props":674,"children":676},{"className":675},[],[677],{"type":49,"value":678},"gr.HTML",{"type":49,"value":680},". It supports ",{"type":44,"tag":220,"props":682,"children":684},{"className":683},[],[685],{"type":49,"value":686},"html_template",{"type":49,"value":688}," (with ",{"type":44,"tag":220,"props":690,"children":692},{"className":691},[],[693],{"type":49,"value":694},"${}",{"type":49,"value":696}," JS expressions and ",{"type":44,"tag":220,"props":698,"children":700},{"className":699},[],[701],{"type":49,"value":702},"{{}}",{"type":49,"value":704}," Handlebars syntax), ",{"type":44,"tag":220,"props":706,"children":708},{"className":707},[],[709],{"type":49,"value":710},"css_template",{"type":49,"value":712}," for scoped styles, and ",{"type":44,"tag":220,"props":714,"children":716},{"className":715},[],[717],{"type":49,"value":718},"js_on_load",{"type":49,"value":720}," for interactivity — where ",{"type":44,"tag":220,"props":722,"children":724},{"className":723},[],[725],{"type":49,"value":726},"props.value",{"type":49,"value":728}," updates the component value and ",{"type":44,"tag":220,"props":730,"children":732},{"className":731},[],[733],{"type":49,"value":734},"trigger('event_name')",{"type":49,"value":736}," fires Gradio events. For reuse, subclass ",{"type":44,"tag":220,"props":738,"children":740},{"className":739},[],[741],{"type":49,"value":678},{"type":49,"value":743}," and define ",{"type":44,"tag":220,"props":745,"children":747},{"className":746},[],[748],{"type":49,"value":749},"api_info()",{"type":49,"value":751}," for API\u002FMCP support. See the ",{"type":44,"tag":77,"props":753,"children":755},{"href":170,"rel":754},[81],[756],{"type":49,"value":757},"full guide",{"type":49,"value":512},{"type":44,"tag":51,"props":760,"children":761},{},[762],{"type":49,"value":763},"Here's an example that shows how to create and use these kinds of components:",{"type":44,"tag":213,"props":765,"children":767},{"className":215,"code":766,"language":23,"meta":217,"style":217},"import 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",[768],{"type":44,"tag":220,"props":769,"children":770},{"__ignoreMap":217},[771,778,785,793,801,809,817,825,833,841,850,859,867,876,885,894,903,912,921,930,938,947,955,964,973,981,989,997,1006,1015,1024,1033,1042,1051,1060,1069,1078,1087,1096,1105,1114,1122],{"type":44,"tag":224,"props":772,"children":773},{"class":226,"line":227},[774],{"type":44,"tag":224,"props":775,"children":776},{},[777],{"type":49,"value":233},{"type":44,"tag":224,"props":779,"children":780},{"class":226,"line":236},[781],{"type":44,"tag":224,"props":782,"children":783},{"emptyLinePlaceholder":240},[784],{"type":49,"value":243},{"type":44,"tag":224,"props":786,"children":787},{"class":226,"line":246},[788],{"type":44,"tag":224,"props":789,"children":790},{},[791],{"type":49,"value":792},"class StarRating(gr.HTML):\n",{"type":44,"tag":224,"props":794,"children":795},{"class":226,"line":255},[796],{"type":44,"tag":224,"props":797,"children":798},{},[799],{"type":49,"value":800},"    def __init__(self, label, value=0, **kwargs):\n",{"type":44,"tag":224,"props":802,"children":803},{"class":226,"line":264},[804],{"type":44,"tag":224,"props":805,"children":806},{},[807],{"type":49,"value":808},"        html_template = \"\"\"\n",{"type":44,"tag":224,"props":810,"children":811},{"class":226,"line":272},[812],{"type":44,"tag":224,"props":813,"children":814},{},[815],{"type":49,"value":816},"        \u003Ch2>${label} rating:\u003C\u002Fh2>\n",{"type":44,"tag":224,"props":818,"children":819},{"class":226,"line":344},[820],{"type":44,"tag":224,"props":821,"children":822},{},[823],{"type":49,"value":824},"        ${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",{"type":44,"tag":224,"props":826,"children":827},{"class":226,"line":353},[828],{"type":44,"tag":224,"props":829,"children":830},{},[831],{"type":49,"value":832},"        \"\"\"\n",{"type":44,"tag":224,"props":834,"children":835},{"class":226,"line":361},[836],{"type":44,"tag":224,"props":837,"children":838},{},[839],{"type":49,"value":840},"        css_template = \"\"\"\n",{"type":44,"tag":224,"props":842,"children":844},{"class":226,"line":843},10,[845],{"type":44,"tag":224,"props":846,"children":847},{},[848],{"type":49,"value":849},"            img { height: 50px; display: inline-block; cursor: pointer; }\n",{"type":44,"tag":224,"props":851,"children":853},{"class":226,"line":852},11,[854],{"type":44,"tag":224,"props":855,"children":856},{},[857],{"type":49,"value":858},"            .faded { filter: grayscale(100%); opacity: 0.3; }\n",{"type":44,"tag":224,"props":860,"children":862},{"class":226,"line":861},12,[863],{"type":44,"tag":224,"props":864,"children":865},{},[866],{"type":49,"value":832},{"type":44,"tag":224,"props":868,"children":870},{"class":226,"line":869},13,[871],{"type":44,"tag":224,"props":872,"children":873},{},[874],{"type":49,"value":875},"        js_on_load = \"\"\"\n",{"type":44,"tag":224,"props":877,"children":879},{"class":226,"line":878},14,[880],{"type":44,"tag":224,"props":881,"children":882},{},[883],{"type":49,"value":884},"            const imgs = element.querySelectorAll('img');\n",{"type":44,"tag":224,"props":886,"children":888},{"class":226,"line":887},15,[889],{"type":44,"tag":224,"props":890,"children":891},{},[892],{"type":49,"value":893},"            imgs.forEach((img, index) => {\n",{"type":44,"tag":224,"props":895,"children":897},{"class":226,"line":896},16,[898],{"type":44,"tag":224,"props":899,"children":900},{},[901],{"type":49,"value":902},"                img.addEventListener('click', () => {\n",{"type":44,"tag":224,"props":904,"children":906},{"class":226,"line":905},17,[907],{"type":44,"tag":224,"props":908,"children":909},{},[910],{"type":49,"value":911},"                    props.value = index + 1;\n",{"type":44,"tag":224,"props":913,"children":915},{"class":226,"line":914},18,[916],{"type":44,"tag":224,"props":917,"children":918},{},[919],{"type":49,"value":920},"                });\n",{"type":44,"tag":224,"props":922,"children":924},{"class":226,"line":923},19,[925],{"type":44,"tag":224,"props":926,"children":927},{},[928],{"type":49,"value":929},"            });\n",{"type":44,"tag":224,"props":931,"children":933},{"class":226,"line":932},20,[934],{"type":44,"tag":224,"props":935,"children":936},{},[937],{"type":49,"value":832},{"type":44,"tag":224,"props":939,"children":941},{"class":226,"line":940},21,[942],{"type":44,"tag":224,"props":943,"children":944},{},[945],{"type":49,"value":946},"        super().__init__(value=value, label=label, html_template=html_template, css_template=css_template, js_on_load=js_on_load, **kwargs)\n",{"type":44,"tag":224,"props":948,"children":950},{"class":226,"line":949},22,[951],{"type":44,"tag":224,"props":952,"children":953},{"emptyLinePlaceholder":240},[954],{"type":49,"value":243},{"type":44,"tag":224,"props":956,"children":958},{"class":226,"line":957},23,[959],{"type":44,"tag":224,"props":960,"children":961},{},[962],{"type":49,"value":963},"    def api_info(self):\n",{"type":44,"tag":224,"props":965,"children":967},{"class":226,"line":966},24,[968],{"type":44,"tag":224,"props":969,"children":970},{},[971],{"type":49,"value":972},"        return {\"type\": \"integer\", \"minimum\": 0, \"maximum\": 5}\n",{"type":44,"tag":224,"props":974,"children":976},{"class":226,"line":975},25,[977],{"type":44,"tag":224,"props":978,"children":979},{"emptyLinePlaceholder":240},[980],{"type":49,"value":243},{"type":44,"tag":224,"props":982,"children":984},{"class":226,"line":983},26,[985],{"type":44,"tag":224,"props":986,"children":987},{"emptyLinePlaceholder":240},[988],{"type":49,"value":243},{"type":44,"tag":224,"props":990,"children":992},{"class":226,"line":991},27,[993],{"type":44,"tag":224,"props":994,"children":995},{},[996],{"type":49,"value":317},{"type":44,"tag":224,"props":998,"children":1000},{"class":226,"line":999},28,[1001],{"type":44,"tag":224,"props":1002,"children":1003},{},[1004],{"type":49,"value":1005},"    gr.Markdown(\"# Restaurant Review\")\n",{"type":44,"tag":224,"props":1007,"children":1009},{"class":226,"line":1008},29,[1010],{"type":44,"tag":224,"props":1011,"children":1012},{},[1013],{"type":49,"value":1014},"    food_rating = StarRating(label=\"Food\", value=3)\n",{"type":44,"tag":224,"props":1016,"children":1018},{"class":226,"line":1017},30,[1019],{"type":44,"tag":224,"props":1020,"children":1021},{},[1022],{"type":49,"value":1023},"    service_rating = StarRating(label=\"Service\", value=3)\n",{"type":44,"tag":224,"props":1025,"children":1027},{"class":226,"line":1026},31,[1028],{"type":44,"tag":224,"props":1029,"children":1030},{},[1031],{"type":49,"value":1032},"    ambience_rating = StarRating(label=\"Ambience\", value=3)\n",{"type":44,"tag":224,"props":1034,"children":1036},{"class":226,"line":1035},32,[1037],{"type":44,"tag":224,"props":1038,"children":1039},{},[1040],{"type":49,"value":1041},"    average_btn = gr.Button(\"Calculate Average Rating\")\n",{"type":44,"tag":224,"props":1043,"children":1045},{"class":226,"line":1044},33,[1046],{"type":44,"tag":224,"props":1047,"children":1048},{},[1049],{"type":49,"value":1050},"    rating_output = StarRating(label=\"Average\", value=3)\n",{"type":44,"tag":224,"props":1052,"children":1054},{"class":226,"line":1053},34,[1055],{"type":44,"tag":224,"props":1056,"children":1057},{},[1058],{"type":49,"value":1059},"    def calculate_average(food, service, ambience):\n",{"type":44,"tag":224,"props":1061,"children":1063},{"class":226,"line":1062},35,[1064],{"type":44,"tag":224,"props":1065,"children":1066},{},[1067],{"type":49,"value":1068},"        return round((food + service + ambience) \u002F 3)\n",{"type":44,"tag":224,"props":1070,"children":1072},{"class":226,"line":1071},36,[1073],{"type":44,"tag":224,"props":1074,"children":1075},{},[1076],{"type":49,"value":1077},"    average_btn.click(\n",{"type":44,"tag":224,"props":1079,"children":1081},{"class":226,"line":1080},37,[1082],{"type":44,"tag":224,"props":1083,"children":1084},{},[1085],{"type":49,"value":1086},"        fn=calculate_average,\n",{"type":44,"tag":224,"props":1088,"children":1090},{"class":226,"line":1089},38,[1091],{"type":44,"tag":224,"props":1092,"children":1093},{},[1094],{"type":49,"value":1095},"        inputs=[food_rating, service_rating, ambience_rating],\n",{"type":44,"tag":224,"props":1097,"children":1099},{"class":226,"line":1098},39,[1100],{"type":44,"tag":224,"props":1101,"children":1102},{},[1103],{"type":49,"value":1104},"        outputs=rating_output\n",{"type":44,"tag":224,"props":1106,"children":1108},{"class":226,"line":1107},40,[1109],{"type":44,"tag":224,"props":1110,"children":1111},{},[1112],{"type":49,"value":1113},"    )\n",{"type":44,"tag":224,"props":1115,"children":1117},{"class":226,"line":1116},41,[1118],{"type":44,"tag":224,"props":1119,"children":1120},{"emptyLinePlaceholder":240},[1121],{"type":49,"value":243},{"type":44,"tag":224,"props":1123,"children":1125},{"class":226,"line":1124},42,[1126],{"type":44,"tag":224,"props":1127,"children":1128},{},[1129],{"type":49,"value":367},{"type":44,"tag":57,"props":1131,"children":1133},{"id":1132},"event-listeners",[1134],{"type":49,"value":1135},"Event Listeners",{"type":44,"tag":51,"props":1137,"children":1138},{},[1139],{"type":49,"value":1140},"All event listeners share the same signature:",{"type":44,"tag":213,"props":1142,"children":1144},{"className":215,"code":1143,"language":23,"meta":217,"style":217},"component.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",[1145],{"type":44,"tag":220,"props":1146,"children":1147},{"__ignoreMap":217},[1148,1156,1164,1172,1180,1188,1196,1204,1212,1220,1228,1236,1244,1252,1260,1268,1276,1284,1292,1300,1308,1316,1324,1332,1340],{"type":44,"tag":224,"props":1149,"children":1150},{"class":226,"line":227},[1151],{"type":44,"tag":224,"props":1152,"children":1153},{},[1154],{"type":49,"value":1155},"component.event_name(\n",{"type":44,"tag":224,"props":1157,"children":1158},{"class":226,"line":236},[1159],{"type":44,"tag":224,"props":1160,"children":1161},{},[1162],{"type":49,"value":1163},"    fn: Callable | None | Literal[\"decorator\"] = \"decorator\",\n",{"type":44,"tag":224,"props":1165,"children":1166},{"class":226,"line":246},[1167],{"type":44,"tag":224,"props":1168,"children":1169},{},[1170],{"type":49,"value":1171},"    inputs: Component | Sequence[Component] | set[Component] | None = None,\n",{"type":44,"tag":224,"props":1173,"children":1174},{"class":226,"line":255},[1175],{"type":44,"tag":224,"props":1176,"children":1177},{},[1178],{"type":49,"value":1179},"    outputs: Component | Sequence[Component] | set[Component] | None = None,\n",{"type":44,"tag":224,"props":1181,"children":1182},{"class":226,"line":264},[1183],{"type":44,"tag":224,"props":1184,"children":1185},{},[1186],{"type":49,"value":1187},"    api_name: str | None = None,\n",{"type":44,"tag":224,"props":1189,"children":1190},{"class":226,"line":272},[1191],{"type":44,"tag":224,"props":1192,"children":1193},{},[1194],{"type":49,"value":1195},"    api_description: str | None | Literal[False] = None,\n",{"type":44,"tag":224,"props":1197,"children":1198},{"class":226,"line":344},[1199],{"type":44,"tag":224,"props":1200,"children":1201},{},[1202],{"type":49,"value":1203},"    scroll_to_output: bool = False,\n",{"type":44,"tag":224,"props":1205,"children":1206},{"class":226,"line":353},[1207],{"type":44,"tag":224,"props":1208,"children":1209},{},[1210],{"type":49,"value":1211},"    show_progress: Literal[\"full\", \"minimal\", \"hidden\"] = \"full\",\n",{"type":44,"tag":224,"props":1213,"children":1214},{"class":226,"line":361},[1215],{"type":44,"tag":224,"props":1216,"children":1217},{},[1218],{"type":49,"value":1219},"    show_progress_on: Component | Sequence[Component] | None = None,\n",{"type":44,"tag":224,"props":1221,"children":1222},{"class":226,"line":843},[1223],{"type":44,"tag":224,"props":1224,"children":1225},{},[1226],{"type":49,"value":1227},"    queue: bool = True,\n",{"type":44,"tag":224,"props":1229,"children":1230},{"class":226,"line":852},[1231],{"type":44,"tag":224,"props":1232,"children":1233},{},[1234],{"type":49,"value":1235},"    batch: bool = False,\n",{"type":44,"tag":224,"props":1237,"children":1238},{"class":226,"line":861},[1239],{"type":44,"tag":224,"props":1240,"children":1241},{},[1242],{"type":49,"value":1243},"    max_batch_size: int = 4,\n",{"type":44,"tag":224,"props":1245,"children":1246},{"class":226,"line":869},[1247],{"type":44,"tag":224,"props":1248,"children":1249},{},[1250],{"type":49,"value":1251},"    preprocess: bool = True,\n",{"type":44,"tag":224,"props":1253,"children":1254},{"class":226,"line":878},[1255],{"type":44,"tag":224,"props":1256,"children":1257},{},[1258],{"type":49,"value":1259},"    postprocess: bool = True,\n",{"type":44,"tag":224,"props":1261,"children":1262},{"class":226,"line":887},[1263],{"type":44,"tag":224,"props":1264,"children":1265},{},[1266],{"type":49,"value":1267},"    cancels: dict[str, Any] | list[dict[str, Any]] | None = None,\n",{"type":44,"tag":224,"props":1269,"children":1270},{"class":226,"line":896},[1271],{"type":44,"tag":224,"props":1272,"children":1273},{},[1274],{"type":49,"value":1275},"    trigger_mode: Literal[\"once\", \"multiple\", \"always_last\"] | None = None,\n",{"type":44,"tag":224,"props":1277,"children":1278},{"class":226,"line":905},[1279],{"type":44,"tag":224,"props":1280,"children":1281},{},[1282],{"type":49,"value":1283},"    js: str | Literal[True] | None = None,\n",{"type":44,"tag":224,"props":1285,"children":1286},{"class":226,"line":914},[1287],{"type":44,"tag":224,"props":1288,"children":1289},{},[1290],{"type":49,"value":1291},"    concurrency_limit: int | None | Literal[\"default\"] = \"default\",\n",{"type":44,"tag":224,"props":1293,"children":1294},{"class":226,"line":923},[1295],{"type":44,"tag":224,"props":1296,"children":1297},{},[1298],{"type":49,"value":1299},"    concurrency_id: str | None = None,\n",{"type":44,"tag":224,"props":1301,"children":1302},{"class":226,"line":932},[1303],{"type":44,"tag":224,"props":1304,"children":1305},{},[1306],{"type":49,"value":1307},"    api_visibility: Literal[\"public\", \"private\", \"undocumented\"] = \"public\",\n",{"type":44,"tag":224,"props":1309,"children":1310},{"class":226,"line":940},[1311],{"type":44,"tag":224,"props":1312,"children":1313},{},[1314],{"type":49,"value":1315},"    time_limit: int | None = None,\n",{"type":44,"tag":224,"props":1317,"children":1318},{"class":226,"line":949},[1319],{"type":44,"tag":224,"props":1320,"children":1321},{},[1322],{"type":49,"value":1323},"    stream_every: float = 0.5,\n",{"type":44,"tag":224,"props":1325,"children":1326},{"class":226,"line":957},[1327],{"type":44,"tag":224,"props":1328,"children":1329},{},[1330],{"type":49,"value":1331},"    key: int | str | tuple[int | str, ...] | None = None,\n",{"type":44,"tag":224,"props":1333,"children":1334},{"class":226,"line":966},[1335],{"type":44,"tag":224,"props":1336,"children":1337},{},[1338],{"type":49,"value":1339},"    validator: Callable | None = None,\n",{"type":44,"tag":224,"props":1341,"children":1342},{"class":226,"line":975},[1343],{"type":44,"tag":224,"props":1344,"children":1345},{},[1346],{"type":49,"value":1347},") -> Dependency\n",{"type":44,"tag":51,"props":1349,"children":1350},{},[1351],{"type":49,"value":1352},"Supported events per component:",{"type":44,"tag":69,"props":1354,"children":1355},{},[1356,1366,1376,1386,1396,1406,1416,1426,1435,1444,1454,1464,1474,1484,1494,1503,1513,1522,1532,1541,1551,1560,1570,1580,1590,1600,1610,1619,1628,1637,1646,1655,1665,1675,1685,1694,1703,1713,1722,1732,1741,1751,1761,1770,1780,1790,1800],{"type":44,"tag":73,"props":1357,"children":1358},{},[1359,1364],{"type":44,"tag":205,"props":1360,"children":1361},{},[1362],{"type":49,"value":1363},"AnnotatedImage",{"type":49,"value":1365},": select",{"type":44,"tag":73,"props":1367,"children":1368},{},[1369,1374],{"type":44,"tag":205,"props":1370,"children":1371},{},[1372],{"type":49,"value":1373},"Audio",{"type":49,"value":1375},": stream, change, clear, play, pause, stop, pause, start_recording, pause_recording, stop_recording, upload, input",{"type":44,"tag":73,"props":1377,"children":1378},{},[1379,1384],{"type":44,"tag":205,"props":1380,"children":1381},{},[1382],{"type":49,"value":1383},"BarPlot",{"type":49,"value":1385},": select, double_click",{"type":44,"tag":73,"props":1387,"children":1388},{},[1389,1394],{"type":44,"tag":205,"props":1390,"children":1391},{},[1392],{"type":49,"value":1393},"BrowserState",{"type":49,"value":1395},": change",{"type":44,"tag":73,"props":1397,"children":1398},{},[1399,1404],{"type":44,"tag":205,"props":1400,"children":1401},{},[1402],{"type":49,"value":1403},"Button",{"type":49,"value":1405},": click",{"type":44,"tag":73,"props":1407,"children":1408},{},[1409,1414],{"type":44,"tag":205,"props":1410,"children":1411},{},[1412],{"type":49,"value":1413},"Chatbot",{"type":49,"value":1415},": change, select, like, retry, undo, example_select, option_select, clear, copy, edit",{"type":44,"tag":73,"props":1417,"children":1418},{},[1419,1424],{"type":44,"tag":205,"props":1420,"children":1421},{},[1422],{"type":49,"value":1423},"Checkbox",{"type":49,"value":1425},": change, input, select",{"type":44,"tag":73,"props":1427,"children":1428},{},[1429,1434],{"type":44,"tag":205,"props":1430,"children":1431},{},[1432],{"type":49,"value":1433},"CheckboxGroup",{"type":49,"value":1425},{"type":44,"tag":73,"props":1436,"children":1437},{},[1438,1443],{"type":44,"tag":205,"props":1439,"children":1440},{},[1441],{"type":49,"value":1442},"ClearButton",{"type":49,"value":1405},{"type":44,"tag":73,"props":1445,"children":1446},{},[1447,1452],{"type":44,"tag":205,"props":1448,"children":1449},{},[1450],{"type":49,"value":1451},"Code",{"type":49,"value":1453},": change, input, focus, blur",{"type":44,"tag":73,"props":1455,"children":1456},{},[1457,1462],{"type":44,"tag":205,"props":1458,"children":1459},{},[1460],{"type":49,"value":1461},"ColorPicker",{"type":49,"value":1463},": change, input, submit, focus, blur",{"type":44,"tag":73,"props":1465,"children":1466},{},[1467,1472],{"type":44,"tag":205,"props":1468,"children":1469},{},[1470],{"type":49,"value":1471},"Dataframe",{"type":49,"value":1473},": change, input, select, edit",{"type":44,"tag":73,"props":1475,"children":1476},{},[1477,1482],{"type":44,"tag":205,"props":1478,"children":1479},{},[1480],{"type":49,"value":1481},"Dataset",{"type":49,"value":1483},": click, select",{"type":44,"tag":73,"props":1485,"children":1486},{},[1487,1492],{"type":44,"tag":205,"props":1488,"children":1489},{},[1490],{"type":49,"value":1491},"DateTime",{"type":49,"value":1493},": change, submit",{"type":44,"tag":73,"props":1495,"children":1496},{},[1497,1502],{"type":44,"tag":205,"props":1498,"children":1499},{},[1500],{"type":49,"value":1501},"DeepLinkButton",{"type":49,"value":1405},{"type":44,"tag":73,"props":1504,"children":1505},{},[1506,1511],{"type":44,"tag":205,"props":1507,"children":1508},{},[1509],{"type":49,"value":1510},"Dialogue",{"type":49,"value":1512},": change, input, submit",{"type":44,"tag":73,"props":1514,"children":1515},{},[1516,1521],{"type":44,"tag":205,"props":1517,"children":1518},{},[1519],{"type":49,"value":1520},"DownloadButton",{"type":49,"value":1405},{"type":44,"tag":73,"props":1523,"children":1524},{},[1525,1530],{"type":44,"tag":205,"props":1526,"children":1527},{},[1528],{"type":49,"value":1529},"Dropdown",{"type":49,"value":1531},": change, input, select, focus, blur, key_up",{"type":44,"tag":73,"props":1533,"children":1534},{},[1535,1540],{"type":44,"tag":205,"props":1536,"children":1537},{},[1538],{"type":49,"value":1539},"DuplicateButton",{"type":49,"value":1405},{"type":44,"tag":73,"props":1542,"children":1543},{},[1544,1549],{"type":44,"tag":205,"props":1545,"children":1546},{},[1547],{"type":49,"value":1548},"File",{"type":49,"value":1550},": change, select, clear, upload, delete, download",{"type":44,"tag":73,"props":1552,"children":1553},{},[1554,1559],{"type":44,"tag":205,"props":1555,"children":1556},{},[1557],{"type":49,"value":1558},"FileExplorer",{"type":49,"value":1425},{"type":44,"tag":73,"props":1561,"children":1562},{},[1563,1568],{"type":44,"tag":205,"props":1564,"children":1565},{},[1566],{"type":49,"value":1567},"Gallery",{"type":49,"value":1569},": select, upload, change, delete, preview_close, preview_open",{"type":44,"tag":73,"props":1571,"children":1572},{},[1573,1578],{"type":44,"tag":205,"props":1574,"children":1575},{},[1576],{"type":49,"value":1577},"HTML",{"type":49,"value":1579},": 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",{"type":44,"tag":73,"props":1581,"children":1582},{},[1583,1588],{"type":44,"tag":205,"props":1584,"children":1585},{},[1586],{"type":49,"value":1587},"HighlightedText",{"type":49,"value":1589},": change, select",{"type":44,"tag":73,"props":1591,"children":1592},{},[1593,1598],{"type":44,"tag":205,"props":1594,"children":1595},{},[1596],{"type":49,"value":1597},"Image",{"type":49,"value":1599},": clear, change, stream, select, upload, input",{"type":44,"tag":73,"props":1601,"children":1602},{},[1603,1608],{"type":44,"tag":205,"props":1604,"children":1605},{},[1606],{"type":49,"value":1607},"ImageEditor",{"type":49,"value":1609},": clear, change, input, select, upload, apply",{"type":44,"tag":73,"props":1611,"children":1612},{},[1613,1618],{"type":44,"tag":205,"props":1614,"children":1615},{},[1616],{"type":49,"value":1617},"ImageSlider",{"type":49,"value":1599},{"type":44,"tag":73,"props":1620,"children":1621},{},[1622,1627],{"type":44,"tag":205,"props":1623,"children":1624},{},[1625],{"type":49,"value":1626},"JSON",{"type":49,"value":1395},{"type":44,"tag":73,"props":1629,"children":1630},{},[1631,1636],{"type":44,"tag":205,"props":1632,"children":1633},{},[1634],{"type":49,"value":1635},"Label",{"type":49,"value":1589},{"type":44,"tag":73,"props":1638,"children":1639},{},[1640,1645],{"type":44,"tag":205,"props":1641,"children":1642},{},[1643],{"type":49,"value":1644},"LinePlot",{"type":49,"value":1385},{"type":44,"tag":73,"props":1647,"children":1648},{},[1649,1654],{"type":44,"tag":205,"props":1650,"children":1651},{},[1652],{"type":49,"value":1653},"LoginButton",{"type":49,"value":1405},{"type":44,"tag":73,"props":1656,"children":1657},{},[1658,1663],{"type":44,"tag":205,"props":1659,"children":1660},{},[1661],{"type":49,"value":1662},"Markdown",{"type":49,"value":1664},": change, copy",{"type":44,"tag":73,"props":1666,"children":1667},{},[1668,1673],{"type":44,"tag":205,"props":1669,"children":1670},{},[1671],{"type":49,"value":1672},"Model3D",{"type":49,"value":1674},": change, upload, edit, clear",{"type":44,"tag":73,"props":1676,"children":1677},{},[1678,1683],{"type":44,"tag":205,"props":1679,"children":1680},{},[1681],{"type":49,"value":1682},"MultimodalTextbox",{"type":49,"value":1684},": change, input, select, submit, focus, blur, stop",{"type":44,"tag":73,"props":1686,"children":1687},{},[1688,1693],{"type":44,"tag":205,"props":1689,"children":1690},{},[1691],{"type":49,"value":1692},"Navbar",{"type":49,"value":1395},{"type":44,"tag":73,"props":1695,"children":1696},{},[1697,1702],{"type":44,"tag":205,"props":1698,"children":1699},{},[1700],{"type":49,"value":1701},"Number",{"type":49,"value":1463},{"type":44,"tag":73,"props":1704,"children":1705},{},[1706,1711],{"type":44,"tag":205,"props":1707,"children":1708},{},[1709],{"type":49,"value":1710},"ParamViewer",{"type":49,"value":1712},": change, upload",{"type":44,"tag":73,"props":1714,"children":1715},{},[1716,1721],{"type":44,"tag":205,"props":1717,"children":1718},{},[1719],{"type":49,"value":1720},"Plot",{"type":49,"value":1395},{"type":44,"tag":73,"props":1723,"children":1724},{},[1725,1730],{"type":44,"tag":205,"props":1726,"children":1727},{},[1728],{"type":49,"value":1729},"Radio",{"type":49,"value":1731},": select, change, input",{"type":44,"tag":73,"props":1733,"children":1734},{},[1735,1740],{"type":44,"tag":205,"props":1736,"children":1737},{},[1738],{"type":49,"value":1739},"ScatterPlot",{"type":49,"value":1385},{"type":44,"tag":73,"props":1742,"children":1743},{},[1744,1749],{"type":44,"tag":205,"props":1745,"children":1746},{},[1747],{"type":49,"value":1748},"SimpleImage",{"type":49,"value":1750},": clear, change, upload",{"type":44,"tag":73,"props":1752,"children":1753},{},[1754,1759],{"type":44,"tag":205,"props":1755,"children":1756},{},[1757],{"type":49,"value":1758},"Slider",{"type":49,"value":1760},": change, input, release",{"type":44,"tag":73,"props":1762,"children":1763},{},[1764,1769],{"type":44,"tag":205,"props":1765,"children":1766},{},[1767],{"type":49,"value":1768},"State",{"type":49,"value":1395},{"type":44,"tag":73,"props":1771,"children":1772},{},[1773,1778],{"type":44,"tag":205,"props":1774,"children":1775},{},[1776],{"type":49,"value":1777},"Textbox",{"type":49,"value":1779},": change, input, select, submit, focus, blur, stop, copy",{"type":44,"tag":73,"props":1781,"children":1782},{},[1783,1788],{"type":44,"tag":205,"props":1784,"children":1785},{},[1786],{"type":49,"value":1787},"Timer",{"type":49,"value":1789},": tick",{"type":44,"tag":73,"props":1791,"children":1792},{},[1793,1798],{"type":44,"tag":205,"props":1794,"children":1795},{},[1796],{"type":49,"value":1797},"UploadButton",{"type":49,"value":1799},": click, upload",{"type":44,"tag":73,"props":1801,"children":1802},{},[1803,1808],{"type":44,"tag":205,"props":1804,"children":1805},{},[1806],{"type":49,"value":1807},"Video",{"type":49,"value":1809},": change, clear, start_recording, stop_recording, stop, play, pause, end, upload, input",{"type":44,"tag":57,"props":1811,"children":1813},{"id":1812},"prediction-cli",[1814],{"type":49,"value":1815},"Prediction CLI",{"type":44,"tag":51,"props":1817,"children":1818},{},[1819,1821,1826,1828,1834,1836,1842],{"type":49,"value":1820},"The ",{"type":44,"tag":220,"props":1822,"children":1824},{"className":1823},[],[1825],{"type":49,"value":14},{"type":49,"value":1827}," CLI includes ",{"type":44,"tag":220,"props":1829,"children":1831},{"className":1830},[],[1832],{"type":49,"value":1833},"info",{"type":49,"value":1835}," and ",{"type":44,"tag":220,"props":1837,"children":1839},{"className":1838},[],[1840],{"type":49,"value":1841},"predict",{"type":49,"value":1843}," commands for interacting with Gradio apps programmatically. These are especially useful for coding agents that need to use Spaces in their workflows.",{"type":44,"tag":437,"props":1845,"children":1847},{"id":1846},"gradio-info-discover-endpoints-and-parameters",[1848,1854],{"type":44,"tag":220,"props":1849,"children":1851},{"className":1850},[],[1852],{"type":49,"value":1853},"gradio info",{"type":49,"value":1855}," — Discover endpoints and parameters",{"type":44,"tag":213,"props":1857,"children":1861},{"className":1858,"code":1859,"language":1860,"meta":217,"style":217},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","gradio info \u003Cspace_id_or_url>\n","bash",[1862],{"type":44,"tag":220,"props":1863,"children":1864},{"__ignoreMap":217},[1865],{"type":44,"tag":224,"props":1866,"children":1867},{"class":226,"line":227},[1868,1873,1879,1885,1890,1896],{"type":44,"tag":224,"props":1869,"children":1871},{"style":1870},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[1872],{"type":49,"value":14},{"type":44,"tag":224,"props":1874,"children":1876},{"style":1875},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[1877],{"type":49,"value":1878}," info",{"type":44,"tag":224,"props":1880,"children":1882},{"style":1881},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[1883],{"type":49,"value":1884}," \u003C",{"type":44,"tag":224,"props":1886,"children":1887},{"style":1875},[1888],{"type":49,"value":1889},"space_id_or_ur",{"type":44,"tag":224,"props":1891,"children":1893},{"style":1892},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[1894],{"type":49,"value":1895},"l",{"type":44,"tag":224,"props":1897,"children":1898},{"style":1881},[1899],{"type":49,"value":1900},">\n",{"type":44,"tag":51,"props":1902,"children":1903},{},[1904],{"type":49,"value":1905},"Returns a JSON payload describing all endpoints, their parameters (with types and defaults), and return values.",{"type":44,"tag":213,"props":1907,"children":1909},{"className":1858,"code":1908,"language":1860,"meta":217,"style":217},"gradio 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",[1910],{"type":44,"tag":220,"props":1911,"children":1912},{"__ignoreMap":217},[1913,1929,1938,1946,1954,1962,1970,1978,1986,1994,2002,2010],{"type":44,"tag":224,"props":1914,"children":1915},{"class":226,"line":227},[1916,1920,1924],{"type":44,"tag":224,"props":1917,"children":1918},{"style":1870},[1919],{"type":49,"value":14},{"type":44,"tag":224,"props":1921,"children":1922},{"style":1875},[1923],{"type":49,"value":1878},{"type":44,"tag":224,"props":1925,"children":1926},{"style":1875},[1927],{"type":49,"value":1928}," gradio\u002Fcalculator\n",{"type":44,"tag":224,"props":1930,"children":1931},{"class":226,"line":236},[1932],{"type":44,"tag":224,"props":1933,"children":1935},{"style":1934},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[1936],{"type":49,"value":1937},"# {\n",{"type":44,"tag":224,"props":1939,"children":1940},{"class":226,"line":246},[1941],{"type":44,"tag":224,"props":1942,"children":1943},{"style":1934},[1944],{"type":49,"value":1945},"#   \"\u002Fpredict\": {\n",{"type":44,"tag":224,"props":1947,"children":1948},{"class":226,"line":255},[1949],{"type":44,"tag":224,"props":1950,"children":1951},{"style":1934},[1952],{"type":49,"value":1953},"#     \"parameters\": [\n",{"type":44,"tag":224,"props":1955,"children":1956},{"class":226,"line":264},[1957],{"type":44,"tag":224,"props":1958,"children":1959},{"style":1934},[1960],{"type":49,"value":1961},"#       {\"name\": \"num1\", \"required\": true, \"default\": null, \"type\": {\"type\": \"number\"}},\n",{"type":44,"tag":224,"props":1963,"children":1964},{"class":226,"line":272},[1965],{"type":44,"tag":224,"props":1966,"children":1967},{"style":1934},[1968],{"type":49,"value":1969},"#       {\"name\": \"operation\", \"required\": true, \"default\": null, \"type\": {\"enum\": [\"add\", \"subtract\", \"multiply\", \"divide\"], \"type\": \"string\"}},\n",{"type":44,"tag":224,"props":1971,"children":1972},{"class":226,"line":344},[1973],{"type":44,"tag":224,"props":1974,"children":1975},{"style":1934},[1976],{"type":49,"value":1977},"#       {\"name\": \"num2\", \"required\": true, \"default\": null, \"type\": {\"type\": \"number\"}}\n",{"type":44,"tag":224,"props":1979,"children":1980},{"class":226,"line":353},[1981],{"type":44,"tag":224,"props":1982,"children":1983},{"style":1934},[1984],{"type":49,"value":1985},"#     ],\n",{"type":44,"tag":224,"props":1987,"children":1988},{"class":226,"line":361},[1989],{"type":44,"tag":224,"props":1990,"children":1991},{"style":1934},[1992],{"type":49,"value":1993},"#     \"returns\": [{\"name\": \"output\", \"type\": {\"type\": \"number\"}}],\n",{"type":44,"tag":224,"props":1995,"children":1996},{"class":226,"line":843},[1997],{"type":44,"tag":224,"props":1998,"children":1999},{"style":1934},[2000],{"type":49,"value":2001},"#     \"description\": \"\"\n",{"type":44,"tag":224,"props":2003,"children":2004},{"class":226,"line":852},[2005],{"type":44,"tag":224,"props":2006,"children":2007},{"style":1934},[2008],{"type":49,"value":2009},"#   }\n",{"type":44,"tag":224,"props":2011,"children":2012},{"class":226,"line":861},[2013],{"type":44,"tag":224,"props":2014,"children":2015},{"style":1934},[2016],{"type":49,"value":2017},"# }\n",{"type":44,"tag":51,"props":2019,"children":2020},{},[2021,2023,2029,2031,2037],{"type":49,"value":2022},"File-type parameters show ",{"type":44,"tag":220,"props":2024,"children":2026},{"className":2025},[],[2027],{"type":49,"value":2028},"\"type\": \"filepath\"",{"type":49,"value":2030}," with instructions to include ",{"type":44,"tag":220,"props":2032,"children":2034},{"className":2033},[],[2035],{"type":49,"value":2036},"\"meta\": {\"_type\": \"gradio.FileData\"}",{"type":49,"value":2038}," — this signals the file will be uploaded to the remote server.",{"type":44,"tag":437,"props":2040,"children":2042},{"id":2041},"gradio-predict-send-predictions",[2043,2049],{"type":44,"tag":220,"props":2044,"children":2046},{"className":2045},[],[2047],{"type":49,"value":2048},"gradio predict",{"type":49,"value":2050}," — Send predictions",{"type":44,"tag":213,"props":2052,"children":2054},{"className":1858,"code":2053,"language":1860,"meta":217,"style":217},"gradio predict \u003Cspace_id_or_url> \u003Cendpoint> \u003Cjson_payload>\n",[2055],{"type":44,"tag":220,"props":2056,"children":2057},{"__ignoreMap":217},[2058],{"type":44,"tag":224,"props":2059,"children":2060},{"class":226,"line":227},[2061,2065,2070,2074,2078,2082,2087,2091,2096,2101,2105,2109,2114,2119],{"type":44,"tag":224,"props":2062,"children":2063},{"style":1870},[2064],{"type":49,"value":14},{"type":44,"tag":224,"props":2066,"children":2067},{"style":1875},[2068],{"type":49,"value":2069}," predict",{"type":44,"tag":224,"props":2071,"children":2072},{"style":1881},[2073],{"type":49,"value":1884},{"type":44,"tag":224,"props":2075,"children":2076},{"style":1875},[2077],{"type":49,"value":1889},{"type":44,"tag":224,"props":2079,"children":2080},{"style":1892},[2081],{"type":49,"value":1895},{"type":44,"tag":224,"props":2083,"children":2084},{"style":1881},[2085],{"type":49,"value":2086},">",{"type":44,"tag":224,"props":2088,"children":2089},{"style":1881},[2090],{"type":49,"value":1884},{"type":44,"tag":224,"props":2092,"children":2093},{"style":1875},[2094],{"type":49,"value":2095},"endpoin",{"type":44,"tag":224,"props":2097,"children":2098},{"style":1892},[2099],{"type":49,"value":2100},"t",{"type":44,"tag":224,"props":2102,"children":2103},{"style":1881},[2104],{"type":49,"value":2086},{"type":44,"tag":224,"props":2106,"children":2107},{"style":1881},[2108],{"type":49,"value":1884},{"type":44,"tag":224,"props":2110,"children":2111},{"style":1875},[2112],{"type":49,"value":2113},"json_payloa",{"type":44,"tag":224,"props":2115,"children":2116},{"style":1892},[2117],{"type":49,"value":2118},"d",{"type":44,"tag":224,"props":2120,"children":2121},{"style":1881},[2122],{"type":49,"value":1900},{"type":44,"tag":51,"props":2124,"children":2125},{},[2126],{"type":49,"value":2127},"Returns a JSON object with named output keys.",{"type":44,"tag":213,"props":2129,"children":2131},{"className":1858,"code":2130,"language":1860,"meta":217,"style":217},"# 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",[2132],{"type":44,"tag":220,"props":2133,"children":2134},{"__ignoreMap":217},[2135,2143,2179,2187,2194,2202,2236,2244,2251,2259,2292],{"type":44,"tag":224,"props":2136,"children":2137},{"class":226,"line":227},[2138],{"type":44,"tag":224,"props":2139,"children":2140},{"style":1934},[2141],{"type":49,"value":2142},"# Simple numeric prediction\n",{"type":44,"tag":224,"props":2144,"children":2145},{"class":226,"line":236},[2146,2150,2154,2159,2164,2169,2174],{"type":44,"tag":224,"props":2147,"children":2148},{"style":1870},[2149],{"type":49,"value":14},{"type":44,"tag":224,"props":2151,"children":2152},{"style":1875},[2153],{"type":49,"value":2069},{"type":44,"tag":224,"props":2155,"children":2156},{"style":1875},[2157],{"type":49,"value":2158}," gradio\u002Fcalculator",{"type":44,"tag":224,"props":2160,"children":2161},{"style":1875},[2162],{"type":49,"value":2163}," \u002Fpredict",{"type":44,"tag":224,"props":2165,"children":2166},{"style":1881},[2167],{"type":49,"value":2168}," '",{"type":44,"tag":224,"props":2170,"children":2171},{"style":1875},[2172],{"type":49,"value":2173},"{\"num1\": 5, \"operation\": \"multiply\", \"num2\": 3}",{"type":44,"tag":224,"props":2175,"children":2176},{"style":1881},[2177],{"type":49,"value":2178},"'\n",{"type":44,"tag":224,"props":2180,"children":2181},{"class":226,"line":246},[2182],{"type":44,"tag":224,"props":2183,"children":2184},{"style":1934},[2185],{"type":49,"value":2186},"# {\"output\": 15}\n",{"type":44,"tag":224,"props":2188,"children":2189},{"class":226,"line":255},[2190],{"type":44,"tag":224,"props":2191,"children":2192},{"emptyLinePlaceholder":240},[2193],{"type":49,"value":243},{"type":44,"tag":224,"props":2195,"children":2196},{"class":226,"line":264},[2197],{"type":44,"tag":224,"props":2198,"children":2199},{"style":1934},[2200],{"type":49,"value":2201},"# Image generation\n",{"type":44,"tag":224,"props":2203,"children":2204},{"class":226,"line":272},[2205,2209,2213,2218,2223,2227,2232],{"type":44,"tag":224,"props":2206,"children":2207},{"style":1870},[2208],{"type":49,"value":14},{"type":44,"tag":224,"props":2210,"children":2211},{"style":1875},[2212],{"type":49,"value":2069},{"type":44,"tag":224,"props":2214,"children":2215},{"style":1875},[2216],{"type":49,"value":2217}," black-forest-labs\u002FFLUX.2-dev",{"type":44,"tag":224,"props":2219,"children":2220},{"style":1875},[2221],{"type":49,"value":2222}," \u002Finfer",{"type":44,"tag":224,"props":2224,"children":2225},{"style":1881},[2226],{"type":49,"value":2168},{"type":44,"tag":224,"props":2228,"children":2229},{"style":1875},[2230],{"type":49,"value":2231},"{\"prompt\": \"A majestic dragon\"}",{"type":44,"tag":224,"props":2233,"children":2234},{"style":1881},[2235],{"type":49,"value":2178},{"type":44,"tag":224,"props":2237,"children":2238},{"class":226,"line":344},[2239],{"type":44,"tag":224,"props":2240,"children":2241},{"style":1934},[2242],{"type":49,"value":2243},"# {\"Result\": \"\u002Ftmp\u002Fgradio\u002F...\u002Fimage.webp\", \"Seed\": 1117868604}\n",{"type":44,"tag":224,"props":2245,"children":2246},{"class":226,"line":353},[2247],{"type":44,"tag":224,"props":2248,"children":2249},{"emptyLinePlaceholder":240},[2250],{"type":49,"value":243},{"type":44,"tag":224,"props":2252,"children":2253},{"class":226,"line":361},[2254],{"type":44,"tag":224,"props":2255,"children":2256},{"style":1934},[2257],{"type":49,"value":2258},"# File upload (must include meta key)\n",{"type":44,"tag":224,"props":2260,"children":2261},{"class":226,"line":843},[2262,2266,2270,2275,2279,2283,2288],{"type":44,"tag":224,"props":2263,"children":2264},{"style":1870},[2265],{"type":49,"value":14},{"type":44,"tag":224,"props":2267,"children":2268},{"style":1875},[2269],{"type":49,"value":2069},{"type":44,"tag":224,"props":2271,"children":2272},{"style":1875},[2273],{"type":49,"value":2274}," gradio\u002Fimage_mod",{"type":44,"tag":224,"props":2276,"children":2277},{"style":1875},[2278],{"type":49,"value":2163},{"type":44,"tag":224,"props":2280,"children":2281},{"style":1881},[2282],{"type":49,"value":2168},{"type":44,"tag":224,"props":2284,"children":2285},{"style":1875},[2286],{"type":49,"value":2287},"{\"image\": {\"path\": \"\u002Fpath\u002Fto\u002Fimage.png\", \"meta\": {\"_type\": \"gradio.FileData\"}}}",{"type":44,"tag":224,"props":2289,"children":2290},{"style":1881},[2291],{"type":49,"value":2178},{"type":44,"tag":224,"props":2293,"children":2294},{"class":226,"line":852},[2295],{"type":44,"tag":224,"props":2296,"children":2297},{"style":1934},[2298],{"type":49,"value":2299},"# {\"output\": \"\u002Ftmp\u002Fgradio\u002F...\u002Foutput.png\"}\n",{"type":44,"tag":51,"props":2301,"children":2302},{},[2303,2305,2311],{"type":49,"value":2304},"Both commands accept ",{"type":44,"tag":220,"props":2306,"children":2308},{"className":2307},[],[2309],{"type":49,"value":2310},"--token",{"type":49,"value":2312}," for accessing private Spaces.",{"type":44,"tag":57,"props":2314,"children":2316},{"id":2315},"additional-reference",[2317],{"type":49,"value":2318},"Additional Reference",{"type":44,"tag":69,"props":2320,"children":2321},{},[2322],{"type":44,"tag":73,"props":2323,"children":2324},{},[2325,2331],{"type":44,"tag":77,"props":2326,"children":2328},{"href":2327},"examples.md",[2329],{"type":49,"value":2330},"End-to-End Examples",{"type":49,"value":2332}," — complete working apps",{"type":44,"tag":2334,"props":2335,"children":2336},"style",{},[2337],{"type":49,"value":2338},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":2340,"total":966},[2341,2356,2370,2385,2398,2413,2427],{"slug":2342,"name":2342,"fn":2343,"description":2344,"org":2345,"tags":2346,"stars":27,"repoUrl":28,"updatedAt":2355},"hf-cli","manage Hugging Face Hub resources via CLI","Hugging Face Hub CLI (`hf`) for downloading, uploading, and managing models, datasets, spaces, buckets, repos, papers, jobs, and more on the Hugging Face Hub. Use when: handling authentication; managing local cache; managing Hugging Face Buckets; running or scheduling jobs on Hugging Face infrastructure; managing Hugging Face repos; discussions and pull requests; browsing models, datasets and spaces; reading, searching, or browsing academic papers; managing collections; querying datasets; configuring spaces; setting up webhooks; or deploying and managing HF Inference Endpoints. Make sure to use this skill whenever the user mentions 'hf', 'huggingface', 'Hugging Face', 'huggingface-cli', or 'hugging face cli', or wants to do anything related to the Hugging Face ecosystem and to AI and ML in general. Also use for cloud storage needs like training checkpoints, data pipelines, or agent traces. Use even if the user doesn't explicitly ask for a CLI command. Replaces the deprecated `huggingface-cli`.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2347,2350,2353,2354],{"name":2348,"slug":2349,"type":15},"CLI","cli",{"name":2351,"slug":2352,"type":15},"Datasets","datasets",{"name":9,"slug":17,"type":15},{"name":19,"slug":20,"type":15},"2026-04-06T18:25:34.020855",{"slug":2357,"name":2357,"fn":2358,"description":2359,"org":2360,"tags":2361,"stars":27,"repoUrl":28,"updatedAt":2369},"hf-cloud-aws-context-discovery","discover local AWS environment context","Discover the user's local AWS context (active profile, region, account ID, caller identity) at the start of any AWS task. Use this skill before any other AWS work — deploying to SageMaker, creating resources, calling AWS APIs, or anything that touches an AWS account. Use it especially when the user has not specified a region or profile explicitly, when they say things like \"use my AWS account\", \"deploy to AWS\", \"use my profile\", or when about to make any AWS CLI or SDK call. Never guess the region or account ID — always use this skill to read it from the local configuration first.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2362,2365,2366],{"name":2363,"slug":2364,"type":15},"AWS","aws",{"name":2348,"slug":2349,"type":15},{"name":2367,"slug":2368,"type":15},"Configuration","configuration","2026-07-08T05:55:33.716099",{"slug":2371,"name":2371,"fn":2372,"description":2373,"org":2374,"tags":2375,"stars":27,"repoUrl":28,"updatedAt":2384},"hf-cloud-python-env-setup","set up Python environments for AWS","Set up an isolated Python environment for SageMaker \u002F AWS work, with the right Python version and current boto3. Use this skill whenever Python code will be executed for a SageMaker deployment, training job, or any AWS automation — including when about to run `pip install`, when about to invoke `boto3`, when creating or activating a virtualenv, or when the user asks to \"set up the environment\". Never use system Python and never `pip install` into it. Always isolate. This skill prevents the most common failure modes: wrong Python version, dependency conflicts, and stale SDKs.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2376,2379,2380,2383],{"name":2377,"slug":2378,"type":15},"AI Infrastructure","ai-infrastructure",{"name":2363,"slug":2364,"type":15},{"name":2381,"slug":2382,"type":15},"Engineering","engineering",{"name":22,"slug":23,"type":15},"2026-07-08T05:55:32.505017",{"slug":2386,"name":2386,"fn":2387,"description":2388,"org":2389,"tags":2390,"stars":27,"repoUrl":28,"updatedAt":2397},"hf-cloud-sagemaker-deployment-planner","plan model deployments to Amazon SageMaker","Plan and coordinate the deployment of a model to Amazon SageMaker AI. Use this skill whenever the user wants to deploy, host, serve, or expose a model on SageMaker or AWS — including phrases like \"deploy a model\", \"host this LLM on AWS\", \"serve this embedding model\", \"deploy a reranker\", \"deploy a text-to-image \u002F diffusion model\", \"host this for async inference\", \"create an endpoint\", \"serve my fine-tuned model\", or any request that involves making a model available for inference on AWS. Use this even when the user is vague (e.g. \"I just want to get this running on AWS, you figure it out\"). Works for text-generation LLMs, embedding models, rerankers, classifiers, text-to-image \u002F diffusion models — picks the right serving stack and chooses between real-time and async inference. This is the entry-point skill for SageMaker deployment work — it asks clarifying questions, picks a deployment pathway, and coordinates the other deployment skills.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2391,2392,2393,2396],{"name":2377,"slug":2378,"type":15},{"name":2363,"slug":2364,"type":15},{"name":2394,"slug":2395,"type":15},"Deployment","deployment",{"name":9,"slug":17,"type":15},"2026-07-08T05:55:37.387689",{"slug":2399,"name":2399,"fn":2400,"description":2401,"org":2402,"tags":2403,"stars":27,"repoUrl":28,"updatedAt":2412},"hf-cloud-sagemaker-iam-preflight","configure SageMaker IAM roles","Ensure a usable SageMaker execution role exists before deploying or training. Use this skill whenever about to create a SageMaker endpoint, model, training job, or any resource that requires an execution role. Use it especially when the user has not provided a role ARN explicitly, when scripts are about to call `iam:CreateRole`, or when an AccessDenied error mentions an IAM action. Never blindly call `iam:CreateRole` — always check for existing roles first. This skill prevents the most common SageMaker deployment failure: trying to create IAM resources from an SSO principal that has no IAM write permissions.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2404,2405,2406,2409],{"name":2377,"slug":2378,"type":15},{"name":2363,"slug":2364,"type":15},{"name":2407,"slug":2408,"type":15},"Permissions","permissions",{"name":2410,"slug":2411,"type":15},"Security","security","2026-07-08T05:55:34.948771",{"slug":2414,"name":2414,"fn":2415,"description":2416,"org":2417,"tags":2418,"stars":27,"repoUrl":28,"updatedAt":2426},"hf-cloud-sagemaker-production-defaults","create production-ready SageMaker endpoints","Create a SageMaker endpoint (real-time or async) with autoscaling, CloudWatch alarms, and tagging enabled by default. Use this skill whenever about to create a SageMaker endpoint, write deployment code that calls `create_endpoint`, or finalize a deployment after the image URI and IAM role are known. Provides deploy.py for real-time endpoints and deploy_async.py for async endpoints (with genuine scale-to-zero support). This is the last step in the SageMaker deployment workflow. Never generate a bare `create_endpoint` call without these defaults — endpoints without autoscaling or alarms are demos, not deployments.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2419,2420,2421,2422,2423],{"name":2377,"slug":2378,"type":15},{"name":2363,"slug":2364,"type":15},{"name":2394,"slug":2395,"type":15},{"name":9,"slug":17,"type":15},{"name":2424,"slug":2425,"type":15},"Monitoring","monitoring","2026-07-08T05:55:38.664702",{"slug":2428,"name":2428,"fn":2429,"description":2430,"org":2431,"tags":2432,"stars":27,"repoUrl":28,"updatedAt":2436},"hf-cloud-serving-image-selection","select SageMaker serving containers","Pick the right serving container for a SageMaker model deployment and find its current image URI. Use this skill whenever about to deploy a model to a SageMaker endpoint and an image URI needs to be chosen — including when the user says \"deploy this LLM\", \"host this HuggingFace model\", \"serve this fine-tuned model\", \"deploy this embedding model\", \"host a reranker\", \"serve a sentence-transformers model\", or when about to hardcode any container URI in deployment code. HuggingFace-curated Deep Learning Containers are ALWAYS preferred: HuggingFace vLLM (LLMs and generative rerankers), HuggingFace vLLM-Omni (multimodal), TEI (embeddings\u002Fcross-encoder rerankers), HF Inference Toolkit (other transformers). Generic images (AWS vLLM, DJL-LMI, SGLang) are used only when no HuggingFace image is compatible — never merely because they carry a newer version. Never hardcode a container URI from memory and never default to TGI. Prevents stale-image failures and wrong-region URIs.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2433,2434,2435],{"name":2377,"slug":2378,"type":15},{"name":2363,"slug":2364,"type":15},{"name":2394,"slug":2395,"type":15},"2026-07-08T05:55:36.173465",{"items":2438,"total":1080},[2439,2457,2471,2478,2484,2491,2498,2505,2513,2519,2532,2546],{"slug":2440,"name":2440,"fn":2441,"description":2442,"org":2443,"tags":2444,"stars":2454,"repoUrl":2455,"updatedAt":2456},"train-sentence-transformers","train sentence-transformers models","Train or fine-tune sentence-transformers models across `SentenceTransformer` (bi-encoder; dense or static embedding model; for retrieval, similarity, clustering, classification, paraphrase mining, dedup, multimodal), `CrossEncoder` (reranker; pair scoring for two-stage retrieval \u002F pair classification), and `SparseEncoder` (SPLADE, sparse embedding model; for learned-sparse retrieval). Covers loss selection, hard-negative mining, evaluators, distillation, LoRA, Matryoshka, and Hugging Face Hub publishing. Use for any sentence-transformers training task.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2445,2448,2449,2450,2451],{"name":2446,"slug":2447,"type":15},"Deep Learning","deep-learning",{"name":9,"slug":17,"type":15},{"name":19,"slug":20,"type":15},{"name":22,"slug":23,"type":15},{"name":2452,"slug":2453,"type":15},"Search","search",18914,"https:\u002F\u002Fgithub.com\u002Fhuggingface\u002Fsentence-transformers","2026-05-08T05:09:16.820066",{"slug":2458,"name":2458,"fn":2459,"description":2460,"org":2461,"tags":2462,"stars":2468,"repoUrl":2469,"updatedAt":2470},"trl-training","train and fine-tune LLMs with TRL","Train and fine-tune transformer language models using TRL (Transformers Reinforcement Learning). Supports SFT, DPO, GRPO, KTO, RLOO and Reward Model training via CLI commands.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2463,2464,2465,2466,2467],{"name":2377,"slug":2378,"type":15},{"name":2446,"slug":2447,"type":15},{"name":9,"slug":17,"type":15},{"name":19,"slug":20,"type":15},{"name":22,"slug":23,"type":15},18850,"https:\u002F\u002Fgithub.com\u002Fhuggingface\u002Ftrl","2026-04-06T18:25:32.746828",{"slug":2342,"name":2342,"fn":2343,"description":2344,"org":2472,"tags":2473,"stars":27,"repoUrl":28,"updatedAt":2355},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2474,2475,2476,2477],{"name":2348,"slug":2349,"type":15},{"name":2351,"slug":2352,"type":15},{"name":9,"slug":17,"type":15},{"name":19,"slug":20,"type":15},{"slug":2357,"name":2357,"fn":2358,"description":2359,"org":2479,"tags":2480,"stars":27,"repoUrl":28,"updatedAt":2369},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2481,2482,2483],{"name":2363,"slug":2364,"type":15},{"name":2348,"slug":2349,"type":15},{"name":2367,"slug":2368,"type":15},{"slug":2371,"name":2371,"fn":2372,"description":2373,"org":2485,"tags":2486,"stars":27,"repoUrl":28,"updatedAt":2384},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2487,2488,2489,2490],{"name":2377,"slug":2378,"type":15},{"name":2363,"slug":2364,"type":15},{"name":2381,"slug":2382,"type":15},{"name":22,"slug":23,"type":15},{"slug":2386,"name":2386,"fn":2387,"description":2388,"org":2492,"tags":2493,"stars":27,"repoUrl":28,"updatedAt":2397},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2494,2495,2496,2497],{"name":2377,"slug":2378,"type":15},{"name":2363,"slug":2364,"type":15},{"name":2394,"slug":2395,"type":15},{"name":9,"slug":17,"type":15},{"slug":2399,"name":2399,"fn":2400,"description":2401,"org":2499,"tags":2500,"stars":27,"repoUrl":28,"updatedAt":2412},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2501,2502,2503,2504],{"name":2377,"slug":2378,"type":15},{"name":2363,"slug":2364,"type":15},{"name":2407,"slug":2408,"type":15},{"name":2410,"slug":2411,"type":15},{"slug":2414,"name":2414,"fn":2415,"description":2416,"org":2506,"tags":2507,"stars":27,"repoUrl":28,"updatedAt":2426},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2508,2509,2510,2511,2512],{"name":2377,"slug":2378,"type":15},{"name":2363,"slug":2364,"type":15},{"name":2394,"slug":2395,"type":15},{"name":9,"slug":17,"type":15},{"name":2424,"slug":2425,"type":15},{"slug":2428,"name":2428,"fn":2429,"description":2430,"org":2514,"tags":2515,"stars":27,"repoUrl":28,"updatedAt":2436},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2516,2517,2518],{"name":2377,"slug":2378,"type":15},{"name":2363,"slug":2364,"type":15},{"name":2394,"slug":2395,"type":15},{"slug":2520,"name":2520,"fn":2521,"description":2522,"org":2523,"tags":2524,"stars":27,"repoUrl":28,"updatedAt":2531},"hf-mcp","access Hugging Face Hub via MCP","Use Hugging Face Hub via MCP server tools. Search models, datasets, Spaces, papers. Get repo details, fetch documentation, run compute jobs, and use Gradio Spaces as AI tools. Available when connected to the HF MCP server.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2525,2526,2527,2528],{"name":2351,"slug":2352,"type":15},{"name":9,"slug":17,"type":15},{"name":19,"slug":20,"type":15},{"name":2529,"slug":2530,"type":15},"MCP","mcp","2026-04-06T18:25:50.364185",{"slug":2533,"name":2533,"fn":2534,"description":2535,"org":2536,"tags":2537,"stars":27,"repoUrl":28,"updatedAt":2545},"hf-mem","estimate memory for Hugging Face models","Hugging Face CLI to estimate the required memory to load Safetensors or GGUF model weights for inference from the Hugging Face Hub",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2538,2539,2540,2541,2542],{"name":2377,"slug":2378,"type":15},{"name":2348,"slug":2349,"type":15},{"name":9,"slug":17,"type":15},{"name":19,"slug":20,"type":15},{"name":2543,"slug":2544,"type":15},"Performance","performance","2026-06-13T07:23:57.101435",{"slug":2547,"name":2547,"fn":2548,"description":2549,"org":2550,"tags":2551,"stars":27,"repoUrl":28,"updatedAt":2560},"huggingface-best","find and compare Hugging Face models","Use when the user asks about finding the best, top, or recommended model for a task, wants to know what AI model to use, or wants to compare models by benchmark scores. Triggers on: \"best model for X\", \"what model should I use for\", \"top models for [task]\", \"which model runs on my laptop\u002Fmachine\u002Fdevice\", \"recommend a model for\", \"what LLM should I use for\", \"compare models for\", \"what's state of the art for\", or any question about choosing an AI model for a specific use case. Always use this skill when the user wants model recommendations or comparisons, even if they don't explicitly mention HuggingFace or benchmarks.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2552,2555,2556,2557],{"name":2553,"slug":2554,"type":15},"Analytics","analytics",{"name":9,"slug":17,"type":15},{"name":19,"slug":20,"type":15},{"name":2558,"slug":2559,"type":15},"Research","research","2026-04-24T05:09:45.870658"]