mirror of
https://github.com/easydiffusion/easydiffusion.git
synced 2025-06-21 02:18:24 +02:00
add croppr
This commit is contained in:
JeLuF
parent
518df4bd3e
commit
a70a795662
@ -712,3 +712,31 @@ FileSaver.js is licensed under the MIT license:
|
||||
SOFTWARE.
|
||||
|
||||
[1]: http://eligrey.com
|
||||
|
||||
croppr.js
|
||||
=========
|
||||
https://github.com/jamesssooi/Croppr.js
|
||||
|
||||
croppr.js is licensed under the MIT license:
|
||||
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2017 James Ooi
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
|
||||
@ -18,12 +18,14 @@
|
||||
<link rel="stylesheet" href="/media/css/image-modal.css">
|
||||
<link rel="stylesheet" href="/media/css/plugins.css">
|
||||
<link rel="stylesheet" href="/media/css/animations.css">
|
||||
<link rel="stylesheet" href="/media/css/croppr.css" rel="stylesheet"/>
|
||||
<link rel="manifest" href="/media/manifest.webmanifest">
|
||||
<script src="/media/js/jquery-3.6.1.min.js"></script>
|
||||
<script src="/media/js/jquery-confirm.min.js"></script>
|
||||
<script src="/media/js/jszip.min.js"></script>
|
||||
<script src="/media/js/FileSaver.min.js"></script>
|
||||
<script src="/media/js/marked.min.js"></script>
|
||||
<script src="/media/js/croppr.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
@ -630,6 +632,35 @@
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
<dialog id="use-as-thumb-dialog">
|
||||
<div id="use-as-thumb-dialog-header" class="dialog-header">
|
||||
<div id="use-as-thumb-dialog-header-left" class="dialog-header-left">
|
||||
<h4>Use as thumbnail</h4>
|
||||
<span>Use a pictures as thumbnail for embeddings, LORAs, etc.</span>
|
||||
</div>
|
||||
<div id="use-as-thumb-dialog-header-right">
|
||||
<i id="use-as-thumb-dialog-close-button" class="fa-solid fa-xmark fa-lg"></i>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<div class="use-as-thumb-select">
|
||||
<h4>Use the thumbnail for …</h4>
|
||||
<select size="8" multiple>
|
||||
<option>Embedding1</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="use-as-thumb-buttons">
|
||||
<button class="tertiaryButton">OK</button>
|
||||
<button class="tertiaryButton">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
<div id="image-editor" class="popup image-editor-popup">
|
||||
<div>
|
||||
<i class="close-button fa-solid fa-xmark"></i>
|
||||
|
||||
1
ui/media/css/croppr.css
Normal file
1
ui/media/css/croppr.css
Normal file
@ -0,0 +1 @@
|
||||
.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}
|
||||
@ -1741,6 +1741,32 @@ body.wait-pause {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.use-as-thumb-grid { display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
grid-template-rows: 1fr auto;
|
||||
gap: 8px 8px;
|
||||
grid-auto-flow: row;
|
||||
grid-template-areas:
|
||||
"uat-preview uat-select"
|
||||
"uat-buttons uat-buttons";
|
||||
}
|
||||
|
||||
.use-as-thumb-preview {
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
grid-area: uat-preview;
|
||||
}
|
||||
|
||||
.use-as-thumb-select {
|
||||
grid-area: uat-select;
|
||||
}
|
||||
|
||||
.use-as-thumb-buttons {
|
||||
justify-self: center;
|
||||
grid-area: uat-buttons;
|
||||
}
|
||||
|
||||
|
||||
.diffusers-disabled-on-startup .diffusers-restart-needed {
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
1
ui/media/js/croppr.js
Executable file
1
ui/media/js/croppr.js
Executable file
File diff suppressed because one or more lines are too long
@ -164,6 +164,8 @@ let saveAllTreeToggle = document.querySelector("#tree_toggle")
|
||||
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 maskSetting = document.querySelector("#enable_mask")
|
||||
|
||||
@ -673,15 +675,20 @@ function onMakeSimilarClick(req, img) {
|
||||
function onUseAsThumbnailClick(req, img) {
|
||||
console.log(req)
|
||||
console.log(img)
|
||||
let embedding = prompt("Embedding name")
|
||||
fetch(img.src)
|
||||
.then(response => response.blob())
|
||||
.then(async function(blob) {
|
||||
const formData = new FormData()
|
||||
formData.append("file", blob)
|
||||
const response = await fetch(`bucket/embeddings/${embedding}.jpg`, { method: 'POST', body: formData });
|
||||
console.log(response)
|
||||
})
|
||||
|
||||
useAsThumbDialog.showModal()
|
||||
useAsThumbImage.src = img.src
|
||||
|
||||
var croppr = new Croppr('#croppr', { aspectRatio: 1, minSize: [384,384,'px'], startSize: [100, 100, '%'], returnMode:"real" })
|
||||
|
||||
// fetch(img.src)
|
||||
// .then(response => response.blob())
|
||||
// .then(async function(blob) {
|
||||
// const formData = new FormData()
|
||||
// formData.append("file", blob)
|
||||
// const response = await fetch(`bucket/embeddings/${embedding}.jpg`, { method: 'POST', body: formData });
|
||||
// console.log(response)
|
||||
// })
|
||||
}
|
||||
|
||||
function enqueueImageVariationTask(req, img, reqDiff) {
|
||||
@ -2379,6 +2386,7 @@ function updateEmbeddingsList(filter = "") {
|
||||
let folders = ""
|
||||
console.log(iconlist)
|
||||
let embIcon = Object.assign({}, ...iconlist.map( x=> ({[x.toLowerCase().split('.').slice(0,-1).join('.')]:x})))
|
||||
console.log(embIcon)
|
||||
|
||||
model?.forEach((m) => {
|
||||
if (typeof m == "string") {
|
||||
@ -2388,7 +2396,12 @@ function updateEmbeddingsList(filter = "") {
|
||||
if (token in embIcon) {
|
||||
img = `/bucket/embeddings/${embIcon[token]}`
|
||||
}
|
||||
toplevel += `<button data-embedding="${m}"><img src="${img}" height="128" width="128"><br>${m}</button> `
|
||||
if (iconlist.length==0) {
|
||||
img=""
|
||||
} else {
|
||||
img=`<img src="${img}" height="128" width="128"><br>`
|
||||
}
|
||||
toplevel += `<button data-embedding="${m}">${img}${m}</button> `
|
||||
}
|
||||
} else {
|
||||
let subdir = html(m[1], iconlist, prefix + m[0] + "/", filter)
|
||||
@ -2440,7 +2453,7 @@ function updateEmbeddingsList(filter = "") {
|
||||
// END of remove block
|
||||
|
||||
fetch("/bucket/embeddings/")
|
||||
.then(response => response.json())
|
||||
.then(response => response.status==200 ? response.json(): [])
|
||||
.then(iconlist => {
|
||||
embeddingsList.innerHTML = warning + html(modelsOptions.embeddings, iconlist, "", filter)
|
||||
embeddingsList.querySelectorAll("button").forEach((b) => {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user