profile, thumbnail croppr size limit

This commit is contained in:
JeLuF 2023-08-03 01:27:46 +02:00
parent 2b49f6a8d0
commit 91a21b5e76
6 changed files with 1342 additions and 16 deletions

View File

@ -698,12 +698,11 @@
<div> <div>
<div class="use-as-thumb-grid"> <div class="use-as-thumb-grid">
<div class="use-as-thumb-preview"> <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>
<div class="use-as-thumb-select"> <div class="use-as-thumb-select">
<h4>Use the thumbnail for &hellip;</h4> <h4>Use the thumbnail for &hellip;</h4>
<select size="8" multiple> <select id="use-as-thumb-select" size="8" multiple>
<option>Embedding1</option>
</select> </select>
</div> </div>
<div class="use-as-thumb-buttons"> <div class="use-as-thumb-buttons">

View File

@ -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;
}

View File

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

File diff suppressed because one or more lines are too long

View File

@ -171,7 +171,8 @@ let saveAllJSONToggle = document.querySelector("#json_toggle")
let saveAllFoldersOption = document.querySelector("#download-add-folders") let saveAllFoldersOption = document.querySelector("#download-add-folders")
let splashScreenPopup = document.querySelector("#splash-screen") let splashScreenPopup = document.querySelector("#splash-screen")
let useAsThumbDialog = document.querySelector("#use-as-thumb-dialog") 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") let maskSetting = document.querySelector("#enable_mask")
@ -678,20 +679,88 @@ function onMakeSimilarClick(req, img) {
createTask(newTaskRequest) 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) { function onUseAsThumbnailClick(req, img) {
console.log(req) console.log(req)
console.log(img) 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() 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) // fetch(img.src)
// .then(response => response.blob()) // .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}))) let embIcon = Object.assign({}, ...iconlist.map( x=> ({[x.toLowerCase().split('.').slice(0,-1).join('.')]:x})))
console.log(embIcon) console.log(embIcon)
let profileName = profileNameField.value
model?.forEach((m) => { model?.forEach((m) => {
if (typeof m == "string") { if (typeof m == "string") {
let token=m.toLowerCase() let token=m.toLowerCase()
if (token.search(filter) != -1) { if (token.search(filter) != -1) {
let img = '/media/images/noimg.png' let img = '/media/images/noimg.png'
if (token in embIcon) { if (token in embIcon) {
img = `/bucket/embeddings/${embIcon[token]}` img = `/bucket/${profileName}/embeddings/${embIcon[token]}`
} }
if (iconlist.length==0) { if (iconlist.length==0) {
img="" img=""

View File

@ -185,6 +185,16 @@ var PARAMETERS = [
icon: "fa-check-double", icon: "fa-check-double",
default: true, 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", id: "listen_to_network",
type: ParameterType.checkbox, type: ParameterType.checkbox,
@ -389,6 +399,7 @@ let useBetaChannelField = document.querySelector("#use_beta_channel")
let uiOpenBrowserOnStartField = document.querySelector("#ui_open_browser_on_start") let uiOpenBrowserOnStartField = document.querySelector("#ui_open_browser_on_start")
let confirmDangerousActionsField = document.querySelector("#confirm_dangerous_actions") let confirmDangerousActionsField = document.querySelector("#confirm_dangerous_actions")
let testDiffusers = document.querySelector("#test_diffusers") let testDiffusers = document.querySelector("#test_diffusers")
let profileNameField = document.querySelector("#profileName")
let saveSettingsBtn = document.querySelector("#save-system-settings-btn") let saveSettingsBtn = document.querySelector("#save-system-settings-btn")