Commit 184e23eb authored by AUTOMATIC's avatar AUTOMATIC

relocate tool buttons next to generate button

prevent extra network tabs from putting images into wrong prompts
prevent settings leaking into prompt
parent 6d805b66
<div class='card' {preview_html} onclick='return cardClicked({prompt}, {allow_negative_prompt})'> <div class='card' {preview_html} onclick='return cardClicked({tabname}, {prompt}, {allow_negative_prompt})'>
<div class='actions'> <div class='actions'>
<div class='additional'> <div class='additional'>
<ul> <ul>
......
...@@ -6,49 +6,42 @@ function setupExtraNetworksForTab(tabname){ ...@@ -6,49 +6,42 @@ function setupExtraNetworksForTab(tabname){
gradioApp().querySelector('#'+tabname+'_extra_tabs > div').appendChild(gradioApp().getElementById(tabname+'_extra_close')) gradioApp().querySelector('#'+tabname+'_extra_tabs > div').appendChild(gradioApp().getElementById(tabname+'_extra_close'))
} }
var activePromptTextarea = null; var activePromptTextarea = {};
var activePositivePromptTextarea = null;
function setupExtraNetworks(){ function setupExtraNetworks(){
setupExtraNetworksForTab('txt2img') setupExtraNetworksForTab('txt2img')
setupExtraNetworksForTab('img2img') setupExtraNetworksForTab('img2img')
function registerPrompt(id, isNegative){ function registerPrompt(tabname, id){
var textarea = gradioApp().querySelector("#" + id + " > label > textarea"); var textarea = gradioApp().querySelector("#" + id + " > label > textarea");
if (activePromptTextarea == null){ if (! activePromptTextarea[tabname]){
activePromptTextarea = textarea activePromptTextarea[tabname] = textarea
}
if (activePositivePromptTextarea == null && ! isNegative){
activePositivePromptTextarea = textarea
} }
textarea.addEventListener("focus", function(){ textarea.addEventListener("focus", function(){
activePromptTextarea = textarea; activePromptTextarea[tabname] = textarea;
if(! isNegative) activePositivePromptTextarea = textarea;
}); });
} }
registerPrompt('txt2img_prompt') registerPrompt('txt2img', 'txt2img_prompt')
registerPrompt('txt2img_neg_prompt', true) registerPrompt('txt2img', 'txt2img_neg_prompt')
registerPrompt('img2img_prompt') registerPrompt('img2img', 'img2img_prompt')
registerPrompt('img2img_neg_prompt', true) registerPrompt('img2img', 'img2img_neg_prompt')
} }
onUiLoaded(setupExtraNetworks) onUiLoaded(setupExtraNetworks)
function cardClicked(textToAdd, allowNegativePrompt){ function cardClicked(tabname, textToAdd, allowNegativePrompt){
textarea = allowNegativePrompt ? activePromptTextarea : activePositivePromptTextarea var textarea = allowNegativePrompt ? activePromptTextarea[tabname] : gradioApp().querySelector("#" + tabname + "_prompt > label > textarea")
textarea.value = textarea.value + " " + textToAdd textarea.value = textarea.value + " " + textToAdd
updateInput(textarea) updateInput(textarea)
return false
} }
function saveCardPreview(event, tabname, filename){ function saveCardPreview(event, tabname, filename){
textarea = gradioApp().querySelector("#" + tabname + '_preview_filename > label > textarea') var textarea = gradioApp().querySelector("#" + tabname + '_preview_filename > label > textarea')
button = gradioApp().getElementById(tabname + '_save_preview') var button = gradioApp().getElementById(tabname + '_save_preview')
textarea.value = filename textarea.value = filename
updateInput(textarea) updateInput(textarea)
......
...@@ -203,8 +203,8 @@ onUiUpdate(function(){ ...@@ -203,8 +203,8 @@ onUiUpdate(function(){
json_elem = gradioApp().getElementById('settings_json') json_elem = gradioApp().getElementById('settings_json')
if(json_elem == null) return; if(json_elem == null) return;
textarea = json_elem.querySelector('textarea') var textarea = json_elem.querySelector('textarea')
jsdata = textarea.value var jsdata = textarea.value
opts = JSON.parse(jsdata) opts = JSON.parse(jsdata)
executeCallbacks(optionsChangedCallbacks); executeCallbacks(optionsChangedCallbacks);
......
...@@ -349,30 +349,13 @@ def create_toprow(is_img2img): ...@@ -349,30 +349,13 @@ def create_toprow(is_img2img):
with gr.Row(): with gr.Row():
with gr.Column(scale=80): with gr.Column(scale=80):
with gr.Row(): with gr.Row():
prompt = gr.Textbox(label="Prompt", elem_id=f"{id_part}_prompt", show_label=False, lines=2, placeholder="Prompt (press Ctrl+Enter or Alt+Enter to generate)") prompt = gr.Textbox(label="Prompt", elem_id=f"{id_part}_prompt", show_label=False, lines=3, placeholder="Prompt (press Ctrl+Enter or Alt+Enter to generate)")
with gr.Row(): with gr.Row():
with gr.Column(scale=80): with gr.Column(scale=80):
with gr.Row(): with gr.Row():
negative_prompt = gr.Textbox(label="Negative prompt", elem_id=f"{id_part}_neg_prompt", show_label=False, lines=2, placeholder="Negative prompt (press Ctrl+Enter or Alt+Enter to generate)") negative_prompt = gr.Textbox(label="Negative prompt", elem_id=f"{id_part}_neg_prompt", show_label=False, lines=2, placeholder="Negative prompt (press Ctrl+Enter or Alt+Enter to generate)")
with gr.Column(scale=1, elem_id="roll_col"):
paste = ToolButton(value=paste_symbol, elem_id="paste")
clear_prompt_button = ToolButton(value=clear_prompt_symbol, elem_id=f"{id_part}_clear_prompt")
extra_networks_button = ToolButton(value=extra_networks_symbol, elem_id=f"{id_part}_extra_networks")
token_counter = gr.HTML(value="<span></span>", elem_id=f"{id_part}_token_counter")
token_button = gr.Button(visible=False, elem_id=f"{id_part}_token_button")
negative_token_counter = gr.HTML(value="<span></span>", elem_id=f"{id_part}_negative_token_counter")
negative_token_button = gr.Button(visible=False, elem_id=f"{id_part}_negative_token_button")
clear_prompt_button.click(
fn=lambda *x: x,
_js="confirm_clear_prompt",
inputs=[prompt, negative_prompt],
outputs=[prompt, negative_prompt],
)
button_interrogate = None button_interrogate = None
button_deepbooru = None button_deepbooru = None
if is_img2img: if is_img2img:
...@@ -380,7 +363,7 @@ def create_toprow(is_img2img): ...@@ -380,7 +363,7 @@ def create_toprow(is_img2img):
button_interrogate = gr.Button('Interrogate\nCLIP', elem_id="interrogate") button_interrogate = gr.Button('Interrogate\nCLIP', elem_id="interrogate")
button_deepbooru = gr.Button('Interrogate\nDeepBooru', elem_id="deepbooru") button_deepbooru = gr.Button('Interrogate\nDeepBooru', elem_id="deepbooru")
with gr.Column(scale=1): with gr.Column(scale=1, elem_id=f"{id_part}_actions_column"):
with gr.Row(elem_id=f"{id_part}_generate_box"): with gr.Row(elem_id=f"{id_part}_generate_box"):
interrupt = gr.Button('Interrupt', elem_id=f"{id_part}_interrupt") interrupt = gr.Button('Interrupt', elem_id=f"{id_part}_interrupt")
skip = gr.Button('Skip', elem_id=f"{id_part}_skip") skip = gr.Button('Skip', elem_id=f"{id_part}_skip")
...@@ -398,13 +381,29 @@ def create_toprow(is_img2img): ...@@ -398,13 +381,29 @@ def create_toprow(is_img2img):
outputs=[], outputs=[],
) )
with gr.Row(elem_id=f"{id_part}_tools"):
paste = ToolButton(value=paste_symbol, elem_id="paste")
clear_prompt_button = ToolButton(value=clear_prompt_symbol, elem_id=f"{id_part}_clear_prompt")
extra_networks_button = ToolButton(value=extra_networks_symbol, elem_id=f"{id_part}_extra_networks")
prompt_style_apply = ToolButton(value=apply_style_symbol, elem_id=f"{id_part}_style_apply")
save_style = ToolButton(value=save_style_symbol, elem_id=f"{id_part}_style_create")
token_counter = gr.HTML(value="<span></span>", elem_id=f"{id_part}_token_counter")
token_button = gr.Button(visible=False, elem_id=f"{id_part}_token_button")
negative_token_counter = gr.HTML(value="<span></span>", elem_id=f"{id_part}_negative_token_counter")
negative_token_button = gr.Button(visible=False, elem_id=f"{id_part}_negative_token_button")
clear_prompt_button.click(
fn=lambda *x: x,
_js="confirm_clear_prompt",
inputs=[prompt, negative_prompt],
outputs=[prompt, negative_prompt],
)
with gr.Row(elem_id=f"{id_part}_styles_row"): with gr.Row(elem_id=f"{id_part}_styles_row"):
prompt_styles = gr.Dropdown(label="Styles", elem_id=f"{id_part}_styles", choices=[k for k, v in shared.prompt_styles.styles.items()], value=[], multiselect=True) prompt_styles = gr.Dropdown(label="Styles", elem_id=f"{id_part}_styles", choices=[k for k, v in shared.prompt_styles.styles.items()], value=[], multiselect=True)
create_refresh_button(prompt_styles, shared.prompt_styles.reload, lambda: {"choices": [k for k, v in shared.prompt_styles.styles.items()]}, f"refresh_{id_part}_styles") create_refresh_button(prompt_styles, shared.prompt_styles.reload, lambda: {"choices": [k for k, v in shared.prompt_styles.styles.items()]}, f"refresh_{id_part}_styles")
prompt_style_apply = ToolButton(value=apply_style_symbol, elem_id="style_apply")
save_style = ToolButton(value=save_style_symbol, elem_id="style_create")
return prompt, prompt_styles, negative_prompt, submit, button_interrogate, button_deepbooru, prompt_style_apply, save_style, paste, extra_networks_button, token_counter, token_button, negative_token_counter, negative_token_button return prompt, prompt_styles, negative_prompt, submit, button_interrogate, button_deepbooru, prompt_style_apply, save_style, paste, extra_networks_button, token_counter, token_button, negative_token_counter, negative_token_button
......
...@@ -124,15 +124,12 @@ ...@@ -124,15 +124,12 @@
height: 100%; height: 100%;
} }
#roll_col{ #txt2img_actions_column, #img2img_actions_column{
min-width: unset !important;
flex-grow: 0 !important;
padding: 0 1em 0 0;
gap: 0; gap: 0;
} }
#roll_col > button { #txt2img_tools, #img2img_tools{
margin: 0.1em 0; gap: 0.4em;
} }
#interrogate_col{ #interrogate_col{
...@@ -153,7 +150,6 @@ ...@@ -153,7 +150,6 @@
#txt2img_styles_row, #img2img_styles_row{ #txt2img_styles_row, #img2img_styles_row{
gap: 0.25em; gap: 0.25em;
margin-top: 0.5em;
} }
#txt2img_styles_row > button, #img2img_styles_row > button{ #txt2img_styles_row > button, #img2img_styles_row > button{
...@@ -164,6 +160,10 @@ ...@@ -164,6 +160,10 @@
padding: 0; padding: 0;
} }
#txt2img_styles > label > div, #img2img_styles > label > div{
min-height: 3.2em;
}
#txt2img_styles ul, #img2img_styles ul{ #txt2img_styles ul, #img2img_styles ul{
max-height: 35em; max-height: 35em;
z-index: 2000; z-index: 2000;
...@@ -770,10 +770,6 @@ footer { ...@@ -770,10 +770,6 @@ footer {
line-height: 2.4em; line-height: 2.4em;
} }
#txt2img_extra_networks, #img2img_extra_networks{
margin-top: -1em;
}
.extra-networks > div > [id *= '_extra_']{ .extra-networks > div > [id *= '_extra_']{
margin: 0.3em; margin: 0.3em;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment