From 3bd6773e4954231e8899dc7a3bd3947d0d747cc0 Mon Sep 17 00:00:00 2001 From: JeLuF Date: Thu, 10 Aug 2023 01:03:08 +0200 Subject: [PATCH 1/3] zoom and input buttons --- ui/media/css/main.css | 32 +++++++++++++++++++++-------- ui/media/js/main.js | 48 +++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 69 insertions(+), 11 deletions(-) diff --git a/ui/media/css/main.css b/ui/media/css/main.css index e0d1d02d..270f2763 100644 --- a/ui/media/css/main.css +++ b/ui/media/css/main.css @@ -1898,12 +1898,21 @@ div#enlarge-buttons { } .gallery-container { - columns: 5 ; + columns: 6 380px ; column-gap: 1.5rem; width: 95%; margin: 0 0 ; } -.gallery-container div { + +.gallery-image img { + width: 100%; + border-radius: 5px; + transition: all .25s ease-in-out; + box-shadow: 5px 5px 5px rgba(0,0,0,0.4); +} + +.gallery-image { + position: relative; margin: 0 1.5rem 1.5rem 0; display: inline-block; width: 100%; @@ -1912,15 +1921,20 @@ div#enlarge-buttons { transition: all .75s ease-in-out; } -.gallery-container div img { - width: 100%; - border-radius: 5px; - transition: all .25s ease-in-out; - box-shadow: 5px 5px 5px rgba(0,0,0,0.4); +.gallery-image-hover { + position: absolute; + right: 15px; + top: 15px; + opacity: 0; + text-align: right; } -.gallery-container div img:hover { - box-shadow: 1px 1px 15px rgba(32,0,128,0.8); +.gallery-image-hover button { + margin-bottom: 5px; +} + +.gallery-image:hover .gallery-image-hover { + opacity: 1; } diff --git a/ui/media/js/main.js b/ui/media/js/main.js index a4476252..5e03cbb9 100644 --- a/ui/media/js/main.js +++ b/ui/media/js/main.js @@ -3087,11 +3087,55 @@ let recentResolutionsValues = [] /* Gallery JS */ function galleryImage(item) { let div = document.createElement("div") - let img = document.createElement("img") + div.classList.add("gallery-image") + let img = document.createElement("img") img.src = "/image/" + item.path img.dataset["request"] = JSON.stringify(item) - div.appendChild(img) + + let hover = document.createElement("div") + hover.classList.add("gallery-image-hover") + + let imageExpandBtn=document.createElement("button") + imageExpandBtn.classList.add("tertiaryButton") + imageExpandBtn.innerHTML = '' + imageExpandBtn.addEventListener("click", function() { + function previousImage(img) { + const allImages = Array.from(document.getElementById("imagecontainer").querySelectorAll(".gallery-image img")) + const index = allImages.indexOf(img) + return allImages.slice(0, index).reverse()[0] + } + + function nextImage(img) { + const allImages = Array.from(document.getElementById("imagecontainer").querySelectorAll(".gallery-image img")) + const index = allImages.indexOf(img) + return allImages.slice(index + 1)[0] + } + + function imageModalParameter(img) { + const previousImg = previousImage(img) + const nextImg = nextImage(img) + + return { + src: img.src, + previous: previousImg ? () => imageModalParameter(previousImg) : undefined, + next: nextImg ? () => imageModalParameter(nextImg) : undefined, + } + } + imageModal(imageModalParameter(img)) + }) + + hover.appendChild(imageExpandBtn) + hover.appendChild(document.createElement("br")) + + let useAsInputBtn = document.createElement("button") + useAsInputBtn.classList.add("tertiaryButton") + useAsInputBtn.innerHTML = "Use as Input" + useAsInputBtn.addEventListener("click", (e) => onUseAsInputClick(null, img)) + + hover.appendChild(useAsInputBtn) + + div.replaceChildren(img, hover) return div } From 6d51f334b1b91319a4baff4376de5503c35ffcdc Mon Sep 17 00:00:00 2001 From: JeLuF Date: Fri, 11 Aug 2023 01:02:59 +0200 Subject: [PATCH 2/3] More hover buttons --- ui/index.html | 13 +++++++++ ui/media/js/main.js | 68 +++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 81 insertions(+) diff --git a/ui/index.html b/ui/index.html index d5803fcc..e4b7a589 100644 --- a/ui/index.html +++ b/ui/index.html @@ -521,6 +521,19 @@
+ + +
+
+ diff --git a/ui/media/js/main.js b/ui/media/js/main.js index 5e03cbb9..0c314284 100644 --- a/ui/media/js/main.js +++ b/ui/media/js/main.js @@ -142,6 +142,8 @@ let embeddingsSearchBox = document.querySelector("#embeddings-search-box") let embeddingsList = document.querySelector("#embeddings-list") let embeddingsModeField = document.querySelector("#embeddings-mode") let embeddingsCardSizeSelector = document.querySelector("#embedding-card-size-selector") +let galleryImginfoDialog = document.querySelector("#gallery-imginfo") +let galleryImginfoDialogContent = document.querySelector("#gallery-imginfo-content") let positiveEmbeddingText = document.querySelector("#positive-embedding-text") let negativeEmbeddingText = document.querySelector("#negative-embedding-text") @@ -3085,6 +3087,30 @@ let recentResolutionsValues = [] })() /* Gallery JS */ + +const IMAGE_INFO = { + "Prompt": "prompt", + "Negative Prompt": "negative_prompt", + "Seed": "seed", + "Time": "time_created", + "Model": "use_stable_diffusion_model", + "VAE Model": "use_vae_model", + "Hypernetwork": "use_hypernetwork_model", + "LORA": "lora", + "Path": "path", + "Width": "width", + "Height": "height", + "Steps": "num_inference_steps", + "Sampler": "sampler_name", + "Guidance Scale": "guidance_scale", + "Tiling": "tiling", + "Upscaler": "use_upscale", + "Face Correction": "use_face_correction", + "Clip Skip": "clip_skip", +} + +const IGNORE_TOKENS = ["None", "none", "Null", "null", "false", "False"] + function galleryImage(item) { let div = document.createElement("div") div.classList.add("gallery-image") @@ -3096,9 +3122,34 @@ function galleryImage(item) { let hover = document.createElement("div") hover.classList.add("gallery-image-hover") + let infoBtn = document.createElement("button") + infoBtn.classList.add("tertiaryButton") + infoBtn.innerHTML = '' + infoBtn.addEventListener("click", function() { + let table = document.createElement("table") + console.log(item) + + for (const [label, key] of Object.entries(IMAGE_INFO)) { + console.log(label, key, item[key]) + console.log(IGNORE_TOKENS.findIndex( k => (k == item[key]))) + if (IGNORE_TOKENS.findIndex( k => (k == item[key])) == -1) { + let data = item[key] + if (key == "path") { + data = "…/"+data.split(/[\/\\]/).pop() + } + table.appendChild(htmlToElement(`${label}:${data}`)) + } + } + galleryImginfoDialogContent.replaceChildren(table) + galleryImginfoDialog.showModal() + }) + hover.appendChild(infoBtn) + + let imageExpandBtn=document.createElement("button") imageExpandBtn.classList.add("tertiaryButton") imageExpandBtn.innerHTML = '' + imageExpandBtn.style["margin-left"] = "0.2em" imageExpandBtn.addEventListener("click", function() { function previousImage(img) { const allImages = Array.from(document.getElementById("imagecontainer").querySelectorAll(".gallery-image img")) @@ -3126,6 +3177,16 @@ function galleryImage(item) { }) hover.appendChild(imageExpandBtn) + + let openInNewTabBtn = document.createElement("button") + openInNewTabBtn.classList.add("tertiaryButton") + openInNewTabBtn.innerHTML = '' + openInNewTabBtn.style["margin-left"] = "0.2em" + openInNewTabBtn.addEventListener("click", (e) => { + window.open(img.src) + }) + hover.appendChild(openInNewTabBtn) + hover.appendChild(document.createElement("br")) let useAsInputBtn = document.createElement("button") @@ -3139,6 +3200,13 @@ function galleryImage(item) { return div } +modalDialogCloseOnBackdropClick(galleryImginfoDialog) +makeDialogDraggable(galleryImginfoDialog) + +galleryImginfoDialog.querySelector("#gallery-imginfo-close-button").addEventListener("click", () => { + galleryImginfoDialog.close() +}) + function refreshGallery() { let container = document.getElementById("imagecontainer") container.innerHTML="" From 33f4f63068bb20416d699372f3fdc50419c524e1 Mon Sep 17 00:00:00 2001 From: JeLuF Date: Mon, 14 Aug 2023 01:47:24 +0200 Subject: [PATCH 3/3] nonlinear slider --- ui/index.html | 2 +- ui/media/js/main.js | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/ui/index.html b/ui/index.html index ef16ec38..f3f0574d 100644 --- a/ui/index.html +++ b/ui/index.html @@ -524,7 +524,7 @@ - + diff --git a/ui/media/js/main.js b/ui/media/js/main.js index 9259e6c8..3bba6a31 100644 --- a/ui/media/js/main.js +++ b/ui/media/js/main.js @@ -3244,13 +3244,15 @@ window.addEventListener("resize", layoutGallery) function layoutGallery() { let container = document.getElementById("imagecontainer") - let thumbSize = parseInt(galleryThumbnailSize.value) + let thumbSize = parseFloat(galleryThumbnailSize.value) + thumbSize = (10*thumbSize*thumbSize)>>>0 let root = document.querySelector(':root') root.style.setProperty('--gallery-width', thumbSize + "px") let msnry = new Masonry( container, { gutter: 10, itemSelector: '.gallery-image', - columnWidth: thumbSize + columnWidth: thumbSize, + fitWidth: true, }) }