"""gr.HTML() component.""" from __future__ import annotations import inspect import re import textwrap import warnings from collections.abc import Callable, Sequence from functools import partial from typing import TYPE_CHECKING, Any, Literal, cast from gradio_client.documentation import document from gradio.blocks import BlockContext from gradio.components.base import Component, server from gradio.components.button import Button from gradio.events import EventListener, all_events from gradio.i18n import I18nData from gradio.utils import set_default_buttons if TYPE_CHECKING: from gradio.components import Timer _SCRIPT_TAG_PATTERN = re.compile(r"]", re.IGNORECASE) def _warn_if_script_tag(content: Any) -> None: """Warn if `content` contains a `'`); `head` content " "is injected and loaded before `js_on_load` runs. Then, if needed, put code " "that uses those libraries in the `js_on_load` parameter, which executes when " "the component renders. See " "https://gradio.app/guides/custom-HTML-components for details.", UserWarning, stacklevel=2, ) from gradio.events import Dependency @document() class HTML(BlockContext, Component): """ Creates a component with arbitrary HTML. Can include CSS and JavaScript to create highly customized and interactive components. Example: ```python import gradio as gr with gr.Blocks() as demo: basic_html = gr.HTML("

This is a basic HTML component

") button_set = gr.HTML(["Option 1", "Option 2", "Option 3"], html_template="{{#each value}}{{/each}}", css_template="button { margin: 5px; padding: 10px; }", js_on_load="element.querySelectorAll('.option-btn').forEach(btn => { btn.addEventListener('click', () => { trigger('click', {option: btn.innerText}); }); });") clicked_option = gr.Textbox(label="Clicked Option") def on_button_click(evt: gr.EventData): return evt.option button_set.click(on_button_click, outputs=clicked_option) demo.launch() ``` Demos: super_html Guides: custom-HTML-components, custom-CSS-and-JS """ EVENTS = all_events def __init__( self, 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, scale: int | None = None, min_width: int | 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", min_height: int | None = None, max_height: int | None = None, container: bool = False, padding: bool = False, autoscroll: bool = False, buttons: list[Button] | None = None, head: str | None = None, server_functions: list[Callable] | None = None, **props: Any, ): """ Parameters: value: The HTML content in the ${value} tag in the html_template. For example, if html_template="

${value}

" and value="Hello, world!", the component will render as `"

Hello, world!

"`. label: The label for this component. Is used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to. html_template: A string representing the HTML template for this component as a JS template string and Handlebars template. The `${value}` tag will be replaced with the `value` parameter, and all other tags will be filled in with the values from `props`. This element can have children when used in a `with gr.HTML(...):` context, and the children will be rendered to replace `@children` substring, which cannot be nested inside any HTML tags. css_template: A string representing the CSS template for this component as a JS template string and Handlebars template. The CSS will be automatically scoped to this component, and rules outside a block will target the component's root element. The `${value}` tag will be replaced with the `value` parameter, and all other tags will be filled in with the values from `props`. js_on_load: A string representing the JavaScript code that will be executed when the component is loaded. The `element` variable refers to the HTML element of this component, and can be used to access children such as `element.querySelector()`. The `trigger` function can be used to trigger events, such as `trigger('click')`. The value and other props can be edited through `props`, e.g. `props.value = "new value"` which will re-render the HTML template. If `server_functions` is provided, a `server` object is also available in `js_on_load`, where each function is accessible as an async method, e.g. `server.list_files(path).then(files => ...)` or `const files = await server.list_files(path)`. The `upload` async function can be used to upload a JavaScript `File` object to the Gradio server, returning a dictionary with `path` (the server-side file path) and `url` (the public URL to access the file), e.g. `const { path, url } = await upload(file)`. The `watch` function can be used to observe prop changes when the component is an output to a Python event listener: `watch('value', () => { ... })` runs the callback after the template re-renders whenever `value` changes, or `watch(['value', 'color'], () => { ... })` to watch multiple props.`. apply_default_css: If True, default Gradio CSS styles will be applied to the HTML component. head: A raw HTML string to inject into the document `` before `js_on_load` runs. Typically used for `