240810-Gradio自定义Button按钮+事件函数+按钮图标样式设定

A. 最终效果

B. 参考代码

要通过自定义HTML按钮来触发Gradio自带按钮的 click 函数，你可以使用JavaScript来模拟点击Gradio的按钮。这里是一个示例代码，展示了如何实现这一点：

import gradio as gr

# 自定义的 JavaScript，用于捕捉按钮点击并触发 Gradio 按钮的 click 事件
custom_js = """

function triggerButton() {
    document.getElementById("gradio_button").click();
}

"""

# Gradio 应用
with gr.Blocks(head=custom_js) as demo:
    # Gradio 按钮
    action_button = gr.Button(value="Gradio Button", elem_id="gradio_button")
    
    # 自定义 HTML 按钮
    custom_html = """
    Custom HTML Button
    """
    
    # 显示自定义 HTML 按钮
    gr.HTML(custom_html)
    
    # 文本框用于显示点击结果
    textbox = gr.Textbox()
    
    # 绑定 Gradio 按钮点击事件
    action_button.click(lambda: "Gradio Button Clicked!", None, textbox)
    
demo.launch()

C. 代码说明

1. custom_js: 这是自定义的JavaScript代码，用于定义 triggerButton 函数。当点击自定义的HTML按钮时，triggerButton 函数会模拟点击Gradio的按钮。

2. Gradio按钮: 使用 gr.Button 创建Gradio按钮，并为其分配 elem_id 为 "gradio_button"。

3. 自定义HTML按钮: 使用 gr.HTML 插入自定义的HTML按钮，并设置点击时调用 triggerButton 函数。

4. 事件绑定: 使用 action_button.click 方法绑定按钮的点击事件，将结果输出到文本框。

运行这段代码后，你会看到一个Gradio生成的按钮和一个自定义的HTML按钮。当点击自定义HTML按钮时，Gradio按钮的 click 事件会被触发，文本框会显示相应的结果。

D. 自定义代码

import gradio as gr


custom_css = """
body, html {
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    box-sizing: border-box;
}
.button-container {
    width: 100%;
    max-width: 400px; /* 可调整最大宽度 */
}
.centered-button {
    width: 100%;
    border: 2px solid gray;
    border-radius: 12px;
    padding: 10px;
    background-color: white;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}
.centered-button svg {
    width: 24px;
    height: 24px;
}
"""

# 自定义的 JavaScript，用于捕捉按钮点击并触发 Gradio 按钮的 click 事件
custom_js = """

function triggerButton() {
    document.getElementById("gradio_button").click();
}

"""

# Gradio 应用
with gr.Blocks(head=custom_js, css=custom_css) as demo:
    with gr.Row():
        with gr.Column():
            # 输入文本
            input = gr.Textbox(label='Input')
        with gr.Column():
            # 输出文本
            output = gr.Textbox(label='Output')
    # 默认带icon的按钮
    default_button1 = gr.Button(
        icon='https://img.icons8.com/ink/48/linux.png', value='Web-Icon')
    default_button2 = gr.Button(
        icon='icons8-windows-ios-17-glyph-32.png', value='Local-Icon')
    # 隐藏真实按钮
    action_button = gr.Button(value="Gradio Button",
                              elem_id="gradio_button", visible=False)

    # 自定义 HTML 按钮
    custom_html = """
    

     SVG-Icon
    
    

    """

    # 显示自定义按钮
    gr.HTML(custom_html)

    # 绑定 Gradio 按钮点击事件
    action_button.click(lambda x: f"Hello, {x}.", input, output)

demo.launch(inbrowser=True)

E. 样式说明

要让按钮中的矢量图居中，你可以使用 display: flex 和 align-items: center、justify-content: center 来实现水平和垂直居中对齐。以下是一个包含矢量图（例如一个简单的SVG图标）的按钮，图标将居中显示：

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    meta name="viewport" content="width=device-width, initial-scale=1.0">
    title>Centered Button with SVGtitle>
    style>
        body, html {
            height: 100%;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 10px;
            box-sizing: border-box;
        }
        .button-container {
            width: 100%;
            max-width: 400px; /* 可调整最大宽度 */
        }
        .centered-button {
            width: 100%;
            border: 2px solid gray;
            border-radius: 12px;
            padding: 10px;
            background-color: white;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
        }
        .centered-button svg {
            width: 24px;
            height: 24px;
        }
    style>
head>
body>

div class="button-container">
    button class="centered-button">
        svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            g transform-origin="center" transform="scale(1)">
                path d="M12 0C6.486 0 2 4.486 2 10C2 15.514 6.486 20 12 20C17.514 20 22 15.514 22 10C22 4.486 17.514 0 12 0zM12 18C7.589 18 4 14.411 4 10C4 5.589 7.589 2 12 2C16.411 2 20 5.589 20 10C20 14.411 16.411 18 12 18zM12 5C10.346 5 9 6.346 9 8C9 9.654 10.346 11 12 11C13.654 11 15 9.654 15 8C15 6.346 13.654 5 12 5zM12 13C10.346 13 9 14.346 9 16C9 17.654 10.346 19 12 19C13.654 19 15 17.654 15 16C15 14.346 13.654 13 12 13z" fill="currentColor"/>
            g>
        svg>
    button>
div>

body>
html>

代码解释：

1. display: flex; justify-content: center; align-items: center;:

   • 这行代码在 .centered-button 中使用 flexbox 布局，将按钮中的内容（即 SVG 图标）水平和垂直居中。

2. svg 标签:

   • 这是一个简单的圆形图标示例。你可以替换为任何你想要的矢量图标。
   • width="24px" 和 height="24px"：设置SVG图标的宽高为24px。
   • fill="currentColor"：SVG的填充颜色将继承按钮的文本颜色，这样当你改变按钮的颜色时，SVG图标颜色也会随之变化。

3. .centered-button svg 样式:

   • 控制SVG图标的大小，使其适合按钮，并确保其在按钮中居中。

运行效果：

按钮会在页面中居中显示，按钮中的矢量图标也会在按钮内部居中显示，并且图标的大小可以根据需要进行调整。

文章来源于互联网:240810-Gradio自定义Button按钮+事件函数+按钮图标样式设定

相关推荐: Stable Diffusion 入门实操篇

一、了解 SD 与哩布哩布 1. SD简介 SD全称为 Stable Diffusion，与 Midjourney（MJ）一样，也是一款AI绘画软件，SD 的核心原理是潜在扩散模型（LDM），通过该技术，SD能够将原始图像转化为噪声图像，然后逐渐去除噪声，生成…