profile, thumbnail croppr size limit

ui/index.html

@@ -698,12 +698,11 @@
         <div>
             <div class="use-as-thumb-grid">
                 <div class="use-as-thumb-preview">
-                    <img id="use-as-thumb-image" src="/media/images/noimg.png" width="512" height="512">
+                    <div id="use-as-thumb-img-container"><img id="use-as-thumb-image" src="/media/images/noimg.png" width="512" height="512"></div>
                 </div>
                 <div class="use-as-thumb-select">
                     <h4>Use the thumbnail for &hellip;</h4>
-                    <select size="8" multiple>
-                         <option>Embedding1</option>
+                    <select id="use-as-thumb-select" size="8" multiple>
                     </select>
                 </div>
                 <div class="use-as-thumb-buttons">

ui/media/css/croppr.css

@@ -1 +1,58 @@
-.croppr-container *{user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.croppr-container img{vertical-align:middle;max-width:100%}.croppr{position:relative;display:inline-block}.croppr-handle,.croppr-imageClipped,.croppr-overlay,.croppr-region{position:absolute;top:0}.croppr-overlay{background:rgba(0,0,0,.5);right:0;bottom:0;left:0;z-index:1;cursor:crosshair}.croppr-region{border:1px dashed rgba(0,0,0,.5);z-index:3;cursor:move}.croppr-imageClipped{right:0;bottom:0;left:0;z-index:2;pointer-events:none}.croppr-handle{border:1px solid #000;background-color:#fff;width:10px;height:10px;z-index:4}
+.croppr-container * {
+  user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+}
+
+.croppr-container img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.croppr {
+  position: relative;
+  display: inline-block;
+}
+
+.croppr-overlay {
+  background: rgba(0,0,0,0.5);
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  cursor: crosshair;
+}
+
+.croppr-region {
+  border: 1px dashed rgba(0, 0, 0, 0.5);
+  position: absolute;
+  z-index: 3;
+  cursor: move;
+  top: 0;
+}
+
+.croppr-imageClipped {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 2;
+  pointer-events: none;
+}
+
+.croppr-handle {
+  border: 1px solid black;
+  background-color: white;
+  width: 10px;
+  height: 10px;
+  position: absolute;
+  z-index: 4;
+  top: 0;
+}

ui/media/js/auto-save.js

@@ -45,6 +45,7 @@ const SETTINGS_IDS_LIST = [
     "sound_toggle",
     "vram_usage_level",
     "confirm_dangerous_actions",
+    "profileName",
     "metadata_output_format",
     "auto_save_settings",
     "apply_color_correction",

ui/media/js/main.js

@@ -171,7 +171,8 @@ let saveAllJSONToggle = document.querySelector("#json_toggle")
 let saveAllFoldersOption = document.querySelector("#download-add-folders")
 let splashScreenPopup = document.querySelector("#splash-screen")
 let useAsThumbDialog = document.querySelector("#use-as-thumb-dialog")
-let useAsThumbImage = document.querySelector("#use-as-thumb-image")
+let useAsThumbImageContainer = document.querySelector("#use-as-thumb-img-container")
+let useAsThumbSelect = document.querySelector("#use-as-thumb-select")
 
 let maskSetting = document.querySelector("#enable_mask")
 
@@ -678,20 +679,88 @@ function onMakeSimilarClick(req, img) {
     createTask(newTaskRequest)
 }
 
+function getAllModelNames(type) {
+    function f(tree) {
+        if (tree == undefined) {
+            return []
+        }
+        let result=[]; 
+        tree.forEach( e => { 
+            if (typeof(e) == "object") {
+                result = result.concat( f(e[1]))
+            } else {
+                result.push(e) 
+            }
+        });
+        return result
+    }
+    return f(modelsOptions[type])
+}
+
 function onUseAsThumbnailClick(req, img) {
     console.log(req)
     console.log(img)
+    let scale = 1
+    let targetWidth = img.naturalWidth
+    let targetHeight = img.naturalHeight
+    
+    let resize = false
+
+    if ( typeof(onUseAsThumbnailClick.croppr) == 'undefined' ) {
+        console.log("INIT CROPPR")
+        onUseAsThumbnailClick.croppr = new Croppr("#use-as-thumb-image", { aspectRatio: 1, minSize: [384,384,'px'], startSize:  [512, 512, 'px'], returnMode:"real" })
+    }
+
+    if (img.naturalWidth > img.naturalHeight) {
+        if (img.naturalWidth > 768) {
+           scale = 768 / img.naturalWidth
+           targetWidth  = 768
+           targetHeight = (img.naturalHeight*scale)>>>0
+           resize = true
+        }
+    } else {
+        if (img.naturalHeight > 768) {
+            scale = 768 / img.naturalHeight
+            targetHeight = 768
+            targetWidth  = (img.naturalWidth*scale)>>>0
+            resize = true
+        }
+    }
+    if (resize) {
+        console.log("Resize",targetWidth,targetHeight)
+        const canvas = document.createElement('canvas')
+        canvas.width = targetWidth
+        canvas.height = targetHeight
+        const ctx = canvas.getContext('2d')
+        ctx.drawImage(img, 0, 0, targetWidth, targetHeight)
+
+        onUseAsThumbnailClick.croppr.options.minSize = {width: 384*scale>>>0, height: 384*scale>>>0}
+        onUseAsThumbnailClick.croppr.options.startSize = {width: 512*scale>>>0, height: 512*scale>>>0}
+
+        onUseAsThumbnailClick.croppr.setImage(canvas.toDataURL('image/png'))
+    } else {
+        onUseAsThumbnailClick.croppr.setImage(img.src)
+    }
+
+    let embeddings = getAllModelNames("embeddings").filter( e => req.prompt.includes(e) || req.negative_prompt.includes(e) )
+    let LORA = []
+
+    if ("use_lora_model" in req) {
+        LORA=req.use_lora_model
+    }
+
+    let optgroup = document.createElement("optgroup")
+    optgroup.label = "Embeddings"
+    optgroup.replaceChildren(...embeddings.map(e => { 
+        let option = document.createElement("option")
+        option.innerText = e
+        return option
+    }))
+    
+    console.log("##OptGroup",optgroup)
+    useAsThumbSelect.replaceChildren(optgroup)
 
     useAsThumbDialog.showModal()
-    useAsThumbImage.src = img.src
-    img.width = img.height = 512
-
-    var croppr = new Croppr(useAsThumbImage, { aspectRatio: 1, minSize: [384,384,'px'], startSize:  [100, 100, '%'], returnMode:"real" })
-
-    useAsThumbDialog.addEventListener("blur", () => {
-        console.log("blur")
-        croppr.destroy
-    })
 
 //    fetch(img.src)
 //      .then(response => response.blob())
@@ -2522,13 +2591,14 @@ function updateEmbeddingsList(filter = "") {
         let embIcon = Object.assign({}, ...iconlist.map( x=> ({[x.toLowerCase().split('.').slice(0,-1).join('.')]:x})))
         console.log(embIcon)
 
+        let profileName = profileNameField.value
         model?.forEach((m) => {
             if (typeof m == "string") {
                 let token=m.toLowerCase()
                 if (token.search(filter) != -1) {
                     let img = '/media/images/noimg.png'
                     if (token in embIcon) {
-                        img = `/bucket/embeddings/${embIcon[token]}`
+                        img = `/bucket/${profileName}/embeddings/${embIcon[token]}`
                     }
                     if (iconlist.length==0) {
                         img=""

ui/media/js/parameters.js

@@ -185,6 +185,16 @@ var PARAMETERS = [
         icon: "fa-check-double",
         default: true,
     },
+    {
+        id: "profileName",
+        type: ParameterType.custom,
+        label: "Profile Name",
+        note: "Name of the profile for model manager settings, e.g. thumbnails for embeddings. Use this to have different settings for different users.",
+        render: (parameter) => {
+            return `<input id="${parameter.id}" name="${parameter.id}" value="default" size="12">`
+        },
+        icon: "fa-user-gear",
+    },
     {
         id: "listen_to_network",
         type: ParameterType.checkbox,
@@ -389,6 +399,7 @@ let useBetaChannelField = document.querySelector("#use_beta_channel")
 let uiOpenBrowserOnStartField = document.querySelector("#ui_open_browser_on_start")
 let confirmDangerousActionsField = document.querySelector("#confirm_dangerous_actions")
 let testDiffusers = document.querySelector("#test_diffusers")
+let profileNameField = document.querySelector("#profileName")
 
 let saveSettingsBtn = document.querySelector("#save-system-settings-btn")