240811-Gradio动态监测鼠标在网页中的位置坐标

A. 最终效果

B. 完整代码

import gradio as gr# 自定义的 JavaScript，用于捕捉鼠标移动事件并显示坐标
custom_js = """
<script>
document.addEventListener("mousemove", function(event) {const x = event.pageX;const y = event.pageY;document.getElementById("mouse-coordinates").innerText = `X: ${x}, Y: ${y}`;
});
</script>
"""# Gradio 应用
with gr.Blocks(head=custom_js) as demo:# 文本框用于显示鼠标坐标textbox = gr.Textbox(label="Mouse Coordinates",elem_id="mouse-coordinates")demo.launch(inbrowser=True)

C. 代码解释

这段代码使用了Gradio库来创建一个简单的Web应用，该应用可以捕捉鼠标移动事件并显示鼠标的坐标。

首先，我们导入了Gradio库：

import gradio as gr

然后，我们定义了一个自定义的JavaScript函数，用于捕捉鼠标移动事件并显示鼠标的坐标：

custom_js = """
<script>
document.addEventListener("mousemove", function(event) {const x = event.pageX;const y = event.pageY;document.getElementById("mouse-coordinates").innerText = `X: ${x}, Y: ${y}`;
});
</script>
"""

在这个JavaScript函数中，我们使用document.addEventListener来监听mousemove事件，即鼠标移动事件。当鼠标移动时，我们获取鼠标的页面X坐标和Y坐标，并将它们显示在一个文本框中。

接下来，我们创建了一个Gradio应用，并将自定义的JavaScript函数添加到应用的头部：

with gr.Blocks(head=custom_js) as demo:

然后，我们创建了一个文本框，用于显示鼠标的坐标：

textbox = gr.Textbox(label="Mouse Coordinates",elem_id="mouse-coordinates")

最后，我们启动了Gradio应用：

demo.launch(inbrowser=True)

inbrowser=True参数表示在浏览器中打开Gradio应用。