✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🏦 Standard & Poor's chooses Dash Enterprise for ESG analysis. Learn why, sign up for the June 23 Webinar here!

How to use uploaded image as an input to a classification model?

I´m trying to make a webapp where you can upload and image and the use that image as an input to a classification model. So far I have been able to upload the image and copy that image below but I haven´t been able to process that image and use it as an input to run my model. Do I need to upload the image first to a server in production and then open it again to be processed?

import os
import json
import pandas as pd
import plotly.express as px

from fastai.vision.all import *
from fastai.vision.widgets import *
from PIL import Image
from dash.exceptions import PreventUpdate

import dash
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import dash_html_components as html
import base64

app = dash.Dash(__name__)
model = load_learner('export.pkl', cpu=True)
app.layout = html.Div([
    # Body
    html.Div([
        html.Div([
            dcc.Upload(
                id='upload-image',
                children=html.Div([
                    'Drag and Drop',
                ]),
                style={
                    'width': '100%',
                    'height': '60px',
                    'lineHeight': '60px',
                    'borderWidth': '1px',
                    'borderStyle': 'dashed',
                    'borderRadius': '5px',
                    'textAlign': 'center',
                    'margin': '10px'
                },
                # Allow multiple files to be uploaded
                multiple=True
            ),
            html.Div(id='output-image-upload', ),
            # html.Button("Submit",id='button', ),
            html.Div(id='output-container-button',
                     children=html.Div([
                    'Prediction',
                ]), ),
        ], className='six columns',
        )
    ])
])


def parse_contents(contents, filename, date):
    return html.Div([
        html.Img(src=contents, style={'height': '50%', 'width': '50%'}),
    ])
### To extract uploaded image
def extract(lst):
    return lst[0],
###


@app.callback(Output('output-image-upload', 'children'),
              Input('upload-image', 'contents'),
              State('upload-image', 'filename'),
              State('upload-image', 'last_modified'))
def update_output(list_of_contents, list_of_names, list_of_dates):
    if list_of_contents is not None:
        children = [
            parse_contents(c, n, d) for c, n, d in
            zip(list_of_contents, list_of_names, list_of_dates)]
        return children


###########

@app.callback(Output('output-container-button', 'children'),
              Input('output-image-upload', 'children'), )
def resizethis(image):
    if image is None:
        raise PreventUpdate
    else:
        img = extract(image)
        #basewidth = 128
        #wpercent = (basewidth / float(img.size[0]))
        #hsize = int((float(img.size[1]) * float(wpercent)))
        #img128 = img.resize((basewidth, hsize), Image.ANTIALIAS)
        #prediction = model.predict(img)
        #return prediction
        return img


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

Hi @sebastian10

To show code use the </> button in the menu:
image

1 Like

Check out this example https://towardsdatascience.com/make-your-own-video-editor-app-with-python-dash-moviepy-f0dd57c2b68e where the image is being stored using dcc.Store | Dash for Python Documentation | Plotly for processing later in the app