Merge pull request #3798 from aurror/modal-save-button-and-shortcut (1233bec1) · Commits · github_fork / Stable Diffusion Webui

javascript/imageviewer.js

+39 −0

Original line number	Diff line number	Diff line
		@@ -13,6 +13,15 @@ function showModal(event) {
		}
		lb.style.display = "block";
		lb.focus()

		const tabTxt2Img = gradioApp().getElementById("tab_txt2img")
		const tabImg2Img = gradioApp().getElementById("tab_img2img")
		// show the save button in modal only on txt2img or img2img tabs
		if (tabTxt2Img.style.display != "none" \|\| tabImg2Img.style.display != "none") {
		gradioApp().getElementById("modal_save").style.display = "inline"
		} else {
		gradioApp().getElementById("modal_save").style.display = "none"
		}
		event.stopPropagation()
		}

		@@ -81,6 +90,25 @@ function modalImageSwitch(offset) {
		}
		}

		function saveImage(){
		const tabTxt2Img = gradioApp().getElementById("tab_txt2img")
		const tabImg2Img = gradioApp().getElementById("tab_img2img")
		const saveTxt2Img = "save_txt2img"
		const saveImg2Img = "save_img2img"
		if (tabTxt2Img.style.display != "none") {
		gradioApp().getElementById(saveTxt2Img).click()
		} else if (tabImg2Img.style.display != "none") {
		gradioApp().getElementById(saveImg2Img).click()
		} else {
		console.error("missing implementation for saving modal of this type")
		}
		}

		function modalSaveImage(event) {
		saveImage()
		event.stopPropagation()
		}

		function modalNextImage(event) {
		modalImageSwitch(1)
		event.stopPropagation()
		@@ -93,6 +121,9 @@ function modalPrevImage(event) {

		function modalKeyHandler(event) {
		switch (event.key) {
		case "s":
		saveImage()
		break;
		case "ArrowLeft":
		modalPrevImage(event)
		break;
		@@ -198,6 +229,14 @@ document.addEventListener("DOMContentLoaded", function() {
		modalTileImage.title = "Preview tiling";
		modalControls.appendChild(modalTileImage)

		const modalSave = document.createElement("span")
		modalSave.className = "modalSave cursor"
		modalSave.id = "modal_save"
		modalSave.innerHTML = "🖫"
		modalSave.addEventListener("click", modalSaveImage, true)
		modalSave.title = "Save Image(s)"
		modalControls.appendChild(modalSave)

		const modalClose = document.createElement('span')
		modalClose.className = 'modalClose cursor';
		modalClose.innerHTML = '×'

modules/ui.py

+0 −2

Original line number	Diff line number	Diff line
		@@ -715,8 +715,6 @@ def create_ui(wrap_gradio_gpu_call):
		with gr.Group():
		custom_inputs = modules.scripts.scripts_txt2img.setup_ui(is_img2img=False)



		txt2img_gallery, generation_info, html_info = create_output_panel("txt2img", opts.outdir_txt2img_samples)

		connect_reuse_seed(seed, reuse_seed, generation_info, dummy_component, is_subseed=False)

style.css

+16 −2

Original line number	Diff line number	Diff line
		@@ -314,8 +314,8 @@ input[type="range"]{

		.modalControls {
		display: grid;
		grid-template-columns: 32px auto 1fr 32px;
		grid-template-areas: "zoom tile space close";
		grid-template-columns: 32px 32px 32px 1fr 32px;
		grid-template-areas: "zoom tile save space close";
		position: absolute;
		top: 0;
		left: 0;
		@@ -333,6 +333,10 @@ input[type="range"]{
		grid-area: zoom;
		}

		.modalSave {
		grid-area: save;
		}

		.modalTileImage {
		grid-area: tile;
		}
		@@ -346,8 +350,18 @@ input[type="range"]{
		cursor: pointer;
		}

		.modalSave {
		color: white;
		font-size: 28px;
		margin-top: 8px;
		font-weight: bold;
		cursor: pointer;
		}

		.modalClose:hover,
		.modalClose:focus,
		.modalSave:hover,
		.modalSave:focus,
		.modalZoom:hover,
		.modalZoom:focus {
		color: #999;

Admin message