+jRSHdZddlmZddlZddlZddlZddlZddlmZm Z ddl m Z ddl m Z mZmZmZddlmZddlmZdd lmZmZdd lmZdd lmZmZdd lmZdd lm Z e rddl!m"Z"ej#dej$Z%ddZ&eGddeeZ'dS)zgr.HTML() component.) annotationsN)CallableSequence)partial) TYPE_CHECKINGAnyLiteralcast)document) BlockContext) Componentserver)Button) EventListener all_events)I18nData)set_default_buttons)Timerz ]contentrreturnNonect|tr8t|r t jdt ddSdSdS)aWarn 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.) stacklevelN) isinstancestr_SCRIPT_TAG_PATTERNsearchwarningswarn UserWarning)rs Z/home/wildlama/visual-decline/.venv/lib/python3.11/site-packages/gradio/components/html.py_warn_if_script_tagr#sq'3  $7$>$>w$G$G    L       ceZdZdZeZ dHddddddddddddddddddddddddd dId1ZdJd3ZdJd4ZdKd6Z dLd7Z dMd9Z e d:Z dMfd; ZdNd=Zd>Z dOdPdDZ dQdRdFZdSdGZxZS)THTMLaD 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 Nz${value}zCelement.addEventListener('click', function() { trigger('click') });TFvalue)label html_template css_template js_on_loadapply_default_csseveryinputs show_labelscale min_widthvisibleelem_id elem_classesrenderkeypreserved_by_key min_height max_height containerpadding autoscrollbuttonsheadserver_functionsAny | Callable | Noner)str | I18nData | Noner*rr+r, str | Noner-boolr.Timer | float | Noner/7Component | Sequence[Component] | set[Component] | Noner0r1 int | Noner2r3bool | Literal['hidden']r4r5list[str] | str | Noner6r7(int | str | tuple[int | str, ...] | Noner8r9r:r;r<r=r>list[Button] | Noner?r@list[Callable] | Nonepropsrc :t|||_||_||_||_||_||_||_||_||_ ||_ |j j |_ tj|| | ||||t!j||||| | | ||||||| | t#|d|_|r]|D]\}t'|}t)|dt+|}t-||||j|[dSdS)a 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 `