Improvements/Fixes for embeddings UI (#1509)

- Don't show "Use as thumbnail" if no embeddings were used in the prompt
- Fix layout issue on small screens
- use req.use_embeddings_model instead of parsing the prompt
- Add button to upload a thumb" ../../index.html ../css/main.css main.js

ui/index.html

@@ -680,6 +680,8 @@
                 <span>
             </div>
             <div id="embeddings-dialog-header-right">
+                <button id="add-embeddings-thumb" class="tertiaryButton smallButton" style="background-color: var(--background-color4);"><i class="fa-solid fa-folder-plus"></i> Add thumbnail</button>
+                <input id="add-embeddings-thumb-input" name="add-embeddings-thumb-input" type="file" class="displayNone">
                 <i id="embeddings-dialog-close-button" class="fa-solid fa-xmark fa-lg"></i>
             </div>
         </div>

ui/media/css/main.css

@@ -1706,6 +1706,12 @@ body.wait-pause {
     overflow-y: scroll;
 }
 
+@media screen and (max-width: 1400px) {
+    #embeddings-list {
+        width: 80vW;
+    }
+}
+
 #embeddings-list button {
     margin: 2px;
     color: var(--button-color);

ui/media/js/main.js

@@ -144,6 +144,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 addEmbeddingsThumb = document.querySelector("#add-embeddings-thumb")
+let addEmbeddingsThumbInput = document.querySelector("#add-embeddings-thumb-input")
 
 let positiveEmbeddingText = document.querySelector("#positive-embedding-text")
 let negativeEmbeddingText = document.querySelector("#negative-embedding-text")
@@ -547,7 +549,7 @@ function showImages(reqBody, res, outputContainer, livePreview) {
                     { text: "Upscale", on_click: onUpscaleClick },
                     { text: "Fix Faces", on_click: onFixFacesClick },
                 ],
-                { text: "Use as Thumbnail", on_click: onUseAsThumbnailClick },
+                { text: "Use as Thumbnail", on_click: onUseAsThumbnailClick, filter: (req, img) => "use_embeddings_model" in req },
             ]
 
             // include the plugins
@@ -758,9 +760,7 @@ function onUseAsThumbnailClick(req, img) {
         onUseAsThumbnailClick.croppr.setImage(img.src)
     }
 
-    let embeddings = getAllModelNames("embeddings").filter(
-        (e) => req.prompt.includes(e) || req.negative_prompt.includes(e)
-    )
+    let embeddings = req.use_embeddings_model.map(e => e.split("/").pop())
     let LORA = []
 
     if ("use_lora_model" in req) {
@@ -2741,6 +2741,34 @@ document.getElementById("toggle-tensorrt-install").addEventListener("click", fun
 
 /* Embeddings */
 
+addEmbeddingsThumb.addEventListener("click", e => addEmbeddingsThumbInput.click())
+addEmbeddingsThumbInput.addEventListener("change", loadThumbnailImageFromFile)
+
+function loadThumbnailImageFromFile() {
+    if (addEmbeddingsThumbInput.files.length === 0) {
+        return
+    }
+
+    let reader = new FileReader()
+    let file = addEmbeddingsThumbInput.files[0]
+
+    reader.addEventListener("load", function(event) {
+        let img = document.createElement("img")
+        img.src = reader.result
+        onUseAsThumbnailClick(
+            {
+                use_embeddings_model: getAllModelNames("embeddings").sort((a, b) => a.localeCompare(b, undefined, { sensitivity: 'base' }))
+            },
+            img
+        )
+    })
+
+    if (file) {
+        reader.readAsDataURL(file)
+    }
+}
+
+
 function updateEmbeddingsList(filter = "") {
     function html(model, iconlist = [], prefix = "", filter = "") {
         filter = filter.toLowerCase()