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

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

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

解决方案

该方案的核心思想是：

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

示例代码

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

百度文心百中

百度大模型语义搜索体验中心

22

查看详情

立即学习“Java免费学习笔记（深入）”；

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 代码中查找该元素。

注意事项

• 数据安全： 这种方法不适用于传递敏感信息，因为文本框的值是可以在客户端查看的。
• 错误处理： JavaScript 代码中应包含错误处理逻辑，以防止因元素未找到等原因导致程序崩溃。
• 复杂数据： 如果需要传递复杂的数据结构，可以将数据序列化为 JSON 字符串，然后在 Python 代码中进行反序列化。
• 替代方案： 对于更复杂的需求，可以考虑创建自定义 Gradio 组件，这样可以更直接地控制 JavaScript 和 Python 之间的交互。

总结

本文介绍了一种利用隐藏文本框和 Gradio change 事件，实现 JavaScript 和 Python 之间数据传递的方法。虽然这种方法有一些限制，但它可以快速解决一些简单的前后端交互问题。在实际应用中，应根据具体需求选择合适的解决方案。

以上就是使用 Gradio 中的自定义 JavaScript 事件处理程序的详细内容，更多请关注php中文网其它相关文章！