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}, ), ], ), ], )
html.Br(), html.H4("Statistics for Recent Incidents"), html.Hr(), dbc.Row([dbc.Col(graphs[1]), dbc.Col(graphs[2])]), html.Br(), html.H4("Historic Incidents based on Location and Year"), html.Hr(), dbc.Row([dbc.Col(cards[1])]), html.Br(), dbc.Row([dbc.Col(drc.CustomDropdown( id='dropdown-location', options=[ {'label': 'On Campus', 'value': 'On Campus'}, {'label': 'Non-Grounds/Non-Campus Building or Property', 'value': 'Non-Grounds/Non-Campus Building or Property'}, {'label': 'Public Property', 'value': 'Public Property'}, ], searchable=True, value='On Campus', placeholder='On Campus' ),), dbc.Col(drc.CustomDropdown( id='dropdown-year', options=[ {'label': '2019', 'value': '2019'}, {'label': '2018', 'value': '2018'}, {'label': '2017', 'value': '2017'}, ], searchable=True, value='2019',
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()) # 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) ], ), ]) ], ), ], )
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},), ], ), ], )
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'}) ]) ]) ]) ]) ])