relocate tool buttons next to generate button

prevent extra network tabs from putting images into wrong prompts
prevent settings leaking into prompt

html/extra-networks-card.html

-<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='additional'>
 			<ul>

javascript/extraNetworks.js

@@ -6,49 +6,42 @@ function setupExtraNetworksForTab(tabname){
     gradioApp().querySelector('#'+tabname+'_extra_tabs > div').appendChild(gradioApp().getElementById(tabname+'_extra_close'))
 }
 
-var activePromptTextarea = null;
-var activePositivePromptTextarea = null;
+var activePromptTextarea = {};
 
 function setupExtraNetworks(){
     setupExtraNetworksForTab('txt2img')
     setupExtraNetworksForTab('img2img')
 
-    function registerPrompt(id, isNegative){
+    function registerPrompt(tabname, id){
         var textarea = gradioApp().querySelector("#" + id + " > label > textarea");
 
-        if (activePromptTextarea == null){
-            activePromptTextarea = textarea
-        }
-        if (activePositivePromptTextarea == null && ! isNegative){
-            activePositivePromptTextarea = textarea
+        if (! activePromptTextarea[tabname]){
+            activePromptTextarea[tabname] = textarea
         }
 
 		textarea.addEventListener("focus", function(){
-            activePromptTextarea = textarea;
-            if(! isNegative)  activePositivePromptTextarea = textarea;
+            activePromptTextarea[tabname] = textarea;
 		});
     }
 
-    registerPrompt('txt2img_prompt')
-    registerPrompt('txt2img_neg_prompt', true)
-    registerPrompt('img2img_prompt')
-    registerPrompt('img2img_neg_prompt', true)
+    registerPrompt('txt2img', 'txt2img_prompt')
+    registerPrompt('txt2img', 'txt2img_neg_prompt')
+    registerPrompt('img2img', 'img2img_prompt')
+    registerPrompt('img2img', 'img2img_neg_prompt')
 }
 
 onUiLoaded(setupExtraNetworks)
 
-function cardClicked(textToAdd, allowNegativePrompt){
-    textarea = allowNegativePrompt ? activePromptTextarea : activePositivePromptTextarea
+function cardClicked(tabname, textToAdd, allowNegativePrompt){
+    var textarea = allowNegativePrompt ? activePromptTextarea[tabname] : gradioApp().querySelector("#" + tabname + "_prompt > label > textarea")
 
     textarea.value = textarea.value + " " + textToAdd
     updateInput(textarea)
-
-    return false
 }
 
 function saveCardPreview(event, tabname, filename){
-    textarea = gradioApp().querySelector("#" + tabname + '_preview_filename  > label > textarea')
-    button = gradioApp().getElementById(tabname + '_save_preview')
+    var textarea = gradioApp().querySelector("#" + tabname + '_preview_filename  > label > textarea')
+    var button = gradioApp().getElementById(tabname + '_save_preview')
 
     textarea.value = filename
     updateInput(textarea)

javascript/ui.js

@@ -203,8 +203,8 @@ onUiUpdate(function(){
 	json_elem = gradioApp().getElementById('settings_json')
 	if(json_elem == null) return;
 
-    textarea = json_elem.querySelector('textarea')
-    jsdata = textarea.value
+    var textarea = json_elem.querySelector('textarea')
+    var jsdata = textarea.value
     opts = JSON.parse(jsdata)
     executeCallbacks(optionsChangedCallbacks);
 

modules/ui.py

@@ -349,30 +349,13 @@ def create_toprow(is_img2img):
             with gr.Row():
                 with gr.Column(scale=80):
                     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.Column(scale=80):
                     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)")
 
-        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_deepbooru = None
         if is_img2img:
@@ -380,7 +363,7 @@ def create_toprow(is_img2img):
                 button_interrogate = gr.Button('Interrogate\nCLIP', elem_id="interrogate")
                 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"):
                 interrupt = gr.Button('Interrupt', elem_id=f"{id_part}_interrupt")
                 skip = gr.Button('Skip', elem_id=f"{id_part}_skip")
@@ -398,13 +381,29 @@ def create_toprow(is_img2img):
                     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"):
                 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")
 
-                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
 
 

style.css

@@ -124,15 +124,12 @@
     height: 100%;
 }
 
-#roll_col{
-    min-width: unset !important;
-    flex-grow: 0 !important;
-    padding: 0 1em 0 0;
+#txt2img_actions_column, #img2img_actions_column{
     gap: 0;
 }
 
-#roll_col > button {
-    margin: 0.1em 0;
+#txt2img_tools, #img2img_tools{
+    gap: 0.4em;
 }
 
 #interrogate_col{
@@ -153,7 +150,6 @@
 
 #txt2img_styles_row, #img2img_styles_row{
     gap: 0.25em;
-    margin-top: 0.5em;
 }
 
 #txt2img_styles_row > button, #img2img_styles_row > button{
@@ -164,6 +160,10 @@
     padding: 0;
 }
 
+#txt2img_styles > label > div, #img2img_styles > label > div{
+    min-height: 3.2em;
+}
+
 #txt2img_styles ul, #img2img_styles ul{
     max-height: 35em;
     z-index: 2000;
@@ -770,10 +770,6 @@ footer {
     line-height: 2.4em;
 }
 
-#txt2img_extra_networks, #img2img_extra_networks{
-    margin-top: -1em;
-}
-
 .extra-networks > div > [id *= '_extra_']{
     margin: 0.3em;
 }