Skip to content

Commit

Permalink
fix: display selected slice as an div overlay instead of a background…
Browse files Browse the repository at this point in the history 
… color change
  • Loading branch information
@provos
provos committed Jun 11, 2024
1 parent d7add39 commit b623929
Show file tree
Hide file tree
Showing 4 changed files with 82 additions and 31 deletions.
30 changes: 29 additions & 1 deletion assets/css/tailwind_compiled.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1252,6 +1252,17 @@ button.progress-bar-fill:disabled:where(.dark, .dark *) {
border-color: rgb(96 165 250 / var(--tw-border-opacity));
}

.image_border {
height: 100%;
width: 100%;
border-width: 2px;
border-style: solid;
--tw-border-opacity: 1;
border-color: rgb(100 116 139 / var(--tw-border-opacity));
-o-object-fit: contain;
object-fit: contain;
}

.general-container {
width: 100%;
align-items: center;
Expand Down Expand Up @@ -1453,4 +1464,21 @@ button.progress-bar-fill:disabled:where(.dark, .dark *) {
.general-dropdown .Select-value-label:hover:where(.dark, .dark *) {
--tw-bg-opacity: 1 !important;
background-color: rgb(75 85 99 / var(--tw-bg-opacity)) !important;
}
}

/* Allows us to highlight images as an overlay */

.overlay {
position: absolute;
inset: 0px;
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(187 247 208 / var(--tw-bg-opacity));
--tw-bg-opacity: 0.5;
}

.overlay:where(.dark, .dark *) {
background-color: rgb(22 163 74 / var(--tw-bg-opacity));
--tw-bg-opacity: 0.5;
}
4 changes: 4 additions & 0 deletions constants.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,10 @@

ID_INPAINTING_IMAGE = 'inpainting-image'

ID_SLICE_DEPTH_DISPLAY = 'depth-display'
ID_SLICE_OVERLAY = 'slicer-overlay'
INPUT_SLICE_DEPTH = 'depth-input'

BTN_GENERATE_SLICE = 'generate-slice-button'
BTN_BALANCE_SLICE = 'balance-slice-button'
BTN_CREATE_SLICE = 'create-slice-button'
Expand Down
12 changes: 11 additions & 1 deletion tailwind.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,10 @@ button.color-is-selected {
@apply dark:border-blue-400;
}

.image_border {
@apply w-full h-full object-contain border-solid border-2 border-slate-500;
}

.general-container {
@apply w-full general-border items-center justify-center;
}
Expand Down Expand Up @@ -169,4 +173,10 @@ button.color-is-selected {

.general-dropdown .Select-value-label {
@apply text-gray-800 dark:text-slate-200 hover:bg-gray-200 dark:hover:bg-gray-600 !important;
}
}

/* Allows us to highlight images as an overlay */
.overlay {
@apply absolute inset-0 bg-green-200 bg-opacity-50 flex items-center justify-center;
@apply dark:bg-green-600 dark:bg-opacity-50;
}
67 changes: 38 additions & 29 deletions webui.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -195,15 +195,15 @@ def serve_data(filename):
prevent_initial_call=True
)
def toggle_dark_mode(n_clicks, filename):

dark_mode = n_clicks % 2 == 1
if filename is not None:
state = AppState.from_cache(filename)
if state.dark_mode != dark_mode:
state.dark_mode = dark_mode
state.to_file(filename, save_image_slices=False,
save_depth_map=False, save_input_image=False)
save_depth_map=False, save_input_image=False)

if dark_mode:
return 'dark min-h-screen', 'fas fa-sun'
else:
Expand Down Expand Up @@ -736,21 +736,21 @@ def add_mask_slice_request(n_clicks, filename, logs):
def update_prompt_text(positive, negative, filename):
if filename is None:
raise PreventUpdate()

state = AppState.from_cache(filename)
if state.selected_slice is None:
raise PreventUpdate()

if (state.positive_prompts[state.selected_slice] == positive and
state.negative_prompts[state.selected_slice] == negative):
state.negative_prompts[state.selected_slice] == negative):
raise PreventUpdate()

state.positive_prompts[state.selected_slice] = positive
state.negative_prompts[state.selected_slice] = negative

state.to_file(filename, save_image_slices=False,
save_depth_map=False, save_input_image=False)


@app.callback(Output(C.STORE_UPDATE_SLICE, 'data', allow_duplicate=True),
Output(C.TEXT_POSITIVE_PROMPT, 'value', allow_duplicate=True),
Expand Down Expand Up @@ -878,17 +878,19 @@ def update_slices(ignored_data, filename):
Path(state.image_slices_filenames[i]).stem])

# slice creation with select a slice so we need to highlight it here
highlight_class = f' {HIGHLIGHT_COLOR}' if state.selected_slice == i else ''
highlight_class = f'overlay' if state.selected_slice == i else 'hidden'
img_container.append(
dcc.Upload(
html.Div([
html.Div(
# The number to display
children=f"{int(state.image_depths[i])}",
id={'type': 'depth-display', 'index': i},
id={'type': C.ID_SLICE_DEPTH_DISPLAY, 'index': i},
className='depth-number-display'
),
dcc.Input(id={'type': 'depth-input', 'index': i},
html.Div(className=highlight_class,
id={'type': C.ID_SLICE_OVERLAY, 'index': i}),
dcc.Input(id={'type': C.INPUT_SLICE_DEPTH, 'index': i},
className='depth-number-input hidden',
type='number',
debounce=True,
Expand All @@ -897,7 +899,7 @@ def update_slices(ignored_data, filename):
value=f"{int(state.image_depths[i])}"),
html.Img(
src=img_data,
className=f'w-full h-full object-contain border-solid border-2 border-slate-500{highlight_class}',
className='image-border',
id={'type': 'slice', 'index': i},),
html.Div(children=slice_name,
className='text-center text-overlay p-1')
Expand All @@ -922,9 +924,9 @@ def update_slices(ignored_data, filename):


@app.callback(
Output({'type': 'depth-input', 'index': MATCH}, 'className'),
Input({'type': 'depth-display', 'index': MATCH}, 'n_clicks'),
State({'type': 'depth-input', 'index': MATCH}, 'className'),
Output({'type': C.INPUT_SLICE_DEPTH, 'index': MATCH}, 'className'),
Input({'type': C.ID_SLICE_DEPTH_DISPLAY, 'index': MATCH}, 'n_clicks'),
State({'type': C.INPUT_SLICE_DEPTH, 'index': MATCH}, 'className'),
prevent_initial_call=True
)
def display_depth_input(n_clicks, class_name):
Expand All @@ -938,8 +940,8 @@ def display_depth_input(n_clicks, class_name):
@app.callback(
Output(C.STORE_UPDATE_SLICE, 'data', allow_duplicate=True),
Output(C.STORE_INPAINTING, 'data', allow_duplicate=True),
Input({'type': 'depth-input', 'index': ALL}, 'value'),
Input({'type': 'depth-input', 'index': ALL}, 'n_submit'),
Input({'type': C.INPUT_SLICE_DEPTH, 'index': ALL}, 'value'),
Input({'type': C.INPUT_SLICE_DEPTH, 'index': ALL}, 'n_submit'),
State(C.STORE_APPSTATE_FILENAME, 'data'),
prevent_initial_call=True
)
Expand Down Expand Up @@ -1029,18 +1031,22 @@ def generate_slices(ignored_data, filename):


@app.callback(Output(C.IMAGE, 'src'),
Output({'type': 'slice', 'index': ALL}, 'className'),
Output({'type': C.ID_SLICE_OVERLAY, 'index': ALL}, 'className'),
Output(C.TEXT_POSITIVE_PROMPT, 'value', allow_duplicate=True),
Output(C.TEXT_NEGATIVE_PROMPT, 'value', allow_duplicate=True),
Output(C.STORE_INPAINTING, 'data', allow_duplicate=True),
Input({'type': 'slice', 'index': ALL}, 'n_clicks'),
Input({'type': C.ID_SLICE_OVERLAY, 'index': ALL}, 'n_clicks'),
State({'type': 'slice', 'index': ALL}, 'id'),
State({'type': 'slice', 'index': ALL}, 'src'),
State({'type': 'slice', 'index': ALL}, 'className'),
State({'type': C.ID_SLICE_OVERLAY, 'index': ALL}, 'className'),
State(C.STORE_APPSTATE_FILENAME, 'data'),
prevent_initial_call=True)
def display_slice(n_clicks, id, src, classnames, filename):
if filename is None or n_clicks is None or any(n_clicks) is False:
def display_slice(n_clicks, n_clicks_two, id, src, classnames, filename):
if (n_clicks is None or any(n_clicks) is False) and (n_clicks_two is None or any(n_clicks_two) is False):
raise PreventUpdate()

if filename is None:
raise PreventUpdate()

state = AppState.from_cache(filename)
Expand All @@ -1060,10 +1066,10 @@ def display_slice(n_clicks, id, src, classnames, filename):
state.selected_slice = None
result = state.serve_input_image()

new_classnames = highlight_selected_element(
classnames, state.selected_slice, HIGHLIGHT_COLOR)
for i in range(len(classnames)):
classnames[i] = 'overlay' if i == state.selected_slice else 'hidden'

return result, new_classnames, positive_prompt, negative_prompt, True
return result, classnames, positive_prompt, negative_prompt, True


@app.callback(Output(C.LOGS_DATA, 'data', allow_duplicate=True),
Expand Down Expand Up @@ -1126,7 +1132,7 @@ def remember_depth_model(value, filename):
state = AppState.from_cache(filename)
if state.depth_model_name == value:
raise PreventUpdate()

if state.depth_model_name == value:
raise PreventUpdate()
state.depth_model_name = value
Expand All @@ -1146,14 +1152,14 @@ def remember_camera_parameters(camera_distance, focal_length, max_distance, disp
raise PreventUpdate()

state = AppState.from_cache(filename)

# don't save if the values are the same
if (state.camera_distance == camera_distance and
state.focal_length == focal_length and
state.max_distance == max_distance and
state.mesh_displacement == displacement):
state.mesh_displacement == displacement):
raise PreventUpdate()

state.camera_distance = camera_distance
state.focal_length = focal_length
state.max_distance = max_distance
Expand All @@ -1162,6 +1168,7 @@ def remember_camera_parameters(camera_distance, focal_length, max_distance, disp
save_depth_map=False, save_input_image=False)
return


@app.callback(Input(C.DROPDOWN_INPAINT_MODEL, 'value'),
State(C.STORE_APPSTATE_FILENAME, 'data'),
prevent_initial_call=True)
Expand All @@ -1172,7 +1179,7 @@ def remember_inpaint_model(value, filename):
state = AppState.from_cache(filename)
if state.inpainting_model_name == value:
raise PreventUpdate()

state.inpainting_model_name = value
state.to_file(filename, save_image_slices=False,
save_depth_map=False, save_input_image=False)
Expand Down Expand Up @@ -1394,6 +1401,7 @@ def restore_dark_mode(value, filename):
state = AppState.from_cache(filename)
return 1 if state.dark_mode else 0


@app.callback(
Output(C.INPUT_API_KEY, 'value'),
Input(C.STORE_RESTORE_STATE, 'data'),
Expand All @@ -1406,9 +1414,10 @@ def restore_api_key(value, filename):
state = AppState.from_cache(filename)
if state.api_key == None:
return no_update

return state.api_key


@app.callback(
Output(C.UPLOAD_COMFYUI_WORKFLOW, 'contents', allow_duplicate=True),
Output(C.UPLOAD_COMFYUI_WORKFLOW, 'filename', allow_duplicate=True),
Expand Down

0 comments on commit b623929

Please sign in to comment.