drc.Card([
html.H4('Setup', id='card-title'),
drc.NamedInlineCheckboxes(
name="Features",
short="config-options",
options=[
{
'label': 'Forgiveness',
'value': 'forg'
},
{
'label': 'Rulers\' Corruption',
'value': 'adapt_rul'
}, # FIXME: 3 states
{
'label': 'Reformation',
'value': 'reform'
},
],
vals=['forg', 'adapt_rul', 'reform']),
drc.NamedSlider(
name="Initial Allocation Unfairness",
id='slider-u',
marks={i / 10: i / 10
for i in range(10)},
min=0,
max=1,
value=UInit,
step=0.01,
updatemode='drag',
vertical=False),
drc.NamedSlider(
name="Initial Non-Compliance",
id='slider-pcheat',
marks={i / 10: i / 10
for i in range(10)},
min=0.01,
max=1,
value=PCheatInit,
step=0.01,
updatemode='drag'),
html.Button('Run Simulation',
id='button-run',
style={
'margin-right': '10px',
'margin-top': '5px'
}),
html.Button('Pause',
id='button-pause',
style={'margin-top': '5px'})
]),
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",
className="row",
children=[
# Banner display
html.Div(
id="banner",
children=[
html.Img(id="logo",
src=app.get_asset_url("Bigapps.png")),
html.H2("Image Processing App", id="title"),
],
),
html.Div(children=[
html.Div(className="seven columns",
children=[
html.Label('Images',
style={'marginRight': 50}),
html.Div(
id="image",
children=[
html.Div(
id="div-interactive-image", ),
],
)
]),
html.Div(children=[
html.Label('Text', style={'marginRight': 60}),
dcc.Textarea(
id='textarea',
#maxLength='50%',
placeholder='Text output...',
style={
'width': '40%',
'height': '100%',
'backgroundColor': '#272a31',
'color': '#fff',
'min-width': '50px',
'max-width': '100%',
'min-height': '500px'
})
])
]),
],
),
# 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",
},
multiple=True,
accept="image/*",
),
]),
html.Div([
html.Label('TTC'),
dcc.Input(id='TTC', value='', type='text'),
html.Label('Date de la dépense'),
dcc.Input(id='DATE', type='text'),
html.Label('Adress'),
dcc.Input(id='ADRESS', value='', type='text'),
html.Label('Marchand'),
dcc.Input(id='Marchand', value='', type='text')
])
],
),
],
)
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},
),
],
),
],
)
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'}
)
])
]
)
])
])
])
html.Div([
# left div
html.Div([
drc.Card([
html.H5('Parameters'),
"Stock price", html.Br(),
dcc.Input(placeholder="enter stock price", type='number', value=100, id='s', style={'width': '100%'}),
html.Br(),
"Strike price", html.Br(),
dcc.Input(placeholder="enter strike price", type='number', value=70, id='k', style={'width': '100%'}),
html.Br(),
"Volatility (%)", html.Br(),
dcc.Input(placeholder="enter volatiltiy", type='number', value=20, id='vol', style={'width': '100%'}),
html.Br(),
"Risk free rate (%)", html.Br(),
dcc.Input(placeholder='enter rsik free rate', type='number', value=1, id='r', style={'width': '100%'}),
html.Br(),
"Time to maturity (year)", html.Br(),
dcc.Input(placeholder='enter time to maturity', type='number', value=1, id='T', style={'width': '100%'}),
html.Br(),
"Number of period for Binomial Model", html.Br(),
dcc.Input(placeholder='enter simulation period', type='number', value=100, id='n_period_binomial', style={'width': '100%'}),
html.Br(),
"Number of path for Monte Carlo simulation", html.Br(),
dcc.Input(placeholder='enter simulation period', type='number', value=10000, id='n_period_monte_carlo', style={'width': '100%'}),
html.Br(),
html.Br(),
html.P(['(Ignore dividend payment)'])
])
], style={'flex': 1.5, 'vertical-align': 'middle'}),
# middle div
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.Img(
id="logo",
src=app.get_asset_url("Camera_photo.svg")),
html.H2("Neural Style Transfert", id="title"),
],
),
html.Div(
id="div-image",
children=[
# The Interactive Image Div contains the dcc Graph
# showing the image, as well as the hidden div storing
# the true image
# utils.GRAPH_PLACEHOLDER,
html.Img(
id="image",
# src=app.get_asset_url("default.jpg")
src=utils.IMAGE_STRING_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-style",
options=[{
"label": "La Muse",
"value": "la_muse"
}, {
"label": "The Scream",
"value": "the_scream"
}, {
"label": "Udnie",
"value": "udnie"
}, {
"label": "Wave",
"value": "wave"
}],
searchable=False,
placeholder="Style...",
),
html.Div(
id="div-style-weight",
children=[
"Style Weight:",
html.Div(children=dcc.Slider(
id="slider-style-weight",
min=1,
max=3,
step=1,
value=2,
# updatemode="drag",
)),
],
),
html.Div(
id="button-group",
children=[
html.Button("Apply Style",
id="button-apply-style",
n_clicks=0)
],
),
])
],
),
],
)
#Columns
html.Div([
drc.Card([
drc.NamedRadioItems(
name='Data Type',
id='data-type-radio',
options=localDB.dataTypeDict,
value=localDB.dataTypeDict[2]['value'],
),
drc.NamedDropdown(
name='Sources (max 5)',
id='dataset-dropdown',
options=localDB.buildingsDict,
clearable=False,
searchable=True,
multi=True,
),
drc.NamedRadioItems(
name='Interval',
id='data-interval-radio',
options=localDB.intervalOptions,
value=localDB.intervalOptions[2]['value'],
),
html.Button('Update', id='update-button'),
html.A('Download Data',
id='download-link',
href='',
style={'display': 'block'})
])
],
className="one-third column"),
def getTuttPage():
(graph, text) = getTuttGraph()
string1, string2 = text
return html.Div(
[
html.Div(
className="banner",
children=[
# Change App Name here
html.Div(
className='container scalable',
children=[
# Change App Name here
html.Img(
src=
"https://www.coloradocollege.edu/offices/sustainability/resources/CC_OOS_WhitePlain_Diagonal.png",
style={
'max-width': '30%',
'display': 'inline-block',
'float': 'left',
},
),
html.H1('Carbon Snapshot',
style={
'text-decoration': 'none',
'color': 'inherit',
'max-width': '50%',
'margin': 'auto',
'display': 'inline-block',
'float': 'right'
}),
],
style={'margin': '20px'}),
]),
html.Div(
[
#Columns
html.Div([
drc.Card([html.H4(string1),
html.H4(string2)]),
html.
H5("For more information visit the Office of Sustainability website at: www.coloradocollege.edu/offices/sustainability"
),
html.Img(
src=
"https://www.coloradocollege.edu/offices/sustainability/resources/OOS_qr_code.png"
),
],
className="one-third column",
style={'max-height': '75%'}),
html.Div([
drc.Card(id='graph_card',
children=html.Div(children=[graph])),
],
className="two-thirds column",
style={'max-height': '75%'}),
],
className="row")
],
style={
'margin': '5%',
'width': '1610px',
'height': '907px'
})
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.Img( id="logo", src=app.get_asset_url("logo_infinity.png")),
html.H2("Infinity.AI", 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 a File"),],
# 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="*",),
drc.CustomDropdown(
id="dropdown-filters",
options=[
{"label": "Time-Series Forecasting", "value": "time-series"},
{"label": "Classification", "value": "classification"},
{"label": "Regression", "value": "regression"},
{"label": "Topic-Modeling", "value": "topic-modeling"},
],
searchable=False,
placeholder="Select Problem",),
drc.CustomDropdown(
id="dropdown-models",
options=[
{"label": "ARIMA", "value": "ARIMA"},
{"label": "HoltsWinter", "value": "HoltsWinter"},
{"label": "FbProphet", "value": "FbProphet"},
{"label": "Random Forest", "value": "randomForest"},
{"label": "Neural Network", "value": "neural_network"},
{"label": "LSTM", "value": "LSTM"},
{"label": "XGBoost", "value": "xgBoost"},
{"label": "SVM", "value": "svm"},
{"label": "Linear Regression", "value": "lin_reg"},
{"label": "Ridge Regression", "value": "ridge_reg"},
{"label": "Lasso Regression", "value": "lasso_reg"},
{"label": "ElasticNet Regression", "value": "elasticnet_reg"},
{"label": "GARCH", "value": "garch"},
{"label": "TBATS", "value": "tbats"},
{"label": "Croston", "value": "croston"},
],
searchable=False,
multi=True,
placeholder="Select Models",),
drc.CustomDropdown(
id="dropdown-terms",
options=[
{"label": "4 Weeks", "value": 4},
{"label": "8 Weeks", "value": 8},
{"label": "12 Weeks", "value": 12},
{"label": "26 Week", "value": 26},
{"label": "52 Weeks", "value": 52},
],
searchable=False,
multi=True,
placeholder="Select Forecast Term",),
drc.CustomDropdown(
id="dropdown-ensemble",
options=[
{"label": "Yes", "value": True},
{"label": "No", "value": False},
],
searchable=False,
placeholder="Select Ensemble",),
drc.CustomDropdown(
id="dropdown-cross_validation",
options=[
{"label": "K-Fold", "value": "KFold"},
{"label": "Leave One Out", "value": 'LeaveOneOut'},
{"label": "train-val-holdout", "value": 'train_val_holdout'},
{"label": "Leave P Out", "value": 'LeavePOut'},
],
searchable=False,
placeholder="Select Cross-Validation",),
drc.CustomDropdown(
id="dropdown-fold_split",
options=[
{"label": "3", "value": 3},
{"label": "5", "value": 5},
{"label": "7", "value": 7},
{"label": "10", "value": 10},
{"label": "12", "value": 12},
{"label": "15", "value": 15},
],
searchable=False,
multi=True,
placeholder="Select Fold Split",),
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",)),],),
drc.NamedSlider(
name="Train Ratio",
id="train_ratio",
min=0.5,
max=1.0,
step=0.1,
value=0.6,),
drc.NamedSlider(
name="Test Ratio",
id="test_ratio",
min=0.0,
max=0.25,
step=0.05,
value=0.1,),
html.Div(
id="button-group",
children=[
html.Button( "Run Operation", id="button-run-operation"),],),
# drc.NamedInlineRadioItems(
# name="Select Problem",
# short="selection-mode",
# options=[
# {"label": " Time-Series", "value": "select"},
# {"label": " Classification", "value": "classification"},
# {"label": " Regression", "value": "regression"},
# ],
# 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.NamedInlineInput(
# # name="n_steps_ahead",
# # short="n_steps_ahead",
# # placeholder="13",
# # type_input='text',
# # val="13",),
# ]),
# drc.Card([
# drc.CustomDropdown(
# id="dropdown-filters",
# options=[
# {"label": "Time-Series Forecasting", "value": "time-series"},
# {"label": "Classification", "value": "classification"},
# {"label": "Regression", "value": "regression"},
# {"label": "Topic-Modeling", "value": "topic-modeling"},],
# searchable=False,
# placeholder="Select Problem...",),
# # 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"),],),
# ]
# ),
dcc.Graph(
id="graph-histogram-colors",
figure={
"layout": {
"paper_bgcolor": "#272a31",
"plot_bgcolor": "#272a31",}},
config={"displayModeBar": False},),
],
),
],
)
import dash_reusable_components as drc
from .constants import LABEL_ELEMENT_TYPES, LABEL_ELEMENT_TYPES_ALL, ELEMENTS
user_interface = html.Div(
style={
"height": "calc(100vh - 90px)",
"overflow-y": "auto",
"overflow-x": "hidden",
},
children=[
drc.SectionTitle(title="Elements", size=3, color="white"),
drc.Card([
drc.NamedDropdown(
name="Select an element list",
id="dropdown-select-element-list",
options=drc.DropdownOptionsList(*ELEMENTS.keys()),
value="Basic",
clearable=False,
)
]),
drc.SectionTitle(title="Layout", size=3, color="white"),
drc.NamedCard(
title="Layout",
size=4,
children=[
drc.NamedDropdown(
name="Layout",
id="dropdown-layout",
options=drc.DropdownOptionsList(
"null",
"random",
def new_layout():
return html.Div(
[
# Banner display
# html.Div([
# html.H2(
# 'More details',
# 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", style={'textAlign': 'center'}
# ),
# Body
html.Div(
className="container",
children=[
html.Div(
className='row',
children=[
html.Div(
# className='three columns',
children=[
html.Div(
[
drc.Card([
# Next and previous buttons
html.Div(
[
# html.Button('<--', id='prev-page', n_clicks_timestamp=0),
# html.Button('-->', id='next-page', n_clicks_timestamp=0),
html.
A('Download Data',
id='download-link',
download="test.csv",
href="",
target="_blank")
],
# className='two columns', style={"border": "2px black solid"}
)
# Is there a table on the page
,
html.Div(
[
html.Div(
html.
H6("Is there a table on this page?"
)
), # Text for asking question
html.Div(
dcc.RadioItems(
id=
"is-table-present",
options=[
{
'label':
'Yes',
'value':
'Y'
},
{
'label':
'No',
'value':
'N'
},
],
value='N',
# labelStyle={'display': 'inline-block'}
)
), # The radio button
html.Div(
html.Button(
"Save table presence input!",
id=
"button-table-presence",
# style=dict(
# width='50%',
# display='table-cell',)
)
), # button to save the input
],
# className='three columns', style={"border": "2px black solid"}
),
]),
drc.Card([
html.Div(
id=
'dummy-for-istablepresent-save'
),
#
html.Div([
html.Div(
[
html.Button(
'Save this snapshot',
id='btn-1',
n_clicks_timestamp
=0
# style=dict(
# width='50%',
# display='table-cell', )
),
html.Div(
id=
'container-button-timestamp'
)
],
# className='six columns'
),
html.Div([
html.Br(),
html.Br(),
html.Br(),
html.Br(),
]),
html.Pre(id='console'),
]),
]),
],
style={
'width': '50%',
'display': 'inline-block'
# 'width': '300%'
}),
html.Div(
# className='three columns',
style={
'width': '50%',
'display': 'inline-block'
# 'width' : '600%'
},
children=[
html.Div(
id='img',
children=InteractiveImage(
'test/0.jpg'),
# className='six columns'
)
]),
])
])
])
],
style={'display': 'inline-block'})
])
])
])
],
style={'display': 'inline-block'})
app.layout = html.Div(
[
html.Div([html.H1("Image Label Tool ".format(CURRENT_IMAGE_PATH))],
style={'textAlign': 'center'}),
drc.Card([
html.Div(children=img_div,
style={
'overflowY': 'scroll',
'height': 100,
'border': '3px',
'display': 'inline-block'
})
]),
html.Div(id="selected-image"),
# html.Div(id="analysis-chart" , children=[new_layout()])
],
style={
'width': '100%',
'display': 'inline-block'
})
#
if __name__ == '__main__':
app.run_server(debug=True)
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 Encoding Format',
short='encoding-format',
options=[{
'label': 'JPEG',
'value': 'jpeg'
}, {
'label': 'PNG',
'value': 'png'
}],
val='jpeg'),
]),
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'})
])
])
])
])
])