From a70a795662c8aa9a9f7de4439fa3dfcfc48fcb4a Mon Sep 17 00:00:00 2001
From: JeLuF <jf@mormo.org>
Date: Mon, 31 Jul 2023 23:35:49 +0200
Subject: [PATCH 1/8] add croppr

---
 3rd-PARTY-LICENSES      | 28 ++++++++++++++++++++++++++++
 ui/index.html           | 31 +++++++++++++++++++++++++++++++
 ui/media/css/croppr.css |  1 +
 ui/media/css/main.css   | 26 ++++++++++++++++++++++++++
 ui/media/js/croppr.js   |  1 +
 ui/media/js/main.js     | 35 ++++++++++++++++++++++++-----------
 6 files changed, 111 insertions(+), 11 deletions(-)
 create mode 100644 ui/media/css/croppr.css
 create mode 100755 ui/media/js/croppr.js
diff --git a/3rd-PARTY-LICENSES b/3rd-PARTY-LICENSES
index bd29393a..78bfe3bb 100644
--- a/3rd-PARTY-LICENSES
+++ b/3rd-PARTY-LICENSES
@@ -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.
diff --git a/ui/index.html b/ui/index.html
index 0fcb807d..de4273aa 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -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 &hellip;</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>
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;i<e.length&&!window.requestAnimationFrame;++i)window.requestAnimationFrame=window[e[i]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[e[i]+"CancelAnimationFrame"]||window[e[i]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(e,i){var n=(new Date).getTime(),o=Math.max(0,16-(n-t)),s=window.setTimeout(function(){e(n+o)},o);return t=n+o,s}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(t){clearTimeout(t)})}(),function(){function t(t,e){e=e||{bubbles:!1,cancelable:!1,detail:void 0};var i=document.createEvent("CustomEvent");return i.initCustomEvent(t,e.bubbles,e.cancelable,e.detail),i}return"function"!=typeof window.CustomEvent&&(t.prototype=window.Event.prototype,void(window.CustomEvent=t))}(),function(t){function e(e,i){i=i||{bubbles:!1,cancelable:!1};var n=document.createEvent("MouseEvent");return n.initMouseEvent(e,i.bubbles,i.cancelable,t,0,0,0,0,0,!1,!1,!1,!1,0,null),n}try{return new CustomEvent("test"),!1}catch(t){}e.prototype=Event.prototype,t.MouseEvent=e}(window);var n=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},o=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),s=function t(e,i,n){null===e&&(e=Function.prototype);var o=Object.getOwnPropertyDescriptor(e,i);if(void 0===o){var s=Object.getPrototypeOf(e);return null===s?void 0:t(s,i,n)}if("value"in o)return o.value;var r=o.get;if(void 0!==r)return r.call(n)},r=function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)},a=function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e},h=function(){function t(t,e){var i=[],n=!0,o=!1,s=void 0;try{for(var r,a=t[Symbol.iterator]();!(n=(r=a.next()).done)&&(i.push(r.value),!e||i.length!==e);n=!0);}catch(t){o=!0,s=t}finally{try{!n&&a.return&&a.return()}finally{if(o)throw s}}return i}return function(e,i){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return t(e,i);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),l=function t(e,i,o,s){function r(t){t.stopPropagation(),document.addEventListener("mouseup",a),document.addEventListener("mousemove",h),l.eventBus.dispatchEvent(new CustomEvent("handlestart",{detail:{handle:l}}))}function a(t){t.stopPropagation(),document.removeEventListener("mouseup",a),document.removeEventListener("mousemove",h),l.eventBus.dispatchEvent(new CustomEvent("handleend",{detail:{handle:l}}))}function h(t){t.stopPropagation(),l.eventBus.dispatchEvent(new CustomEvent("handlemove",{detail:{mouseX:t.clientX,mouseY:t.clientY}}))}n(this,t);var l=this;this.position=e,this.constraints=i,this.cursor=o,this.eventBus=s,this.el=document.createElement("div"),this.el.className="croppr-handle",this.el.style.cursor=o,this.el.addEventListener("mousedown",r)},u=function(){function t(e,i,o,s){n(this,t),this.x1=e,this.y1=i,this.x2=o,this.y2=s}return o(t,[{key:"set",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;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()<i){var u=i,d=null===s?this.height():n;this.resize(u,d,o)}if(n&&this.height()<n){var c=null===s?this.width():i,v=n;this.resize(c,v,o)}return this}}]),t}(),d=[{position:[0,0],constraints:[1,0,0,1],cursor:"nw-resize"},{position:[.5,0],constraints:[1,0,0,0],cursor:"n-resize"},{position:[1,0],constraints:[1,1,0,0],cursor:"ne-resize"},{position:[1,.5],constraints:[0,1,0,0],cursor:"e-resize"},{position:[1,1],constraints:[0,1,1,0],cursor:"se-resize"},{position:[.5,1],constraints:[0,0,1,0],cursor:"s-resize"},{position:[0,1],constraints:[0,0,1,1],cursor:"sw-resize"},{position:[0,.5],constraints:[0,0,0,1],cursor:"w-resize"}],c=function(){function e(t,i){var o=this,s=arguments.length>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<d.length;n++){var o=new l(d[n].position,d[n].constraints,d[n].cursor,this.eventBus);this.handles.push(o),i.appendChild(o.el)}this.cropperEl.appendChild(this.imageEl),this.cropperEl.appendChild(this.imageClippedEl),this.cropperEl.appendChild(this.regionEl),this.cropperEl.appendChild(this.overlayEl),this.cropperEl.appendChild(i),this.containerEl.appendChild(this.cropperEl),e.parentElement.replaceChild(this.containerEl,e)}},{key:"initializeBox",value:function(t){var e=t.startSize.width,i=t.startSize.height,n=new u(0,0,e,i);n.constrainToRatio(t.aspectRatio,[.5,.5]);var o=t.minSize,s=t.maxSize;n.constrainToSize(s.width,s.height,o.width,o.height,[.5,.5],t.aspectRatio);var r=this.cropperEl.offsetWidth,a=this.cropperEl.offsetHeight;n.constrainToBoundary(r,a,[.5,.5]);var h=this.cropperEl.offsetWidth/2-n.width()/2,l=this.cropperEl.offsetHeight/2-n.height()/2;return n.move(h,l),n}},{key:"redraw",value:function(){var t=this,e=Math.round(this.box.width()),i=Math.round(this.box.height()),n=Math.round(this.box.x1),o=Math.round(this.box.y1),s=Math.round(this.box.x2),r=Math.round(this.box.y2);window.requestAnimationFrame(function(){t.regionEl.style.transform="translate("+n+"px, "+o+"px)",t.regionEl.style.width=e+"px",t.regionEl.style.height=i+"px",t.imageClippedEl.style.clip="rect("+o+"px, "+s+"px, "+r+"px, "+n+"px)";for(var a=t.box.getAbsolutePoint([.5,.5]),h=a[0]-t.cropperEl.offsetWidth/2>>31,l=a[1]-t.cropperEl.offsetHeight/2>>31,u=(h^l)+l+l+4,d=-2*u+8,c=0;c<t.handles.length;c++){var v=t.handles[c],p=v.el.offsetWidth,m=v.el.offsetHeight,f=n+e*v.position[0]-p/2,g=o+i*v.position[1]-m/2;v.el.style.transform="translate("+Math.round(f)+"px, "+Math.round(g)+"px)",v.el.style.zIndex=d==c?5:4}})}},{key:"attachHandlerEvents",value:function(){var t=this.eventBus;t.addEventListener("handlestart",this.onHandleMoveStart.bind(this)),t.addEventListener("handlemove",this.onHandleMoveMoving.bind(this)),t.addEventListener("handleend",this.onHandleMoveEnd.bind(this))}},{key:"attachRegionEvents",value:function(){function t(t){t.stopPropagation(),document.addEventListener("mouseup",i),document.addEventListener("mousemove",e),n.dispatchEvent(new CustomEvent("regionstart",{detail:{mouseX:t.clientX,mouseY:t.clientY}}))}function e(t){t.stopPropagation(),n.dispatchEvent(new CustomEvent("regionmove",{detail:{mouseX:t.clientX,mouseY:t.clientY}}))}function i(t){t.stopPropagation(),document.removeEventListener("mouseup",i),document.removeEventListener("mousemove",e),n.dispatchEvent(new CustomEvent("regionend",{detail:{mouseX:t.clientX,mouseY:t.clientY}}))}var n=this.eventBus;this.regionEl.addEventListener("mousedown",t),n.addEventListener("regionstart",this.onRegionMoveStart.bind(this)),n.addEventListener("regionmove",this.onRegionMoveMoving.bind(this)),n.addEventListener("regionend",this.onRegionMoveEnd.bind(this))}},{key:"attachOverlayEvents",value:function(){function t(t){t.stopPropagation(),document.addEventListener("mouseup",i),document.addEventListener("mousemove",e);var r=o.cropperEl.getBoundingClientRect(),a=t.clientX-r.left,h=t.clientY-r.top;s=o.box,o.box=new u(a,h,a+1,h+1),o.eventBus.dispatchEvent(new CustomEvent("handlestart",{detail:{handle:o.handles[n]}}))}function e(t){t.stopPropagation(),o.eventBus.dispatchEvent(new CustomEvent("handlemove",{detail:{mouseX:t.clientX,mouseY:t.clientY}}))}function i(t){return t.stopPropagation(),document.removeEventListener("mouseup",i),document.removeEventListener("mousemove",e),1===o.box.width()&&1===o.box.height()?void(o.box=s):void o.eventBus.dispatchEvent(new CustomEvent("handleend",{detail:{mouseX:t.clientX,mouseY:t.clientY}}))}var n=4,o=this,s=null;this.overlayEl.addEventListener("mousedown",t)}},{key:"onHandleMoveStart",value:function(t){var e=t.detail.handle,i=[1-e.position[0],1-e.position[1]],n=this.box.getAbsolutePoint(i),o=h(n,2),s=o[0],r=o[1];this.activeHandle={handle:e,originPoint:i,originX:s,originY:r},null!==this.options.onCropStart&&this.options.onCropStart(this.getValue())}},{key:"onHandleMoveMoving",value:function(t){var e=t.detail,i=e.mouseX,n=e.mouseY,o=this.cropperEl.getBoundingClientRect();i-=o.left,n-=o.top,i<0?i=0:i>o.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:i<r),(l||c)&&(y=l?n>a:n<a),w){var b=m;m=f,f=b,s[0]=1-s[0]}if(y){var x=g;g=E,E=x,s[1]=1-s[1]}var C=new u(m,g,f,E);if(this.options.aspectRatio){var z=this.options.aspectRatio,M=!1;p?M=n>C.y1+z*C.width()||n<C.y2-z*C.width():(l||c)&&(M=!0);var S=M?"width":"height";C.constrainToRatio(z,s,S)}var k=this.options.minSize,R=this.options.maxSize;C.constrainToSize(R.width,R.height,k.width,k.height,s,this.options.aspectRatio);var P=this.cropperEl.offsetWidth,L=this.cropperEl.offsetHeight;C.constrainToBoundary(P,L,s),this.box=C,this.redraw(),null!==this.options.onCropMove&&this.options.onCropMove(this.getValue())}},{key:"onHandleMoveEnd",value:function(t){null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue())}},{key:"onRegionMoveStart",value:function(t){var e=t.detail,i=e.mouseX,n=e.mouseY,o=this.cropperEl.getBoundingClientRect();i-=o.left,n-=o.top,this.currentMove={offsetX:i-this.box.x1,offsetY:n-this.box.y1},null!==this.options.onCropStart&&this.options.onCropStart(this.getValue())}},{key:"onRegionMoveMoving",value:function(t){var e=t.detail,i=e.mouseX,n=e.mouseY,o=this.currentMove,s=o.offsetX,r=o.offsetY,a=this.cropperEl.getBoundingClientRect();i-=a.left,n-=a.top,this.box.move(i-s,n-r),this.box.x1<0&&this.box.move(0,null),this.box.x2>a.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;o<n.length;o++){var s=n[o];null!==this[s]&&("%"==this[s].unit&&(null!==this[s].width&&(this[s].width=this[s].width/100*e),null!==this[s].height&&(this[s].height=this[s].height/100*i)),delete this[s].unit)}},v=function(t,e){return null!==t?t:e};return{aspectRatio:v(i,e.aspectRatio),maxSize:v(n,e.maxSize),minSize:v(o,e.minSize),startSize:v(s,e.startSize),returnMode:v(u,e.returnMode),onInitialize:v(r,e.onInitialize),onCropStart:v(a,e.onCropStart),onCropMove:v(l,e.onCropMove),onCropEnd:v(h,e.onCropEnd),convertToPixels:c}}}]),e}(),v=function(t){function e(t,i){var o=arguments.length>2&&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 += `<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) => {

From 3391e1eaebbaf5632ca3f638c01a2306f1b8a0d9 Mon Sep 17 00:00:00 2001
From: JeLuF <jf@mormo.org>
Date: Tue, 1 Aug 2023 17:17:00 +0200
Subject: [PATCH 2/8] croppr ui

---
 ui/media/js/main.js | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/ui/media/js/main.js b/ui/media/js/main.js
index 7efc9759..effd9660 100644
--- a/ui/media/js/main.js
+++ b/ui/media/js/main.js
@@ -678,8 +678,14 @@ function onUseAsThumbnailClick(req, img) {
 
     useAsThumbDialog.showModal()
     useAsThumbImage.src = img.src
+    img.width = img.height = 512
 
-    var croppr = new Croppr('#croppr', { aspectRatio: 1, minSize: [384,384,'px'], startSize:  [100, 100, '%'], returnMode:"real" })
+    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())
@@ -691,6 +697,10 @@ function onUseAsThumbnailClick(req, img) {
 //      })
 }
 
+modalDialogCloseOnBackdropClick(useAsThumbDialog)
+makeDialogDraggable(useAsThumbDialog)
+
+
 function enqueueImageVariationTask(req, img, reqDiff) {
     const imageSeed = img.getAttribute("data-seed")
 

From 91a21b5e7626c5b7ed79986658f47e14ff4488c2 Mon Sep 17 00:00:00 2001
From: JeLuF <jf@mormo.org>
Date: Thu, 3 Aug 2023 01:27:46 +0200
Subject: [PATCH 3/8] profile, thumbnail croppr size limit

---
 ui/index.html             |    5 +-
 ui/media/css/croppr.css   |   59 +-
 ui/media/js/auto-save.js  |    1 +
 ui/media/js/croppr.js     | 1190 ++++++++++++++++++++++++++++++++++++-
 ui/media/js/main.js       |   92 ++-
 ui/media/js/parameters.js |   11 +
 6 files changed, 1342 insertions(+), 16 deletions(-)

diff --git a/ui/index.html b/ui/index.html
index 508b4637..2e158780 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -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 &hellip;</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">
diff --git a/ui/media/css/croppr.css b/ui/media/css/croppr.css
index adcbc579..19eb2f7b 100644
--- a/ui/media/css/croppr.css
+++ b/ui/media/css/croppr.css
@@ -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}
\ No newline at end of file
+.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;
+}
\ No newline at end of file
diff --git a/ui/media/js/auto-save.js b/ui/media/js/auto-save.js
index 670fee0d..ebdf4927 100644
--- a/ui/media/js/auto-save.js
+++ b/ui/media/js/auto-save.js
@@ -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",
diff --git a/ui/media/js/croppr.js b/ui/media/js/croppr.js
index 59eb4439..f5c3f3b8 100755
--- a/ui/media/js/croppr.js
+++ b/ui/media/js/croppr.js
@@ -1 +1,1189 @@
-!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;i<e.length&&!window.requestAnimationFrame;++i)window.requestAnimationFrame=window[e[i]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[e[i]+"CancelAnimationFrame"]||window[e[i]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(e,i){var n=(new Date).getTime(),o=Math.max(0,16-(n-t)),s=window.setTimeout(function(){e(n+o)},o);return t=n+o,s}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(t){clearTimeout(t)})}(),function(){function t(t,e){e=e||{bubbles:!1,cancelable:!1,detail:void 0};var i=document.createEvent("CustomEvent");return i.initCustomEvent(t,e.bubbles,e.cancelable,e.detail),i}return"function"!=typeof window.CustomEvent&&(t.prototype=window.Event.prototype,void(window.CustomEvent=t))}(),function(t){function e(e,i){i=i||{bubbles:!1,cancelable:!1};var n=document.createEvent("MouseEvent");return n.initMouseEvent(e,i.bubbles,i.cancelable,t,0,0,0,0,0,!1,!1,!1,!1,0,null),n}try{return new CustomEvent("test"),!1}catch(t){}e.prototype=Event.prototype,t.MouseEvent=e}(window);var n=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},o=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),s=function t(e,i,n){null===e&&(e=Function.prototype);var o=Object.getOwnPropertyDescriptor(e,i);if(void 0===o){var s=Object.getPrototypeOf(e);return null===s?void 0:t(s,i,n)}if("value"in o)return o.value;var r=o.get;if(void 0!==r)return r.call(n)},r=function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)},a=function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e},h=function(){function t(t,e){var i=[],n=!0,o=!1,s=void 0;try{for(var r,a=t[Symbol.iterator]();!(n=(r=a.next()).done)&&(i.push(r.value),!e||i.length!==e);n=!0);}catch(t){o=!0,s=t}finally{try{!n&&a.return&&a.return()}finally{if(o)throw s}}return i}return function(e,i){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return t(e,i);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),l=function t(e,i,o,s){function r(t){t.stopPropagation(),document.addEventListener("mouseup",a),document.addEventListener("mousemove",h),l.eventBus.dispatchEvent(new CustomEvent("handlestart",{detail:{handle:l}}))}function a(t){t.stopPropagation(),document.removeEventListener("mouseup",a),document.removeEventListener("mousemove",h),l.eventBus.dispatchEvent(new CustomEvent("handleend",{detail:{handle:l}}))}function h(t){t.stopPropagation(),l.eventBus.dispatchEvent(new CustomEvent("handlemove",{detail:{mouseX:t.clientX,mouseY:t.clientY}}))}n(this,t);var l=this;this.position=e,this.constraints=i,this.cursor=o,this.eventBus=s,this.el=document.createElement("div"),this.el.className="croppr-handle",this.el.style.cursor=o,this.el.addEventListener("mousedown",r)},u=function(){function t(e,i,o,s){n(this,t),this.x1=e,this.y1=i,this.x2=o,this.y2=s}return o(t,[{key:"set",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;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()<i){var u=i,d=null===s?this.height():n;this.resize(u,d,o)}if(n&&this.height()<n){var c=null===s?this.width():i,v=n;this.resize(c,v,o)}return this}}]),t}(),d=[{position:[0,0],constraints:[1,0,0,1],cursor:"nw-resize"},{position:[.5,0],constraints:[1,0,0,0],cursor:"n-resize"},{position:[1,0],constraints:[1,1,0,0],cursor:"ne-resize"},{position:[1,.5],constraints:[0,1,0,0],cursor:"e-resize"},{position:[1,1],constraints:[0,1,1,0],cursor:"se-resize"},{position:[.5,1],constraints:[0,0,1,0],cursor:"s-resize"},{position:[0,1],constraints:[0,0,1,1],cursor:"sw-resize"},{position:[0,.5],constraints:[0,0,0,1],cursor:"w-resize"}],c=function(){function e(t,i){var o=this,s=arguments.length>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<d.length;n++){var o=new l(d[n].position,d[n].constraints,d[n].cursor,this.eventBus);this.handles.push(o),i.appendChild(o.el)}this.cropperEl.appendChild(this.imageEl),this.cropperEl.appendChild(this.imageClippedEl),this.cropperEl.appendChild(this.regionEl),this.cropperEl.appendChild(this.overlayEl),this.cropperEl.appendChild(i),this.containerEl.appendChild(this.cropperEl),e.parentElement.replaceChild(this.containerEl,e)}},{key:"initializeBox",value:function(t){var e=t.startSize.width,i=t.startSize.height,n=new u(0,0,e,i);n.constrainToRatio(t.aspectRatio,[.5,.5]);var o=t.minSize,s=t.maxSize;n.constrainToSize(s.width,s.height,o.width,o.height,[.5,.5],t.aspectRatio);var r=this.cropperEl.offsetWidth,a=this.cropperEl.offsetHeight;n.constrainToBoundary(r,a,[.5,.5]);var h=this.cropperEl.offsetWidth/2-n.width()/2,l=this.cropperEl.offsetHeight/2-n.height()/2;return n.move(h,l),n}},{key:"redraw",value:function(){var t=this,e=Math.round(this.box.width()),i=Math.round(this.box.height()),n=Math.round(this.box.x1),o=Math.round(this.box.y1),s=Math.round(this.box.x2),r=Math.round(this.box.y2);window.requestAnimationFrame(function(){t.regionEl.style.transform="translate("+n+"px, "+o+"px)",t.regionEl.style.width=e+"px",t.regionEl.style.height=i+"px",t.imageClippedEl.style.clip="rect("+o+"px, "+s+"px, "+r+"px, "+n+"px)";for(var a=t.box.getAbsolutePoint([.5,.5]),h=a[0]-t.cropperEl.offsetWidth/2>>31,l=a[1]-t.cropperEl.offsetHeight/2>>31,u=(h^l)+l+l+4,d=-2*u+8,c=0;c<t.handles.length;c++){var v=t.handles[c],p=v.el.offsetWidth,m=v.el.offsetHeight,f=n+e*v.position[0]-p/2,g=o+i*v.position[1]-m/2;v.el.style.transform="translate("+Math.round(f)+"px, "+Math.round(g)+"px)",v.el.style.zIndex=d==c?5:4}})}},{key:"attachHandlerEvents",value:function(){var t=this.eventBus;t.addEventListener("handlestart",this.onHandleMoveStart.bind(this)),t.addEventListener("handlemove",this.onHandleMoveMoving.bind(this)),t.addEventListener("handleend",this.onHandleMoveEnd.bind(this))}},{key:"attachRegionEvents",value:function(){function t(t){t.stopPropagation(),document.addEventListener("mouseup",i),document.addEventListener("mousemove",e),n.dispatchEvent(new CustomEvent("regionstart",{detail:{mouseX:t.clientX,mouseY:t.clientY}}))}function e(t){t.stopPropagation(),n.dispatchEvent(new CustomEvent("regionmove",{detail:{mouseX:t.clientX,mouseY:t.clientY}}))}function i(t){t.stopPropagation(),document.removeEventListener("mouseup",i),document.removeEventListener("mousemove",e),n.dispatchEvent(new CustomEvent("regionend",{detail:{mouseX:t.clientX,mouseY:t.clientY}}))}var n=this.eventBus;this.regionEl.addEventListener("mousedown",t),n.addEventListener("regionstart",this.onRegionMoveStart.bind(this)),n.addEventListener("regionmove",this.onRegionMoveMoving.bind(this)),n.addEventListener("regionend",this.onRegionMoveEnd.bind(this))}},{key:"attachOverlayEvents",value:function(){function t(t){t.stopPropagation(),document.addEventListener("mouseup",i),document.addEventListener("mousemove",e);var r=o.cropperEl.getBoundingClientRect(),a=t.clientX-r.left,h=t.clientY-r.top;s=o.box,o.box=new u(a,h,a+1,h+1),o.eventBus.dispatchEvent(new CustomEvent("handlestart",{detail:{handle:o.handles[n]}}))}function e(t){t.stopPropagation(),o.eventBus.dispatchEvent(new CustomEvent("handlemove",{detail:{mouseX:t.clientX,mouseY:t.clientY}}))}function i(t){return t.stopPropagation(),document.removeEventListener("mouseup",i),document.removeEventListener("mousemove",e),1===o.box.width()&&1===o.box.height()?void(o.box=s):void o.eventBus.dispatchEvent(new CustomEvent("handleend",{detail:{mouseX:t.clientX,mouseY:t.clientY}}))}var n=4,o=this,s=null;this.overlayEl.addEventListener("mousedown",t)}},{key:"onHandleMoveStart",value:function(t){var e=t.detail.handle,i=[1-e.position[0],1-e.position[1]],n=this.box.getAbsolutePoint(i),o=h(n,2),s=o[0],r=o[1];this.activeHandle={handle:e,originPoint:i,originX:s,originY:r},null!==this.options.onCropStart&&this.options.onCropStart(this.getValue())}},{key:"onHandleMoveMoving",value:function(t){var e=t.detail,i=e.mouseX,n=e.mouseY,o=this.cropperEl.getBoundingClientRect();i-=o.left,n-=o.top,i<0?i=0:i>o.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:i<r),(l||c)&&(y=l?n>a:n<a),w){var b=m;m=f,f=b,s[0]=1-s[0]}if(y){var x=g;g=E,E=x,s[1]=1-s[1]}var C=new u(m,g,f,E);if(this.options.aspectRatio){var z=this.options.aspectRatio,M=!1;p?M=n>C.y1+z*C.width()||n<C.y2-z*C.width():(l||c)&&(M=!0);var S=M?"width":"height";C.constrainToRatio(z,s,S)}var k=this.options.minSize,R=this.options.maxSize;C.constrainToSize(R.width,R.height,k.width,k.height,s,this.options.aspectRatio);var P=this.cropperEl.offsetWidth,L=this.cropperEl.offsetHeight;C.constrainToBoundary(P,L,s),this.box=C,this.redraw(),null!==this.options.onCropMove&&this.options.onCropMove(this.getValue())}},{key:"onHandleMoveEnd",value:function(t){null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue())}},{key:"onRegionMoveStart",value:function(t){var e=t.detail,i=e.mouseX,n=e.mouseY,o=this.cropperEl.getBoundingClientRect();i-=o.left,n-=o.top,this.currentMove={offsetX:i-this.box.x1,offsetY:n-this.box.y1},null!==this.options.onCropStart&&this.options.onCropStart(this.getValue())}},{key:"onRegionMoveMoving",value:function(t){var e=t.detail,i=e.mouseX,n=e.mouseY,o=this.currentMove,s=o.offsetX,r=o.offsetY,a=this.cropperEl.getBoundingClientRect();i-=a.left,n-=a.top,this.box.move(i-s,n-r),this.box.x1<0&&this.box.move(0,null),this.box.x2>a.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;o<n.length;o++){var s=n[o];null!==this[s]&&("%"==this[s].unit&&(null!==this[s].width&&(this[s].width=this[s].width/100*e),null!==this[s].height&&(this[s].height=this[s].height/100*i)),delete this[s].unit)}},v=function(t,e){return null!==t?t:e};return{aspectRatio:v(i,e.aspectRatio),maxSize:v(n,e.maxSize),minSize:v(o,e.minSize),startSize:v(s,e.startSize),returnMode:v(u,e.returnMode),onInitialize:v(r,e.onInitialize),onCropStart:v(a,e.onCropStart),onCropMove:v(l,e.onCropMove),onCropEnd:v(h,e.onCropEnd),convertToPixels:c}}}]),e}(),v=function(t){function e(t,i){var o=arguments.length>2&&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});
+/**
+ * Croppr.js
+ * https://github.com/jamesssooi/Croppr.js
+ * 
+ * A JavaScript image cropper that's lightweight, awesome, and has
+ * zero dependencies.
+ * 
+ * (C) 2017 James Ooi. Released under the MIT License.
+ */
+
+(function (global, factory) {
+	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+	typeof define === 'function' && define.amd ? define(factory) :
+	(global.Croppr = factory());
+}(this, (function () { 'use strict';
+
+(function () {
+  var lastTime = 0;
+  var vendors = ['ms', 'moz', 'webkit', 'o'];
+  for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
+    window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
+    window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
+  }
+  if (!window.requestAnimationFrame) window.requestAnimationFrame = function (callback, element) {
+    var currTime = new Date().getTime();
+    var timeToCall = Math.max(0, 16 - (currTime - lastTime));
+    var id = window.setTimeout(function () {
+      callback(currTime + timeToCall);
+    }, timeToCall);
+    lastTime = currTime + timeToCall;
+    return id;
+  };
+  if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function (id) {
+    clearTimeout(id);
+  };
+})();
+(function () {
+  if (typeof window.CustomEvent === "function") return false;
+  function CustomEvent(event, params) {
+    params = params || { bubbles: false, cancelable: false, detail: undefined };
+    var evt = document.createEvent('CustomEvent');
+    evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
+    return evt;
+  }
+  CustomEvent.prototype = window.Event.prototype;
+  window.CustomEvent = CustomEvent;
+})();
+(function (window) {
+  try {
+    new CustomEvent('test');
+    return false;
+  } catch (e) {}
+  function MouseEvent(eventType, params) {
+    params = params || { bubbles: false, cancelable: false };
+    var mouseEvent = document.createEvent('MouseEvent');
+    mouseEvent.initMouseEvent(eventType, params.bubbles, params.cancelable, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
+    return mouseEvent;
+  }
+  MouseEvent.prototype = Event.prototype;
+  window.MouseEvent = MouseEvent;
+})(window);
+
+var classCallCheck = function (instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
+  }
+};
+
+var createClass = function () {
+  function defineProperties(target, props) {
+    for (var i = 0; i < props.length; i++) {
+      var descriptor = props[i];
+      descriptor.enumerable = descriptor.enumerable || false;
+      descriptor.configurable = true;
+      if ("value" in descriptor) descriptor.writable = true;
+      Object.defineProperty(target, descriptor.key, descriptor);
+    }
+  }
+
+  return function (Constructor, protoProps, staticProps) {
+    if (protoProps) defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) defineProperties(Constructor, staticProps);
+    return Constructor;
+  };
+}();
+
+
+
+
+
+
+
+var get = function get(object, property, receiver) {
+  if (object === null) object = Function.prototype;
+  var desc = Object.getOwnPropertyDescriptor(object, property);
+
+  if (desc === undefined) {
+    var parent = Object.getPrototypeOf(object);
+
+    if (parent === null) {
+      return undefined;
+    } else {
+      return get(parent, property, receiver);
+    }
+  } else if ("value" in desc) {
+    return desc.value;
+  } else {
+    var getter = desc.get;
+
+    if (getter === undefined) {
+      return undefined;
+    }
+
+    return getter.call(receiver);
+  }
+};
+
+var inherits = function (subClass, superClass) {
+  if (typeof superClass !== "function" && superClass !== null) {
+    throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
+  }
+
+  subClass.prototype = Object.create(superClass && superClass.prototype, {
+    constructor: {
+      value: subClass,
+      enumerable: false,
+      writable: true,
+      configurable: true
+    }
+  });
+  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
+};
+
+
+
+
+
+
+
+
+
+
+
+var possibleConstructorReturn = function (self, call) {
+  if (!self) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
+
+  return call && (typeof call === "object" || typeof call === "function") ? call : self;
+};
+
+
+
+
+
+var slicedToArray = function () {
+  function sliceIterator(arr, i) {
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _e = undefined;
+
+    try {
+      for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+        _arr.push(_s.value);
+
+        if (i && _arr.length === i) break;
+      }
+    } catch (err) {
+      _d = true;
+      _e = err;
+    } finally {
+      try {
+        if (!_n && _i["return"]) _i["return"]();
+      } finally {
+        if (_d) throw _e;
+      }
+    }
+
+    return _arr;
+  }
+
+  return function (arr, i) {
+    if (Array.isArray(arr)) {
+      return arr;
+    } else if (Symbol.iterator in Object(arr)) {
+      return sliceIterator(arr, i);
+    } else {
+      throw new TypeError("Invalid attempt to destructure non-iterable instance");
+    }
+  };
+}();
+
+var Handle =
+/**
+ * Creates a new Handle instance.
+ * @constructor
+ * @param {Array} position The x and y ratio position of the handle
+ *      within the crop region. Accepts a value between 0 to 1 in the order
+ *      of [X, Y].
+ * @param {Array} constraints Define the side of the crop region that
+ *      is to be affected by this handle. Accepts a value of 0 or 1 in the
+ *      order of [TOP, RIGHT, BOTTOM, LEFT].
+ * @param {String} cursor The CSS cursor of this handle.
+ * @param {Element} eventBus The element to dispatch events to.
+ */
+function Handle(position, constraints, cursor, eventBus) {
+  classCallCheck(this, Handle);
+  var self = this;
+  this.position = position;
+  this.constraints = constraints;
+  this.cursor = cursor;
+  this.eventBus = eventBus;
+  this.el = document.createElement('div');
+  this.el.className = 'croppr-handle';
+  this.el.style.cursor = cursor;
+  this.el.addEventListener('mousedown', onMouseDown);
+  function onMouseDown(e) {
+    e.stopPropagation();
+    document.addEventListener('mouseup', onMouseUp);
+    document.addEventListener('mousemove', onMouseMove);
+    self.eventBus.dispatchEvent(new CustomEvent('handlestart', {
+      detail: { handle: self }
+    }));
+  }
+  function onMouseUp(e) {
+    e.stopPropagation();
+    document.removeEventListener('mouseup', onMouseUp);
+    document.removeEventListener('mousemove', onMouseMove);
+    self.eventBus.dispatchEvent(new CustomEvent('handleend', {
+      detail: { handle: self }
+    }));
+  }
+  function onMouseMove(e) {
+    e.stopPropagation();
+    self.eventBus.dispatchEvent(new CustomEvent('handlemove', {
+      detail: { mouseX: e.clientX, mouseY: e.clientY }
+    }));
+  }
+};
+
+var Box = function () {
+  /**
+   * Creates a new Box instance.
+   * @constructor
+   * @param {Number} x1
+   * @param {Number} y1
+   * @param {Number} x2
+   * @param {Number} y2
+   */
+  function Box(x1, y1, x2, y2) {
+    classCallCheck(this, Box);
+    this.x1 = x1;
+    this.y1 = y1;
+    this.x2 = x2;
+    this.y2 = y2;
+  }
+  /**
+   * Sets the new dimensions of the box.
+   * @param {Number} x1
+   * @param {Number} y1
+   * @param {Number} x2
+   * @param {Number} y2
+   */
+  createClass(Box, [{
+    key: 'set',
+    value: function set$$1() {
+      var x1 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+      var y1 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+      var x2 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+      var y2 = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+      this.x1 = x1 == null ? this.x1 : x1;
+      this.y1 = y1 == null ? this.y1 : y1;
+      this.x2 = x2 == null ? this.x2 : x2;
+      this.y2 = y2 == null ? this.y2 : y2;
+      return this;
+    }
+    /**
+     * Calculates the width of the box.
+     * @returns {Number}
+     */
+  }, {
+    key: 'width',
+    value: function width() {
+      return Math.abs(this.x2 - this.x1);
+    }
+    /**
+     * Calculates the height of the box.
+     * @returns {Number}
+     */
+  }, {
+    key: 'height',
+    value: function height() {
+      return Math.abs(this.y2 - this.y1);
+    }
+    /**
+     * Resizes the box to a new size.
+     * @param {Number} newWidth
+     * @param {Number} newHeight
+     * @param {Array} [origin] The origin point to resize from.
+     *      Defaults to [0, 0] (top left).
+     */
+  }, {
+    key: 'resize',
+    value: function resize(newWidth, newHeight) {
+      var origin = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [0, 0];
+      var fromX = this.x1 + this.width() * origin[0];
+      var fromY = this.y1 + this.height() * origin[1];
+      this.x1 = fromX - newWidth * origin[0];
+      this.y1 = fromY - newHeight * origin[1];
+      this.x2 = this.x1 + newWidth;
+      this.y2 = this.y1 + newHeight;
+      return this;
+    }
+    /**
+     * Scale the box by a factor.
+     * @param {Number} factor
+     * @param {Array} [origin] The origin point to resize from.
+     *      Defaults to [0, 0] (top left).
+     */
+  }, {
+    key: 'scale',
+    value: function scale(factor) {
+      var origin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [0, 0];
+      var newWidth = this.width() * factor;
+      var newHeight = this.height() * factor;
+      this.resize(newWidth, newHeight, origin);
+      return this;
+    }
+  }, {
+    key: 'move',
+    value: function move() {
+      var x = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+      var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+      var width = this.width();
+      var height = this.height();
+      x = x === null ? this.x1 : x;
+      y = y === null ? this.y1 : y;
+      this.x1 = x;
+      this.y1 = y;
+      this.x2 = x + width;
+      this.y2 = y + height;
+      return this;
+    }
+    /**
+     * Get relative x and y coordinates of a given point within the box.
+     * @param {Array} point The x and y ratio position within the box.
+     * @returns {Array} The x and y coordinates [x, y].
+     */
+  }, {
+    key: 'getRelativePoint',
+    value: function getRelativePoint() {
+      var point = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [0, 0];
+      var x = this.width() * point[0];
+      var y = this.height() * point[1];
+      return [x, y];
+    }
+    /**
+     * Get absolute x and y coordinates of a given point within the box.
+     * @param {Array} point The x and y ratio position within the box.
+     * @returns {Array} The x and y coordinates [x, y].
+     */
+  }, {
+    key: 'getAbsolutePoint',
+    value: function getAbsolutePoint() {
+      var point = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [0, 0];
+      var x = this.x1 + this.width() * point[0];
+      var y = this.y1 + this.height() * point[1];
+      return [x, y];
+    }
+    /**
+     * Constrain the box to a fixed ratio.
+     * @param {Number} ratio
+     * @param {Array} [origin] The origin point to resize from.
+     *     Defaults to [0, 0] (top left).
+     * @param {String} [grow] The axis to grow to maintain the ratio.
+     *     Defaults to 'height'.
+     */
+  }, {
+    key: 'constrainToRatio',
+    value: function constrainToRatio(ratio) {
+      var origin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [0, 0];
+      var grow = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'height';
+      if (ratio === null) {
+        return;
+      }
+      var width = this.width();
+      var height = this.height();
+      switch (grow) {
+        case 'height':
+          this.resize(this.width(), this.width() * ratio, origin);
+          break;
+        case 'width':
+          this.resize(this.height() * 1 / ratio, this.height(), origin);
+          break;
+        default:
+          this.resize(this.width(), this.width() * ratio, origin);
+      }
+      return this;
+    }
+    /**
+     * Constrain the box within a boundary.
+     * @param {Number} boundaryWidth
+     * @param {Number} boundaryHeight
+     * @param {Array} [origin] The origin point to resize from.
+     *     Defaults to [0, 0] (top left).
+     */
+  }, {
+    key: 'constrainToBoundary',
+    value: function constrainToBoundary(boundaryWidth, boundaryHeight) {
+      var origin = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [0, 0];
+      var _getAbsolutePoint = this.getAbsolutePoint(origin),
+          _getAbsolutePoint2 = slicedToArray(_getAbsolutePoint, 2),
+          originX = _getAbsolutePoint2[0],
+          originY = _getAbsolutePoint2[1];
+      var maxIfLeft = originX;
+      var maxIfTop = originY;
+      var maxIfRight = boundaryWidth - originX;
+      var maxIfBottom = boundaryHeight - originY;
+      var directionX = -2 * origin[0] + 1;
+      var directionY = -2 * origin[1] + 1;
+      var maxWidth = null,
+          maxHeight = null;
+      switch (directionX) {
+        case -1:
+          maxWidth = maxIfLeft;break;
+        case 0:
+          maxWidth = Math.min(maxIfLeft, maxIfRight) * 2;break;
+        case +1:
+          maxWidth = maxIfRight;break;
+      }
+      switch (directionY) {
+        case -1:
+          maxHeight = maxIfTop;break;
+        case 0:
+          maxHeight = Math.min(maxIfTop, maxIfBottom) * 2;break;
+        case +1:
+          maxHeight = maxIfBottom;break;
+      }
+      if (this.width() > maxWidth) {
+        var factor = maxWidth / this.width();
+        this.scale(factor, origin);
+      }
+      if (this.height() > maxHeight) {
+        var _factor = maxHeight / this.height();
+        this.scale(_factor, origin);
+      }
+      return this;
+    }
+    /**
+     * Constrain the box to a maximum/minimum size.
+     * @param {Number} [maxWidth]
+     * @param {Number} [maxHeight]
+     * @param {Number} [minWidth]
+     * @param {Number} [minHeight]
+     * @param {Array} [origin] The origin point to resize from.
+     *     Defaults to [0, 0] (top left).
+     * @param {Number} [ratio] Ratio to maintain.
+     */
+  }, {
+    key: 'constrainToSize',
+    value: function constrainToSize() {
+      var maxWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+      var maxHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+      var minWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+      var minHeight = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+      var origin = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [0, 0];
+      var ratio = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : null;
+      if (ratio) {
+        if (ratio > 1) {
+          maxWidth = maxHeight * 1 / ratio;
+          minHeight = minHeight * ratio;
+        } else if (ratio < 1) {
+          maxHeight = maxWidth * ratio;
+          minWidth = minHeight * 1 / ratio;
+        }
+      }
+      if (maxWidth && this.width() > maxWidth) {
+        var newWidth = maxWidth,
+            newHeight = ratio === null ? this.height() : maxHeight;
+        this.resize(newWidth, newHeight, origin);
+      }
+      if (maxHeight && this.height() > maxHeight) {
+        var _newWidth = ratio === null ? this.width() : maxWidth,
+            _newHeight = maxHeight;
+        this.resize(_newWidth, _newHeight, origin);
+      }
+      if (minWidth && this.width() < minWidth) {
+        var _newWidth2 = minWidth,
+            _newHeight2 = ratio === null ? this.height() : minHeight;
+        this.resize(_newWidth2, _newHeight2, origin);
+      }
+      if (minHeight && this.height() < minHeight) {
+        var _newWidth3 = ratio === null ? this.width() : minWidth,
+            _newHeight3 = minHeight;
+        this.resize(_newWidth3, _newHeight3, origin);
+      }
+      return this;
+    }
+  }]);
+  return Box;
+}();
+
+/**
+ * Binds an element's touch events to be simulated as mouse events.
+ * @param {Element} element
+ */
+function enableTouch(element) {
+  element.addEventListener('touchstart', simulateMouseEvent);
+  element.addEventListener('touchend', simulateMouseEvent);
+  element.addEventListener('touchmove', simulateMouseEvent);
+}
+/**
+ * Translates a touch event to a mouse event.
+ * @param {Event} e
+ */
+function simulateMouseEvent(e) {
+  e.preventDefault();
+  var touch = e.changedTouches[0];
+  var eventMap = {
+    'touchstart': 'mousedown',
+    'touchmove': 'mousemove',
+    'touchend': 'mouseup'
+  };
+  touch.target.dispatchEvent(new MouseEvent(eventMap[e.type], {
+    bubbles: true,
+    cancelable: true,
+    view: window,
+    clientX: touch.clientX,
+    clientY: touch.clientY,
+    screenX: touch.screenX,
+    screenY: touch.screenY
+  }));
+}
+
+/**
+ * Define a list of handles to create.
+ *
+ * @property {Array} position - The x and y ratio position of the handle within
+ *      the crop region. Accepts a value between 0 to 1 in the order of [X, Y].
+ * @property {Array} constraints - Define the side of the crop region that is to
+ *      be affected by this handle. Accepts a value of 0 or 1 in the order of
+ *      [TOP, RIGHT, BOTTOM, LEFT].
+ * @property {String} cursor - The CSS cursor of this handle.
+ */
+var HANDLES = [{ position: [0.0, 0.0], constraints: [1, 0, 0, 1], cursor: 'nw-resize' }, { position: [0.5, 0.0], constraints: [1, 0, 0, 0], cursor: 'n-resize' }, { position: [1.0, 0.0], constraints: [1, 1, 0, 0], cursor: 'ne-resize' }, { position: [1.0, 0.5], constraints: [0, 1, 0, 0], cursor: 'e-resize' }, { position: [1.0, 1.0], constraints: [0, 1, 1, 0], cursor: 'se-resize' }, { position: [0.5, 1.0], constraints: [0, 0, 1, 0], cursor: 's-resize' }, { position: [0.0, 1.0], constraints: [0, 0, 1, 1], cursor: 'sw-resize' }, { position: [0.0, 0.5], constraints: [0, 0, 0, 1], cursor: 'w-resize' }];
+var CropprCore = function () {
+  function CropprCore(element, options) {
+    var _this = this;
+    var deferred = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    classCallCheck(this, CropprCore);
+    this.options = CropprCore.parseOptions(options || {});
+    if (!element.nodeName) {
+      element = document.querySelector(element);
+      if (element == null) {
+        throw 'Unable to find element.';
+      }
+    }
+    if (!element.getAttribute('src')) {
+      throw 'Image src not provided.';
+    }
+    this._initialized = false;
+    this._restore = {
+      parent: element.parentNode,
+      element: element
+    };
+    if (!deferred) {
+      if (element.width === 0 || element.height === 0) {
+        element.onload = function () {
+          _this.initialize(element);
+        };
+      } else {
+        this.initialize(element);
+      }
+    }
+  }
+  createClass(CropprCore, [{
+    key: 'initialize',
+    value: function initialize(element) {
+      this.createDOM(element);
+      this.options.convertToPixels(this.cropperEl);
+      this.attachHandlerEvents();
+      this.attachRegionEvents();
+      this.attachOverlayEvents();
+      this.box = this.initializeBox(this.options);
+      this.redraw();
+      this._initialized = true;
+      if (this.options.onInitialize !== null) {
+        this.options.onInitialize(this);
+      }
+    }
+  }, {
+    key: 'createDOM',
+    value: function createDOM(targetEl) {
+      this.containerEl = document.createElement('div');
+      this.containerEl.className = 'croppr-container';
+      this.eventBus = this.containerEl;
+      enableTouch(this.containerEl);
+      this.cropperEl = document.createElement('div');
+      this.cropperEl.className = 'croppr';
+      this.imageEl = document.createElement('img');
+      this.imageEl.setAttribute('src', targetEl.getAttribute('src'));
+      this.imageEl.setAttribute('alt', targetEl.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 handleContainerEl = document.createElement('div');
+      handleContainerEl.className = 'croppr-handleContainer';
+      this.handles = [];
+      for (var i = 0; i < HANDLES.length; i++) {
+        var handle = new Handle(HANDLES[i].position, HANDLES[i].constraints, HANDLES[i].cursor, this.eventBus);
+        this.handles.push(handle);
+        handleContainerEl.appendChild(handle.el);
+      }
+      this.cropperEl.appendChild(this.imageEl);
+      this.cropperEl.appendChild(this.imageClippedEl);
+      this.cropperEl.appendChild(this.regionEl);
+      this.cropperEl.appendChild(this.overlayEl);
+      this.cropperEl.appendChild(handleContainerEl);
+      this.containerEl.appendChild(this.cropperEl);
+      targetEl.parentElement.replaceChild(this.containerEl, targetEl);
+    }
+    /**
+     * Changes the image src.
+     * @param {String} src
+     */
+  }, {
+    key: 'setImage',
+    value: function setImage(src) {
+      var _this2 = this;
+      this.imageEl.onload = function () {
+        _this2.box = _this2.initializeBox(_this2.options);
+        _this2.redraw();
+      };
+      this.imageEl.src = src;
+      this.imageClippedEl.src = src;
+      return this;
+    }
+  }, {
+    key: 'destroy',
+    value: function destroy() {
+      this._restore.parent.replaceChild(this._restore.element, this.containerEl);
+    }
+    /**
+     * Create a new box region with a set of options.
+     * @param {Object} opts The options.
+     * @returns {Box}
+     */
+  }, {
+    key: 'initializeBox',
+    value: function initializeBox(opts) {
+      var width = opts.startSize.width;
+      var height = opts.startSize.height;
+      var box = new Box(0, 0, width, height);
+      box.constrainToRatio(opts.aspectRatio, [0.5, 0.5]);
+      var min = opts.minSize;
+      var max = opts.maxSize;
+      box.constrainToSize(max.width, max.height, min.width, min.height, [0.5, 0.5], opts.aspectRatio);
+      var parentWidth = this.cropperEl.offsetWidth;
+      var parentHeight = this.cropperEl.offsetHeight;
+      box.constrainToBoundary(parentWidth, parentHeight, [0.5, 0.5]);
+      var x = this.cropperEl.offsetWidth / 2 - box.width() / 2;
+      var y = this.cropperEl.offsetHeight / 2 - box.height() / 2;
+      box.move(x, y);
+      return box;
+    }
+  }, {
+    key: 'redraw',
+    value: function redraw() {
+      var _this3 = this;
+      var width = Math.round(this.box.width()),
+          height = Math.round(this.box.height()),
+          x1 = Math.round(this.box.x1),
+          y1 = Math.round(this.box.y1),
+          x2 = Math.round(this.box.x2),
+          y2 = Math.round(this.box.y2);
+      window.requestAnimationFrame(function () {
+        _this3.regionEl.style.transform = 'translate(' + x1 + 'px, ' + y1 + 'px)';
+        _this3.regionEl.style.width = width + 'px';
+        _this3.regionEl.style.height = height + 'px';
+        _this3.imageClippedEl.style.clip = 'rect(' + y1 + 'px, ' + x2 + 'px, ' + y2 + 'px, ' + x1 + 'px)';
+        var center = _this3.box.getAbsolutePoint([.5, .5]);
+        var xSign = center[0] - _this3.cropperEl.offsetWidth / 2 >> 31;
+        var ySign = center[1] - _this3.cropperEl.offsetHeight / 2 >> 31;
+        var quadrant = (xSign ^ ySign) + ySign + ySign + 4;
+        var foregroundHandleIndex = -2 * quadrant + 8;
+        for (var i = 0; i < _this3.handles.length; i++) {
+          var handle = _this3.handles[i];
+          var handleWidth = handle.el.offsetWidth;
+          var handleHeight = handle.el.offsetHeight;
+          var left = x1 + width * handle.position[0] - handleWidth / 2;
+          var top = y1 + height * handle.position[1] - handleHeight / 2;
+          handle.el.style.transform = 'translate(' + Math.round(left) + 'px, ' + Math.round(top) + 'px)';
+          handle.el.style.zIndex = foregroundHandleIndex == i ? 5 : 4;
+        }
+      });
+    }
+  }, {
+    key: 'attachHandlerEvents',
+    value: function attachHandlerEvents() {
+      var eventBus = this.eventBus;
+      eventBus.addEventListener('handlestart', this.onHandleMoveStart.bind(this));
+      eventBus.addEventListener('handlemove', this.onHandleMoveMoving.bind(this));
+      eventBus.addEventListener('handleend', this.onHandleMoveEnd.bind(this));
+    }
+  }, {
+    key: 'attachRegionEvents',
+    value: function attachRegionEvents() {
+      var eventBus = this.eventBus;
+      var self = this;
+      this.regionEl.addEventListener('mousedown', onMouseDown);
+      eventBus.addEventListener('regionstart', this.onRegionMoveStart.bind(this));
+      eventBus.addEventListener('regionmove', this.onRegionMoveMoving.bind(this));
+      eventBus.addEventListener('regionend', this.onRegionMoveEnd.bind(this));
+      function onMouseDown(e) {
+        e.stopPropagation();
+        document.addEventListener('mouseup', onMouseUp);
+        document.addEventListener('mousemove', onMouseMove);
+        eventBus.dispatchEvent(new CustomEvent('regionstart', {
+          detail: { mouseX: e.clientX, mouseY: e.clientY }
+        }));
+      }
+      function onMouseMove(e) {
+        e.stopPropagation();
+        eventBus.dispatchEvent(new CustomEvent('regionmove', {
+          detail: { mouseX: e.clientX, mouseY: e.clientY }
+        }));
+      }
+      function onMouseUp(e) {
+        e.stopPropagation();
+        document.removeEventListener('mouseup', onMouseUp);
+        document.removeEventListener('mousemove', onMouseMove);
+        eventBus.dispatchEvent(new CustomEvent('regionend', {
+          detail: { mouseX: e.clientX, mouseY: e.clientY }
+        }));
+      }
+    }
+  }, {
+    key: 'attachOverlayEvents',
+    value: function attachOverlayEvents() {
+      var SOUTHEAST_HANDLE_IDX = 4;
+      var self = this;
+      var tmpBox = null;
+      this.overlayEl.addEventListener('mousedown', onMouseDown);
+      function onMouseDown(e) {
+        e.stopPropagation();
+        document.addEventListener('mouseup', onMouseUp);
+        document.addEventListener('mousemove', onMouseMove);
+        var container = self.cropperEl.getBoundingClientRect();
+        var mouseX = e.clientX - container.left;
+        var mouseY = e.clientY - container.top;
+        tmpBox = self.box;
+        self.box = new Box(mouseX, mouseY, mouseX + 1, mouseY + 1);
+        self.eventBus.dispatchEvent(new CustomEvent('handlestart', {
+          detail: { handle: self.handles[SOUTHEAST_HANDLE_IDX] }
+        }));
+      }
+      function onMouseMove(e) {
+        e.stopPropagation();
+        self.eventBus.dispatchEvent(new CustomEvent('handlemove', {
+          detail: { mouseX: e.clientX, mouseY: e.clientY }
+        }));
+      }
+      function onMouseUp(e) {
+        e.stopPropagation();
+        document.removeEventListener('mouseup', onMouseUp);
+        document.removeEventListener('mousemove', onMouseMove);
+        if (self.box.width() === 1 && self.box.height() === 1) {
+          self.box = tmpBox;
+          return;
+        }
+        self.eventBus.dispatchEvent(new CustomEvent('handleend', {
+          detail: { mouseX: e.clientX, mouseY: e.clientY }
+        }));
+      }
+    }
+  }, {
+    key: 'onHandleMoveStart',
+    value: function onHandleMoveStart(e) {
+      var handle = e.detail.handle;
+      var originPoint = [1 - handle.position[0], 1 - handle.position[1]];
+      var _box$getAbsolutePoint = this.box.getAbsolutePoint(originPoint),
+          _box$getAbsolutePoint2 = slicedToArray(_box$getAbsolutePoint, 2),
+          originX = _box$getAbsolutePoint2[0],
+          originY = _box$getAbsolutePoint2[1];
+      this.activeHandle = { handle: handle, originPoint: originPoint, originX: originX, originY: originY };
+      if (this.options.onCropStart !== null) {
+        this.options.onCropStart(this.getValue());
+      }
+    }
+  }, {
+    key: 'onHandleMoveMoving',
+    value: function onHandleMoveMoving(e) {
+      var _e$detail = e.detail,
+          mouseX = _e$detail.mouseX,
+          mouseY = _e$detail.mouseY;
+      var container = this.cropperEl.getBoundingClientRect();
+      mouseX = mouseX - container.left;
+      mouseY = mouseY - container.top;
+      if (mouseX < 0) {
+        mouseX = 0;
+      } else if (mouseX > container.width) {
+        mouseX = container.width;
+      }
+      if (mouseY < 0) {
+        mouseY = 0;
+      } else if (mouseY > container.height) {
+        mouseY = container.height;
+      }
+      var origin = this.activeHandle.originPoint.slice();
+      var originX = this.activeHandle.originX;
+      var originY = this.activeHandle.originY;
+      var handle = this.activeHandle.handle;
+      var TOP_MOVABLE = handle.constraints[0] === 1;
+      var RIGHT_MOVABLE = handle.constraints[1] === 1;
+      var BOTTOM_MOVABLE = handle.constraints[2] === 1;
+      var LEFT_MOVABLE = handle.constraints[3] === 1;
+      var MULTI_AXIS = (LEFT_MOVABLE || RIGHT_MOVABLE) && (TOP_MOVABLE || BOTTOM_MOVABLE);
+      var x1 = LEFT_MOVABLE || RIGHT_MOVABLE ? originX : this.box.x1;
+      var x2 = LEFT_MOVABLE || RIGHT_MOVABLE ? originX : this.box.x2;
+      var y1 = TOP_MOVABLE || BOTTOM_MOVABLE ? originY : this.box.y1;
+      var y2 = TOP_MOVABLE || BOTTOM_MOVABLE ? originY : this.box.y2;
+      x1 = LEFT_MOVABLE ? mouseX : x1;
+      x2 = RIGHT_MOVABLE ? mouseX : x2;
+      y1 = TOP_MOVABLE ? mouseY : y1;
+      y2 = BOTTOM_MOVABLE ? mouseY : y2;
+      var isFlippedX = false,
+          isFlippedY = false;
+      if (LEFT_MOVABLE || RIGHT_MOVABLE) {
+        isFlippedX = LEFT_MOVABLE ? mouseX > originX : mouseX < originX;
+      }
+      if (TOP_MOVABLE || BOTTOM_MOVABLE) {
+        isFlippedY = TOP_MOVABLE ? mouseY > originY : mouseY < originY;
+      }
+      if (isFlippedX) {
+        var tmp = x1;x1 = x2;x2 = tmp;
+        origin[0] = 1 - origin[0];
+      }
+      if (isFlippedY) {
+        var _tmp = y1;y1 = y2;y2 = _tmp;
+        origin[1] = 1 - origin[1];
+      }
+      var box = new Box(x1, y1, x2, y2);
+      if (this.options.aspectRatio) {
+        var ratio = this.options.aspectRatio;
+        var isVerticalMovement = false;
+        if (MULTI_AXIS) {
+          isVerticalMovement = mouseY > box.y1 + ratio * box.width() || mouseY < box.y2 - ratio * box.width();
+        } else if (TOP_MOVABLE || BOTTOM_MOVABLE) {
+          isVerticalMovement = true;
+        }
+        var ratioMode = isVerticalMovement ? 'width' : 'height';
+        box.constrainToRatio(ratio, origin, ratioMode);
+      }
+      var min = this.options.minSize;
+      var max = this.options.maxSize;
+      box.constrainToSize(max.width, max.height, min.width, min.height, origin, this.options.aspectRatio);
+      var parentWidth = this.cropperEl.offsetWidth;
+      var parentHeight = this.cropperEl.offsetHeight;
+      box.constrainToBoundary(parentWidth, parentHeight, origin);
+      this.box = box;
+      this.redraw();
+      if (this.options.onCropMove !== null) {
+        this.options.onCropMove(this.getValue());
+      }
+    }
+  }, {
+    key: 'onHandleMoveEnd',
+    value: function onHandleMoveEnd(e) {
+      if (this.options.onCropEnd !== null) {
+        this.options.onCropEnd(this.getValue());
+      }
+    }
+  }, {
+    key: 'onRegionMoveStart',
+    value: function onRegionMoveStart(e) {
+      var _e$detail2 = e.detail,
+          mouseX = _e$detail2.mouseX,
+          mouseY = _e$detail2.mouseY;
+      var container = this.cropperEl.getBoundingClientRect();
+      mouseX = mouseX - container.left;
+      mouseY = mouseY - container.top;
+      this.currentMove = {
+        offsetX: mouseX - this.box.x1,
+        offsetY: mouseY - this.box.y1
+      };
+      if (this.options.onCropStart !== null) {
+        this.options.onCropStart(this.getValue());
+      }
+    }
+  }, {
+    key: 'onRegionMoveMoving',
+    value: function onRegionMoveMoving(e) {
+      var _e$detail3 = e.detail,
+          mouseX = _e$detail3.mouseX,
+          mouseY = _e$detail3.mouseY;
+      var _currentMove = this.currentMove,
+          offsetX = _currentMove.offsetX,
+          offsetY = _currentMove.offsetY;
+      var container = this.cropperEl.getBoundingClientRect();
+      mouseX = mouseX - container.left;
+      mouseY = mouseY - container.top;
+      this.box.move(mouseX - offsetX, mouseY - offsetY);
+      if (this.box.x1 < 0) {
+        this.box.move(0, null);
+      }
+      if (this.box.x2 > container.width) {
+        this.box.move(container.width - this.box.width(), null);
+      }
+      if (this.box.y1 < 0) {
+        this.box.move(null, 0);
+      }
+      if (this.box.y2 > container.height) {
+        this.box.move(null, container.height - this.box.height());
+      }
+      this.redraw();
+      if (this.options.onCropMove !== null) {
+        this.options.onCropMove(this.getValue());
+      }
+    }
+  }, {
+    key: 'onRegionMoveEnd',
+    value: function onRegionMoveEnd(e) {
+      if (this.options.onCropEnd !== null) {
+        this.options.onCropEnd(this.getValue());
+      }
+    }
+  }, {
+    key: 'getValue',
+    value: function getValue() {
+      var mode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+      if (mode === null) {
+        mode = this.options.returnMode;
+      }
+      if (mode == 'real') {
+        var actualWidth = this.imageEl.naturalWidth;
+        var actualHeight = this.imageEl.naturalHeight;
+        var _imageEl$getBoundingC = this.imageEl.getBoundingClientRect(),
+            elementWidth = _imageEl$getBoundingC.width,
+            elementHeight = _imageEl$getBoundingC.height;
+        var factorX = actualWidth / elementWidth;
+        var factorY = actualHeight / elementHeight;
+        return {
+          x: Math.round(this.box.x1 * factorX),
+          y: Math.round(this.box.y1 * factorY),
+          width: Math.round(this.box.width() * factorX),
+          height: Math.round(this.box.height() * factorY)
+        };
+      } else if (mode == 'ratio') {
+        var _imageEl$getBoundingC2 = this.imageEl.getBoundingClientRect(),
+            _elementWidth = _imageEl$getBoundingC2.width,
+            _elementHeight = _imageEl$getBoundingC2.height;
+        return {
+          x: round(this.box.x1 / _elementWidth, 3),
+          y: round(this.box.y1 / _elementHeight, 3),
+          width: round(this.box.width() / _elementWidth, 3),
+          height: round(this.box.height() / _elementHeight, 3)
+        };
+      } else if (mode == 'raw') {
+        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 parseOptions(opts) {
+      var defaults$$1 = {
+        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
+      };
+      var aspectRatio = null;
+      if (opts.aspectRatio !== undefined) {
+        if (typeof opts.aspectRatio === 'number') {
+          aspectRatio = opts.aspectRatio;
+        } else if (opts.aspectRatio instanceof Array) {
+          aspectRatio = opts.aspectRatio[1] / opts.aspectRatio[0];
+        }
+      }
+      var maxSize = null;
+      if (opts.maxSize !== undefined && opts.maxSize !== null) {
+        maxSize = {
+          width: opts.maxSize[0] || null,
+          height: opts.maxSize[1] || null,
+          unit: opts.maxSize[2] || 'px'
+        };
+      }
+      var minSize = null;
+      if (opts.minSize !== undefined && opts.minSize !== null) {
+        minSize = {
+          width: opts.minSize[0] || null,
+          height: opts.minSize[1] || null,
+          unit: opts.minSize[2] || 'px'
+        };
+      }
+      var startSize = null;
+      if (opts.startSize !== undefined && opts.startSize !== null) {
+        startSize = {
+          width: opts.startSize[0] || null,
+          height: opts.startSize[1] || null,
+          unit: opts.startSize[2] || '%'
+        };
+      }
+      var onInitialize = null;
+      if (typeof opts.onInitialize === 'function') {
+        onInitialize = opts.onInitialize;
+      }
+      var onCropStart = null;
+      if (typeof opts.onCropStart === 'function') {
+        onCropStart = opts.onCropStart;
+      }
+      var onCropEnd = null;
+      if (typeof opts.onCropEnd === 'function') {
+        onCropEnd = opts.onCropEnd;
+      }
+      var onCropMove = null;
+      if (typeof opts.onUpdate === 'function') {
+        console.warn('Croppr.js: `onUpdate` is deprecated and will be removed in the next major release. Please use `onCropMove` or `onCropEnd` instead.');
+        onCropMove = opts.onUpdate;
+      }
+      if (typeof opts.onCropMove === 'function') {
+        onCropMove = opts.onCropMove;
+      }
+      var returnMode = null;
+      if (opts.returnMode !== undefined) {
+        var s = opts.returnMode.toLowerCase();
+        if (['real', 'ratio', 'raw'].indexOf(s) === -1) {
+          throw "Invalid return mode.";
+        }
+        returnMode = s;
+      }
+      var convertToPixels = function convertToPixels(container) {
+        var width = container.offsetWidth;
+        var height = container.offsetHeight;
+        var sizeKeys = ['maxSize', 'minSize', 'startSize'];
+        for (var i = 0; i < sizeKeys.length; i++) {
+          var key = sizeKeys[i];
+          if (this[key] !== null) {
+            if (this[key].unit == '%') {
+              if (this[key].width !== null) {
+                this[key].width = this[key].width / 100 * width;
+              }
+              if (this[key].height !== null) {
+                this[key].height = this[key].height / 100 * height;
+              }
+            }
+            delete this[key].unit;
+          }
+        }
+      };
+      var defaultValue = function defaultValue(v, d) {
+        return v !== null ? v : d;
+      };
+      return {
+        aspectRatio: defaultValue(aspectRatio, defaults$$1.aspectRatio),
+        maxSize: defaultValue(maxSize, defaults$$1.maxSize),
+        minSize: defaultValue(minSize, defaults$$1.minSize),
+        startSize: defaultValue(startSize, defaults$$1.startSize),
+        returnMode: defaultValue(returnMode, defaults$$1.returnMode),
+        onInitialize: defaultValue(onInitialize, defaults$$1.onInitialize),
+        onCropStart: defaultValue(onCropStart, defaults$$1.onCropStart),
+        onCropMove: defaultValue(onCropMove, defaults$$1.onCropMove),
+        onCropEnd: defaultValue(onCropEnd, defaults$$1.onCropEnd),
+        convertToPixels: convertToPixels
+      };
+    }
+  }]);
+  return CropprCore;
+}();
+function round(value, decimals) {
+  return Number(Math.round(value + 'e' + decimals) + 'e-' + decimals);
+}
+
+var Croppr$1 = function (_CropprCore) {
+  inherits(Croppr, _CropprCore);
+  /**
+   * @constructor
+   * Calls the CropprCore's constructor.
+   */
+  function Croppr(element, options) {
+    var _deferred = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    classCallCheck(this, Croppr);
+    return possibleConstructorReturn(this, (Croppr.__proto__ || Object.getPrototypeOf(Croppr)).call(this, element, options, _deferred));
+  }
+  /**
+   * Gets the value of the crop region.
+   * @param {String} [mode] Which mode of calculation to use: 'real', 'ratio' or
+   *      'raw'.
+   */
+  createClass(Croppr, [{
+    key: 'getValue',
+    value: function getValue(mode) {
+      return get(Croppr.prototype.__proto__ || Object.getPrototypeOf(Croppr.prototype), 'getValue', this).call(this, mode);
+    }
+    /**
+     * Changes the image src.
+     * @param {String} src
+     */
+  }, {
+    key: 'setImage',
+    value: function setImage(src) {
+      return get(Croppr.prototype.__proto__ || Object.getPrototypeOf(Croppr.prototype), 'setImage', this).call(this, src);
+    }
+  }, {
+    key: 'destroy',
+    value: function destroy() {
+      return get(Croppr.prototype.__proto__ || Object.getPrototypeOf(Croppr.prototype), 'destroy', this).call(this);
+    }
+    /**
+     * Moves the crop region to a specified coordinate.
+     * @param {Number} x
+     * @param {Number} y
+     */
+  }, {
+    key: 'moveTo',
+    value: function moveTo(x, y) {
+      this.box.move(x, y);
+      this.redraw();
+      if (this.options.onCropEnd !== null) {
+        this.options.onCropEnd(this.getValue());
+      }
+      return this;
+    }
+    /**
+     * Resizes the crop region to a specified width and height.
+     * @param {Number} width
+     * @param {Number} height
+     * @param {Array} origin The origin point to resize from.
+     *      Defaults to [0.5, 0.5] (center).
+     */
+  }, {
+    key: 'resizeTo',
+    value: function resizeTo(width, height) {
+      var origin = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [.5, .5];
+      this.box.resize(width, height, origin);
+      this.redraw();
+      if (this.options.onCropEnd !== null) {
+        this.options.onCropEnd(this.getValue());
+      }
+      return this;
+    }
+    /**
+     * Scale the crop region by a factor.
+     * @param {Number} factor
+     * @param {Array} origin The origin point to resize from.
+     *      Defaults to [0.5, 0.5] (center).
+     */
+  }, {
+    key: 'scaleBy',
+    value: function scaleBy(factor) {
+      var origin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [.5, .5];
+      this.box.scale(factor, origin);
+      this.redraw();
+      if (this.options.onCropEnd !== null) {
+        this.options.onCropEnd(this.getValue());
+      }
+      return this;
+    }
+  }, {
+    key: 'reset',
+    value: function reset() {
+      this.box = this.initializeBox(this.options);
+      this.redraw();
+      if (this.options.onCropEnd !== null) {
+        this.options.onCropEnd(this.getValue());
+      }
+      return this;
+    }
+  }]);
+  return Croppr;
+}(CropprCore);
+
+return Croppr$1;
+
+})));
diff --git a/ui/media/js/main.js b/ui/media/js/main.js
index 6a5c92fc..e4461d40 100644
--- a/ui/media/js/main.js
+++ b/ui/media/js/main.js
@@ -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=""
diff --git a/ui/media/js/parameters.js b/ui/media/js/parameters.js
index 19892c94..caab8817 100644
--- a/ui/media/js/parameters.js
+++ b/ui/media/js/parameters.js
@@ -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")
 

From aafdec849752bbe1b2056bd71cffd8448be06271 Mon Sep 17 00:00:00 2001
From: JeLuF <jf@mormo.org>
Date: Thu, 3 Aug 2023 15:14:15 +0200
Subject: [PATCH 4/8] fill list

---
 ui/media/js/main.js | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/ui/media/js/main.js b/ui/media/js/main.js
index e4461d40..47c5da00 100644
--- a/ui/media/js/main.js
+++ b/ui/media/js/main.js
@@ -698,8 +698,6 @@ function getAllModelNames(type) {
 }
 
 function onUseAsThumbnailClick(req, img) {
-    console.log(req)
-    console.log(img)
     let scale = 1
     let targetWidth = img.naturalWidth
     let targetHeight = img.naturalHeight
@@ -707,7 +705,6 @@ function onUseAsThumbnailClick(req, img) {
     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" })
     }
 
@@ -727,7 +724,6 @@ function onUseAsThumbnailClick(req, img) {
         }
     }
     if (resize) {
-        console.log("Resize",targetWidth,targetHeight)
         const canvas = document.createElement('canvas')
         canvas.width = targetWidth
         canvas.height = targetHeight
@@ -754,14 +750,15 @@ function onUseAsThumbnailClick(req, img) {
     optgroup.replaceChildren(...embeddings.map(e => { 
         let option = document.createElement("option")
         option.innerText = e
+        option.dataset["type"] = "embeddings"
         return option
     }))
     
-    console.log("##OptGroup",optgroup)
     useAsThumbSelect.replaceChildren(optgroup)
 
     useAsThumbDialog.showModal()
 
+    
 //    fetch(img.src)
 //      .then(response => response.blob())
 //      .then(async function(blob) {

From 74978704552bfe1a18b0e035f1dc70b0d37e6d1d Mon Sep 17 00:00:00 2001
From: JeLuF <jf@mormo.org>
Date: Sat, 5 Aug 2023 21:22:45 +0200
Subject: [PATCH 5/8] add upload

---
 ui/easydiffusion/bucket_manager.py |  5 +-
 ui/index.html                      |  8 ++--
 ui/media/css/main.css              | 33 ++++++++++++-
 ui/media/js/main.js                | 76 ++++++++++++++++++++++++------
 ui/media/js/utils.js               | 24 ++++++++++
 5 files changed, 122 insertions(+), 24 deletions(-)

diff --git a/ui/easydiffusion/bucket_manager.py b/ui/easydiffusion/bucket_manager.py
index f587bc7f..60a4ed6c 100644
--- a/ui/easydiffusion/bucket_manager.py
+++ b/ui/easydiffusion/bucket_manager.py
@@ -69,9 +69,8 @@ def init():
         bucket = crud.get_bucket_by_path(db, path)
 
         if bucket == None:
-            bucket_id = crud.create_bucket(db=db, bucket=schemas.BucketCreate(path=path))
-        else:
-            bucket_id = bucket.id
+            bucket = crud.create_bucket(db=db, bucket=schemas.BucketCreate(path=path))
+        bucket_id = bucket.id
 
         bucketfile = schemas.BucketFileCreate(filename=filename, data=file)
         result = crud.create_bucketfile(db=db, bucketfile=bucketfile, bucket_id=bucket_id)
diff --git a/ui/index.html b/ui/index.html
index faee0ff2..f69efd0b 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -704,13 +704,13 @@
                     <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 &hellip;</h4>
-                    <select id="use-as-thumb-select" size="8" multiple>
+                    <label for="use-as-thumb-select">Use the thumbnail for:</label><br>
+                    <select id="use-as-thumb-select" size="16" multiple>
                     </select>
                 </div>
                 <div class="use-as-thumb-buttons">
-                    <button class="tertiaryButton">OK</button>
-                    <button class="tertiaryButton">Cancel</button>
+                    <button class="tertiaryButton" id="use-as-thumb-save">Save thumbnail</button>
+                    <button class="tertiaryButton" id="use-as-thumb-cancel">Cancel</button>
                 </div>
             </div>
         </div>
diff --git a/ui/media/css/main.css b/ui/media/css/main.css
index be3e92f0..4d68b9db 100644
--- a/ui/media/css/main.css
+++ b/ui/media/css/main.css
@@ -1650,6 +1650,35 @@ body.wait-pause {
     }
 }
 
+.spinner-container {
+    width: 80px;
+    height: 100px;
+    margin: 100px auto;
+    margin-top: 30vH;
+}
+
+.spinner-block {
+    position: relative;
+    box-sizing: border-box;
+    float: left;
+    margin: 0 10px 10px 0;
+    width: 12px;
+    height: 12px;
+    border-radius: 3px;
+    background: var(--accent-color);
+}
+
+.spinner-block:nth-child(4n+1) { animation: spinner-wave 2s ease .0s infinite; }
+.spinner-block:nth-child(4n+2) { animation: spinner-wave 2s ease .2s infinite; }
+.spinner-block:nth-child(4n+3) { animation: spinner-wave 2s ease .4s infinite; }
+.spinner-block:nth-child(4n+4) { animation: spinner-wave 2s ease .6s infinite; margin-right: 0; }
+
+@keyframes spinner-wave {
+    0%   { top: 0;     opacity: 1; }
+    50%  { top: 30px;  opacity: .2; }
+    100% { top: 0;     opacity: 1; }
+}
+
 #embeddings-dialog {
     overflow: clip;
 }
@@ -1748,7 +1777,7 @@ body.wait-pause {
   grid-auto-flow: row;
   grid-template-areas:
     "uat-preview uat-select"
-    "uat-buttons uat-buttons";
+    "uat-preview uat-buttons";
 }
 
 .use-as-thumb-preview {
@@ -1857,4 +1886,4 @@ div#enlarge-buttons {
 /* hack for fixing Image Modifier Improvements plugin */
 #imageTagPopupContainer {
     position: absolute;
-}
\ No newline at end of file
+}
diff --git a/ui/media/js/main.js b/ui/media/js/main.js
index f340a79c..30ed6012 100644
--- a/ui/media/js/main.js
+++ b/ui/media/js/main.js
@@ -171,8 +171,11 @@ 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 useAsThumbDialogCloseBtn = document.querySelector("#use-as-thumb-dialog-close-button")
 let useAsThumbImageContainer = document.querySelector("#use-as-thumb-img-container")
 let useAsThumbSelect = document.querySelector("#use-as-thumb-select")
+let useAsThumbSaveBtn = document.querySelector("#use-as-thumb-save")
+let useAsThumbCancelBtn = document.querySelector("#use-as-thumb-cancel")
 
 let maskSetting = document.querySelector("#enable_mask")
 
@@ -703,8 +706,8 @@ function onUseAsThumbnailClick(req, img) {
     let scale = 1
     let targetWidth = img.naturalWidth
     let targetHeight = img.naturalHeight
-    
     let resize = false
+    onUseAsThumbnailClick.img = img
 
     if ( typeof(onUseAsThumbnailClick.croppr) == 'undefined' ) {
         onUseAsThumbnailClick.croppr = new Croppr("#use-as-thumb-image", { aspectRatio: 1, minSize: [384,384,'px'], startSize:  [512, 512, 'px'], returnMode:"real" })
@@ -725,6 +728,10 @@ function onUseAsThumbnailClick(req, img) {
             resize = true
         }
     }
+
+    onUseAsThumbnailClick.croppr.options.minSize = {width: 384*scale>>>0, height: 384*scale>>>0}
+    onUseAsThumbnailClick.croppr.options.startSize = {width: 512*scale>>>0, height: 512*scale>>>0}
+
     if (resize) {
         const canvas = document.createElement('canvas')
         canvas.width = targetWidth
@@ -732,9 +739,6 @@ function onUseAsThumbnailClick(req, img) {
         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)
@@ -759,21 +763,51 @@ function onUseAsThumbnailClick(req, img) {
     useAsThumbSelect.replaceChildren(optgroup)
 
     useAsThumbDialog.showModal()
+    onUseAsThumbnailClick.scale = scale
 
-    
-//    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)
-//      })
 }
 
 modalDialogCloseOnBackdropClick(useAsThumbDialog)
 makeDialogDraggable(useAsThumbDialog)
 
+useAsThumbDialogCloseBtn.addEventListener("click", () => {
+    useAsThumbDialog.close()
+})
+
+useAsThumbCancelBtn.addEventListener("click", () => {
+    useAsThumbDialog.close()
+})
+
+useAsThumbSaveBtn.addEventListener("click", (e) => {
+    let scale = 1/onUseAsThumbnailClick.scale
+    let crop = onUseAsThumbnailClick.croppr.getValue()
+
+    let len = Math.max(crop.width*scale, 384)
+    let profileName = profileNameField.value
+
+    cropImageDataUrl(onUseAsThumbnailClick.img.src, crop.x*scale, crop.y*scale, len, len)
+        .then(thumb => fetch(thumb))
+        .then(response => response.blob())
+        .then(async function(blob) {
+            const formData  = new FormData()
+            formData.append("file", blob)
+            let options = useAsThumbSelect.selectedOptions
+            let promises = []
+            console.log(options)
+            for (let embedding of options) {
+                console.log(`bucket/${profileName}/${embedding.dataset["type"]}/${embedding.value}.png`)
+                promises.push(fetch(`bucket/${profileName}/${embedding.dataset["type"]}/${embedding.value}.png`, { method: 'POST', body: formData }))
+            }
+            return Promise.all(promises)
+        }).then(() => {
+            useAsThumbDialog.close()
+        })
+        .catch(error => {
+            console.error(error)
+            showToast("Couldn't save thumbnail.<br>"+error)
+        })
+})
+
 
 function enqueueImageVariationTask(req, img, reqDiff) {
     const imageSeed = img.getAttribute("data-seed")
@@ -2672,6 +2706,16 @@ function updateEmbeddingsList(filter = "") {
         }
     }
 
+    // Usually the rendering of the Embeddings HTML takes less than a second. In case it takes longer, show a spinner
+    embeddingsList.innerHTML = `
+        <div class="spinner-container">
+          <div class="spinner-block"></div> <div class="spinner-block"></div> <div class="spinner-block"></div> <div class="spinner-block"></div>
+          <div class="spinner-block"></div> <div class="spinner-block"></div> <div class="spinner-block"></div> <div class="spinner-block"></div>
+          <div class="spinner-block"></div> <div class="spinner-block"></div> <div class="spinner-block"></div> <div class="spinner-block"></div>
+          <div class="spinner-block"></div> <div class="spinner-block"></div> <div class="spinner-block"></div> <div class="spinner-block"></div>
+        </div>
+    `
+
     // Remove after fixing https://github.com/huggingface/diffusers/issues/3922
     let warning = ""
     if (vramUsageLevelField.value == "low") {
@@ -2682,9 +2726,11 @@ function updateEmbeddingsList(filter = "") {
     }
     // END of remove block
 
-    fetch("/bucket/embeddings/")
+    let profileName = profileNameField.value
+    fetch(`/bucket/${profileName}/embeddings/`)
        .then(response => response.status==200 ? response.json(): [])
-       .then(iconlist => {
+       .then(async function(iconlist) {
+
            embeddingsList.innerHTML = warning + html(modelsOptions.embeddings, iconlist, "", filter)
            embeddingsList.querySelectorAll("button").forEach((b) => {
                b.addEventListener("click", onButtonClick)
diff --git a/ui/media/js/utils.js b/ui/media/js/utils.js
index 9db0d1cc..673ba3dd 100644
--- a/ui/media/js/utils.js
+++ b/ui/media/js/utils.js
@@ -1097,6 +1097,30 @@ async function deleteKeys(keyToDelete) {
     }
 }
 
+function cropImageDataUrl(dataUrl, x, y, width, height) {
+    return new Promise((resolve, reject) => {
+        const image = new Image()
+        image.src = dataUrl
+
+        image.onload = () => {
+            const canvas = document.createElement('canvas')
+            canvas.width = width
+            canvas.height = height
+
+            const ctx = canvas.getContext('2d')
+            ctx.drawImage(image, x, y, width, height, 0, 0, width, height)
+
+            const croppedDataUrl = canvas.toDataURL('image/png')
+            resolve(croppedDataUrl)
+        }
+
+        image.onerror = (error) => {
+            reject(error)
+        }
+    })
+}
+
+
 function modalDialogCloseOnBackdropClick(dialog) {
     dialog.addEventListener('mousedown', function (event) {
         // Firefox creates an event with clientX|Y = 0|0 when choosing an <option>.

From b5e371103801621c6cb7e1290cbb0b6be505e428 Mon Sep 17 00:00:00 2001
From: JeLuF <jf@mormo.org>
Date: Sun, 6 Aug 2023 21:47:39 +0200
Subject: [PATCH 6/8] Use modifiers card, resize thumbs

---
 ui/index.html            |  9 ++++++
 ui/media/js/auto-save.js |  1 +
 ui/media/js/main.js      | 64 +++++++++++++++++++++++++---------------
 ui/media/js/utils.js     | 18 +++++++++++
 4 files changed, 68 insertions(+), 24 deletions(-)

diff --git a/ui/index.html b/ui/index.html
index f69efd0b..d0c53041 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -681,6 +681,15 @@
             </button>
             <i class="fa-solid fa-magnifying-glass"></i>
             <input id="embeddings-search-box" type="text" spellcheck="false" autocomplete="off" placeholder="Search...">
+            <label for="embedding-card-size-selector"><small>Thumbnail Size:</small></label>
+            <select id="embedding-card-size-selector" name="embedding-card-size-selector">
+                <option value="-2">0</option>
+                <option value="-1">1</option>
+                <option value="0">2</option>
+                <option value="1" selected>3</option>
+                <option value="2">4</option>
+                <option value="3">5</option>
+            </select>
             <span style="float:right;"><label>Mode:</label>&nbsp;<select id="embeddings-mode"><option value="insert">Insert at cursor position</option><option value="append">Append at the end</option></select>
         </div>
         <div id="embeddings-list">
diff --git a/ui/media/js/auto-save.js b/ui/media/js/auto-save.js
index 5ada13d5..bcfd4bc6 100644
--- a/ui/media/js/auto-save.js
+++ b/ui/media/js/auto-save.js
@@ -56,6 +56,7 @@ const SETTINGS_IDS_LIST = [
     "tree_toggle",
     "json_toggle",
     "extract_lora_from_prompt",
+    "embedding-card-size-selector",
 ]
 
 const IGNORE_BY_DEFAULT = ["prompt"]
diff --git a/ui/media/js/main.js b/ui/media/js/main.js
index 30ed6012..b440e794 100644
--- a/ui/media/js/main.js
+++ b/ui/media/js/main.js
@@ -141,6 +141,7 @@ let embeddingsDialogCloseBtn = embeddingsDialog.querySelector("#embeddings-dialo
 let embeddingsSearchBox = document.querySelector("#embeddings-search-box")
 let embeddingsList = document.querySelector("#embeddings-list")
 let embeddingsModeField = document.querySelector("#embeddings-mode")
+let embeddingsCardSizeSelector = document.querySelector("#embedding-card-size-selector")
 
 let positiveEmbeddingText = document.querySelector("#positive-embedding-text")
 let negativeEmbeddingText = document.querySelector("#negative-embedding-text")
@@ -684,6 +685,7 @@ function onMakeSimilarClick(req, img) {
     createTask(newTaskRequest)
 }
 
+// gets a flat list of all models of a certain type, ignoring directories
 function getAllModelNames(type) {
     function f(tree) {
         if (tree == undefined) {
@@ -808,7 +810,6 @@ useAsThumbSaveBtn.addEventListener("click", (e) => {
         })
 })
 
-
 function enqueueImageVariationTask(req, img, reqDiff) {
     const imageSeed = img.getAttribute("data-seed")
 
@@ -2645,43 +2646,50 @@ let icl = []
 function updateEmbeddingsList(filter = "") {
     function html(model, iconlist = [], prefix = "", filter = "") {
         filter = filter.toLowerCase()
-        let toplevel = ""
-        let folders = ""
-        console.log(iconlist)
+        let toplevel = document.createElement("div")
+        let folders = document.createElement("div")
         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/${profileName}/embeddings/${embIcon[token]}`
-                    }
+                    let button
                     if (iconlist.length==0) {
-                        img=""
+                        button = document.createElement("button")
+                        button.innerText="m"
                     } else {
-                        img=`<img src="${img}" height="128" width="128"><br>`
+                        let img = '/media/images/noimg.png'
+                        if (token in embIcon) {
+                            img = `/bucket/${profileName}/embeddings/${embIcon[token]}`
+                        }
+                        button = createModifierCard(m, [img,img], true)
                     }
-                    toplevel += `<button data-embedding="${m}">${img}${m}</button> `
+                    button.dataset["embedding"] = m
+                    button.addEventListener("click", onButtonClick)
+                    toplevel.appendChild(button)
                 }
             } else {
                 let subdir = html(m[1], iconlist, prefix + m[0] + "/", filter)
-                if (subdir != "") {
-                    folders +=
-                        `<div class="embedding-category"><h4 class="collapsible">${prefix}${m[0]}</h4><div class="collapsible-content">` +
-                        subdir +
-                        "</div></div>"
+                if (typeof(subdir) == "object") {
+                    let div1 = document.createElement("div")
+                    let div2 = document.createElement("div")
+                    div1.classList.add("collapsible-content")
+                    div1.classList.add("embedding-category")
+                    div1.appendChild(subdir)
+                    div2.replaceChildren(htmlToElement(`<h4 class="collapsible">${prefix}${m[0]}</h4>`), div1)
+                    folders.appendChild(div2)
                 }
             }
         })
