diff --git a/ui/media/css/croppr.css b/ui/media/css/croppr.css
new file mode 100644
index 00000000..adcbc579
--- /dev/null
+++ b/ui/media/css/croppr.css
@@ -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}
\ No newline at end of file
diff --git a/ui/media/css/main.css b/ui/media/css/main.css
index 5e1cee43..acdae9a9 100644
--- a/ui/media/css/main.css
+++ b/ui/media/css/main.css
@@ -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;
}
diff --git a/ui/media/js/croppr.js b/ui/media/js/croppr.js
new file mode 100755
index 00000000..59eb4439
--- /dev/null
+++ b/ui/media/js/croppr.js
@@ -0,0 +1 @@
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.Croppr=e()}(this,function(){"use strict";function t(t){t.addEventListener("touchstart",e),t.addEventListener("touchend",e),t.addEventListener("touchmove",e)}function e(t){t.preventDefault();var e=t.changedTouches[0],i={touchstart:"mousedown",touchmove:"mousemove",touchend:"mouseup"};e.target.dispatchEvent(new MouseEvent(i[t.type],{bubbles:!0,cancelable:!0,view:window,clientX:e.clientX,clientY:e.clientY,screenX:e.screenX,screenY:e.screenY}))}function i(t,e){return Number(Math.round(t+"e"+e)+"e-"+e)}!function(){for(var t=0,e=["ms","moz","webkit","o"],i=0;i0&&void 0!==arguments[0]?arguments[0]:null,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null;return this.x1=null==t?this.x1:t,this.y1=null==e?this.y1:e,this.x2=null==i?this.x2:i,this.y2=null==n?this.y2:n,this}},{key:"width",value:function(){return Math.abs(this.x2-this.x1)}},{key:"height",value:function(){return Math.abs(this.y2-this.y1)}},{key:"resize",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[0,0],n=this.x1+this.width()*i[0],o=this.y1+this.height()*i[1];return this.x1=n-t*i[0],this.y1=o-e*i[1],this.x2=this.x1+t,this.y2=this.y1+e,this}},{key:"scale",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[0,0],i=this.width()*t,n=this.height()*t;return this.resize(i,n,e),this}},{key:"move",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,i=this.width(),n=this.height();return t=null===t?this.x1:t,e=null===e?this.y1:e,this.x1=t,this.y1=e,this.x2=t+i,this.y2=e+n,this}},{key:"getRelativePoint",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[0,0],e=this.width()*t[0],i=this.height()*t[1];return[e,i]}},{key:"getAbsolutePoint",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[0,0],e=this.x1+this.width()*t[0],i=this.y1+this.height()*t[1];return[e,i]}},{key:"constrainToRatio",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[0,0],i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"height";if(null!==t){this.width(),this.height();switch(i){case"height":this.resize(this.width(),this.width()*t,e);break;case"width":this.resize(1*this.height()/t,this.height(),e);break;default:this.resize(this.width(),this.width()*t,e)}return this}}},{key:"constrainToBoundary",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[0,0],n=this.getAbsolutePoint(i),o=h(n,2),s=o[0],r=o[1],a=s,l=r,u=t-s,d=e-r,c=-2*i[0]+1,v=-2*i[1]+1,p=null,m=null;switch(c){case-1:p=a;break;case 0:p=2*Math.min(a,u);break;case 1:p=u}switch(v){case-1:m=l;break;case 0:m=2*Math.min(l,d);break;case 1:m=d}if(this.width()>p){var f=p/this.width();this.scale(f,i)}if(this.height()>m){var g=m/this.height();this.scale(g,i)}return this}},{key:"constrainToSize",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null,o=arguments.length>4&&void 0!==arguments[4]?arguments[4]:[0,0],s=arguments.length>5&&void 0!==arguments[5]?arguments[5]:null;if(s&&(s>1?(t=1*e/s,n*=s):s<1&&(e=t*s,i=1*n/s)),t&&this.width()>t){var r=t,a=null===s?this.height():e;this.resize(r,a,o)}if(e&&this.height()>e){var h=null===s?this.width():t,l=e;this.resize(h,l,o)}if(i&&this.width()2&&void 0!==arguments[2]&&arguments[2];if(n(this,e),this.options=e.parseOptions(i||{}),!t.nodeName&&(t=document.querySelector(t),null==t))throw"Unable to find element.";if(!t.getAttribute("src"))throw"Image src not provided.";this._initialized=!1,this._targetEl=t,s||(0===t.width||0===t.height?t.onload=function(){o.initialize()}:this.initialize())}return o(e,[{key:"initialize",value:function(){this.createDOM(this._targetEl),this.options.convertToPixels(this.cropperEl),this.attachHandlerEvents(),this.attachRegionEvents(),this.attachOverlayEvents(),this.box=this.initializeBox(this.options),this.redraw(),this._initialized=!0,null!==this.options.onInitialize&&this.options.onInitialize(this)}},{key:"createDOM",value:function(e){this.containerEl=document.createElement("div"),this.containerEl.className="croppr-container",this.eventBus=this.containerEl,t(this.containerEl),this.cropperEl=document.createElement("div"),this.cropperEl.className="croppr",this.imageEl=document.createElement("img"),this.imageEl.setAttribute("src",e.getAttribute("src")),this.imageEl.setAttribute("alt",e.getAttribute("alt")),this.imageEl.className="croppr-image",this.imageClippedEl=this.imageEl.cloneNode(),this.imageClippedEl.className="croppr-imageClipped",this.regionEl=document.createElement("div"),this.regionEl.className="croppr-region",this.overlayEl=document.createElement("div"),this.overlayEl.className="croppr-overlay";var i=document.createElement("div");i.className="croppr-handleContainer",this.handles=[];for(var n=0;n>31,l=a[1]-t.cropperEl.offsetHeight/2>>31,u=(h^l)+l+l+4,d=-2*u+8,c=0;co.width&&(i=o.width),n<0?n=0:n>o.height&&(n=o.height);var s=this.activeHandle.originPoint.slice(),r=this.activeHandle.originX,a=this.activeHandle.originY,h=this.activeHandle.handle,l=1===h.constraints[0],d=1===h.constraints[1],c=1===h.constraints[2],v=1===h.constraints[3],p=(v||d)&&(l||c),m=v||d?r:this.box.x1,f=v||d?r:this.box.x2,g=l||c?a:this.box.y1,E=l||c?a:this.box.y2;m=v?i:m,f=d?i:f,g=l?n:g,E=c?n:E;var w=!1,y=!1;if((v||d)&&(w=v?i>r:ia:nC.y1+z*C.width()||na.width&&this.box.move(a.width-this.box.width(),null),this.box.y1<0&&this.box.move(null,0),this.box.y2>a.height&&this.box.move(null,a.height-this.box.height()),this.redraw(),null!==this.options.onCropMove&&this.options.onCropMove(this.getValue())}},{key:"onRegionMoveEnd",value:function(t){null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue())}},{key:"getValue",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;if(null===t&&(t=this.options.returnMode),"real"==t){var e=this.imageEl.naturalWidth,n=this.imageEl.naturalHeight,o=e/this.imageEl.offsetWidth,s=n/this.imageEl.offsetHeight;return{x:Math.round(this.box.x1*o),y:Math.round(this.box.y1*s),width:Math.round(this.box.width()*o),height:Math.round(this.box.height()*s)}}if("ratio"==t){var r=this.imageEl.offsetWidth,a=this.imageEl.offsetHeight;return{x:i(this.box.x1/r,3),y:i(this.box.y1/a,3),width:i(this.box.width()/r,3),height:i(this.box.height()/a,3)}}if("raw"==t)return{x:Math.round(this.box.x1),y:Math.round(this.box.y1),width:Math.round(this.box.width()),height:Math.round(this.box.height())}}}],[{key:"parseOptions",value:function(t){var e={aspectRatio:null,maxSize:{width:null,height:null},minSize:{width:null,height:null},startSize:{width:100,height:100,unit:"%"},returnMode:"real",onInitialize:null,onCropStart:null,onCropMove:null,onCropEnd:null},i=null;void 0!==t.aspectRatio&&("number"==typeof t.aspectRatio?i=t.aspectRatio:t.aspectRatio instanceof Array&&(i=t.aspectRatio[1]/t.aspectRatio[0]));var n=null;void 0!==t.maxSize&&null!==t.maxSize&&(n={width:t.maxSize[0]||null,height:t.maxSize[1]||null,unit:t.maxSize[2]||"px"});var o=null;void 0!==t.minSize&&null!==t.minSize&&(o={width:t.minSize[0]||null,height:t.minSize[1]||null,unit:t.minSize[2]||"px"});var s=null;void 0!==t.startSize&&null!==t.startSize&&(s={width:t.startSize[0]||null,height:t.startSize[1]||null,unit:t.startSize[2]||"%"});var r=null;"function"==typeof t.onInitialize&&(r=t.onInitialize);var a=null;"function"==typeof t.onCropStart&&(a=t.onCropStart);var h=null;"function"==typeof t.onCropEnd&&(h=t.onCropEnd);var l=null;"function"==typeof t.onUpdate&&(console.warn("Croppr.js: `onUpdate` is deprecated and will be removed in the next major release. Please use `onCropMove` or `onCropEnd` instead."),l=t.onUpdate),"function"==typeof t.onCropMove&&(l=t.onCropMove);var u=null;if(void 0!==t.returnMode){var d=t.returnMode.toLowerCase();if(["real","ratio","raw"].indexOf(d)===-1)throw"Invalid return mode.";u=d}var c=function(t){for(var e=t.offsetWidth,i=t.offsetHeight,n=["maxSize","minSize","startSize"],o=0;o2&&void 0!==arguments[2]&&arguments[2];return n(this,e),a(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t,i,o))}return r(e,t),o(e,[{key:"getValue",value:function(t){return s(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"getValue",this).call(this,t)}},{key:"moveTo",value:function(t,e){return this.box.move(t,e),this.redraw(),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this}},{key:"resizeTo",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[.5,.5];return this.box.resize(t,e,i),this.redraw(),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this}},{key:"scaleBy",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[.5,.5];return this.box.scale(t,e),this.redraw(),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this}},{key:"reset",value:function(){return this.box=this.initializeBox(this.options),this.redraw(),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this}}]),e}(c);return v});
diff --git a/ui/media/js/main.js b/ui/media/js/main.js
index d8c1b614..7efc9759 100644
--- a/ui/media/js/main.js
+++ b/ui/media/js/main.js
@@ -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 += ` `
+ if (iconlist.length==0) {
+ img=""
+ } else {
+ img=`
` + } + toplevel += ` ` } } 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) => {
` + } + toplevel += ` ` } } 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) => {