def parse_interactive_image(im_pil):
return drc.InteractiveImagePIL(
image_id='interactive-image',
image=im_pil,
#enc_format=enc_format,
display_mode='fixed',
#dragmode=dragmode,
#verbose=DEBUG
)
def display_output(rows, columns):
vec = []
for r in rows:
vec += [v for k, v in r.items()]
return [
drc.InteractiveImagePIL(
image_id='interactive-image',
image=genImage(np.array(vec).reshape(1, -1)),
)
]
def update_graph_interactive_image(
content,
undo_clicks,
n_clicks,
# new_win_width,
selectedData,
filters,
enhance,
enhancement_factor,
new_filename,
dragmode,
enc_format,
storage,
session_id,
):
t_start = time.time()
# Retrieve information saved in storage, which is a dict containing
# information about the image and its action stack
storage = json.loads(storage)
filename = storage["filename"] # Filename is the name of the image file.
image_signature = storage["image_signature"]
# Runs the undo function if the undo button was clicked. Storage stays
# the same otherwise.
storage = undo_last_action(undo_clicks, storage)
# If a new file was uploaded (new file name changed)
if new_filename and new_filename != filename:
# Replace filename
if DEBUG:
print(filename, "replaced by", new_filename)
# Update the storage dict
storage["filename"] = new_filename
# Parse the string and convert to pil
string = content.split(";base64,")[-1]
im_pil = drc.b64_to_pil(string)
# Update the image signature, which is the first 200 b64 characters
# of the string encoding
storage["image_signature"] = string[:200]
# Posts the image string into the Bucketeer Storage (which is hosted
# on S3)
store_image_string(string, session_id)
if DEBUG:
print(new_filename, "added to Bucketeer S3.")
# Resets the action stack
storage["action_stack"] = []
# If an operation was applied (when the filename wasn't changed)
else:
# Add actions to the action stack (we have more than one if filters
# and enhance are BOTH selected)
if filters:
type = "filter"
operation = filters
add_action_to_stack(storage["action_stack"], operation, type,
selectedData)
if enhance:
type = "enhance"
operation = {
"enhancement": enhance,
"enhancement_factor": enhancement_factor,
}
add_action_to_stack(storage["action_stack"], operation, type,
selectedData)
# Apply the required actions to the picture, using memoized function
im_pil = apply_actions_on_image(session_id, storage["action_stack"],
filename, image_signature)
t_end = time.time()
if DEBUG:
print(f"Updated Image Storage in {t_end - t_start:.3f} sec")
return [
drc.InteractiveImagePIL(
image_id="interactive-image",
image=im_pil,
enc_format=enc_format,
dragmode=dragmode,
verbose=DEBUG,
),
html.Div(id="div-storage",
children=json.dumps(storage),
style={"display": "none"}),
]
def serve_layout():
# Generates a session ID
session_id = str(uuid.uuid4())
# App Layout
return html.Div([
# Session ID
html.Div(session_id, id='session-id', style={'display': 'none'}),
# Banner display
html.Div([
html.H2('stylegan', id='title'),
html.Img(
src=
"https://s3-us-west-1.amazonaws.com/plotly-tutorials/logo/new-branding/dash-logo-by-plotly-stripe-inverted.png"
)
],
className="banner"),
# Body
html.Div(
className="container",
children=[
html.Div(
className='row',
children=[
html.Div(
className='five columns',
children=[
dash_table.DataTable(
id='vec_dims',
editable=True,
data=[{j: 0
for j in range(8)}
for i in range(64)],
columns=[{
'id': c,
'name': c
} for c in range(8)],
n_fixed_rows=1,
style_cell={'width': '20px'},
)
#dash_table.DataTable(
# id='vec_dims',
# columns=[{"name": i, "id": i} for i in range(8)],
# data={i : [0 for j in range(10)] for i in range(8)},
#)
]),
html.Div(
className='seven columns',
style={'float': 'right'},
children=[
html.Div(
id='div-interactive-image',
children=[
drc.InteractiveImagePIL(
image_id='interactive-image',
image=PIL.Image.fromarray(
np.asanyarray(
PIL.Image.open(
'images/-2_-2_-2_-2_0_0_0s.png'
)), 'RGB'),
)
]),
]),
]),
]),
])
#multiple=True
#accept='image/*'
),
# The Interactive Image Div contains the dcc Graph
# showing the image, as well as the hidden div storing
# the true image
#html.Div(id='output-image-upload',
# style={
# 'width': '100%'}
#),
html.Div(id='output-image-upload', children=[
drc.InteractiveImagePIL(
image_id='interactive-image',
#image=im_pil,
#image=IMAGE_PIL_PLACEHOLDER,
#enc_format=enc_format,
display_mode='fixed',
#dragmode=dragmode,
#verbose=DEBUG
)
#dcc.Graph(id='interactive-image', style={'height': '80vh'}),
#html.Div(
# id='div-storage',
# style={'display': 'none'}
#)
]),
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import dash_reusable_components as drc
from PIL import Image, ImageFilter, ImageDraw, ImageEnhance
enc_str, im_size, im_mode = drc.pil_to_bytes_string(
Image.open('images/default.jpg'))
STORAGE_PLACEHOLDER = "default.jpg"
GRAPH_PLACEHOLDER = drc.InteractiveImagePIL(
image_id='interactive-image',
image=Image.open('images/default.jpg'),
enc_format='png',
display_mode='fixed')
# Maps process name to the Image filter corresponding to that process
FILTERS_DICT = {
'blur': ImageFilter.BLUR,
'contour': ImageFilter.CONTOUR,
'detail': ImageFilter.DETAIL,
'edge_enhance': ImageFilter.EDGE_ENHANCE,
'edge_enhance_more': ImageFilter.EDGE_ENHANCE_MORE,
'emboss': ImageFilter.EMBOSS,
'find_edges': ImageFilter.FIND_EDGES,
'sharpen': ImageFilter.SHARPEN,
'smooth': ImageFilter.SMOOTH,
'smooth_more': ImageFilter.SMOOTH_MORE
}
def update_graph_interactive_image(content, n_clicks, figure, selectedData,
filters, enhance, enhancement_factor,
new_filename, dragmode, enc_format,
storage):
t1 = time.time()
# Retrieve metadata stored in the storage
filename = storage
# If the file has changed (when a file is uploaded)
if new_filename and new_filename != filename:
if DEBUG:
print(filename, "replaced by", new_filename)
string = content.split(';base64,')[-1]
im_pil = drc.b64_to_pil(string)
# If the file HAS NOT changed (which means an operation was applied)
else:
# Retrieve the image stored inside the figure
enc_str = figure['layout']['images'][0]['source'].split(';base64,')[-1]
# Creates the PIL Image object from the b64 png encoding
im_pil = drc.b64_to_pil(string=enc_str)
im_size = im_pil.size
# Select using Lasso
if selectedData and 'lassoPoints' in selectedData:
selection_mode = 'lasso'
selection_zone = generate_lasso_mask(im_pil, selectedData)
# Select using rectangular box
elif selectedData and 'range' in selectedData:
selection_mode = 'select'
lower, upper = map(int, selectedData['range']['y'])
left, right = map(int, selectedData['range']['x'])
# Adjust height difference
height = im_size[1]
upper = height - upper
lower = height - lower
selection_zone = (left, upper, right, lower)
# Select the whole image
else:
selection_mode = 'select'
selection_zone = (0, 0) + im_size
# If the filter dropdown was chosen, apply the filter selected by the user
if filters:
apply_filters(image=im_pil,
zone=selection_zone,
filter=filters,
mode=selection_mode)
if enhance:
apply_enhancements(image=im_pil,
zone=selection_zone,
enhancement=enhance,
enhancement_factor=enhancement_factor,
mode=selection_mode)
t2 = time.time()
if DEBUG:
print(f"Updated Image Storage in {t2-t1:.3f} sec")
return [
drc.InteractiveImagePIL(image_id='interactive-image',
image=im_pil,
enc_format=enc_format,
display_mode='fixed',
dragmode=dragmode,
verbose=DEBUG),
html.Div(id='div-filename-image',
children=new_filename,
style={'display': 'none'})
]
def serve_layout():
# Generates a session ID
session_id = str(uuid.uuid4())
# App Layout
return html.Div(
style={'background-color': plot_style['plot_bgcolor']},
children=[
# Session ID
html.Div(session_id, id='session-id', style={'display': 'none'}),
# Banner display
html.Div([
html.H2('Image Processing App', id='title'),
],
className="banner"),
# Body
html.Div(
className="container",
style={'background-color': plot_style['plot_bgcolor']},
children=[
html.Div(
className='row',
children=[
html.Div(
className='five columns',
children=[
drc.Card([
dcc.Upload(
id='upload-image',
children=[
'Drag and Drop or ',
html.A('Select an Image')
],
style={
'width': '100%',
'height': '50px',
'lineHeight': '50px',
'borderWidth': '1px',
'borderStyle': 'dashed',
'borderRadius': '5px',
'textAlign': 'center'
},
accept='image/*'),
drc.NamedInlineRadioItems(
name='Selection Mode',
short='selection-mode',
options=[{
'label': ' Rectangular',
'value': 'select'
}, {
'label': ' Lasso',
'value': 'lasso'
}],
val='select'),
drc.NamedInlineRadioItems(
name='Image Display Format',
short='encoding-format',
options=[{
'label': ' JPEG',
'value': 'jpeg'
}, {
'label': ' PNG',
'value': 'png'
}],
val='jpeg'),
]),
drc.Card([
drc.CustomDropdown(
id='dropdown-filters',
options=[{
'label': 'Blur',
'value': 'blur'
}, {
'label': 'Contour',
'value': 'contour'
}, {
'label': 'Detail',
'value': 'detail'
}, {
'label':
'Enhance Edge',
'value':
'edge_enhance'
}, {
'label':
'Enhance Edge (More)',
'value':
'edge_enhance_more'
}, {
'label':
'Emboss',
'value':
'emboss'
}, {
'label':
'Find Edges',
'value':
'find_edges'
}, {
'label':
'Sharpen',
'value':
'sharpen'
}, {
'label':
'Smooth',
'value':
'smooth'
}, {
'label':
'Smooth (More)',
'value':
'smooth_more'
}],
searchable=False,
placeholder='Basic Filter...'),
drc.CustomDropdown(
id='dropdown-enhance',
options=[{
'label': 'Brightness',
'value': 'brightness'
}, {
'label': 'Color Balance',
'value': 'color'
}, {
'label': 'Contrast',
'value': 'contrast'
}, {
'label': 'Sharpness',
'value': 'sharpness'
}],
searchable=False,
placeholder='Enhance...'),
html.Div(
id='div-enhancement-factor',
style={
'display': 'none',
'margin': '25px 5px 30px 0px'
},
children=[
f"Enhancement Factor:",
html.Div(
style=
{'margin-left': '5px'},
children=
dcc.
Slider(
id=
'slider-enhancement-factor',
min=0,
max=2,
step=0.1,
value=1,
updatemode='drag'))
]),
html.Button('Run Operation',
id='button-run-operation',
style={
'margin-right': '10px',
'margin-top': '5px'
}),
html.Button(
'Undo',
id='button-undo',
style={'margin-top': '5px'})
]),
dcc.Graph(
id='graph-histogram-colors',
config={'displayModeBar': False},
style={
'background-color':
plot_style['plot_bgcolor']
},
)
]),
html.Div(
className='seven columns',
style={'float': 'right'},
children=[
# The Interactive Image Div contains the dcc Graph
# showing the image, as well as the hidden div storing
# the true image
html.Div(
id='div-interactive-image',
children=[
drc.InteractiveImagePIL(
image_id='interactive-image',
image=im_pil0,
enc_format=enc_format,
# display_mode='fixed',
# dragmode=dragmode,
verbose=DEBUG,
style=plot_style,
),
html.Div(
id='div-storage',
children=STORAGE_PLACEHOLDER,
style={'display': 'none'})
])
])
])
])
])