[UploadingImageFeature]

[talkhanz]

Displaying numpy images directly on the page. As far as I know, and I am newbie, so bear with me on this one but I am having the struggle of my life trying to upload a numpy image array object on the web with Dash.

As you can see below, I have my app layout where I am uploading an image from.

I then apply some off the shelf filters through apply-filter function and its an numpy array but I can't seem to pass it back on to the webpage.

This function below parses the content and its adapted from the Dash Docs

There seems to be no easy way for me to do this using the docs. I would like to suggest an easy utility function that does this rendering for us. It seems a bit of a hassle for a newbie to bump in to these problems. Nonetheless, not taking anything away from the developers. Great Job Guys!

While I am at it, I would love to ask for one more favor, how would it possible to extract regions of images (need to annotate histology images for a project and I would love to be able to get the extracted region in a variable or something in the classical numpy array format so I can explore the world of classical operations and not have to worry about web stuff

Here is a snapshot of the canvas with dummy annotation:

[elfjes]

First of all, you can post code in a message by inserting it between two ```

For the first part of you question you could begin something like this

import base64
import tempfile
import uuid
from pathlib import Path

import dash
import dash_core_components as dcc
import dash_html_components as html
import matplotlib.pyplot as plt
import pandas as pd
import skimage.filters
import skimage.io
from dash.dependencies import Input, Output
from skimage.color import rgb2gray

df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv")

app = dash.Dash(__name__)

app.layout = html.Div(
    [
        html.H1("Apply Gaussian filter"),
        dcc.Upload(
            id="upload-image",
            children=html.Div(["Drag and Drop or ", html.A("Select Files")]),
            style={
                "width": "100%",
                "height": "60px",
                "lineHeight": "60px",
                "borderWidth": "1px",
                "borderStyle": "dashed",
                "borderRadius": "5px",
                "textAlign": "center",
                "margin": "10px",
            },
        ),
        html.Div(id="result"),
    ]
)


@app.callback(
    Output("result", "children"),
    [Input("upload-image", "contents"), Input("upload-image", "filename")],
)
def process_image(original_image, filename):
    no_image = html.H1("no valid image supplied")
    if original_image is None:
        return no_image

    img = read_image(upload_contents=original_image, filename=filename)

    if img is None:
        return no_image

    img = apply_filter(img)
    output_file = write_image(img)
    return image_from_path(output_file)


def read_image(upload_contents, filename):
    """
    Read a base64 uploaded image using `skimage.io.imread` into a numpy array.
    """
    content_type, content_string = upload_contents.split(",")
    decoded = base64.b64decode(content_string)
    extension = Path(filename).suffix

    if not has_valid_image_extension(filename):
        return None

    # `imread` expects a file, so we create one in a temporary directory
    with tempfile.TemporaryDirectory() as tmp:
        file = Path(tmp).joinpath("file").with_suffix(extension)
        file.write_bytes(decoded)
        return skimage.io.imread(file)


def apply_filter(image):
    grayscale = rgb2gray(image)
    return skimage.filters.gaussian(grayscale)


def write_image(arr, filepath=None):
    if not filepath:
        filepath = random_image_file()
    else:
        filepath = Path(filepath)
    filepath.parent.mkdir(parents=True, exist_ok=True)  # Ensure the directory exists
    plt.imsave(fname=filepath, arr=arr)
    return filepath


def image_from_path(filepath):
    return html.Img(src=str(Path("/").joinpath(filepath)))


def has_valid_image_extension(filename):
    return Path(filename).suffix in (".png", ".jpeg", ".jpg")


def random_image_file(basedir="assets/img", ext=".png"):
    return Path(basedir).joinpath(str(uuid.uuid4())).with_suffix(ext)


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

[talkhanz]

Thanks for letting me know this!

First of all, you can post code in a message by inserting it between two ```

And Thankyou for sharing the code snippet! It is working like a charm!

For the first part of you question you could begin something like this

You've already helped me a great deal but could you to some place where I could get idea about my second question e.g getting to select a region of an image (I am mostly looking at histology or tissue stained slides ) and to be able to perform analysis on just the select region and perform statistics, like count number of cells in region and get estimated size of each cell?

Any leads would be appreciated but I am already very grateful for the help!

[chrisvoncsefalvay]

@talkhanz, there's a use case by @chriddyp that you might be able to adapt: https://community.plotly.com/t/interactive-image-callbacks/8110/3

Here, selecting a space in the left image triggers a callback on the right. So you could select a part of your histo slide, and have, say, the average intensity for a spectral band displayed on the right.

Counting and estimating size might be a little more tricky, but this should be a good start.

[gvwilson]

Hi - we are tidying up stale issues and PRs in Plotly's public repositories so that we can focus on things that are most important to our community. If this issue is still a concern, please add a comment letting us know what recent version of our software you've checked it with so that I can reopen it and add it to our backlog. (Please note that we will give priority to reports that include a short reproducible example.) If you'd like to submit a PR, we'd be happy to prioritize a review, and if it's a request for tech support, please post in our community forum. Thank you - @gvwilson