plotly/dash-image-processing

Dash Demo App - Image Processing App

Dash Image Processing App

This is a demo of the Dash interactive Python framework developed by Plotly.

Dash abstracts away all of the technologies and protocols required to build an interactive web-based application and is a simple and effective way to bind a user interface around your Python code. To learn more check out our documentation.

Try out the demo app here.

Getting Started

Using the demo

This demo lets you interactively explore different image processing filters. You can upload your own image or use the one provided with the demo.

Filters can be applied either to the whole image, or to selections created with one of the selection tools.

Running the app locally

First create a virtual environment with conda or venv inside a temp folder, then activate it.

virtualenv dash-image-processing-venv

# Windows
dash-image-processing-venv\Scripts\activate
# Or Linux
source venv/bin/activate

Clone the git repo, then install the requirements with pip

git clone https://github.com/plotly/dash-image-processing.git
cd dash-image-processing
pip install -r requirements.txt

Run the app

python app.py

Development

S3 Storage

This app uses S3 to store user input images. To use this app locally, make sure to create a .env file in the root directory with the following content:

BUCKETEER_AWS_SECRET_ACCESS_KEY=***********
BUCKETEER_AWS_ACCESS_KEY_ID=***********
BUCKETEER_BUCKET_NAME=**********

All this information is given when you create a bucket in AWS. For Plotly devs, the bucket name is dash-image-processing-bucket.

Dash Deployment Server

If you are looking to host this app on the Dash Deployment Server, make sure:

• That you have linked a Redis database to your app.
• To configure S3 storage by adding the content of .env as environment variables (in Settings).

About the app

This app wraps Pillow, a powerful image processing library in Python, and abstracts all the operations through an easy-to-use GUI. All the computation is done on the back-end through Dash, and image transfer is optimized through session-based Redis caching and S3 storage.

Motivation

Recently, while we were experimenting with ImageJ, an image processing app in Java, we wondered if it was possible to bring two changes: port the app into a browser interface, and shift the computation to the backend (so that extremely large images can also be processed).

This is how we thought about making a Dash app that would wrap Pillow, the modern version of the Python Imaging Library. This was the natural thing to do because Dash itself is already based on Flask, and Plotly already has the graph objects for manipulating images. Adding S3 storage to keep the uploaded file and caching the operations with Redis were absolutely painless because of the easy integration with Python.

Built With

• Dash - Main server and interactive components
• Plotly Python - Used to create the interactive plots
• Pillow - Apply operations to images
• Boto S3 - Store User inputted images
• Redis - Cache the user input

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us. Although only a subset of Pillow is currently present, you are welcome to add any type of plugins, e.g. ML-based image processing. Just visit the project repo and make a PR with your addition: https://github.com/plotly/dash-image-processing

Authors

• Xing Han Lu - Initial Work - @xhlulu
• Chris - Code Review - @chriddyp

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments

Screenshots

dash-image-processing's Issues

error running app

I have the following error when running python app.py
Seems like error coming from boto3

File "/usr/local/lib/python3.7/dist-packages/botocore/validate.py", line 291, in serialize_to_request
raise ParamValidationError(report=report.generate_report())
botocore.exceptions.ParamValidationError: Parameter validation failed:
Invalid type for parameter Bucket, value: None, type: <class 'NoneType'>, valid types: <class 'str'>

Versions used:
python3.7
Flask-Caching-1.4.0
boto3-1.7.48
botocore-1.10.84
certifi-2019.6.16
dash-0.36.0
dash-core-components-0.43.0
dash-html-components-0.13.5
dash-renderer-0.17.0
flask-1.0.1
gunicorn-19.8.1
idna-2.6
jmespath-0.9.4
numpy-1.16.3
plotly-2.7.0
python-dotenv-0.8.2
redis-2.10.6
requests-2.18.4
s3transfer-0.1.13
urllib3-1.22

image storage improvement

Discussing with @ycaokris on investigating improvement of the image saving either w/ redis caching or gcp storage (boto gcp option or gcp client)

https://github.com/plotly/dash-image-processing/blob/master/app.py#L55

how to deploy it locally ?

which python version is it meant for?

which python version is it meant for?

Migration to DDS

This is an issue discussing how to migrate this app to DDS.

At the moment, this uses 2 Heroku features:

• S3 Bucketeer: A heroku add-on that manages a AWS S3 Storage Bucket for a heroku app.
• Heroku Redis: Heroku's redis platform.

At the moment the S3 storage is directly created by heroku. In order to migrate to DDS, we will need to create a bucket (using plotly's credentials), and update the credentials of the app using that bucket. We then will need to create a DDS deployment and setup Redis.