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 {