如何使用plotly在google colab中返回交互式繪制矩形的坐標

Question

我是新來的。 我想在圖像上以交互方式繪制一些邊界框並將它們的坐標獲取到列表中（左上角，右下角）。 這應該在 google colab 中完成，所以 CV2 不起作用。 此鏈接提供了一個交互式選擇（拖動和繪制）圖像區域的示例，而此鏈接可用於使用 plotly 提取繪圖上的坐標。 我仍然無法弄清楚如何將這兩個示例組合在一起並返回邊界框坐標。 我在下面添加了這些代碼片段。

要在圖像上繪制邊界框：-

!wget https://gamingnewsanalyst.com/wp-content/uploads/2020/03/Crysis-3-Free-Download-800x450.jpg
import plotly.express as px
import cv2

img = cv2.cvtColor(cv2.imread('/content/Crysis-3-Free-Download-800x450.jpg'),cv2.COLOR_BGR2RGB)
fig = px.imshow(img)

fig.update_layout(
    dragmode='drawrect',
    newshape=dict(line_color='cyan'))
fig.show()

示例圖像

獲取鼠標點擊點的坐標：-

import plotly.graph_objects as go
from google.colab import output
output.enable_custom_widget_manager()

import numpy as np
np.random.seed(1)

x = np.random.rand(100)
y = np.random.rand(100)



f = go.FigureWidget([go.Scatter(x=x, y=y, mode='markers')])

scatter = f.data[0]
colors = ['#a3a7e4'] * 100
scatter.marker.color = colors
scatter.marker.size = [10] * 100
f.layout.hovermode = 'closest'


# create our callback function
def update_point(trace, points, selector):
    c = list(scatter.marker.color)
    s = list(scatter.marker.size)
    for i in points.point_inds:
        c[i] = '#bae2be'
        s[i] = 20
        print(points)
        with f.batch_update():
            scatter.marker.color = c
            scatter.marker.size = s


scatter.on_click(update_point)

f

當我單擊一個點時，此代碼將在輸出下方給出

Points(point_inds=[6],
       xs=[0.1862602113776709],
       ys=[0.015821242846556283],
       trace_name='trace 0',
       trace_index=0)

我的預期輸出應該是繪制的邊界框的坐標。

[[100,100],[500,400]]  ## [[x0,y0],[x1,y1]]
[[200,130],[400,300]]

任何幫助深表感謝。 提前致謝。

Answer 1

經過一番搜索，找到了這個例子，它告訴了如何做到這一點。 我對其進行了修改並部分插入到一個類中，如下所示以滿足我的全部要求。

import plotly.express as px
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
from jupyter_dash import JupyterDash
import cv2
import numpy as np

coords = []
depths = []

app = JupyterDash(__name__)

@app.callback(
    Output("bbox-data", "children"),
    Input("middle-sai", "relayoutData"),
    prevent_initial_call=True,
)
def on_new_annotation(relayout_data):

    global coords,depths
    if "shapes" in relayout_data:
        x0 = int(relayout_data["shapes"][-1]['x0'])
        y0 = int(relayout_data["shapes"][-1]['y0'])
        x1 = int(relayout_data["shapes"][-1]['x1'])
        y1 = int(relayout_data["shapes"][-1]['y1'])
        coords_dict = {'x0':x0,'y0':y0,'x1':x1,'y1':y1}
        coords.append([[y0,x0],[y1,x1]])
        depths.append(None)
        return html.Div([html.Div(str(coords_dict)),html.Div(dcc.RadioItems(['shallow', 'deep'],inline=True,id = "depth-sel"))],style={"color": "white"})

    else:
        return dash.no_update

@app.callback(
    Output('all-bboxes','children'),
    Input("depth-sel","value"),
)
def display_final_list(depth_val):
        global coords,depths

        if (depth_val == 'deep'):
            depths[-1] = 1
        elif (depth_val == 'shallow'):
            depths[-1] = 0
        flist = ''
        for i in range(len(coords)):
            flist += str(coords[i])
            if (depths[i]==1):
                flist += " deep "
            elif (depths[i]== 0):
                flist += " shallow "
            else:
                flist += " " + str(depths[i]) + " "
        return flist

class test_show():

  def __init__(self):
    global coords,depths
    coords = []
    depths = []
    self.img = cv2.cvtColor(cv2.imread('/content/Crysis-3-Free-Download-800x450.jpg'),cv2.COLOR_BGR2RGB)
    fig = px.imshow(self.img)

    fig.update_layout(
        autosize=False,
        # width=500,
        height=400,
        dragmode='drawrect',
        newshape=dict(line_color='cyan'))

    app.layout = html.Div(
        [
            dcc.Graph(id="middle-sai", figure=fig),
            html.Pre(id="bbox-data",style={"color": "white"}),
            html.Div(id='all-bboxes',style={"color": "white"}),
        ]
    )


  def show_image(self):
      app.run_server(debug=False,mode='inline')

t = test_show()
t.show_image()