How to show an image and render some polygon over it with Dash?

Hi,

I’m building a Dash app to show the inference result of an object detection model. More specifically, I want to show the source image and then render the detected bounding boxes (i.e. polygons) on top of the image.

I think it should be possible to do it with Dash, but could not find any ready-to-use recipe when searched online. Can someone kindly give me some pointers? Thanks.

You could use openCV to draw a polygon on an image and return that to a html.img component as a base64 object.
Or you could use plotly’s graphing libraries (imshow, shapes, scatter traces) like in the example below.
I’m using openCV to open the image but you should be able to pass the data from the library you are using to perform the analysis.

import dash
from dash import dcc
from dash import html
import plotly.express as px
import plotly.graph_objects as go
import cv2

# Get this image from: https://unsplash.com/photos/-81lVsfM4gQ
img_fn = 'tran-mau-tri-tam--81lVsfM4gQ-unsplash.jpg'

# use openCV to open the image (or whatever other library)
im = cv2.imread(img_fn)
img = cv2.cvtColor(im, cv2.COLOR_BGR2RGB)
# use plotly to plot
xc=295
yc=146
w=100
h=100
fig = px.imshow(img, binary_string=True)
fig.add_trace(
    go.Scatter(
        x=[xc + xi for xi in [w//2, 0, -w//2, 0, w//2]],
        y=[yc + yi for yi in [0, -h//2, 0, h//2, 0]],
        mode='lines'
    )
)


app = dash.Dash(__name__)

app.layout = html.Div([
    html.Div(children='''
        Drawing on an image and showing it in a Dash App
    '''),
    dcc.Graph(
        id='my_graph',
        figure=fig
    ),
    html.Div(
        id='my_image_div',
    ),
    html.A('Photo by Tran Mau Tri Tam', href="https://unsplash.com/@tranmautritam?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText")
])


if __name__ == '__main__':
    app.run_server(debug=True)

1 Like

Great. Thanks.