mirror of
https://github.com/easydiffusion/easydiffusion.git
synced 2025-06-21 10:27:47 +02:00
profile, thumbnail croppr size limit
This commit is contained in:
parent
2b49f6a8d0
commit
91a21b5e76
@ -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 …</h4>
|
<h4>Use the thumbnail for …</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">
|
||||||
|
@ -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;
|
||||||
|
}
|
@ -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
@ -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=""
|
||||||
|
@ -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")
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user