eea85b834e
This patch brings in a massive number of changes to the frontend of the application. Please feel free to discuss the proposed changes with me at any time. Implemented Recoil as a state management system. Why Recoil? It is a robust library built by developers at Facebook for state management. It has an extremely simple API for implementation that is in sync with React syntax compared to any other state management system out there and works amazingly well. While the official release status is beta as it becomes fully featured, the library is already used in various systems at Facebook and is very stable for the use cases of this application. Why global state management? One of the major issues I saw with the current file structure is that there is minimal code splitting and it makes further development of the frontend a cumbersome task. I have broken down the frontend into various easy to access components isolating the GUI from the logic. To avoid prop drilling, we need global state management to handle the necessary tasks. This will also facilitate the addition of any new features greatly. Code Splitting. Majority of the components that can be isolated in the application have now been done so. All New Custom CSS & Removal of Tailwind While Tailwind is a great way to deploy beautiful interfaces quickly, anyone trying to stylize the application further needs to be familiar with Tailwind which makes it harder for more people to work on it. Not to mention, I am not a particular fan of flooding JSX elements with inline CSS classes. That makes reading the code extremely hard and bloats up component code drastically. As a replacement to Tailwind, I implemented a custom styling system using SCSS as a developer dependency. In the new system, all the general and shared styles are in the styles folder and all the component styles are in the same folder as the component for easy access.The _index.scss file now acts as a central import for every other stylesheet that needs to be loaded. What Changed? The entire application looks and feels like the current implementation with minimal changes. The green (#bdff01) highlight used in the application has now been changed to a bright yellow (rgb(255, 190, 0)) because I felt it better suited the new Dark Mode (see below). The swipe bar for comparing before and after images has now been removed and instead the comparison is a smooth fade effect. I felt this was better to analyze image changes rather than a swiper. // Can add the swipe back if needed. Dark Mode A brand new Dark Mode has been added for the application. Users can enable and disable by tapping the button in the header or by using the Shift + D hotkey. Other Misc New Features When the editor image is now zoomed out to its default size, the image now also gets centered back. TODO The currently used react-zoom-pinch-pan module is not mobile friendly. It does not allow brush strokes. Need to figure out a way to fix this. Further optimization of the frontend code with better code splitting and performance. When using the LaMa model, the first stroke has a delayed response from the backend but the ones that follow are almost immediate. I believe this is happening because of the initialization of the model on the first stroke. I wonder if either of us can look at it and see if this can somehow be preloaded so the user experience is smooth from the first stroke. Enable threading for the desktop application mode so flaskwebgui does not block the main applications Python console.
1 line
23 KiB
JavaScript
1 line
23 KiB
JavaScript
(this["webpackJsonplama-cleaner"]=this["webpackJsonplama-cleaner"]||[]).push([[0],{23:function(e,t,n){},26:function(e,t,n){"use strict";n.r(t);var a=n(0),c=n.n(a),r=n(11),i=n.n(r),o=(n(23),n(4)),s=n(3),l=n.n(s),u=n(2),h=n(6),d=n(30);var j=Object(o.b)({key:"fileState",default:void 0}),b=Object(o.b)({key:"shortcutsState",default:!1}),v=n(7),f=function(){var e=Object(a.useState)(window.innerWidth),t=Object(u.a)(e,2),n=t[0],c=t[1],r=Object(a.useCallback)((function(){c(window.innerWidth)}),[]);return Object(a.useEffect)((function(){return window.addEventListener("resize",r),function(){window.removeEventListener("resize",r)}})),n<768?"mobile":n>=768&&n<1224?"tablet":n>=1224?"desktop":void 0},p=n(1);function O(e){var t=e.onSelection,n=Object(a.useState)(!1),c=Object(u.a)(n,2),r=c[0],i=c[1],o=Object(a.useState)("file-upload-".concat(Math.random().toString())),s=Object(u.a)(o,1)[0],d=f();function j(e){if(e&&e.type.match("image.*"))try{if(e.size>20971520)throw new Error("file too large");t(e)}catch(n){alert("error: ".concat(n.message))}}function b(e){return O.apply(this,arguments)}function O(){return(O=Object(h.a)(l.a.mark((function e(t){return l.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.abrupt("return",new Promise((function(e){t.file((function(t){return e(t)}))})));case 1:case"end":return e.stop()}}),e)})))).apply(this,arguments)}function g(e){return m.apply(this,arguments)}function m(){return(m=Object(h.a)(l.a.mark((function e(t){var n,a,c,r,i;return l.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:for(n=[],a=[],c=0;c<t.length;c+=1)a.push(t[c].webkitGetAsEntry());case 3:if(!(a.length>0)){e.next=23;break}if(!(null===(r=a.shift())||void 0===r?void 0:r.isFile)){e.next=12;break}return e.next=8,b(r);case 8:i=e.sent,n.push(i),e.next=21;break;case 12:if(!(null===r||void 0===r?void 0:r.isDirectory)){e.next=21;break}return e.t0=a.push,e.t1=a,e.t2=v.a,e.next=18,x(r.createReader());case 18:e.t3=e.sent,e.t4=(0,e.t2)(e.t3),e.t0.apply.call(e.t0,e.t1,e.t4);case 21:e.next=3;break;case 23:return e.abrupt("return",n);case 24:case"end":return e.stop()}}),e)})))).apply(this,arguments)}function x(e){return w.apply(this,arguments)}function w(){return(w=Object(h.a)(l.a.mark((function e(t){var n,a;return l.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return n=[],e.next=3,k(t);case 3:a=e.sent;case 4:if(!(a.length>0)){e.next=11;break}return n.push.apply(n,Object(v.a)(a)),e.next=8,k(t);case 8:a=e.sent,e.next=4;break;case 11:return e.abrupt("return",n);case 12:case"end":return e.stop()}}),e)})))).apply(this,arguments)}function k(e){return y.apply(this,arguments)}function y(){return(y=Object(h.a)(l.a.mark((function e(t){return l.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.abrupt("return",new Promise((function(e,n){t.readEntries(e,n)})));case 1:case"end":return e.stop()}}),e)})))).apply(this,arguments)}function C(){return(C=Object(h.a)(l.a.mark((function e(t){var n;return l.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return t.preventDefault(),e.next=3,g(t.dataTransfer.items);case 3:n=e.sent,i(!1),j(n[0]);case 6:case"end":return e.stop()}}),e)})))).apply(this,arguments)}return Object(p.jsx)("label",{htmlFor:s,className:"file-select-label",children:Object(p.jsxs)("div",{className:["file-select-container",r?"file-select-label-hover":""].join(" "),onDrop:function(e){return C.apply(this,arguments)},onDragOver:function(e){e.stopPropagation(),e.preventDefault(),i(!0)},onDragLeave:function(){return i(!1)},children:[Object(p.jsx)("input",{id:s,name:s,type:"file",onChange:function(e){var t,n=null===(t=e.currentTarget.files)||void 0===t?void 0:t[0];n&&j(n)},accept:"image/png, image/jpeg"}),Object(p.jsx)("p",{className:"file-select-message",children:"desktop"===d?"Click here or drag an image file":"Tap here to load your picture"})]})})}var g=function(){var e=Object(o.e)(j);return Object(p.jsxs)("div",{className:"landing-page",children:[Object(p.jsxs)("h1",{children:["Image inpainting powered by \ud83e\udd99",Object(p.jsx)("a",{href:"https://github.com/saic-mdal/lama",children:"LaMa"})]}),Object(p.jsx)("div",{className:"landing-file-selector",children:Object(p.jsx)(O,{onSelection:function(){var t=Object(h.a)(l.a.mark((function t(n){return l.a.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:e(n);case 1:case"end":return t.stop()}}),t)})));return function(e){return t.apply(this,arguments)}}()})})]})},m=Object(o.b)({key:"themeState",default:"dark"}),x=function(){var e=Object(o.c)(m),t=Object(u.a)(e,2),n=t[0],a=t[1];return Object(p.jsx)("button",{type:"button",className:"theme-changer",onClick:function(){a("light"===n?"dark":"light")},"aria-label":"Switch Theme"})},w=n(9),k=n(17),y=n(27),C=n(29),S=n(18);function z(e){for(var t=e.split(",")[0].split(":")[1].split(";")[0],n=atob(e.split(",")[1]),a=[],c=0;c<n.length;c+=1)a.push(n.charCodeAt(c));return new Blob([new Uint8Array(a)],{type:t})}function M(e,t){return new Promise((function(n,a){var c=e.src,r=e;r.onload=n,r.onerror=function(e){r.src=c,a(e)},r.src=t}))}var E="".concat("","/inpaint");function N(e,t,n){return D.apply(this,arguments)}function D(){return D=Object(h.a)(l.a.mark((function e(t,n,a){var c,r,i;return l.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return(c=new FormData).append("image",t),r=z(n),c.append("mask",r),void 0===a?c.append("sizeLimit","1080"):c.append("sizeLimit",a),e.next=7,fetch(E,{method:"POST",body:c}).then(function(){var e=Object(h.a)(l.a.mark((function e(t){return l.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.abrupt("return",t.blob());case 1:case"end":return e.stop()}}),e)})));return function(t){return e.apply(this,arguments)}}());case 7:return i=e.sent,e.abrupt("return",URL.createObjectURL(i));case 9:case"end":return e.stop()}}),e)}))),D.apply(this,arguments)}function L(e){var t=e.children,n=e.className,a=e.disabled,c=e.icon,r=e.onKeyDown,i=e.onClick,o=e.onDown,s=e.onUp;return Object(p.jsxs)("div",{role:"button",onKeyDown:r,onClick:function(e){e.currentTarget.blur(),null===i||void 0===i||i()},onPointerDown:function(e){null===o||void 0===o||o(e.nativeEvent)},onPointerUp:function(e){null===s||void 0===s||s(e.nativeEvent)},tabIndex:-1,className:["btn-primary",t?"btn-primary-content":"",a?"btn-primary-disabled":"",n].join(" "),children:[c,t?Object(p.jsx)("span",{children:t}):null]})}function H(e){var t=e.value,n=e.onChange,a=e.label,c=e.min,r=e.max,i=((r||100)-(c||0))/100;return Object(p.jsxs)("div",{className:"editor-brush-slider",children:[Object(p.jsx)("span",{children:a}),Object(p.jsx)("input",{type:"range",step:i,min:c,max:r,value:t,onChange:function(e){e.preventDefault(),e.stopPropagation(),n(parseInt(e.currentTarget.value,10))}})]})}var A=["720","1080","2000","Original"];function T(e){var t=e.value,n=e.originalHeight,c=e.originalWidth,r=e.onChange,i=(Object(a.useRef)(),function(e){if("Original"===e)return"".concat(c,"x").concat(n);var t=parseInt(e,10)/(c>n?c:n);if(c>n){var a=Math.ceil(t*n);return"".concat(e,"x").concat(a)}var r=Math.ceil(t*c);return"".concat(r,"x").concat(e)}),o=Object(a.useCallback)((function(){for(var e=c>n?c:n,t=[],a=0;a<A.length;a+=1){var r=A[a];("Original"===r||parseInt(r,10)<=e)&&t.push(r)}return t}),[n,c]),s=Object(a.useCallback)((function(){return-1===o().indexOf(t)?o()[0]:t}),[t,o]);return Object(p.jsxs)("div",{className:"editor-size-selector",children:[Object(p.jsx)("p",{children:"Size:"}),Object(p.jsx)("select",{value:s(),onChange:function(e){r(e.target.value),e.target.blur()},children:o().map((function(e){return Object(p.jsx)("option",{value:e,children:i(e)},e)}))})]})}var I="rgba(189, 255, 1, 0.75)";function P(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:I;e.strokeStyle=n,e.lineCap="round",e.lineJoin="round",t.forEach((function(t){(null===t||void 0===t?void 0:t.pts.length)&&t.size&&(e.lineWidth=t.size,e.beginPath(),e.moveTo(t.pts[0].x,t.pts[0].y),t.pts.forEach((function(t){return e.lineTo(t.x,t.y)})),e.stroke())}))}function Z(e){var t=e.file,n=Object(a.useState)(40),c=Object(u.a)(n,2),r=c[0],i=c[1],o=function(e){var t=Object(a.useState)(new Image),n=Object(u.a)(t,1)[0],c=Object(a.useState)(!1),r=Object(u.a)(c,2),i=r[0],o=r[1];return Object(a.useEffect)((function(){return n.onload=function(){o(!0)},o(!1),n.src=URL.createObjectURL(e),function(){n.onload=null}}),[e,n]),[n,i]}(t),s=Object(u.a)(o,2),j=s[0],b=s[1],f=Object(a.useState)([]),O=Object(u.a)(f,2),g=O[0],m=O[1],x=Object(a.useState)(),z=Object(u.a)(x,2),E=z[0],D=z[1],A=Object(a.useState)((function(){return document.createElement("canvas")})),I=Object(u.a)(A,1)[0],Z=Object(a.useState)([{pts:[]}]),R=Object(u.a)(Z,2),W=R[0],U=R[1],V=Object(a.useState)([{pts:[]}]),B=Object(u.a)(V,2),F=B[0],K=B[1],Y=Object(a.useState)([]),J=Object(u.a)(Y,2),X=J[0],G=J[1],$=Object(a.useState)({x:-1,y:-1}),_=Object(u.a)($,2),Q=_[0],q=Q.x,ee=Q.y,te=_[1],ne=Object(a.useState)(!1),ae=Object(u.a)(ne,2),ce=ae[0],re=ae[1],ie=Object(a.useState)(!1),oe=Object(u.a)(ie,2),se=oe[0],le=oe[1],ue=Object(a.useState)(!1),he=Object(u.a)(ue,2),de=he[0],je=he[1],be=Object(a.useState)(!1),ve=Object(u.a)(be,2),fe=ve[0],pe=ve[1],Oe=Object(a.useState)(1),ge=Object(u.a)(Oe,2),me=ge[0],xe=ge[1],we=Object(a.useState)(),ke=Object(u.a)(we,2),ye=ke[0],Ce=ke[1],Se=Object(y.a)("sizeLimit","1080"),ze=Object(u.a)(Se,2),Me=ze[0],Ee=ze[1],Ne=Object(C.a)(),De=Object(a.useRef)(),Le=Object(a.useState)(!1),He=Object(u.a)(Le,2),Ae=He[0],Te=He[1],Ie=Object(a.useState)(!1),Pe=Object(u.a)(Ie,2),Ze=Pe[0],Re=Pe[1],We=Object(a.useCallback)((function(){if(E){E.clearRect(0,0,E.canvas.width,E.canvas.height);var e=g[g.length-1];(null===e||void 0===e?void 0:e.src)?E.drawImage(e,0,0,j.naturalWidth,j.naturalHeight):E.drawImage(j,0,0),P(E,F)}}),[E,F,j,g]),Ue=Object(a.useCallback)((function(){if(!(null===E||void 0===E?void 0:E.canvas.width)||!(null===E||void 0===E?void 0:E.canvas.height))throw new Error("canvas has invalid size");I.width=null===E||void 0===E?void 0:E.canvas.width,I.height=null===E||void 0===E?void 0:E.canvas.height;var e=I.getContext("2d");if(!e)throw new Error("could not retrieve mask canvas");P(e,W,"white")}),[null===E||void 0===E?void 0:E.canvas.height,null===E||void 0===E?void 0:E.canvas.width,W,I]),Ve=Object(a.useCallback)(Object(h.a)(l.a.mark((function e(){var n,a;return l.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return pe(!0),Ue(),e.prev=2,e.next=5,N(t,I.toDataURL(),Me);case 5:if(n=e.sent){e.next=8;break}throw new Error("empty response");case 8:return a=new Image,e.next=11,M(a,n);case 11:g.push(a),W.push({pts:[]}),m(Object(v.a)(g)),U(Object(v.a)(W)),X.push(F.length),G(X),F.length=0,K([{pts:[]}]),e.next=24;break;case 21:e.prev=21,e.t0=e.catch(2),alert(e.t0.message?e.t0.message:e.t0.toString());case 24:pe(!1),We();case 26:case"end":return e.stop()}}),e,null,[[2,21]])}))),[We,t,W,F,I,Ue,g,Me,X]),Be=function(){return 0!==F.length&&0!==F[0].pts.length},Fe=function(){return 0!==g.length},Ke=function(){Te(!1),F.length=0,K([{pts:[]}])},Ye=function(e){return"Control"===e.key||"Meta"===e.key};Object(S.a)(Ye,(function(){Ze&&(fe||(Re(!1),Be()&&Ve()))}),{event:"keyup"},[fe,Ze,Be]),Object(S.a)(Ye,(function(){fe||Re(!0)}),{event:"keydown"},[fe]),Object(a.useEffect)((function(){if(j&&b){var e=Ne.width/j.naturalWidth,t=(Ne.height-200)/j.naturalHeight;if(e<1||t<1){var n=Math.min(e,t);Ce(n),xe(n)}else Ce(1);(null===E||void 0===E?void 0:E.canvas)&&(E.canvas.width=j.naturalWidth,E.canvas.height=j.naturalHeight),We()}}),[null===E||void 0===E?void 0:E.canvas,We,j,b,Ne]);var Je=Object(a.useCallback)((function(){if(ye&&j&&Ne){var e=De.current;if(!e)throw new Error("no viewport");var t=(Ne.width-j.width*ye)/2,n=(Ne.height-j.height*ye)/2;e.setTransform(t,n,ye,200,"easeOutQuad"),e.state.scale=ye,xe(ye)}}),[De,ye,j,Ne]);Object(S.a)("Escape",(function(){fe||(Ae||Ze?Ke():Je())}),{event:"keydown"},[Ae,fe,Ze,Je,Ke]);var Xe=function(e,t){F[F.length-1].pts.push({x:e,y:t}),W[W.length-1].pts.push({x:e,y:t}),We()},Ge=function(){if(g.length&&X.length){for(var e=W,t=X[X.length-1],n=0;n<=t;n+=1)e.pop();U([].concat(Object(v.a)(e),[{pts:[]}])),X.pop(),G(X);var a=g;a.pop(),m(Object(v.a)(a))}};Object(S.a)((function(e){var t=(e.metaKey||e.ctrlKey)&&"z"===e.key;return"Tab"===e.key&&e.preventDefault(),!!t&&(e.preventDefault(),!0)}),Ge),Object(d.a)("Tab",(function(e){null===e||void 0===e||e.preventDefault(),null===e||void 0===e||e.stopPropagation(),Fe()&&je(!0)}),(function(e){null===e||void 0===e||e.preventDefault(),null===e||void 0===e||e.stopPropagation(),Fe()&&je(!1)}));var $e=function(e){e===ce||se||re(e)},_e=Object(a.useCallback)((function(){return se?"grab":ce?"none":void 0}),[ce,se]);Object(d.a)("[",(function(){i((function(e){return e>10?e-10:e<=10&&e>0?e-5:e}))})),Object(d.a)("]",(function(){i((function(e){return e+10}))})),Object(d.a)(" ",(function(e){null===e||void 0===e||e.preventDefault(),null===e||void 0===e||e.stopPropagation(),re(!1),le(!0)}),(function(e){null===e||void 0===e||e.preventDefault(),null===e||void 0===e||e.stopPropagation(),re(!0),le(!1)}));return j&&me&&ye?Object(p.jsxs)("div",{className:"editor-container","aria-hidden":"true",onMouseMove:function(e){var t=e.nativeEvent;te({x:t.pageX,y:t.pageY})},onMouseUp:function(){if(!se&&(j.src&&(null===E||void 0===E?void 0:E.canvas)&&!fe&&Ae)){if(Te(!1),Ze)return W.push({pts:[]}),U(Object(v.a)(W)),F.push({pts:[]}),void K(Object(v.a)(F));0!==F.length&&0!==F[0].pts.length&&Ve()}},children:[Object(p.jsx)(k.b,{ref:function(e){e&&(De.current=e)},panning:{disabled:!se,velocityDisabled:!0},wheel:{step:.05},centerZoomedOut:!0,alignmentAnimation:{disabled:!0},centerOnInit:!0,limitToBounds:!1,doubleClick:{disabled:!0},initialScale:ye,minScale:ye,onZoom:function(e){xe(e.state.scale)},children:Object(p.jsx)(k.a,{contentClass:fe?"editor-canvas-loading":"",children:Object(p.jsxs)("div",{className:"editor-canvas-container",children:[Object(p.jsx)("canvas",{className:"editor-canvas",style:{cursor:_e()},onContextMenu:function(e){e.preventDefault()},onMouseOver:function(){return $e(!0)},onFocus:function(){return $e(!0)},onMouseLeave:function(){return $e(!1)},onMouseDown:function(e){if(!se&&(j.src&&(null===E||void 0===E?void 0:E.canvas)&&!fe)){Te(!0),F[F.length-1].size=r,W[W.length-1].size=r;var t=e.nativeEvent;Xe(t.offsetX,t.offsetY)}},onMouseMove:function(e){if(!se&&Ae){var t=e.nativeEvent,n=t.offsetX,a=t.offsetY;Xe(n,a)}},ref:function(e){if(e&&!E){var t=e.getContext("2d");t&&D(t)}}}),de?Object(p.jsx)("div",{className:"original-image-container",style:{width:"".concat(j.naturalWidth,"px"),height:"".concat(j.naturalHeight,"px")},children:Object(p.jsx)("img",{className:"original-image",src:j.src,alt:"original",style:{width:"".concat(j.naturalWidth,"px"),height:"".concat(j.naturalHeight,"px")}})}):null]})})}),ce&&!fe&&!se&&Object(p.jsx)("div",{className:"brush-shape",style:function(){var e=function(){var e,t,n=ye;return void 0!==(null===(e=De.current)||void 0===e?void 0:e.state.scale)&&(n=null===(t=De.current)||void 0===t?void 0:t.state.scale),n}();return{width:"".concat(r*e,"px"),height:"".concat(r*e,"px"),left:"".concat(q,"px"),top:"".concat(ee,"px"),transform:"translate(-50%, -50%)"}}()}),Object(p.jsxs)("div",{className:"editor-toolkit-panel",children:[Object(p.jsx)("p",{className:"image-type-tag",children:de?"Original":"Inpainted"}),Object(p.jsx)(T,{value:Me||"1080",onChange:function(e){Ee(e)},originalWidth:j.naturalWidth,originalHeight:j.naturalHeight}),Object(p.jsx)(H,{label:"Brush",min:10,max:150,value:r,onChange:i}),Object(p.jsxs)("div",{className:"editor-toolkit-btns",children:[Object(p.jsx)(L,{icon:Object(p.jsx)(w.b,{}),disabled:me===ye,onClick:Je}),Object(p.jsx)(L,{icon:Object(p.jsx)("svg",{width:"19",height:"9",viewBox:"0 0 19 9",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:Object(p.jsx)("path",{d:"M2 1C2 0.447715 1.55228 0 1 0C0.447715 0 0 0.447715 0 1H2ZM1 8H0V9H1V8ZM8 9C8.55228 9 9 8.55229 9 8C9 7.44771 8.55228 7 8 7V9ZM16.5963 7.42809C16.8327 7.92721 17.429 8.14016 17.9281 7.90374C18.4272 7.66731 18.6402 7.07103 18.4037 6.57191L16.5963 7.42809ZM16.9468 5.83205L17.8505 5.40396L16.9468 5.83205ZM0 1V8H2V1H0ZM1 9H8V7H1V9ZM1.66896 8.74329L6.66896 4.24329L5.33104 2.75671L0.331035 7.25671L1.66896 8.74329ZM16.043 6.26014L16.5963 7.42809L18.4037 6.57191L17.8505 5.40396L16.043 6.26014ZM6.65079 4.25926C9.67554 1.66661 14.3376 2.65979 16.043 6.26014L17.8505 5.40396C15.5805 0.61182 9.37523 -0.710131 5.34921 2.74074L6.65079 4.25926Z",fill:"currentColor"})}),onClick:Ge,disabled:0===g.length}),Object(p.jsx)(L,{icon:Object(p.jsx)(w.d,{}),onDown:function(e){e.preventDefault(),je(!0)},onUp:function(){je(!1)},disabled:0===g.length,children:void 0}),Object(p.jsx)(L,{icon:Object(p.jsx)(w.c,{}),disabled:!g.length,onClick:function(){var e=t.name.replace(/(\.[\w\d_-]+)$/i,"_cleanup$1");!function(e,t){var n=document.createElement("a");n.href=e,n.download=t,n.dispatchEvent(new MouseEvent("click",{bubbles:!0,cancelable:!0,view:window})),setTimeout((function(){n.remove()}),100)}(g[g.length-1].currentSrc,e)},children:void 0})]})]})]}):Object(p.jsx)(p.Fragment,{})}var R=function(){var e=Object(o.c)(b),t=Object(u.a)(e,2),n=t[0],a=t[1],c=function(){a((function(e){return!e}))};return Object(d.a)("h",(function(){c()})),Object(p.jsx)("div",{className:"shortcuts",children:Object(p.jsx)(L,{onClick:c,disabled:n,icon:Object(p.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",role:"img",width:"28",height:"28",preserveAspectRatio:"xMidYMid meet",viewBox:"0 0 16 16",children:[Object(p.jsx)("rect",{x:"0",y:"0",width:"16",height:"16",fill:"none",stroke:"none"}),Object(p.jsxs)("g",{fill:"currentColor",children:[Object(p.jsx)("path",{d:"M14 5a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h12zM2 4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H2z"}),Object(p.jsx)("path",{d:"M13 10.25a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25v-.5zm0-2a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25v-.5zm-5 0A.25.25 0 0 1 8.25 8h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 8 8.75v-.5zm2 0a.25.25 0 0 1 .25-.25h1.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-1.5a.25.25 0 0 1-.25-.25v-.5zm1 2a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25v-.5zm-5-2A.25.25 0 0 1 6.25 8h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 6 8.75v-.5zm-2 0A.25.25 0 0 1 4.25 8h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 4 8.75v-.5zm-2 0A.25.25 0 0 1 2.25 8h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 2 8.75v-.5zm11-2a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25v-.5zm-2 0a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25v-.5zm-2 0A.25.25 0 0 1 9.25 6h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 9 6.75v-.5zm-2 0A.25.25 0 0 1 7.25 6h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 7 6.75v-.5zm-2 0A.25.25 0 0 1 5.25 6h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 5 6.75v-.5zm-3 0A.25.25 0 0 1 2.25 6h1.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-1.5A.25.25 0 0 1 2 6.75v-.5zm0 4a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25v-.5zm2 0a.25.25 0 0 1 .25-.25h5.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-5.5a.25.25 0 0 1-.25-.25v-.5z"})]})]})})})},W=function(){var e=Object(o.e)(j),t=f();return Object(p.jsxs)("header",{children:[Object(p.jsx)(L,{icon:Object(p.jsx)(w.a,{className:"w-6 h-6"}),onClick:function(){e(void 0)},children:"desktop"===t?"Start New":void 0}),Object(p.jsx)(R,{})]})},U=n(28);function V(e){var t=e.children,n=e.onClose,c=e.className,r=e.title,i=Object(a.useRef)(null);return Object(U.a)(i,(function(){null===n||void 0===n||n()})),Object(S.a)("Escape",n,{event:"keydown"}),Object(p.jsxs)("div",{ref:i,className:"modal ".concat(c),children:[Object(p.jsxs)("div",{className:"modal-header",children:[Object(p.jsx)("h3",{children:r}),Object(p.jsx)(L,{icon:Object(p.jsx)(w.e,{}),onClick:n})]}),t]})}function B(e){var t=e.children,n=e.content;return Object(p.jsxs)("div",{className:"shortcut-option",children:[Object(p.jsx)("div",{className:"shortcut-key",children:t}),Object(p.jsx)("div",{className:"shortcut-description",children:n})]})}function F(){var e=Object(o.e)(b);return Object(p.jsx)(V,{onClose:function(){e((function(e){return!e}))},title:"Hotkeys",className:"modal-shortcuts",children:Object(p.jsxs)("div",{className:"shortcut-options",children:[Object(p.jsx)(B,{content:"Enable multi-stroke mask drawing",children:Object(p.jsx)("p",{children:"Hold Cmd/Ctrl"})}),Object(p.jsx)(B,{content:"Undo inpainting",children:Object(p.jsx)("p",{children:"Cmd/Ctrl + Z"})}),Object(p.jsx)(B,{content:"Pan",children:Object(p.jsx)("p",{children:"Space & Drag"})}),Object(p.jsx)(B,{content:"View original image",children:Object(p.jsx)("p",{children:"Hold Tab"})}),Object(p.jsx)(B,{content:"Reset zoom/pan & Cancel mask drawing",children:Object(p.jsx)("p",{children:"Esc"})}),Object(p.jsx)(B,{content:"Decrease Brush Size",children:Object(p.jsx)("p",{children:"["})}),Object(p.jsx)(B,{content:"Increase Brush Size",children:Object(p.jsx)("p",{children:"]"})}),Object(p.jsx)(B,{content:"Toggle Dark Mode",children:Object(p.jsx)("p",{children:"Shift + D"})}),Object(p.jsx)(B,{content:"Toggle Hotkeys Panel",children:Object(p.jsx)("p",{children:"H"})})]})})}var K=function(e){var t=e.file,n=Object(o.d)(b);return Object(p.jsxs)(p.Fragment,{children:[Object(p.jsx)(W,{}),Object(p.jsx)(Z,{file:t}),n?Object(p.jsx)(F,{}):null]})};function Y(){return Y=Object(h.a)(l.a.mark((function e(){var t,n,a=arguments;return l.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return t=a.length>0&&void 0!==a[0]?a[0]:"",e.next=3,fetch(t,{method:"GET",cache:"no-cache"});case 3:return n=e.sent,e.abrupt("return",n.json());case 5:case"end":return e.stop()}}),e)}))),Y.apply(this,arguments)}document.addEventListener("DOMContentLoaded",(function(){var e=document.location;setInterval((function(){(function(){return Y.apply(this,arguments)})(e+"/flaskwebgui-keep-server-alive").then((function(e){return console.log(e)}))}),3e3)}));var J=function(){var e=Object(o.c)(j),t=Object(u.a)(e,2),n=t[0],c=t[1],r=Object(o.c)(m),i=Object(u.a)(r,2),s=i[0],l=i[1],h=function(){var e=Object(a.useState)(),t=Object(u.a)(e,2),n=t[0],c=t[1],r=Object(a.useCallback)((function(){var e=new Headers;e.append("pragma","no-cache"),e.append("cache-control","no-cache"),fetch("/inputimage",{headers:e}).then((function(e){return e.blob()})).then((function(e){if(e&&e.type.startsWith("image")){var t=new File([e],"inputImage");c(t)}}))}),[c]);return Object(a.useEffect)((function(){r()}),[r]),n}();return Object(a.useEffect)((function(){c(h)}),[h,c]),Object(d.a)("D",(function(){l("light"===s?"dark":"light")})),Object(p.jsxs)("div",{className:"lama-cleaner","data-theme":s,children:[Object(p.jsx)(x,{}),n?Object(p.jsx)(K,{file:n}):Object(p.jsx)(g,{})]})};i.a.render(Object(p.jsx)(c.a.StrictMode,{children:Object(p.jsx)(o.a,{children:Object(p.jsx)(J,{})})}),document.getElementById("root"))}},[[26,1,2]]]); |