diff --git a/ui/media/images/noimg.png b/ui/media/images/noimg.png new file mode 100644 index 00000000..33d7332f Binary files /dev/null and b/ui/media/images/noimg.png differ diff --git a/ui/media/js/main.js b/ui/media/js/main.js index 0b936066..4b2b5dfd 100644 --- a/ui/media/js/main.js +++ b/ui/media/js/main.js @@ -508,6 +508,7 @@ function showImages(reqBody, res, outputContainer, livePreview) { { text: "Upscale", on_click: onUpscaleClick, filter: (req, img) => !req.use_upscale }, { text: "Fix Faces", on_click: onFixFacesClick, filter: (req, img) => !req.use_face_correction }, ], + { text: "Use as Thumbnail", on_click: onUseAsThumbnailClick }, ] // include the plugins @@ -632,6 +633,20 @@ function onMakeSimilarClick(req, img) { createTask(newTaskRequest) } +function onUseAsThumbnailClick(req, img) { + console.log(req) + console.log(img) + let embedding = prompt("Embedding name") + fetch(img.src) + .then(response => response.blob()) + .then(async function(blob) { + const formData = new FormData() + formData.append("file", blob) + const response = await fetch(`bucket/embeddings/${embedding}.jpg`, { method: 'POST', body: formData }); + console.log(response) + }) +} + function enqueueImageVariationTask(req, img, reqDiff) { const imageSeed = img.getAttribute("data-seed") @@ -2157,19 +2172,27 @@ document.getElementById("toggle-cloudflare-tunnel").addEventListener("click", as /* Embeddings */ +let icl = [] function updateEmbeddingsList(filter = "") { - function html(model, prefix = "", filter = "") { + function html(model, iconlist = [], prefix = "", filter = "") { filter = filter.toLowerCase() let toplevel = "" let folders = "" + console.log(iconlist) + let embIcon = Object.assign({}, ...iconlist.map( x=> ({[x.toLowerCase().split('.').slice(0,-1).join('.')]:x}))) model?.forEach((m) => { if (typeof m == "string") { - if (m.toLowerCase().search(filter) != -1) { - toplevel += ` ` + let token=m.toLowerCase() + if (token.search(filter) != -1) { + let img = '/media/images/noimg.png' + if (token in embIcon) { + img = `/bucket/embeddings/${embIcon[token]}` + } + toplevel += ` ` } } else { - let subdir = html(m[1], prefix + m[0] + "/", filter) + let subdir = html(m[1], iconlist, prefix + m[0] + "/", filter) if (subdir != "") { folders += `
' } @@ -2179,7 +2202,7 @@ function updateEmbeddingsList(filter = "") { } function onButtonClick(e) { - let text = e.target.dataset["embedding"] + let text = e.target.closest("button").dataset["embedding"] const insertIntoNegative = e.shiftKey || positiveEmbeddingText.classList.contains("displayNone") if (embeddingsModeField.value == "insert") { @@ -2214,14 +2237,18 @@ function updateEmbeddingsList(filter = "") { } // END of remove block - embeddingsList.innerHTML = warning + html(modelsOptions.embeddings, "", filter) - embeddingsList.querySelectorAll("button").forEach((b) => { - b.addEventListener("click", onButtonClick) - }) - createCollapsibles(embeddingsList) - if (filter != "") { - embeddingsExpandAll() - } + fetch("/bucket/embeddings/") + .then(response => response.json()) + .then(iconlist => { + embeddingsList.innerHTML = warning + html(modelsOptions.embeddings, iconlist, "", filter) + embeddingsList.querySelectorAll("button").forEach((b) => { + b.addEventListener("click", onButtonClick) + }) + createCollapsibles(embeddingsList) + if (filter != "") { + embeddingsExpandAll() + } + }) } function showEmbeddingDialog() {