2 lines
16 KiB
JavaScript
2 lines
16 KiB
JavaScript
(this["webpackJsonplama-cleaner"]=this["webpackJsonplama-cleaner"]||[]).push([[0],{16:function(e,t,n){},19:function(e,t,n){"use strict";n.r(t);var a=n(0),r=n(10),i=n.n(r),c=(n(16),n(3)),o=n.n(c),s=n(4),u=n(2),l=n(7),d=n(20),h=n(1);function p(e){var t=e.children,n=e.className,r=e.disabled,i=e.icon,c=e.primary,o=e.onClick,s=e.onDown,l=e.onUp,d=Object(a.useState)(!1),p=Object(u.a)(d,2),f=p[0],v=p[1],m="";return c&&!r&&(m="bg-primary hover:bg-black hover:text-white"),f&&(m="bg-black text-white"),c||f||(m="hover:bg-primary"),Object(h.jsxs)("div",{role:"button",onKeyDown:o,onClick:o,onPointerDown:function(e){v(!0),null===s||void 0===s||s(e.nativeEvent)},onPointerUp:function(e){v(!1),null===l||void 0===l||l(e.nativeEvent)},tabIndex:-1,className:["inline-flex py-3 px-5 rounded-md cursor-pointer",t?"space-x-3":"",m,r?"pointer-events-none opacity-50":"",n].join(" "),children:[i,Object(h.jsx)("span",{className:"whitespace-nowrap select-none",children:t})]})}var f=n(5);function v(e){var t=e.onSelection,n=Object(a.useState)(!1),r=Object(u.a)(n,2),i=r[0],c=r[1],l=Object(a.useState)("file-upload-".concat(Math.random().toString())),d=Object(u.a)(l,1)[0];function p(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 v(e){return m.apply(this,arguments)}function m(){return(m=Object(s.a)(o.a.mark((function e(t){return o.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 b(e){return j.apply(this,arguments)}function j(){return(j=Object(s.a)(o.a.mark((function e(t){var n,a,r,i,c;return o.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:for(n=[],a=[],r=0;r<t.length;r+=1)a.push(t[r].webkitGetAsEntry());case 3:if(!(a.length>0)){e.next=23;break}if(!(null===(i=a.shift())||void 0===i?void 0:i.isFile)){e.next=12;break}return e.next=8,v(i);case 8:c=e.sent,n.push(c),e.next=21;break;case 12:if(!(null===i||void 0===i?void 0:i.isDirectory)){e.next=21;break}return e.t0=a.push,e.t1=a,e.t2=f.a,e.next=18,x(i.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(s.a)(o.a.mark((function e(t){var n,a;return o.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return n=[],e.next=3,g(t);case 3:a=e.sent;case 4:if(!(a.length>0)){e.next=11;break}return n.push.apply(n,Object(f.a)(a)),e.next=8,g(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 g(e){return O.apply(this,arguments)}function O(){return(O=Object(s.a)(o.a.mark((function e(t){return o.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 y(){return(y=Object(s.a)(o.a.mark((function e(t){var n;return o.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return t.preventDefault(),e.next=3,b(t.dataTransfer.items);case 3:n=e.sent,c(!1),p(n[0]);case 6:case"end":return e.stop()}}),e)})))).apply(this,arguments)}return Object(h.jsx)("label",{htmlFor:d,className:"block w-full h-full group relative cursor-pointer rounded-md font-medium focus-within:outline-none",children:Object(h.jsxs)("div",{className:["w-full h-full flex items-center justify-center px-6 pt-5 pb-6 text-md","border-2 border-dashed rounded-md","hover:border-black hover:bg-primary","text-center",i?"border-black bg-primary":"bg-gray-100 border-gray-300"].join(" "),onDrop:function(e){return y.apply(this,arguments)},onDragOver:function(e){e.stopPropagation(),e.preventDefault(),c(!0)},onDragLeave:function(){return c(!1)},children:[Object(h.jsx)("input",{id:d,name:d,type:"file",className:"sr-only",onChange:function(e){var t,n=null===(t=e.currentTarget.files)||void 0===t?void 0:t[0];n&&p(n)},accept:"image/png, image/jpeg"}),Object(h.jsx)("p",{className:"hidden sm:block",children:"Click here or drag an image file"}),Object(h.jsx)("p",{className:"sm:hidden",children:"Tap here to load your picture"})]})})}function m(e){for(var t=e.split(",")[0].split(":")[1].split(";")[0],n=atob(e.split(",")[1]),a=[],r=0;r<n.length;r+=1)a.push(n.charCodeAt(r));return new Blob([new Uint8Array(a)],{type:t})}function b(e,t){return new Promise((function(n,a){var r=e.src,i=e;i.onload=n,i.onerror=function(e){i.src=r,a(e)},i.src=t}))}function j(e,t){var n=new FileReader,a=new Image,r=document.createElement("canvas");return new Promise((function(i,c){e.type.match(/image.*/)?(n.onload=function(n){a.onload=function(){return i(function(){var n,i=a.width,c=a.height;if(i>c?i>t&&(c*=t/i,i=t):c>t&&(i*=t/c,c=t),i===a.width&&c===a.height)return{file:e,resized:!1};if(r.width=i,r.height=c,!r.getContext("2d"))throw new Error("could not get context");null===(n=r.getContext("2d"))||void 0===n||n.drawImage(a,0,0,i,c);var o=m(r.toDataURL("image/jpeg"));return{file:new File([o],e.name,{type:e.type}),resized:!0,originalWidth:a.width,originalHeight:a.height}}())},a.src=n.target.result},n.readAsDataURL(e)):c(new Error("Not an image"))}))}var x="".concat("","/inpaint");function w(e,t){return g.apply(this,arguments)}function g(){return g=Object(s.a)(o.a.mark((function e(t,n){var a,r,i;return o.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return(a=new FormData).append("image",t),r=m(n),a.append("mask",r),e.next=6,fetch(x,{method:"POST",body:a}).then(function(){var e=Object(s.a)(o.a.mark((function e(t){return o.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 6:return i=e.sent,e.abrupt("return",URL.createObjectURL(i));case 8:case"end":return e.stop()}}),e)}))),g.apply(this,arguments)}function O(e){var t=e.value,n=e.onChange,a=e.label,r=e.min,i=e.max,c=((i||100)-(r||0))/100;return Object(h.jsxs)("div",{className:"inline-flex items-center space-x-4 text-black",children:[Object(h.jsx)("span",{children:a}),Object(h.jsx)("input",{className:["appearance-none rounded-lg h-4","bg-primary","w-24 md:w-auto"].join(" "),type:"range",step:c,min:r,max:i,value:t,onChange:function(e){e.preventDefault(),e.stopPropagation(),n(parseInt(e.currentTarget.value,10))}})]})}var y="rgba(189, 255, 1, 0.75)";function k(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:y;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 E(e){var t=e.file,n=Object(a.useState)(40),r=Object(u.a)(n,2),i=r[0],c=r[1],v=function(e){var t=Object(a.useState)(new Image),n=Object(u.a)(t,1)[0],r=Object(a.useState)(!1),i=Object(u.a)(r,2),c=i[0],o=i[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,c]}(t),m=Object(u.a)(v,2),j=m[0],x=m[1],g=Object(a.useState)([]),y=Object(u.a)(g,2),E=y[0],L=y[1],C=Object(a.useState)(),N=Object(u.a)(C,2),S=N[0],D=N[1],H=Object(a.useState)((function(){return document.createElement("canvas")})),M=Object(u.a)(H,1)[0],z=Object(a.useState)([{pts:[]}]),R=Object(u.a)(z,2),P=R[0],U=R[1],W=Object(a.useState)({x:-1,y:-1}),F=Object(u.a)(W,2),I=F[0],T=I.x,Z=I.y,V=F[1],B=Object(a.useState)(!1),X=Object(u.a)(B,2),Y=X[0],A=X[1],J=Object(a.useState)(!1),K=Object(u.a)(J,2),$=K[0],_=K[1],G=Object(a.useState)(!1),q=Object(u.a)(G,2),Q=q[0],ee=q[1],te=Object(a.useState)(!1),ne=Object(u.a)(te,2),ae=ne[0],re=ne[1],ie=Object(a.useState)(1),ce=Object(u.a)(ie,2),oe=ce[0],se=ce[1],ue=Object(d.a)(),le=Object(a.useCallback)((function(){if(S){S.clearRect(0,0,S.canvas.width,S.canvas.height);var e=E[E.length-1];(null===e||void 0===e?void 0:e.src)?S.drawImage(e,0,0):S.drawImage(j,0,0);var t=P[P.length-1];k(S,[t])}}),[S,P,j,E]),de=Object(a.useCallback)((function(){if(!(null===S||void 0===S?void 0:S.canvas.width)||!(null===S||void 0===S?void 0:S.canvas.height))throw new Error("canvas has invalid size");M.width=null===S||void 0===S?void 0:S.canvas.width,M.height=null===S||void 0===S?void 0:S.canvas.height;var e=M.getContext("2d");if(!e)throw new Error("could not retrieve mask canvas");k(e,P,"white")}),[null===S||void 0===S?void 0:S.canvas.height,null===S||void 0===S?void 0:S.canvas.width,P,M]);Object(a.useEffect)((function(){if((null===S||void 0===S?void 0:S.canvas)&&x){S.canvas.width=j.naturalWidth,S.canvas.height=j.naturalHeight;var e=ue.width/j.naturalWidth,t=(ue.height-200)/j.naturalHeight;se(e<1||t<1?Math.min(e,t):1),le()}}),[null===S||void 0===S?void 0:S.canvas,le,j,x,ue]),Object(a.useEffect)((function(){var e=null===S||void 0===S?void 0:S.canvas;if(e){var n=function(e){V({x:e.pageX,y:e.pageY})},a=function(e,t){P[P.length-1].pts.push({x:e,y:t}),le()},r=function(e){var t=e.offsetX,n=e.offsetY;a(t,n)},c=function(){var n=Object(s.a)(o.a.mark((function n(){var a,i;return o.a.wrap((function(n){for(;;)switch(n.prev=n.next){case 0:if(j.src){n.next=2;break}return n.abrupt("return");case 2:return ee(!0),e.removeEventListener("mousemove",r),window.removeEventListener("mouseup",c),de(),n.prev=6,Date.now(),n.next=10,w(t,M.toDataURL());case 10:if(a=n.sent){n.next=13;break}throw new Error("empty response");case 13:return i=new Image,n.next=16,b(i,a);case 16:E.push(i),P.push({pts:[]}),L(Object(f.a)(E)),U(Object(f.a)(P)),n.next=25;break;case 22:n.prev=22,n.t0=n.catch(6),alert(n.t0.message?n.t0.message:n.t0.toString());case 25:ee(!1),le();case 27:case"end":return n.stop()}}),n,null,[[6,22]])})));return function(){return n.apply(this,arguments)}}();window.addEventListener("mousemove",n);var u=function(t){t.preventDefault(),t.stopPropagation();var n=P[P.length-1],a=e.getBoundingClientRect();n.pts.push({x:(t.touches[0].clientX-a.x)/oe,y:(t.touches[0].clientY-a.y)/oe}),le()},l=function(t){if(j.src){P[P.length-1].size=i,e.addEventListener("mousemove",r),window.addEventListener("mouseup",c);var n=e.getBoundingClientRect(),o=(t.touches[0].clientX-n.x)/oe,s=(t.touches[0].clientY-n.y)/oe;a(o,s)}};return e.addEventListener("touchstart",l),e.addEventListener("touchmove",u),e.addEventListener("touchend",c),e.onmouseenter=function(){return A(!0)},e.onmouseleave=function(){return A(!1)},e.onmousedown=function(t){j.src&&(P[P.length-1].size=i,e.addEventListener("mousemove",r),window.addEventListener("mouseup",c),a(t.offsetX,t.offsetY))},function(){e.removeEventListener("mousemove",r),window.removeEventListener("mousemove",n),window.removeEventListener("mouseup",c),e.removeEventListener("touchstart",l),e.removeEventListener("touchmove",u),e.removeEventListener("touchend",c),e.onmouseenter=null,e.onmouseleave=null,e.onmousedown=null}}}),[i,S,t,le,P,de,M,j.src,E,j.naturalHeight,j.naturalWidth,oe]);var he=Object(a.useCallback)((function(){var e=P;e.pop(),e.pop(),U([].concat(Object(f.a)(e),[{pts:[]}]));var t=E;t.pop(),L(Object(f.a)(t))}),[P,E]);return Object(a.useEffect)((function(){var e=function(e){E.length&&((e.metaKey||e.ctrlKey)&&"z"===e.key&&(e.preventDefault(),he()))};return window.addEventListener("keydown",e),function(){window.removeEventListener("keydown",e)}}),[E,he]),Object(h.jsxs)("div",{className:["flex flex-col items-center",Q?"animate-pulse-fast pointer-events-none transition-opacity":"",1!==oe?"pb-24":""].join(" "),style:{height:1!==oe?j.naturalHeight*oe:void 0},children:[Object(h.jsxs)("div",{className:[1!==oe?"":"relative"].join(" "),style:{transform:"scale(".concat(oe,")"),transformOrigin:"top center"},children:[Object(h.jsx)("canvas",{className:"rounded-sm",style:Y?{cursor:"none"}:{},ref:function(e){if(e&&!S){var t=e.getContext("2d");t&&D(t)}}}),Object(h.jsx)("div",{className:["absolute top-0 right-0 pointer-events-none","overflow-hidden","border-primary",ae?"border-l-4":""].join(" "),style:{width:$?"".concat(Math.round(j.naturalWidth),"px"):"0px",height:j.naturalHeight,transitionProperty:"width, height",transitionTimingFunction:"cubic-bezier(0.4, 0, 0.2, 1)",transitionDuration:"300ms"},children:Object(h.jsx)("img",{className:"absolute right-0",src:j.src,alt:"original",width:"".concat(j.naturalWidth,"px"),height:"".concat(j.naturalHeight,"px"),style:{width:"".concat(j.naturalWidth,"px"),height:"".concat(j.naturalHeight,"px"),maxWidth:"none"}})})]}),Y&&Object(h.jsx)("div",{className:"hidden sm:block absolute rounded-full border border-primary bg-primary bg-opacity-80 pointer-events-none",style:{width:"".concat(i*oe,"px"),height:"".concat(i*oe,"px"),left:"".concat(T,"px"),top:"".concat(Z,"px"),transform:"translate(-50%, -50%)"}}),Object(h.jsxs)("div",{className:["flex items-center w-full max-w-3xl","space-x-3 sm:space-x-5","p-6",1!==oe?"absolute bottom-0 justify-evenly":"relative justify-evenly sm:justify-between"].join(" "),children:[Object(h.jsx)(O,{label:Object(h.jsxs)("span",{children:[Object(h.jsx)("span",{className:"hidden md:inline",children:"Brush"})," Size"]}),min:10,max:150,value:i,onChange:c}),E.length?Object(h.jsxs)(h.Fragment,{children:[Object(h.jsx)(p,{icon:Object(h.jsx)("svg",{width:"19",height:"9",viewBox:"0 0 19 9",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"w-6 h-6",children:Object(h.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:he}),Object(h.jsx)(p,{icon:Object(h.jsx)(l.c,{className:"w-6 h-6"}),onDown:function(e){e.preventDefault(),re(!0),_(!0)},onUp:function(){_(!1),setTimeout((function(){return re(!1)}),300)},children:ue.width>640?"Original":void 0})]}):Object(h.jsx)(h.Fragment,{}),Object(h.jsx)(p,{primary:!0,icon:Object(h.jsx)(l.b,{className:"w-6 h-6"}),disabled:!E.length,onClick:function(){var e=null===S||void 0===S?void 0:S.canvas.toDataURL(t.type);if(!e)throw new Error("could not get canvas data");!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)}(e,t.name.replace(/(\.[\w\d_-]+)$/i,"_cleanup$1"))},children:ue.width>640?"Download":void 0})]})]})}var L=function(){var e=Object(a.useState)(),t=Object(u.a)(e,2),n=t[0],r=t[1],i=Object(d.a)();return Object(h.jsxs)("div",{className:"h-full full-visible-h-safari flex flex-col",children:[Object(h.jsx)("header",{className:"relative z-10 flex px-5 pt-3 justify-center sm:justify-between items-center sm:items-start",children:n?Object(h.jsx)(p,{icon:Object(h.jsx)(l.a,{className:"w-6 h-6"}),onClick:function(){r(void 0)},children:i.width>640?"Start new":void 0}):Object(h.jsx)(h.Fragment,{})}),Object(h.jsx)("main",{className:["h-full flex flex-1 flex-col sm:items-center sm:justify-center overflow-hidden","items-center justify-center","pb-20"].join(" "),children:n?Object(h.jsx)(E,{file:n}):Object(h.jsxs)(h.Fragment,{children:[Object(h.jsx)("div",{className:["flex flex-col sm:flex-row items-center","space-y-5 sm:space-y-0 sm:space-x-6 p-5 pt-0 pb-10"].join(" "),children:Object(h.jsx)("div",{className:"max-w-xl flex flex-col items-center sm:items-start p-0 m-0 space-y-5",children:Object(h.jsxs)("h1",{className:"text-center sm:text-left text-xl sm:text-3xl",children:["Image inpainting powered by \ud83e\udd99",Object(h.jsx)("u",{children:Object(h.jsx)("a",{href:"https://github.com/saic-mdal/lama",children:"LaMa"})})]})})}),Object(h.jsx)("div",{className:"h-20 sm:h-52 px-4 w-full",style:{maxWidth:"800px"},children:Object(h.jsx)(v,{onSelection:function(){var e=Object(s.a)(o.a.mark((function e(t){var n,a;return o.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,j(t,1024);case 2:n=e.sent,a=n.file,n.resized,n.originalWidth,n.originalHeight,r(a);case 8:case"end":return e.stop()}}),e)})));return function(t){return e.apply(this,arguments)}}()})})]})})]})};i.a.render(Object(h.jsx)(L,{}),document.getElementById("root"))}},[[19,1,2]]]);
|
|
//# sourceMappingURL=main.56b43b57.chunk.js.map
|