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.
from dash import dcc
from dash import html
import plotly.express as px
import plotly.graph_objects as go
# 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
fig = px.imshow(img, binary_string=True)
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]],
app = dash.Dash(__name__)
app.layout = html.Div([
Drawing on an image and showing it in a Dash App
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__':