diff --git a/ui/plugins/ui/model-tools.plugin.js b/ui/plugins/ui/model-tools.plugin.js index 09fd6499..55bf4de5 100644 --- a/ui/plugins/ui/model-tools.plugin.js +++ b/ui/plugins/ui/model-tools.plugin.js @@ -117,7 +117,8 @@ grid-template-rows: auto 1fr; grid-template-areas: "selector selector selector" - "thumbnail keywords notes"; + "thumbnail keywords notes" + "civimg civimg civimg"; } } @@ -132,7 +133,8 @@ grid-template-areas: "selector selector" "thumbnail keywords" - "thumbnail notes"; + "thumbnail notes" + "civimg civimg"; } } @@ -149,7 +151,8 @@ "selector" "keywords" "thumbnail" - "notes"; + "notes" + "civimg"; } } @@ -171,6 +174,10 @@ .lora-manager-grid-notes { grid-area: notes; } + + .lora-manager-grid-civimg { + grid-area: civimg; + } .lora-manager-grid p { margin-bottom: 2px; @@ -307,6 +314,8 @@

+
+
` let tabHTML=` @@ -675,6 +684,7 @@ LoraUI.keywordsField.value = "" LoraUI.notesField.value = "" LoraUI.hideCivitaiLink() + document.querySelector(".lora-manager-grid-civimg").innerHTML = "" } else { LoraUI.keywordsField.value = info.keywords.join("\n") LoraUI.notesField.value = info.notes @@ -683,6 +693,7 @@ } else { LoraUI.hideCivitaiLink() } + document.querySelector(".lora-manager-grid-civimg").innerHTML = "" } }) Bucket.getImageAsDataURL(`${profileNameField.value}/lora/${LoraUI.modelField.value}.png`) @@ -724,6 +735,35 @@ } else { showToast("No keyword info found.") } + if ("images" in json) { + json.images.forEach(element => { + if (blockNSFWField.checked) { + if (element.nsfw != "None") { + return + } + } + let civitimg = document.createElement("img") + fetch(element.url) + .then(result => result.blob()) + .then(blob => { + civitimg.src = URL.createObjectURL(blob); + + }) + civitimg.style["max-width"] = "256px" + civitimg.style["max-height"] = "256px" + civitimg.alt = "Civitai image (nsfw: " + element.nsfw + ")" + document.querySelector(".lora-manager-grid-civimg").appendChild(civitimg) + civitimg.addEventListener("click", (e) => onUseAsThumbnailClick( + { + use_lora_model: LoraUI.modelField.value, + }, + civitimg + )) + + }); + } else { + showToast("No images found.") + } if ("modelId" in json) { LoraUI.showCivitaiLink("https://civitai.com/models/" + json.modelId) } else {