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=""