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. 代码说明
custom_js: 这是自定义的JavaScript代码，用于定义 triggerButton 函数。当点击自定义的HTML按钮时，triggerButton 函数会模拟点击Gradio的按钮。
Gradio按钮: 使用 gr.Button 创建Gradio按钮，并为其分配 elem_id 为 "gradio_button"。
自定义HTML按钮: 使用 gr.HTML 插入自定义的HTML按钮，并设置点击时调用 triggerButton 函数。
事件绑定: 使用 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 οnclick="triggerButton()"><svg t="1723284361620" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p- 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 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> 代码解释：
display: flex; justify-content: center; align-items: center;:
.centered-button 中使用 flexbox 布局，将按钮中的内容（即 SVG 图标）水平和垂直居中。 svg 标签:
width="24px" 和 height="24px"：设置SVG图标的宽高为24px。 fill="currentColor"：SVG的填充颜色将继承按钮的文本颜色，这样当你改变按钮的颜色时，SVG图标颜色也会随之变化。 .centered-button svg 样式:
运行效果：
按钮会在页面中居中显示，按钮中的矢量图标也会在按钮内部居中显示，并且图标的大小可以根据需要进行调整。
总结
### 文章总结本篇文章介绍了如何通过自定义HTML按钮来触发Gradio框架中按钮的点击事件，以及如何通过CSS实现按钮及其内部SVG图标的居中显示。以下为主要内容的总结：
#### 一、功能实现
- 使用JavaScript定义一个`triggerButton`函数，该函数通过`document.getElementById("gradio_button").click();`模拟点击指定ID的Gradio按钮。
- 使用`gr.HTML`组件插入自定义HTML按钮，并为该按钮设置`onclick`事件，以调用上述JavaScript函数。
- 创建Gradio按钮，为其设置`elem_id="gradio_button"`，以便被自定义按钮模拟点击。
- 通过`action_button.click`方法绑定Gradio按钮的点击事件，实现当用户通过自定义按钮触发Gradio按钮时，能够执行定义的操作。
#### 二、代码示例
- **基本示例**：展示了如何通过自定义JavaScript和HTML代码实现上述功能。
- **自定义示例**：在基础功能上进一步扩展，包括自定义CSS样式和按钮图标（SVG格式），以及隐藏真实的Gradio按钮而仅显示自定义的且具有图标的按钮。
#### 三、样式定制
- **按钮样式**：通过CSS的flex布局和`display: flex; justify-content: center; align-items: center;`实现了按钮内容的完全居中对齐。
- **SVG图标样式**：为SVG图标设置了固定的宽高（如24px），并通过`fill="currentColor"`使其自动继承父元素的文本颜色。
- **示例HTML**：独立HTML示例展示了如何在一个完整的HTML文档中实现具有居中对齐SVG图标的按钮。
### 运行效果
- 当用户访问Gradio应用时，会看到一个或多个自定义的HTML按钮和一个Gradio文本框。
- 用户点击自定义按钮时，虽然不能直接看到Gradio按钮的动作，但绑定的函数会在文本框中显示相应的结果，表明Gradio按钮的点击事件已被触发。
- 自定义按钮的外观（包括大小和图标）通过CSS进行了定制，确保了良好的用户体验和视觉效果。
### 总结
本文通过示例代码和详细的解释展示了如何结合JavaScript、CSS和Gradio框架来创建一个用户界面交互，其中包括使用自定义HTML按钮触发Gradio按钮的点击事件，并通过CSS实现按钮和SVG图标的居中显示。这种方法有助于扩展Gradio工具的能力，使用户界面更加灵活和个性化。 gradiohtml自定义svgcliscriptcsssvg图标javaiconjavascriptactiondoc矢量图tpupngicons矢量图标用户界面web
