【grado】经常使用的gr.Button\gr.Markdown的参数解析+click等事件绑定方法+gr.Gallery与 gr.Image对比-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_51086862/article/details/146495974

经常使用的gr.Button\gr.Markdown的参数解析+click等事件绑定方法+gr.Gallery与 gr.Image对比

一、gr.Button\gr.Markdown
二、click等事件绑定方法
三、gr.Gallery与 gr.Image对比

一、gr.Button\gr.Markdown

gr.Button():

value：按钮显示的默认文本。如果提供了一个函数，则每次加载应用程序时都会调用该函数来设置此组件的初始值。
every：如果value是函数，则连续调用value重新计算它（否则无效）。可以提供一个定时器，其刻度重置“值”，或者提供一个浮点数，为重置定时器提供规则的间隔。
variant：设置按钮的背景和文本颜色。使用“主要”作为主要的行动按钮，“次要”用于更柔和的风格，“停止”用于停止按钮，“拥抱脸”用于黑色背景和白色文本，与拥抱脸的按钮风格一致。
size：按钮的大小。可以是“sm”、“md”或“lg”。
icon：要在按钮内显示的图标文件的URL或路径。如果无，则不会显示图标。
visible：如果为False，则组件将被隐藏。
interactive：如果为False，则按钮将处于禁用状态。
elem_id：一个可选字符串，在HTML DOM中指定为此组件的id。可用于定位CSS样式。
elem_classes：一个可选的字符串列表，在HTML DOM中被指定为该组件的类。可用于定位CSS样式。
render：如果为False，则组件将不会在Blocks上下文中渲染。如果目的是现在分配事件侦听器，但稍后呈现组件，则应使用。
key：如果指定了，将用于在重新渲染时假定身份。在重新渲染过程中具有相同键的组件将保留其值。
min_width：最小像素宽度，如果没有足够的屏幕空间来满足此值，将自动换行。如果某个比例值导致此组件的宽度小于min_width，则将首先考虑min_widch参数。

在 Gradio 中，通过 elem_classes 和自定义 CSS，你可以灵活地设置按钮、容器、标签等的宽度、高度、颜色等样式属性。

submit_button = gr.Button("提交", elem_classes="send-btn3")

#以下是如何使用 .send-btn3 来调整按钮的长宽、颜色以及其他样式。
.send-btn3 {
    width: auto; /* 自动宽度：按钮宽度根据内容自动调整 */
    height: 35px; /* 中等高度：设置按钮的固定高度为 35px */
    background-color: #2196F3; /* 蓝色背景：设置按钮的背景颜色为蓝色 (#2196F3) */
    color: white; /* 白色文字：设置按钮的文字颜色为白色 */
    font-size: 15px; /* 字体大小：设置按钮文字的字体大小为 15px */
    border: none; /* 无边框：移除按钮的默认边框 */
    border-radius: 5px; /* 圆角：设置按钮的圆角半径为 5px，使其看起来更柔和 */
    cursor: pointer; /* 鼠标悬停时显示手型光标：提示用户该按钮是可点击的 */
    /* 居中对齐 */
    display: block; /* 块级元素：将按钮设置为块级元素，以便可以使用 margin 属性进行居中 */
    margin-left: auto; /* 左外边距自动：水平方向左对齐 */
    margin-right: auto; /* 右外边距自动：水平方向右对齐 */
    margin-top: 10px; /* 上外边距：设置按钮距离上方 10px 的间距（可选） */
    margin-bottom: 10px; /* 下外边距：设置按钮距离下方 10px 的间距（可选） */
    margin-left: auto; /* 左外边距自动：将按钮推到右边 */
    margin-right: 0; /* 右外边距为 0：确保按钮紧贴容器右边 */
    transition: background-color 0.3s ease; /* 平滑过渡效果 */
}