-        return toplevel + folders
+        let result = document.createElement("div")
+        result.replaceChildren(toplevel, htmlToElement('<br style="clear: both;">'), folders)
+        return result
     }
 
     function onButtonClick(e) {
-        let text = e.target.closest("button").dataset["embedding"]
+        let text = e.target.closest("[data-embedding]").dataset["embedding"]
         const insertIntoNegative = e.shiftKey || positiveEmbeddingText.classList.contains("displayNone")
 
         if (embeddingsModeField.value == "insert") {
@@ -2717,7 +2725,7 @@ function updateEmbeddingsList(filter = "") {
     `
 
     // Remove after fixing https://github.com/huggingface/diffusers/issues/3922
-    let warning = ""
+    let warning = "<div></div>"
     if (vramUsageLevelField.value == "low") {
         warning = `
             <div style="border-color: var(--accent-color); border-width: 4px; border-radius: 1em; border-style: solid; background: black; text-align: center; padding: 1em; margin: 1em; ">
@@ -2731,14 +2739,12 @@ function updateEmbeddingsList(filter = "") {
        .then(response => response.status==200 ? response.json(): [])
        .then(async function(iconlist) {
 
-           embeddingsList.innerHTML = warning + html(modelsOptions.embeddings, iconlist, "", filter)
-           embeddingsList.querySelectorAll("button").forEach((b) => {
-               b.addEventListener("click", onButtonClick)
-           })
+           embeddingsList.replaceChildren(htmlToElement(warning), html(modelsOptions.embeddings, iconlist, "", filter))
            createCollapsibles(embeddingsList)
            if (filter != "") {
                embeddingsExpandAll()
            }
+           resizeModifierCards(embeddingsCardSizeSelector.value)
        })
 }
 
@@ -2747,23 +2753,33 @@ function showEmbeddingDialog() {
     embeddingsSearchBox.value = ""
     embeddingsDialog.showModal()
 }
+
 embeddingsButton.addEventListener("click", () => {
     positiveEmbeddingText.classList.remove("displayNone")
     negativeEmbeddingText.classList.add("displayNone")
     showEmbeddingDialog()
 })
+
 negativeEmbeddingsButton.addEventListener("click", () => {
     positiveEmbeddingText.classList.add("displayNone")
     negativeEmbeddingText.classList.remove("displayNone")
     showEmbeddingDialog()
 })
+
 embeddingsDialogCloseBtn.addEventListener("click", (e) => {
     embeddingsDialog.close()
 })
+
 embeddingsSearchBox.addEventListener("input", (e) => {
     updateEmbeddingsList(embeddingsSearchBox.value)
 })
 
+embeddingsCardSizeSelector.addEventListener("change", (e) => {
+    resizeModifierCards(embeddingsCardSizeSelector.value)
+})
+
+
+
 modalDialogCloseOnBackdropClick(embeddingsDialog)
 makeDialogDraggable(embeddingsDialog)
 
diff --git a/ui/media/js/utils.js b/ui/media/js/utils.js
index 673ba3dd..8fef9450 100644
--- a/ui/media/js/utils.js
+++ b/ui/media/js/utils.js
@@ -1097,6 +1097,14 @@ async function deleteKeys(keyToDelete) {
     }
 }
 
+/**
+ * @param {String} Data URL of the image
+ * @param {Integer} Top left X-coordinate of the crop area
+ * @param {Integer} Top left Y-coordinate of the crop area
+ * @param {Integer} Width of the crop area
+ * @param {Integer} Height of the crop area
+ * @return {String}
+ */
 function cropImageDataUrl(dataUrl, x, y, width, height) {
     return new Promise((resolve, reject) => {
         const image = new Image()
@@ -1120,6 +1128,16 @@ function cropImageDataUrl(dataUrl, x, y, width, height) {
     })
 }
 
+/**
+ * @param {String} HTML representing a single element
+ * @return {Element}
+ */
+function htmlToElement(html) {
+    var template = document.createElement('template');
+    html = html.trim(); // Never return a text node of whitespace as the result
+    template.innerHTML = html;
+    return template.content.firstChild;
+}
 
 function modalDialogCloseOnBackdropClick(dialog) {
     dialog.addEventListener('mousedown', function (event) {

From 9b40d6c733b327d854bc84570472c0ab886148f1 Mon Sep 17 00:00:00 2001
From: JeLuF <jf@mormo.org>
Date: Sun, 6 Aug 2023 23:02:18 +0200
Subject: [PATCH 7/8] Remove debugging code

---
 ui/easydiffusion/easydb/crud.py     | 1 -
 ui/easydiffusion/easydb/database.py | 1 -
 ui/media/js/main.js                 | 4 ----
 3 files changed, 6 deletions(-)

diff --git a/ui/easydiffusion/easydb/crud.py b/ui/easydiffusion/easydb/crud.py
index 7550a52a..65bea255 100644
--- a/ui/easydiffusion/easydb/crud.py
+++ b/ui/easydiffusion/easydb/crud.py
@@ -19,7 +19,6 @@ def create_bucketfile(db: Session, bucketfile: schemas.BucketFileCreate, bucket_
     db_bucketfile = models.BucketFile(**bucketfile.dict(), bucket_id=bucket_id)
     db.merge(db_bucketfile)
     db.commit()
-    from pprint import pprint
     db_bucketfile = db.query(models.BucketFile).filter(models.BucketFile.bucket_id==bucket_id, models.BucketFile.filename==bucketfile.filename).first()
     return db_bucketfile
 
diff --git a/ui/easydiffusion/easydb/database.py b/ui/easydiffusion/easydb/database.py
index e3c92845..6cb43ecb 100644
--- a/ui/easydiffusion/easydb/database.py
+++ b/ui/easydiffusion/easydb/database.py
@@ -7,7 +7,6 @@ from sqlalchemy.orm import sessionmaker
 
 os.makedirs(app.BUCKET_DIR, exist_ok=True)
 SQLALCHEMY_DATABASE_URL = "sqlite:///"+os.path.join(app.BUCKET_DIR, "bucket.db")
-print("## SQLALCHEMY_DATABASE_URL = ", SQLALCHEMY_DATABASE_URL)
 
 engine = create_engine(SQLALCHEMY_DATABASE_URL, connect_args={"check_same_thread": False})
 SessionLocal = sessionmaker(autocommit=False, autoflush=False, bind=engine)
diff --git a/ui/media/js/main.js b/ui/media/js/main.js
index 4b2fe0d8..dfc3c04a 100644
--- a/ui/media/js/main.js
+++ b/ui/media/js/main.js
@@ -763,10 +763,8 @@ function onUseAsThumbnailClick(req, img) {
     }))
     
     useAsThumbSelect.replaceChildren(optgroup)
-
     useAsThumbDialog.showModal()
     onUseAsThumbnailClick.scale = scale
-
 }
 
 modalDialogCloseOnBackdropClick(useAsThumbDialog)
@@ -795,9 +793,7 @@ useAsThumbSaveBtn.addEventListener("click", (e) => {
             formData.append("file", blob)
             let options = useAsThumbSelect.selectedOptions
             let promises = []
-            console.log(options)
             for (let embedding of options) {
-                console.log(`bucket/${profileName}/${embedding.dataset["type"]}/${embedding.value}.png`)
                 promises.push(fetch(`bucket/${profileName}/${embedding.dataset["type"]}/${embedding.value}.png`, { method: 'POST', body: formData }))
             }
             return Promise.all(promises)

From 00c55444a95cd525621bffc0267a9918f339d9f9 Mon Sep 17 00:00:00 2001
From: JeLuF <jf@mormo.org>
Date: Mon, 7 Aug 2023 00:02:02 +0200
Subject: [PATCH 8/8] remove unused variable

---
 ui/media/js/main.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/ui/media/js/main.js b/ui/media/js/main.js
index dfc3c04a..c3a42b8a 100644
--- a/ui/media/js/main.js
+++ b/ui/media/js/main.js
@@ -2638,7 +2638,6 @@ document.getElementById("toggle-tensorrt-install").addEventListener("click", fun
 
 /* Embeddings */
 
-let icl = []
 function updateEmbeddingsList(filter = "") {
     function html(model, iconlist = [], prefix = "", filter = "") {
         filter = filter.toLowerCase()
