def serve_layout():
# Generates a session ID
session_id = str(uuid.uuid4())
# Post the image to the right key, inside the bucket named after the
# session ID
store_image_string(utils.IMAGE_STRING_PLACEHOLDER, session_id)
# App Layout
return html.Div(
id="root",
children=[
# Session ID
html.Div(session_id, id="session-id"),
# Main body
html.Div(
id="app-container",
children=[
# Banner display
html.Div(
id="banner",
children=[
html.H2("Image Processing And Visualization App",
id="title"),
],
),
html.Div(
id="image",
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=[
utils.GRAPH_PLACEHOLDER,
html.Div(
id="div-storage",
children=utils.STORAGE_PLACEHOLDER,
),
],
)
],
),
],
),
# Sidebar
html.Div(
id="sidebar",
children=[
drc.Card([
dcc.Upload(
id="upload-image",
children=[
"Drag and Drop or ",
html.A(children="Select an Image"),
],
# No CSS alternative here
style={
"color": "darkgray",
"width": "100%",
"height": "50px",
"lineHeight": "50px",
"borderWidth": "1px",
"borderStyle": "dashed",
"borderRadius": "5px",
"borderColor": "darkgray",
"textAlign": "center",
"padding": "2rem 0",
"margin-bottom": "2rem",
},
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",
children=[
f"Enhancement Factor:",
html.Div(children=dcc.Slider(
id="slider-enhancement-factor",
min=0,
max=2,
step=0.1,
value=1,
updatemode="drag",
)),
],
),
html.Div(
id="button-group",
children=[
html.Button("Run Operation",
id="button-run-operation"),
html.Button("Undo", id="button-undo"),
],
),
]),
dcc.Graph(
id="graph-histogram-colors",
figure={
"layout": {
"paper_bgcolor": "#272a31",
"plot_bgcolor": "#272a31",
}
},
config={"displayModeBar": False},
),
],
),
],
)
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 Encoding Format',
short='encoding-format',
options=[{
'label': 'JPEG',
'value': 'jpeg'
}, {
'label': 'PNG',
'value': 'png'
}],
def serve_layout():
# Generates a session ID
session_id = str(uuid.uuid4())
# Post the image to the right key, inside the bucket named after the
# session ID
res = store_image_string(IMAGE_STRING_PLACEHOLDER, session_id)
print(res)
# App Layout
return html.Div([
# Session ID
html.Div(session_id, id='session-id', style={'display': 'none'}),
# Banner display
html.Div([
html.H2(
'Image Processing App',
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=[
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})
]),
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=[
GRAPH_PLACEHOLDER,
html.Div(
id='div-storage',
children=STORAGE_PLACEHOLDER,
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'})
])
])
])
])
])