[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6K171VJ78TEGMS5MFSZFFED":3,"skill-same:01M6K171VJ78TEGMS5MFSZFFED":71},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":23,"publishedAt":37,"linkOnly":38,"markdownContent":39,"markdownBody":40,"frontMatter":41,"refName":42,"commitSha":43,"skillDirectory":44,"forksCount":45,"repositoryHtmlUrl":46,"repositoryHomepageUrl":6,"ownerHtmlUrl":47,"ownerBlogUrl":48,"ownerDescription":49,"updatedAt":50,"install":51,"resources":64},"01M6K171VJ78TEGMS5MFSZFFED","huggingface-gradio",null,"Build Gradio web UIs and demos in Python. Use when creating or editing Gradio apps, components, event listeners, layouts, or chatbots.","NagyVikt\u002Fcodex-plugins","NagyVikt","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F137165288?v=4","01M6K0SJ3R2DAZRJKJJS10VN87","Viktor Nagy","01M6K0SJ9HXN0GBD91QDQ9WNVV",2,"MIT","https:\u002F\u002Fgithub.com\u002FNagyVikt\u002Fcodex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fhugging-face\u002Fskills\u002Fgradio\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000016","图像与多媒体","SCENARIO","使用场景",[24,25,26,27,28,29,30,31,32,33,34,35,36],"HuggingFace","gradio","huggingface gradio","python","web","components","editing","use","build","apps","chatbots","demos","event","2026-11-10 10:12:30",false,"---\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, 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## Additional Reference\n\n- [End-to-End Examples](examples.md) — complete working apps\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, 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## Additional Reference\n\n- [End-to-End Examples](examples.md) — complete working apps\n",{"name":5,"description":7},"main","9a4409c8751439c3aeeea2bc3940ba05dc3cd3b5","plugins\u002Fhugging-face\u002Fskills\u002Fgradio",0,"https:\u002F\u002Fgithub.com\u002FNagyVikt\u002Fcodex-plugins","https:\u002F\u002Fgithub.com\u002FNagyVikt","https:\u002F\u002Fwebu.hu\u002F","Codex is a tool they said...\r\n\r\nCreator of GitGuardex, CueCards. Tech stack: Next.js · TypeScript · Rust · Linux. ","2026-03-30 02:19:53",{"source":8,"skillName":5,"commands":52,"prompt":62,"zipAvailable":63},[53,56,59],{"tool":54,"command":55},"npx","npx skills add NagyVikt\u002Fcodex-plugins --skill huggingface-gradio",{"tool":57,"command":58},"bunx","bunx skills add NagyVikt\u002Fcodex-plugins --skill huggingface-gradio",{"tool":60,"command":61},"pnpm","pnpm dlx skills add NagyVikt\u002Fcodex-plugins --skill huggingface-gradio","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FNagyVikt\u002Fcodex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fhugging-face\u002Fskills\u002Fgradio\u002FSKILL.md",true,[65],{"path":66,"resourceType":67,"resourceTypeDesc":68,"sizeBytes":69,"sourceHtmlUrl":70},"examples.md","REFERENCE","参考文档",14481,"https:\u002F\u002Fgithub.com\u002FNagyVikt\u002Fcodex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fhugging-face\u002Fskills\u002Fgradio\u002Fexamples.md",[72,112,146,170,198,220],{"skillNo":73,"name":74,"nameZh":6,"description":75,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":76,"categories":77,"keywords":92,"publishedAt":37},"01M6K1ZEN8P9R2S6NPNJNJ8JVH","workflow","Vercel Workflow DevKit (WDK) expert guidance. Use when building durable workflows, long-running tasks, API routes or agents that need pause\u002Fresume, retries, step-based execution, or crash-safe orchestration with Vercel Workflow.","https:\u002F\u002Fgithub.com\u002FNagyVikt\u002Fcodex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fvercel\u002Fskills\u002Fworkflow\u002FSKILL.md",[78,81,84,89],{"categoryNo":79,"categoryName":80,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000010","后端与接口",{"categoryNo":82,"categoryName":83,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":85,"categoryName":86,"taxonomyType":87,"taxonomyTypeDesc":88},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",{"categoryNo":90,"categoryName":91,"taxonomyType":87,"taxonomyTypeDesc":88},"01JBSEEDCAT000000000000038","人力资源",[74,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111],"workflows","create","run","streaming","logs","start","why","loop","wait for","branch","auto","log","conversation","human","lib","condition","rendering","retries","sleep",{"skillNo":113,"name":114,"nameZh":6,"description":115,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":116,"categories":117,"keywords":128,"publishedAt":37},"01M6K1Z71NWFSPHK2VJJ73MVSY","verification","Full-story verification — infers what the user is building, then verifies the complete flow end-to-end: browser → API → data → response. Triggers on dev server start and 'why isn't this working' signals.","https:\u002F\u002Fgithub.com\u002FNagyVikt\u002Fcodex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fvercel\u002Fskills\u002Fverification\u002FSKILL.md",[118,121,122,125],{"categoryNo":119,"categoryName":120,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":79,"categoryName":80,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":123,"categoryName":124,"taxonomyType":87,"taxonomyTypeDesc":88},"01JBSEEDCAT000000000000031","产品经理",{"categoryNo":126,"categoryName":127,"taxonomyType":87,"taxonomyTypeDesc":88},"01JBSEEDCAT000000000000033","数据分析师",[114,129,96,130,131,132,102,133,134,135,136,137,138,139,140,141,142,143,144,145],"auth","routing middleware","api","projects","user story","full stack","jest","local","project","end","app","false","unit","error","middleware","loading","unit test",{"skillNo":147,"name":148,"nameZh":6,"description":149,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":150,"categories":151,"keywords":153,"publishedAt":37},"01M6K1YPRYJS3BQEDP8HKBHPEJ","vercel-storage","Vercel storage expert guidance — Blob, Edge Config, and Marketplace storage (Neon Postgres, Upstash Redis). Use when choosing, configuring, or using data storage with Vercel applications.","https:\u002F\u002Fgithub.com\u002FNagyVikt\u002Fcodex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fvercel\u002Fskills\u002Fvercel-storage\u002FSKILL.md",[152],{"categoryNo":79,"categoryName":80,"taxonomyType":21,"taxonomyTypeDesc":22},[154,155,156,157,95,158,159,103,160,161,162,163,164,165,139,107,166,167,168,169],"storage","vercel storage","vercel","config","supabase","migrate","router","clerk","expert","prisma","connection pooling","neon","turso","upstash","URL","auth0",{"skillNo":171,"name":172,"nameZh":6,"description":173,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":174,"categories":175,"keywords":183,"publishedAt":37},"01M6K1YFEP0GPPGMQ3D0FPTS27","vercel-services","Vercel Services — deploy multiple services within a single Vercel project. Use for monorepo layouts or when combining a backend (Python, Go) with a frontend (Next.js, Vite) in one deployment.","https:\u002F\u002Fgithub.com\u002FNagyVikt\u002Fcodex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fvercel\u002Fskills\u002Fvercel-services\u002FSKILL.md",[176,179,180],{"categoryNo":177,"categoryName":178,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发",{"categoryNo":79,"categoryName":80,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":181,"categoryName":182,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000011","运维与部署",[184,185,156,186,187,188,189,190,191,192,193,42,194,195,137,196,139,33,142,197],"vercel services","services","frontend","docker compose","SET","configure","monorepo","go api","fastapi","up","aws lambda","go backend","get","python backend",{"skillNo":199,"name":200,"nameZh":6,"description":201,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":202,"categories":203,"keywords":204,"publishedAt":37},"01M6K1Y8S3CRD43DPKX0PK1MTT","vercel-sandbox","Vercel Sandbox guidance — ephemeral Firecracker microVMs for running untrusted code safely. Supports AI agents, code generation, and experimentation. Use when executing user-generated or AI-generated code in isolation.","https:\u002F\u002Fgithub.com\u002FNagyVikt\u002Fcodex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fvercel\u002Fskills\u002Fvercel-sandbox\u002FSKILL.md",[],[205,206,156,207,208,94,95,209,210,211,212,213,214,215,216,217,144,218,200,219],"sandbox","vercel sandbox","safe","ai agents","code","ai sdk","Code Generation","playground","generated","spawn","install","runner","io","child","student",{"skillNo":221,"name":222,"nameZh":6,"description":223,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":224,"categories":225,"keywords":227,"publishedAt":37},"01M6K1Y1J8S7AN97H75SHBGF7J","vercel-queues","Vercel Queues guidance (public beta) — durable event streaming with topics, consumer groups, retries, and delayed delivery. $0.60\u002F1M ops. Powers Workflow DevKit. Use when building async processing, fan-out patterns, or event-driven architectures.","https:\u002F\u002Fgithub.com\u002FNagyVikt\u002Fcodex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fvercel\u002Fskills\u002Fvercel-queues\u002FSKILL.md",[226],{"categoryNo":82,"categoryName":83,"taxonomyType":21,"taxonomyTypeDesc":22},[228,156,74,93,96,229,188,131,189,193,230,231,232,233,139,107,234,110,144,235],"vercel queues","beta","message","delivery","across","worker","processing","at"]