Is dash suitable for Computer vision dataset visualisation purpose?

Dash Python
1

Hello everyone,
I’m an ML engineer and a co-author of Ultralytics YOLOv8 python package. I’m currently working on building a dataset exploration API and I’m exploring solutions for building the complimentary dashboards for it.

The requirement:
I want to be able to display N number of images in a grid that allows scrolling, unlike matplotlib that has a fixed size.

The problem statement:
I’ve searched across a few stackoverflow answers and it seems like this isn’t a common use case. I didn’t find any examples or confirmations that dash would be a good candidate for this.
If anyone from the community can confirm that this is possible (and also point to an example if it exists), it’d be great!

Thanks!

2

Hi @AyushExel welcome to the forums.

It’s perfectly possible to create a grid of images. Currently I’m doing the same, showing results of a Image Segmentation. The predictions are shown on top of the original image.

What I will say tough, the loading time of your page increases with the number of images on the page. Specially if you are working with high resolution images this could get an issue.

I’m working with 3 grayscale images with dimensions of 1024x3250 and it’s still OK.

3

Thanks for your reply. My use case will probably have smaller imgs(640x640 or so) and they’ll all represented as simple numpy arrays to start with. Could you share your example when you’re done? Thanks :slight_smile:

4

Hmm, share an example of what? An app which shows images in a grid?

import dash
from dash import html, dcc
import dash_bootstrap_components as dbc
import plotly.graph_objs as go
import numpy as np

# create an image
img = np.random.randint(0, 255, size=(640, 640))

# grid shape (4 rows, 3 columns)
grid = np.zeros((4, 3))
rows, _ = grid.shape

content = []
for r in range(rows):
    row = grid[r, :]
    row_content = []
    for c in row:
        row_content.append(
            dbc.Col(
                # that is the actual content of the grid, in this case just one graph
                dcc.Graph(
                    figure=go.Figure(
                        data=go.Heatmap(z=img),
                        layout={
                            'width': 640,
                            'height': 640,
                            'xaxis': {'scaleanchor': 'y'}
                        },
                    )
                )
            )
        )
    dbc_rows = dbc.Row(
        children=row_content,
        justify='center',
    )
    content.append(dbc_rows)

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = html.Div(
    [
        dbc.Container(
            id='container',
            children=content,
            fluid=True
        ),
    ]
)

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

mred layout grid

5

Well yeah but I wanna see how the scroll screen would look like. In matplotlib the area is fixed and img get smaller. I want something where the size of imgs is fixed but the window allows scrolling

6

Just edited my post from above :wink:

7

Hello @AIMPED, @AyushExel,

You could use AG grid with an infinite scroll to decrease the load size of everything.

As long as the data is simple, I don’t think there will be much load time variance when scrolling.

2 Likes
8

Awesome guys! Thanks for your responses. I’ll get to work now and let you know if I face any problems.