博主原文链接：https://www.yourmetaverse.cn/nlp/384/
Gradio HTML组件详解
使用Gradio库构建交互式界面时，可以利用HTML模块显示任意的HTML输出内容。HTML模块允许我们在界面中展示自定义的HTML代码。在这篇博客中，我们将介绍Gradio库的HTML模块以及其change方法的使用。
首先，让我们了解一下HTML模块的基本信息。HTML模块的初始化函数为gradio.HTML()，可以通过该函数创建一个HTML组件。HTML模块有两个重要的特点：它不接受输入（As input: this component does not accept input.），并且期望一个有效的HTML字符串作为输出（As output: expects a valid HTML str.）。通过gradio.HTML()创建的HTML组件可以显示任意的HTML内容。
下面是一个使用HTML模块的示例代码：
import gradio as gr
import os
os.system('python -m spacy download en_core_web_sm')
import spacy
from spacy import displacy
nlp = spacy.load("en_core_web_sm")
def text_analysis(text):
doc = nlp(text)
html = displacy.render(doc, style="dep", page=True)
html = (
""
+ html
+ ""
)
pos_count = {
"char_count": len(text),
"token_count": 0,
}
pos_tokens = []
for token in doc:
pos_tokens.extend([(token.text, token.pos_), (" ", None)])
return pos_tokens, pos_count, html
demo = gr.Interface(
text_analysis,
gr.Textbox(placeholder="Enter sentence here..."),
["highlight", "json", "html"],
examples=[
["What a beautiful morning for a walk!"],
["It was the best of times, it was the worst of times."],
],
)
demo.launch()
接下来，让我们来了解一下HTML模块的change方法。change方法是一个监听器，当组件的值发生变化时触发。这个变化可以是用户输入引起的（例如用户在文本框中输入文本），也可以是函数更新引起的（例如图像接收到来自事件触发器输出的值）。change方法主要用于Gradio Blocks中的组件。
change方法的参数如下：
fn（必需）：需要包装为界面的函数，通常是机器学习模型的预测函数。函数的每个参数对应一个输入组件，函数应返回单个值或值的元组，元组中的每个元素对应一个输出组件。inputs：用作输入的组件，可以是单个组件、组件列表或组件集合。如果函数不接受输入，这里应该是一个空列表。outputs：用作输出的组件，可以是单个组件或组件列表。如果函数不返回输出，这里应该是一个空列表。api_name：定义此参数将在API文档中公开该端点。- 其他参数如
status_tracker、scroll_to_output、show_progress等用于控制界面的显示和行为。
通过change方法，我们可以为HTML模块的值变化事件绑定回调函数，从而实现对值变化的响应处理。
参数详解
以下是一个整理了HTML模块参数和change方法参数的表格：
| 参数名 | 数据类型 | 默认值 | 描述 |
|---|---|---|---|
| value | str | Callable | “” | 默认值。如果是可调用对象，将在应用加载时调用该函数以设置组件的初始值。 |
| label | str | None | None | 接口中的组件名称。 |
| every | float | None | None | 如果value是可调用对象，在客户端连接打开时每隔“every”秒运行该函数。否则无效。队列必须启用。可以通过此组件的.load_event属性访问事件（例如，用于取消事件）。 |
| show_label | bool | True | 如果为True，将显示标签。 |
| visible | bool | True | 如果为False，将隐藏组件。 |
| elem_id | str | None | None | 可选字符串，用作此组件在HTML DOM中的id。可用于定位CSS样式。 |
| elem_classes | list[str] | str | None | None | 可选字符串列表，用作此组件在HTML DOM中的类。可用于定位CSS样式。 |
change方法
| 参数名 | 数据类型 | 默认值 | 描述 |
|---|---|---|---|
| fn | Callable | None | 必填 | 要在接口周围包装的函数。通常是机器学习模型的预测函数。函数的每个参数对应一个输入组件，函数应返回单个值或一个值元组，元组中的每个元素对应一个输出组件。 |
| inputs | Component | list[Component] | set[Component] | None | None | 用作输入的gradio.components列表。如果函数不接受任何输入，应将其设置为空列表。 |
| outputs | Component | list[Component] | None | None | 用作输出的gradio.components列表。如果函数不返回任何输出，应将其设置为空列表。 |
| api_name | str | None | None | 定义此参数将在API文档中公开端点。 |
| status_tracker | None | None | |
| scroll_to_output | bool | False | 如果为True，将在完成后滚动到输出组件。 |
| show_progress | Literal[‘full’] | Literal[‘minimal’] | Literal[‘hidden’] | “full” | 如果为True，在等待期间显示进度动画。 |
| queue | bool | None | None | 如果为True，将将请求放入队列中（如果启用了队列）。如果为False，即使启用了队列，也不会将此事件放入队列中。如果为None，则使用gradio应用的队列设置。 |
| batch | bool | False | 如果为True，则函数应处理一批输入，即它应接受每个参数的输入值列表。列表应具有相等的长度（并且最多为max_batch_size）。然后函数需要返回元组列表（即使只有1个输出组件），元组中的每个列表对应一个输出组件。 |
| max_batch_size | int | 4 | 如果从队列调用此参数，批量在一起处理的最大输入数（仅在batch=True时相关）。 |
| preprocess | bool | True | 如果为False，将在运行“fn”之前不运行组件数据的预处理（例如，如果使用Image组件调用此方法，则将其保留为base64字符串）。 |
| postprocess | bool | True | 如果为False，将在将’fn’的输出返回给浏览器之前不运行组件数据的后处理。 |
| cancels | dict[str, Any] | list[dict[str, Any]] | None | None | 要在此侦听器被触发时取消的其他事件列表。例如，设置cancels=[click_event]将取消click_event，其中click_event是另一个组件的.click方法的返回值。尚未运行的函数（或正在迭代的生成器）将被取消，但正在运行的函数将被允许完成。 |
| every | float | None | None | 在客户端连接打开时每隔“every”秒运行此事件。以秒为单位解释。队列必须启用。 |
