"""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"'`); `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("
${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 `