mirror of
https://github.com/easydiffusion/easydiffusion.git
synced 2025-06-21 02:18:24 +02:00
profile, thumbnail croppr size limit
This commit is contained in:
parent
2b49f6a8d0
commit
91a21b5e76
@ -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 …</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">
|
||||
|
@ -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",
|
||||
"vram_usage_level",
|
||||
"confirm_dangerous_actions",
|
||||
"profileName",
|
||||
"metadata_output_format",
|
||||
"auto_save_settings",
|
||||
"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 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=""
|
||||
|
@ -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")
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user