✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🧬 Learn how to build RNA-Seq data apps with Python & Dash. Register for the May 20 Webinar!

Plotly Dash - Displaying an image in a basic dash, and refreshing this image as its file is rewritten

Hi there! I have been working on making a basic dash that displays an image I have saved locally. I have a script that periodically reruns this script every 5 or 10 minutes. This script is compiled into a function I have called main().

Below I have a small set of code which takes the output of the main() function, which is a JPG image saved in a folder (Its mentioned below as ‘Camera_Images/_WEBCAMS_full_montage.jpg’).

app = dash.Dash(image_filename=image_filename)

image_filename = 'Camera_Images/_WEBCAMS_full_montage.jpg' # replace with your own image
encoded_image = base64.b64encode(open(image_filename, 'rb').read())


app.layout = html.Div([
    html.Img(src='data:image/png;base64,{}'.format(encoded_image.decode()))
])

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

Currently, the way this works is the local server this dash creates is correctly generated, and correctly displays the JPG.

However, I want to periodically rerun the script that generates a new image (and rewrites over the same jpg… easy enough… I would just run the main() function on a while loop…) but ALSO have the dash redisplay the new image as its rewritten.

The issue I have had in my attempts is that once I get to:

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

The python script does not progress beyond this point. It gets ‘stuck’ after running the server so it doesn’t allow me to turn this into say a for loop that reruns the server and regenerates an image.

How would I go about this?