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)