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

已于 2024-08-10 21:24:32 修改
阅读量2.9k 收藏 21
点赞数 16
分类专栏： Gradio LLM GUI 文章标签： Gradio LLM AIGC 前端
于 2024-08-10 21:20:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33039859/article/details/141094188
版权

A. 最终效果

在这里插入图片描述

B. 参考代码

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

import gradio as gr

# 自定义的 JavaScript，用于捕捉按钮点击并触发 Gradio 按钮的 click 事件
custom_js = """
<script>
function triggerButton() {
    document.getElementById("gradio_button").click();
}
</script>
"""

# Gradio 应用
with gr.Blocks(head=custom_js) as demo:
    # Gradio 按钮
    action_button = gr.Button(value="Gradio Button", elem_id="gradio_button")
    
    # 自定义 HTML 按钮
    custom_html = """
    <button οnclick="triggerButton()">Custom HTML Button</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 = """
<script>
function triggerButton() {
    document.getElementById("gradio_button").click();
}
</script>
"""

# 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 = """
    <div class="button-container">
    <button class="centered-button" οnclick="triggerButton()"><svg t="1723284361620" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6820" width="32" height="32"><path d="M747.4 535.7c-0.4-68.2 30.5-119.6 92.9-157.5-34.9-50-87.7-77.5-157.3-82.8-65.9-5.2-138 38.4-164.4 38.4-27.9 0-91.7-36.6-141.9-36.6C273.1 298.8 163 379.8 163 544.6c0 48.7 8.9 99 26.7 150.8 23.8 68.2 109.6 235.3 199.1 232.6 46.8-1.1 79.9-33.2 140.8-33.2 59.1 0 89.7 33.2 141.9 33.2 90.3-1.3 167.9-153.2 190.5-221.6-121.1-57.1-114.6-167.2-114.6-170.7z" p-id="6821"></path><path d="M642.3 230.7c50.7-60.2 46.1-115 44.6-134.7-44.8 2.6-96.6 30.5-126.1 64.8-32.5 36.8-51.6 82.3-47.5 133.6 48.4 3.7 92.6-21.2 129-63.7z" p-id="6822"></path></svg> SVG-Icon
    </button>
    </div>

    """

    # 显示自定义按钮
    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 SVG</title>
    <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图标的大小，使其适合按钮，并确保其在按钮中居中。

运行效果：

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

开源模型应用落地-Gradio正确集成Fastapi-助力模型交互-实践篇（二）
没有卑微的工作，只有卑微的心态，与其抱怨，不如埋头实干
05-22 1万+
Gradio与Fastapi正确集成，qwen1.5-7b-chat模型实践，同时提供界面交互和接口服务两种能力
gradio常用组件
m0_46926492的博客
08-11 2262
输入组件变化，对应的下拉框显示的值也变化。输入组件变化，输出组件也变化。
Gradio中Button用法及事件监听器click方法使用
weixin_45729192的博客
06-04 2047
功能很简单，就是一个添加一个按钮，并给这个按钮添加一个监听器，实现click方法（我一个后端搞起了前端，以后请叫我全栈）。
【gradio】使用Gradio快速开发前端界面：基础知识
最新发布
放纵小开爱的博客
03-20 1477
在机器学习和深度学习项目中，模型的部署和展示往往是一个重要的环节。然而，传统的前端开发流程可能对数据科学家或算法工程师来说过于复杂。Gradio 是一个轻量级的 Python 库，能够帮助开发者快速构建交互式的前端界面，用于展示模型的功能或进行简单的数据处理。下面将零帧起手，学习Gradio 的基础知识，并通过一个简单的示例掌握其用法。我将所学内容汇总于这个专栏。Gradio 是一个开源的 Python 库，专为机器学习和数据科学项目设计。允许用户通过几行代码快速创建交互式界面，无需任何前端开发经验。
修改Gradio界面中按钮Submit、Clear，Flag为中文，修改additional_inputs标签。
m0_60350022的博客
04-02 1789
修改gradio库中interface.py
Gradio 如何修改 运行界面原组件的 css 样式？
weixin_56684524的博客
07-19 2168
通过 自己写 css 文件 改变 gradio 原组件的 样式。
button渐变色 ios_iOS实现渐变按钮Gradient Button的方法示例
weixin_33980343的博客
01-26 163
GradientCategory使用category实现gradient简介本例主要采用了类别来实现了给按钮设置渐变色的功能当然，里边也有一些别的对比实现方法.各位看官如有发现什么bug，请批评指正！效果图来看.h文件#import typedef NS_ENUM(NSInteger, GradientType) {GradientFromTopToBottom = 1, //从上到下Grad...
Gradio中button组件的基本使用
weixin_45920955的博客
03-09 5919
Gradio中的button组件是用于在页面中放置按钮的组件，是最常用的组件之一。其常用于一些点击事件的实现，具体需要通过其组件的click事件实现，但是在使用时又与写传统前端代码时的click实现不太一样。简单来说，前端代码中点击按钮要实现的东西（包含其他组件值的变化）基本都写在点击触发的函数中，但是gradio中button组件的click事件中的函数只做值的处理，改变其他组件的值或属性（呈现结果）是通过函数的输出来控制。
PyTorch-Gradio-APP-master.zip
07-01
使用PyTorch MLP实现手写数字的Gradio APP
Gradio-Tools+LLM-Agents
11-04
使用gradio_tools的方法很简单，只需从库gradio_tools导入所需的工具，并将它们传递给LangChain的initialize_agent方法即可。如下例所示，我们从预构建工具集中分别导入StableDiffusionPromptGeneratorTool、...
目标检测服务-基于Gradio搭建的YOLOv8目标检测服务-附项目源码+流程教程-优质项目实战.zip
08-21
目标检测服务_基于Gradio搭建的YOLOv8目标检测服务_附项目源码+流程教程_优质项目实战
gradio之js举例
daxiashangxian的博客
08-10 514
就是把script部分写在head，放在block的head参数里。html里面的script去掉还是不去掉gradio都能执行。
gradio中的button.click是如何链接事件函数的
weixin_51021060的博客
11-08 610
在我自己的项目中，我困惑于gradio UI中点击了按钮之后如何返回多个输出结果。本文来源于我自己探索使用的小案例，说明了gradio（python）中如何将点击按钮链接到具体函数上的方法。在这个例子中，因为我希望如果发生系统错误，直接显示错误信息内容，而不显示计算结果，所以在事件函数的定义中，except return的后面两个内容需要用。建议大家把代码拷贝到自己的环境中，然后尝试修改代码来尝试。当我输入的内容为数字时，输出正常的结果。首先定义了点击按钮要执行的函数，是一个数组，数量和内容内容。
gradle3.0多渠道打包，自动签名，自定义文件名，应用名称，应用图标
Yzw_92_4_11的博客
12-11 1585
1.自动打包         android studio打包apk有两种方式：手动打包和自动打包，这里只介绍自动打包： 首先在app级别的build.gradle文件中的android标签下加入如下代码：              然后在加入如下代码：              配置完成后就可以通过命令行自动打包签名了，在Termainal中输入：gradlew assembleRe...
Gradio的重要函数以及一些代码示例学习（一）
素质云笔记
10-20 1万+
gradio的学习笔记
Gradio学习笔记--Gradio基本用法和简单案例
牵一只蜗牛去散步
05-04 1万+
其中输入和输出的组件都为 Image， 输入组件通过 gr.Image() 来设置其shape，即会对输入图片进行crop或resize的操作；上述案例定义了一个按钮 greet_btn，当点击按钮时会执行 greet 函数，函数的输入和输出均为 gr.Textbox() 类型，即字符串类型，其 label 分别注明 box 的名称；可通过 gr.Textbox() 来细化输入的组件 inputs，这里设置了输入框的行数为2，提示词为 Name Here...；2--Hello World案例。
android button属性
热门推荐
岳旭宁博客专栏
12-27 4万+
android:autoLink setAutoLinkMask(int)控制链接网址和电子邮件地址等是否自动发现并转换为可点击的链接。 android:autoText setKeyListener(KeyListener)如果设置,指定该TextView文本输入法和自动纠正一些常见的拼写错误android:bufferType setText(CharSequence TextView.
Gradio入门详细教程
githubcurry
12-15 5353
fn=greet,# 自定义输入框# 具体设置方法查看官方文档要获得额外的样式功能，您可以设置行内css属性将任何样式给应用程序。如下所示。#修改blocks的背景颜色。
Gradio的web界面演示与交互机器学习模型，主要特征《2》
深度学习领域优质创作者，CSDN博客专家
05-08 3128
gradio里面更详细的用法，自定义错误、样式、队列、进度条、批处理等等的处理
gradio的button按钮中，设置按钮风格
08-07
在Gradio中，你可以通过`style`参数来定制`gr.Button`组件的样式。`style`属性允许你控制按钮的一些外观特性，比如颜色、大小、圆角等。例如，如果你想创建一个带有自定义背景颜色的按钮，你可以这样做： ```python import gradio as gr def custom_button(text): return gr.Button(text=text, style={"background-color": "#FF0000", "padding": "10px 20px"}, value=text) custom_button_ui = gr.Interface(custom_button, input_type=gr.inputs.Textbox(), output_type=None) custom_button_ui.launch() ``` 这里，`"#FF0000"`是一个十六进制颜色代码，代表红色。你可以替换为你喜欢的颜色代码，并根据需要调整其他的样式属性，如字体、边框等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

GuokLiu

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值