黑色 (#000000)
纯白色（#FFFFFF）
下面是提供颜色选择的链接：

在这里插入图片描述

颜色RGB对照表+十六进制颜色代码（颜色大全）

gr.Markdown():
参数：

value：在Markdown组件中显示的值。
every：如果value是函数，则连续调用value重新计算它（否则无效）。可以提供一个定时器，其刻度重置“值”，或者提供一个浮点数，为重置定时器提供规则的间隔。
show_label：此参数无效。
rtl：如为True，将渲染文本的方向设置为从右向左。默认值为False，这将从左向右呈现文本。
latex_delimiters：一个字典列表，格式为{“left”：打开分隔符（str），“right”：关闭分隔符（tr），“display”：是否以换行符（bool）显示}，将用于呈现latex表达式。
visible：如果为False，则组件将被隐藏。
elem_id：一个可选字符串，在HTML DOM中指定为此组件的id。可用于定位CSS样式。
elem_classes：一个可选的字符串列表，在HTML DOM中被指定为该组件的类。可用于定位CSS样式。
render：如果为False，则组件将不会在“块”上下文中渲染。如果目的是现在分配事件侦听器，但稍后呈现组件，则应使用。
key：如果指定了，将用于在重新渲染时假定身份。在重新渲染过程中具有相同键的组件将保留其值。
**sanitize_html:**如果为False，将在从markdown转换时禁用html净化。不建议这样做，因为这可能会导致安全漏洞。
line_breaks：如果为True，将在聊天机器人消息中启用Github风格的Markdown换行。如果为False（默认），则将忽略单个新行。
header_links：如果为True，将自动为标题创建锚点，并在悬停时显示链接图标。
height：组件的高度，如果传递数字，则以像素为单位指定，如果传递字符串，则以CSS单位指定。如果标记内容超过高度，组件将滚动。
max_height:组件的最大高度，如果传递数字，则以像素为单位指定，如果传递字符串，则以CSS单位指定。如果标记内容超过高度，组件将滚动。如果标记内容短于高度，则组件将收缩以适应内容。如果设置了“height”并且小于“max_height”，则不会有任何效果。
min_height：组件的最小高度，如果传递数字，则以像素为单位指定，如果传递字符串，则以CSS单位指定。如果标记内容超过高度，组件将扩展以适应内容。如果设置了“height”并且大于“min_height”，则不会有任何效果。
show_copy_button：如为True，则包含一个复制按钮，用于复制Markdown组件中的文本。默认值为False。
container：如果为True，Markdown组件将显示在容器中。默认值为False。

二、click等事件绑定方法

Gradio 提供了多种事件绑定方法，适用于不同场景的交互需求。以下是一些常见事件的总结：
在这里插入图片描述

1. click
将一个按钮（send_btn）的点击事件绑定到一个回调函数（send_verification_code），并指定输入和输出组件。
具体来说：
当用户点击 send_btn 按钮时，Gradio 会调用 send_verification_code 函数。
send_verification_code 函数会接收用户输入的数据（通过 inputs 参数指定），并返回结果（通过 outputs 参数指定）。
输入数据来自 phone_email 组件，输出结果会更新到 send_status 组件。

send_btn.click(
    send_verification_code,
    inputs=[phone_email],
    outputs=[send_status]
)

import gradio as gr

# 回调函数：发送验证码
def send_verification_code(phone_email):
    if not phone_email:
        return "请输入手机号或邮箱！"
    # 模拟发送验证码的逻辑
    return f"验证码已发送至 {phone_email}"

# 创建 Gradio 界面
with gr.Blocks() as demo:
    # 输入组件：手机号或邮箱
    phone_email = gr.Textbox(label="手机号或邮箱")
    
    # 输出组件：发送状态
    send_status = gr.Textbox(label="发送状态", interactive=False)
    
    # 按钮组件：发送验证码
    send_btn = gr.Button("发送验证码")
    
    # 绑定事件
    send_btn.click(
        send_verification_code,  # 回调函数
        inputs=[phone_email],   # 输入来源
        outputs=[send_status]   # 输出目标
    )

demo.launch()

2. change
适用组件：gr.Textbox, gr.Dropdown, gr.Slider, gr.Number, 等。
触发条件：当组件的值发生变化时触发。
典型场景：实时验证用户输入（如手机号格式校验）。动态更新界面内容（如根据滑块值调整图片大小）。

import gradio as gr

def validate_input(text):
    if text.isdigit():
        return "输入有效！"
    else:
        return "请输入数字！"

with gr.Blocks() as demo:
    input_text = gr.Textbox(label="输入数字")
    output_text = gr.Textbox(label="验证结果", interactive=False)
    
    # 绑定 change 事件
    input_text.change(validate_input, inputs=input_text, outputs=output_text)

demo.launch()

当用户在 input_text 中输入内容并离开焦点时，validate_input 函数会被调用，并实时更新验证结果。

3. submit
适用组件：gr.Textbox。
触发条件：当用户按下回车键（Enter 键）时触发。
典型场景：表单提交。搜索框查询。

import gradio as gr

def handle_submit(text):
    return f"您输入的内容是：{text}"

with gr.Blocks() as demo:
    input_text = gr.Textbox(label="请输入内容")
    output_text = gr.Textbox(label="提交结果", interactive=False)
    
    # 绑定 submit 事件
    input_text.submit(handle_submit, inputs=input_text, outputs=output_text)

demo.launch()

用户在 input_text 中输入内容后按下回车键，handle_submit 函数会被调用，并显示提交结果。

4. select
适用组件：gr.Dropdown, gr.Dataframe, gr.Image 等。
触发条件：当用户选择某个选项或区域时触发。
典型场景：下拉菜单选择。图片中选择特定区域。

import gradio as gr

def handle_selection(choice):
    return f"您选择了：{choice}"

with gr.Blocks() as demo:
    dropdown = gr.Dropdown(choices=["选项1", "选项2", "选项3"], label="请选择一个选项")
    output_text = gr.Textbox(label="选择结果", interactive=False)
    
    # 绑定 select 事件
    dropdown.select(handle_selection, inputs=dropdown, outputs=output_text)

demo.launch()

用户从下拉菜单中选择一个选项后，handle_selection 函数会被调用，并显示选择结果。

5. upload

适用组件：gr.File, gr.Image。
触发条件：当用户上传文件或图片时触发。
典型场景：文件上传处理。图片预览或分析。

import gradio as gr

def handle_upload(file):
    return f"文件已上传：{file.name}"

with gr.Blocks() as demo:
    file_upload = gr.File(label="上传文件")
    output_text = gr.Textbox(label="上传结果", interactive=False)
    
    # 绑定 upload 事件
    file_upload.upload(handle_upload, inputs=file_upload, outputs=output_text)

demo.launch()

6. clear
适用组件：gr.Textbox, gr.Image, gr.File 等。
触发条件：当用户清空组件内容时触发。
典型场景：清空输入框后重置状态。移除上传的文件或图片。

import gradio as gr

def handle_clear():
    return "输入框已清空！"

with gr.Blocks() as demo:
    input_text = gr.Textbox(label="请输入内容")
    output_text = gr.Textbox(label="清空结果", interactive=False)
    
    # 绑定 clear 事件
    input_text.clear(handle_clear, outputs=output_text)

demo.launch()

用户清空 input_text 后，handle_clear 函数会被调用，并显示清空提示。

7. play 和 pause
适用组件：gr.Audio, gr.Video。
触发条件：
play：当用户开始播放音频或视频时触发。
pause：当用户暂停播放时触发。
典型场景：音频/视频播放控制。实时监控播放状态。

import gradio as gr

def handle_play():
    return "正在播放..."

def handle_pause():
    return "已暂停！"

with gr.Blocks() as demo:
    audio = gr.Audio(type="filepath", label="播放音频")
    status_text = gr.Textbox(label="播放状态", interactive=False)
    
    # 绑定 play 和 pause 事件
    audio.play(handle_play, outputs=status_text)
    audio.pause(handle_pause, outputs=status_text)

demo.launch()

用户播放或暂停音频时，对应的状态会实时更新。

8. edit

适用组件：gr.Image。
触发条件：当用户编辑图片（如裁剪、旋转）时触发。
典型场景：图片编辑工具。实时预览编辑效果。

import gradio as gr

def handle_edit(image):
    return "图片已编辑！"

with gr.Blocks() as demo:
    image_editor = gr.Image(label="编辑图片", tool="editor")
    status_text = gr.Textbox(label="编辑状态", interactive=False)
    
    # 绑定 edit 事件
    image_editor.edit(handle_edit, inputs=image_editor, outputs=status_text)

demo.launch()

用户编辑图片后，handle_edit 函数会被调用，并显示编辑提示。

9. blur 和 focus

适用组件：gr.Textbox, gr.Number 等。
触发条件：
blur：当组件失去焦点时触发。
focus：当组件获得焦点时触发。
典型场景：输入框校验，动态提示或辅助信息。

import gradio as gr

def handle_focus():
    return "输入框已聚焦！"

def handle_blur():
    return "输入框已失去焦点！"

with gr.Blocks() as demo:
    input_text = gr.Textbox(label="请输入内容")
    status_text = gr.Textbox(label="状态", interactive=False)
    
    # 绑定 focus 和 blur 事件
    input_text.focus(handle_focus, outputs=status_text)
    input_text.blur(handle_blur, outputs=status_text)

demo.launch()

用户聚焦或离开输入框时，对应的状态会实时更新。

三、gr.Gallery与 gr.Image对比

gr.Gallery与 gr.Image

gr.Gallery 和 gr.Image 是 Gradio 中两个用于展示图片的组件，但它们的用途和功能有显著区别。
1. 核心功能对比
在这里插入图片描述
2.gr.Gallery 示例

import gradio as gr

gallery_images = [
    "image1.jpg",
    "image2.jpg",
    "image3.jpg"
]

def update_gallery():
    return gallery_images

with gr.Blocks() as demo:
    gallery = gr.Gallery(label="图片画廊", columns=3, height=400)
    update_button = gr.Button("更新图片")
    
    # 绑定事件
    update_button.click(update_gallery, outputs=gallery)

demo.launch()

界面会显示一个包含多张图片的画廊。
用户可以通过点击图片进行预览或选择。
columns=3 设置了每行列数为 3，height=400 设置了画廊的高度。

3.gr.Image 示例

import gradio as gr

def show_image(image_path):
    return image_path

with gr.Blocks() as demo:
    image_input = gr.Image(label="上传图片", type="filepath")
    image_output = gr.Image(label="显示图片")
    submit_button = gr.Button("提交")
    
    # 绑定事件
    submit_button.click(show_image, inputs=image_input, outputs=image_output)

demo.launch()

用户可以上传一张图片，点击“提交”按钮后，图片会在右侧显示。
支持对单张图片的操作，例如缩放、裁剪等。

4.参数对比
(1) gr.Gallery 的参数
value ：初始图片列表（List[str] 或 List[PIL.Image]）。
columns ：每行列数（默认值为 1）。
height ：画廊的高度（单位为像素）。
object_fit ：图片的填充方式（如 “contain”、“cover”）。
(2) gr.Image 的参数
value ：初始图片路径（str）或 PIL 图像对象。
type ：指定图片类型（“filepath”、“numpy”、“pil”）。
tool ：图片编辑工具（如 “editor”、“select”、“sketch”）。
height 和 width ：设置图片的高度和宽度。

5.适用场景对比
(1) gr.Gallery 的典型场景
多图展示：需要同时展示多张图片，例如产品图片库、用户上传的照片集合。
图片选择：用户从多个选项中选择一张图片。
图片比较：用户需要对比多张图片的内容。
(2) gr.Image 的典型场景
单图展示：只展示一张图片，例如用户上传的头像、生成的图片结果。
图片编辑：用户可以对图片进行裁剪、旋转、标注等操作。
实时反馈：根据用户输入动态生成并展示图片。

提示：知道这些的作用就行，不需要反复看，在使用的时候将这个作为字典使用，方便操作。