added save button and shortcut (s) to Modal View (0995e879) · Commits · github_fork / Stable Diffusion Webui

javascript/imageviewer.js

+29 −0

Original line number	Diff line number	Diff line
		@@ -81,6 +81,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 +112,9 @@ function modalPrevImage(event) {

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

		const modalSave = document.createElement("span")
		modalSave.className = "modalSave cursor"
		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 = '×'

+5 −3

Original line number	Diff line number	Diff line
		@@ -683,7 +683,8 @@ def create_ui(wrap_gradio_gpu_call):

		with gr.Column():
		with gr.Row():
		save = gr.Button('Save')
		saveButtonId = 'save_txt2img'
		save = gr.Button('Save', elem_id=saveButtonId)
		send_to_img2img = gr.Button('Send to img2img')
		send_to_inpaint = gr.Button('Send to inpaint')
		send_to_extras = gr.Button('Send to extras')
		@@ -901,7 +902,8 @@ def create_ui(wrap_gradio_gpu_call):

		with gr.Column():
		with gr.Row():
		save = gr.Button('Save')
		saveButtonId = 'save_img2img'
		save = gr.Button('Save', elem_id=saveButtonId)
		img2img_send_to_img2img = gr.Button('Send to img2img')
		img2img_send_to_inpaint = gr.Button('Send to inpaint')
		img2img_send_to_extras = gr.Button('Send to extras')

+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 auto 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: 30px;
		margin-top: 6px;
		font-weight: bold;
		cursor: pointer;
		}

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