{"id":19252734,"url":"https://github.com/tomaszrewak/dash-dynamic-images","last_synced_at":"2026-05-17T10:36:05.067Z","repository":{"id":163507178,"uuid":"637821426","full_name":"TomaszRewak/dash-dynamic-images","owner":"TomaszRewak","description":"A library that helps with embedding dynamic and generative images into Plotly Dash applications.","archived":false,"fork":false,"pushed_at":"2023-05-11T16:34:36.000Z","size":10,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-06T08:46:37.947Z","etag":null,"topics":["dash","dashboarding","images","plotly","plotly-dash","python"],"latest_commit_sha":null,"homepage":"","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TomaszRewak.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2023-05-08T13:33:27.000Z","updated_at":"2023-07-12T17:08:49.000Z","dependencies_parsed_at":"2023-12-17T09:44:35.154Z","dependency_job_id":null,"html_url":"https://github.com/TomaszRewak/dash-dynamic-images","commit_stats":{"total_commits":8,"total_committers":1,"mean_commits":8.0,"dds":0.0,"last_synced_commit":"bb0713f572d47285b1fa4f6ac7f2cb268d1e8c06"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TomaszRewak%2Fdash-dynamic-images","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TomaszRewak%2Fdash-dynamic-images/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TomaszRewak%2Fdash-dynamic-images/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TomaszRewak%2Fdash-dynamic-images/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TomaszRewak","download_url":"https://codeload.github.com/TomaszRewak/dash-dynamic-images/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240347947,"owners_count":19787236,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dash","dashboarding","images","plotly","plotly-dash","python"],"created_at":"2024-11-09T18:28:14.298Z","updated_at":"2026-05-17T10:36:05.037Z","avatar_url":"https://github.com/TomaszRewak.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"# dash-dynamic-images\n\nA library that helps with embedding dynamic and generative images into Plotly Dash applications.\n\n# Setting up\n\n**1. Install the `dash-dynamic-images` python package**\n\n```\npip install dash-dynamic-images\n```\n\n**2. Add an `html.Img` element to your page's layout**\n\nThis step does not differ in any way from the regular process of writing layouts for Dash applications.\n\n```python\nimport dash_html_components as html\n\n...\n\napp.layout = html.Div(children=[\n    html.Img(id='image'),\n    ...\n    dcc.Input(id='x', type='number', value=10),\n    dcc.Input(id='y', type='number', value=10)\n])\n```\n\n**3. Create an `image_callback` that serves your dynamic image**\n\nYou can use `image_callback` decorator to create callbacks that return dynamic images. It works similarly to the standard Dash `callback` decorator, but with few notable differences:\n\n- The first argument of the decorator should be an instance of the `Dash` object.\n- The callback should have only one output, pointing at the `src` property of an `Img` layout element.\n- The decorated function should return a `PIL.Image.Image` object (from the `Pillow` python library).\n\n```python\nfrom dash_dynamic_images import image_callback\nfrom PIL import Image, ImageDraw\n\n...\n\n@image_callback(\n    app,\n    dash.Output('image', 'src'),\n    dash.Input('x', 'value'),\n    dash.Input('y', 'value'))\ndef generate_image(x, y):\n    image = Image.new('RGB', (200, 200), color=(0, 0, 200))\n    ImageDraw.Draw(image).line([(0, 0), (x, y)], width=5)\n    return image\n```\n\nAs 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.\n\n```python\nimport requests\n\n...\n\n@image_callback(\n    app,\n    dash.Output('image', 'src'),\n    dash.Input('button', 'n_clicks'))\ndef generate_image(_):\n    response = requests.get('https://your_service.example/api/images/get')\n\n    return Image.open(BytesIO(response.content))\n```\n\nPlease consult the `Pillow` documentation for more details.\n\n**4. Enjoy the working application**\n\nA complete example of an application:\n\n```python\nimport dash\nimport dash_core_components as dcc\nimport dash_html_components as html\nfrom dash_dynamic_images import image_callback\nfrom PIL import Image, ImageDraw\n\n\napp = dash.Dash()\napp.layout = html.Div(children=[\n    html.Img(id='image'),\n    dcc.Input(id='x', type='number', value=10),\n    dcc.Input(id='y', type='number', value=10)\n])\n\n\n@image_callback(\n    app,\n    dash.Output('image', 'src'),\n    dash.Input('x', 'value'),\n    dash.Input('y', 'value'))\ndef generate_image(x, y):\n    image = Image.new('RGB', (200, 200), color=(0, 0, 200))\n    ImageDraw.Draw(image).line([(0, 0), (x, y)], width=5)\n    return image\n\n\nif __name__ == '__main__':\n    app.run_server(debug=True)\n```\n\n# How it works\n\nWhenever an `image_callback` is registered, the library performs two operations:\n\n- It registers a `flask` route with a path of `/image_generator/{unique_guid}.png` that generates and serves images whenever invoked.\n- It registers a standard `Dash` callback that produces and returns a parametrized (through the query string) image url based on the `image_callback` input values.\n\nIn practice, whenever one of the `image_callback` input parameters change, a new url is generated and inserted into the `src` property of the `Img` element, which in orders triggers a process of requesting and producing a new image.\n\nThe generated images are not persisted in the file system.\n\nThe 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).\n\n# Motivation\n\nThis 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.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomaszrewak%2Fdash-dynamic-images","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftomaszrewak%2Fdash-dynamic-images","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomaszrewak%2Fdash-dynamic-images/lists"}