本文介绍了如何在 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 函数。
专为中小型企业定制的网络办公软件,富有竞争力的十大特性： 1、独创 web服务器、数据库和应用程序全部自动傻瓜安装，建立企业信息中枢 只需3分钟。 2、客户机无需安装专用软件，使用浏览器即可实现全球办公。 3、集成Internet邮件管理组件，提供web方式的远程邮件服务。 4、集成语音会议组件，节省长途话费开支。 5、集成手机短信组件，重要信息可直接发送到员工手机。 6、集成网络硬
立即学习“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 之间数据传递的方法。虽然这种方法有一些限制，但它可以快速解决一些简单的前后端交互问题。在实际应用中，应根据具体需求选择合适的解决方案。
