Package: dash-dynamic-images
dash-dynamic-imagesA library that helps with embedding dynamic and generative images into Plotly Dash applications.Setting up1. Install thedash-dynamic-imagespython packagepip install dash-dynamic-images2. Add anhtml.Imgelement to your page's layoutThis step does not differ in any way from the regular process of writing layouts for Dash applications.importdash_html_componentsashtml...app.layout=html.Div(children=[html.Img(id='image'),...dcc.Input(id='x',type='number',value=10),dcc.Input(id='y',type='number',value=10)])3. Create animage_callbackthat serves your dynamic imageYou can useimage_callbackdecorator to create callbacks that return dynamic images. It works similarly to the standard Dashcallbackdecorator, but with few notable differences:The first argument of the decorator should be an instance of theDashobject.The callback should have only one output, pointing at thesrcproperty of anImglayout element.The decorated function should return aPIL.Image.Imageobject (from thePillowpython library).fromdash_dynamic_imagesimportimage_callbackfromPILimportImage,ImageDraw...@image_callback(app,dash.Output('image','src'),dash.Input('x','value'),dash.Input('y','value'))defgenerate_image(x,y):image=Image.new('RGB',(200,200),color=(0,0,200))ImageDraw.Draw(image).line([(0,0),(x,y)],width=5)returnimageAs long as the returned object is a Pillow image, it does not matter on how was it create. You can generate it from scratch or obtain it from an external provider.importrequests...@image_callback(app,dash.Output('image','src'),dash.Input('button','n_clicks'))defgenerate_image(_):response=requests.get('https://your_service.example/api/images/get')returnImage.open(BytesIO(response.content))Please consult thePillowdocumentation for more details.4. Enjoy the working applicationA complete example of an application:importdashimportdash_core_componentsasdccimportdash_html_componentsashtmlfromdash_dynamic_imagesimportimage_callbackfromPILimportImage,ImageDrawapp=dash.Dash()app.layout=html.Div(children=[html.Img(id='image'),dcc.Input(id='x',type='number',value=10),dcc.Input(id='y',type='number',value=10)])@image_callback(app,dash.Output('image','src'),dash.Input('x','value'),dash.Input('y','value'))defgenerate_image(x,y):image=Image.new('RGB',(200,200),color=(0,0,200))ImageDraw.Draw(image).line([(0,0),(x,y)],width=5)returnimageif__name__=='__main__':app.run_server(debug=True)How it worksWhenever animage_callbackis registered, the library performs two operations:It registers aflaskroute with a path of/image_generator/{unique_guid}.pngthat generates and serves images whenever invoked.It registers a standardDashcallback that produces and returns a parametrized (through the query string) image url based on theimage_callbackinput values.In practice, whenever one of theimage_callbackinput parameters change, a new url is generated and inserted into thesrcproperty of theImgelement, which in orders triggers a process of requesting and producing a new image.The generated images are not persisted in the file system.The library is aligned with the stateless nature of the Dash framework and therefor is compatible with its horizontal scaling capabilities (where a single application can be served by multiple processes and/or machines).MotivationThis library aims at simplifying the process described in the previous section so that it can be achieved through a single line of a python code.