A. 最终效果

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

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)
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.

C. 代码解释

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

首先，我们导入了Gradio库：

import gradio as gr
  • 1.

然后，我们定义了一个自定义的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>
"""
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.

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

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

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

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

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

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

demo.launch(inbrowser=True)
  • 1.

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