relocate tool buttons next to generate button (184e23eb) · Commits · github_fork / Stable Diffusion Webui

html/extra-networks-card.html

+1 −1

Original line number	Original line	Diff line number	Diff line
	<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>

javascript/extraNetworks.js

+13 −20

Original line number	Original line	Diff line number	Diff line
	@@ -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)

javascript/ui.js

+2 −2

Original line number	Original line	Diff line number	Diff line
	@@ -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);

modules/ui.py

+21 −22

Original line number	Original line	Diff line number	Diff line
	@@ -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):
	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):
	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

style.css

+7 −11

Original line number	Original line	Diff line number	Diff line
	@@ -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 @@

	#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 @@
	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 {
	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;
	}		}

Admin message