Creating a mouse interaction app in Hugging Face

🔒 Gradio
1

I want to implement interactive point selection using the mouse in gradio.image and display the coordinates in real-time on the image. Is there any way to achieve this? Here is my code: # Used to implement interactive point selection and display the image coordinates of the point in real-time.
I have already built a similar function in my local environment, but I want to implement it on Hugging Face.

def onclick(event):

ax.clear()
ax.imshow(image)
ax.scatter(event.xdata, event.ydata, s=100, color='red')
plt.draw()
x_slider.value = event.xdata
y_slider.value = event.ydata
pointx.append(x_slider.value)
pointy.append(y_slider.value)
print(pointx)

Update the position of the point when slider values are changed

def on_value_change(change):
ax.clear()
ax.imshow(image)
ax.scatter(x_slider.value, y_slider.value, s=100, color=‘red’)
# plt.draw()

%matplotlib widget
pointx=
pointy=
fig, ax = plt.subplots(figsize=(8,6))
ax.imshow(image)
plt.axis(‘off’)

Initialize the slider variables with the coordinates of the center of the picture

x_slider = widgets.FloatSlider(min=0, max=image.shape[1], step=1,description=‘X:’, value=image.shape[1] // 2)
y_slider = widgets.FloatSlider(min=0, max=image.shape[0], step=1,description=‘Y:’, value=image.shape[0] // 2)
x_slider.observe(on_value_change, names=‘value’)
y_slider.observe(on_value_change, names=‘value’)
cid = fig.canvas.mpl_connect(‘button_press_event’, onclick)

2

Thank you so much for sharing these type of information related to mouse, so if any one check his mouse speed then click on mouse speed