Plotly dash - Dynamically displaying a ndarray image - python-3.x

Question

Context : I'm trying to create a simple image processing application using Plotly Dash. It has to be able to display images and execute some operations on the image while updating the image's display. The image will either be generated on the fly or uploaded to the application.
The images are in the numpy ndarray format because my processing is based on numpy and matplotlib operations that use such format.
Question : What are the Python code that allows to display a ndarray while being able to update it by some GUI operation ?
I'm basically searching the closest thing that dash can offer to a matplotlib.pyplot.imshow()
Research : In my research, I've found this repository which probably incorporate all the basic features I need to start working, but as a beginner in Plotly Dash I struggle to extract the code I need, and it seems it doesn't use numpy either.
I've found this question, which is very close to what I'm asking, but the only answer does not incorporate numpy arrays.

Answer 1

I've found a solution, with Flask.Response and the src parameter of html.Img, and openCV for the image encoding :
import dash
import dash_core_components as dcc
import dash_html_components as html
import cv2
from flask import Flask, Response
import numpy as np
import time
def get_image(seed=0):
# strip slide
size = 400
res = np.mod((np.arange(size)[..., None] + np.arange(size)[None, ...]) + seed, [255])
ret, jpeg = cv2.imencode('.jpg', res)
return jpeg.tobytes()
def gen():
i = 0
while True:
time.sleep(0.03333)
frame = get_image(i)
yield (b'--frame\r\n'
b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n\r\n')
i += 1
server = Flask(__name__)
app = dash.Dash(__name__, server=server)
#server.route('/video_feed')
def video_feed():
return Response(gen(),
mimetype='multipart/x-mixed-replace; boundary=frame')
app.layout = html.Div([
html.H1("Webcam Test"),
html.Img(src="/video_feed")
])
if __name__ == '__main__':
app.run_server(debug=True)
Result :
On the browser, the strips are slowly moving, I guess a gif would've made a better demonstration.
Careful to not send too much images per second, or you'll overflow the application and the browser and they'll eventually crash. So use time.pause or other equivalent limiter in the generator loop.
Tough, I'm still intrested on how other people would do that. One drawback with this solution is that I think that the users would have to share the same display, defined at the path /video_feed.