当前位置：首页 > 文章列表 > 文章 > python教程 > Gradio自定义JS事件教程详解

Gradio自定义JS事件教程详解

2025-09-24 19:24:32 0浏览收藏

想要在Gradio应用中实现更灵活的前后端交互吗？本文将带你掌握Gradio自定义JS事件处理的技巧，让你轻松实现JavaScript与Python代码的无缝衔接。通过在Gradio应用中嵌入JavaScript代码，我们可以监听特定事件，例如图像点击，并将事件数据（如点击坐标）传递回Python函数进行处理。本文将介绍一种巧妙的方法，利用隐藏文本框作为桥梁，实现JavaScript和Python之间的数据传递。文中提供详细的代码示例，演示如何监听图像点击事件，并将点击坐标传递给Python函数进行处理，从而实现更强大的Gradio应用功能。无论你是Gradio新手还是经验丰富的开发者，都能从中获益。

使用 Gradio 中的自定义 JavaScript 事件处理程序

本文介绍了如何在 Gradio 应用中使用自定义 JavaScript 事件处理程序与 Python 代码进行交互。通过在 Gradio 应用中嵌入 JavaScript 代码，监听特定事件，并将事件数据传递回 Python 函数，实现更灵活的前后端交互。本文提供了一个具体示例，展示了如何监听图像点击事件，并将点击坐标传递给 Python 函数进行处理。

在 Gradio 应用中，有时我们需要利用 JavaScript 监听特定事件，并将事件数据传递回 Python 代码进行处理。虽然 Gradio 提供了自定义 JavaScript 的功能，但直接将 JavaScript 事件数据传递到 Python 函数并非易事。本文将介绍一种利用隐藏的文本框作为桥梁，实现 JavaScript 和 Python 之间数据传递的方法。

解决方案

该方案的核心思想是：

JavaScript 事件监听： 在 JavaScript 中监听目标事件（例如，按钮点击、图像点击等）。
修改隐藏文本框的值： 当事件触发时，JavaScript 代码将事件数据写入一个隐藏的文本框。
Gradio change 事件： 利用 Gradio 文本框的 change 事件，当文本框的值发生变化时，触发一个 Python 函数。
Python 函数处理数据： Python 函数接收文本框的值，并进行相应的处理。

示例代码

以下代码演示了如何监听图像点击事件，并将点击坐标传递给 Python 函数。

import gradio as gr

script = """
function setupClick() {
    console.log("BEFORE");
    const video = document.getElementById("video_feed");
    const textbox = document.getElementById("output_box");


    if (!video) {
        console.log("Required elements not found.");
        return;
    }

    const boundingBox = video.getBoundingClientRect();

    const outputBox = document.querySelector("#real_box textarea")

    video.addEventListener("click", function handleClick(event) {
        console.log("Got click: ", event);
        const relativeX = event.clientX - boundingBox.left;
        const relativeY = event.clientY - boundingBox.top;

        const message = `Clicked at X: ${Math.round(relativeX)} Y: ${Math.round(relativeY)}`;
        console.log(message);

        outputBox.value = message;
        let event2 = new Event("input")
        outputBox.dispatchEvent(event2);




    }, false);

    console.log("AFTER");

    return 'Animation created';
}
"""


def handle_click(x=0, y=0):
    return f"Received from JS: X={x}, Y={y}"


def handle_textbox_change(text):
    return "Received from JS: " + text


with gr.Blocks(js=script) as demo:
    gr.Markdown("Click on the image to trigger a Python function")
    output = gr.Textbox(label="Response from Python", elem_id="real_box")

    textbox = gr.Textbox(elem_id="output_box")
    textbox.change(fn=handle_textbox_change, inputs=textbox, outputs=output)

    # Add a visible image to click on
    img = gr.Image(value="test_images/frog.jpg", elem_id="video_feed")

demo.launch()

代码解释：

script 变量： 包含 JavaScript 代码的字符串。
- setupClick 函数：在页面加载后执行，用于设置点击事件监听器。
- 获取 video_feed 元素（图像）和 output_box 元素（隐藏文本框）。
- 为 video_feed 元素添加点击事件监听器。
- 在点击事件处理函数中，计算相对于图像的点击坐标。
- 将坐标信息写入 output_box 文本框。
- 手动触发 input 事件，以便 change 事件可以被监听到。
handle_textbox_change 函数： Python 函数，当 textbox 的值发生变化时被调用。
- 接收 textbox 的值（包含点击坐标信息）。
- 返回一个包含接收到的信息的字符串。
gr.Blocks： 定义 Gradio 界面。
- js=script：将 JavaScript 代码嵌入到 Gradio 应用中。
- gr.Textbox(elem_id="output_box")：创建一个隐藏的文本框，用于接收 JavaScript 传递的数据。elem_id 用于在 JavaScript 代码中查找该元素。
- textbox.change(fn=handle_textbox_change, inputs=textbox, outputs=output)：当 textbox 的值发生变化时，调用 handle_textbox_change 函数，并将 textbox 的值作为输入传递给该函数。函数的输出将显示在 output 文本框中。
- gr.Image(elem_id="video_feed")：创建一个图像，用于监听点击事件。elem_id 用于在 JavaScript 代码中查找该元素。