From 481e956c3af4a72bbf92afaac5cac10052d2a644 Mon Sep 17 00:00:00 2001 From: blessedcoolant Date: Fri, 25 Mar 2022 07:31:59 +1300 Subject: [PATCH 1/2] Launch and monitor both Python and JS during development No longer need to restart python each time any change is made. nodemon will handle that now. Using concurrently because I found it to be better performant than run-p. --- lama_cleaner/app/.env | 3 ++- lama_cleaner/app/package.json | 6 +++++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/lama_cleaner/app/.env b/lama_cleaner/app/.env index 3a85ad7..b6f760a 100644 --- a/lama_cleaner/app/.env +++ b/lama_cleaner/app/.env @@ -1 +1,2 @@ -REACT_APP_INPAINTING_URL="" \ No newline at end of file +REACT_APP_INPAINTING_URL="" +FAST_REFRESH=false \ No newline at end of file diff --git a/lama_cleaner/app/package.json b/lama_cleaner/app/package.json index ade8cbe..51b6b5d 100644 --- a/lama_cleaner/app/package.json +++ b/lama_cleaner/app/package.json @@ -29,7 +29,9 @@ "typescript": "4.x" }, "scripts": { - "dev": "run-p watch:css react-scripts:start", + "dev:python": "nodemon --watch ../../* --exec python ../../main.py", + "dev:react": "run-p watch:css react-scripts:start", + "dev": "concurrently \"yarn dev:python\" \"yarn dev:react\"", "build": "run-s build:css react-scripts:build", "test": "react-scripts test", "eject": "react-scripts eject", @@ -55,6 +57,7 @@ }, "devDependencies": { "@typescript-eslint/eslint-plugin": "^5.1.0", + "concurrently": "^7.0.0", "eslint-config-airbnb": "^18.2.1", "eslint-config-prettier": "^8.3.0", "eslint-plugin-import": "^2.25.2", @@ -62,6 +65,7 @@ "eslint-plugin-prettier": "^4.0.0", "eslint-plugin-react": "^7.26.1", "eslint-plugin-react-hooks": "^4.2.0", + "nodemon": "^2.0.15", "prettier": "^2.4.1" } } From d0f025f2d4acbfc41c5347b9cd96ec6b88104f2e Mon Sep 17 00:00:00 2001 From: blessedcoolant Date: Fri, 25 Mar 2022 07:33:13 +1300 Subject: [PATCH 2/2] Add User Input Image Support Users can now supply the --input argument to load their image by default to the application. --- lama_cleaner/app/build/asset-manifest.json | 4 ++-- lama_cleaner/app/build/index.html | 2 +- ...8df200.chunk.js => main.9e3e6c89.chunk.js} | 2 +- lama_cleaner/app/src/App.tsx | 8 ++++++- .../app/src/components/hooks/useInputImage.js | 22 +++++++++++++++++ main.py | 24 ++++++++++++++++++- 6 files changed, 56 insertions(+), 6 deletions(-) rename lama_cleaner/app/build/static/js/{main.288df200.chunk.js => main.9e3e6c89.chunk.js} (71%) create mode 100644 lama_cleaner/app/src/components/hooks/useInputImage.js diff --git a/lama_cleaner/app/build/asset-manifest.json b/lama_cleaner/app/build/asset-manifest.json index 737a5b2..8cbc743 100644 --- a/lama_cleaner/app/build/asset-manifest.json +++ b/lama_cleaner/app/build/asset-manifest.json @@ -1,7 +1,7 @@ { "files": { "main.css": "/static/css/main.0a04cd80.chunk.css", - "main.js": "/static/js/main.288df200.chunk.js", + "main.js": "/static/js/main.9e3e6c89.chunk.js", "runtime-main.js": "/static/js/runtime-main.5e86ac81.js", "static/js/2.d3149f41.chunk.js": "/static/js/2.d3149f41.chunk.js", "index.html": "/index.html", @@ -11,6 +11,6 @@ "static/js/runtime-main.5e86ac81.js", "static/js/2.d3149f41.chunk.js", "static/css/main.0a04cd80.chunk.css", - "static/js/main.288df200.chunk.js" + "static/js/main.9e3e6c89.chunk.js" ] } \ No newline at end of file diff --git a/lama_cleaner/app/build/index.html b/lama_cleaner/app/build/index.html index 269ac89..38f9be1 100644 --- a/lama_cleaner/app/build/index.html +++ b/lama_cleaner/app/build/index.html @@ -1 +1 @@ -lama-cleaner - Image inpainting powered by LaMa
\ No newline at end of file +lama-cleaner - Image inpainting powered by LaMa
\ No newline at end of file diff --git a/lama_cleaner/app/build/static/js/main.288df200.chunk.js b/lama_cleaner/app/build/static/js/main.9e3e6c89.chunk.js similarity index 71% rename from lama_cleaner/app/build/static/js/main.288df200.chunk.js rename to lama_cleaner/app/build/static/js/main.9e3e6c89.chunk.js index a26d294..7b7b579 100644 --- a/lama_cleaner/app/build/static/js/main.288df200.chunk.js +++ b/lama_cleaner/app/build/static/js/main.9e3e6c89.chunk.js @@ -1 +1 @@ -(this["webpackJsonplama-cleaner"]=this["webpackJsonplama-cleaner"]||[]).push([[0],{20:function(e,t,n){},23:function(e,t,n){"use strict";n.r(t);var a=n(0),c=n(14),r=n.n(c),i=(n(20),n(3)),s=n.n(i),o=n(2),l=n(5),u=n(7),h=n(27),d=n(29),b=n(1);function p(e){var t=e.children,n=e.className,c=e.disabled,r=e.icon,i=e.primary,s=e.onKeyDown,l=e.onClick,u=e.onDown,h=e.onUp,d=Object(a.useState)(!1),p=Object(o.a)(d,2),j=p[0],f=p[1],v="";i&&!c&&(v="bg-primary hover:bg-black hover:text-white"),j&&(v="bg-black text-white"),i||j||(v="hover:bg-primary");return Object(b.jsxs)("div",{role:"button",onKeyDown:s,onClick:function(e){e.currentTarget.blur(),null===l||void 0===l||l()},onPointerDown:function(e){f(!0),null===u||void 0===u||u(e.nativeEvent)},onPointerUp:function(e){f(!1),null===h||void 0===h||h(e.nativeEvent)},tabIndex:-1,className:["inline-flex py-3 px-3 rounded-md cursor-pointer",t?"space-x-3":"",v,c?"pointer-events-none opacity-50":"",n].join(" "),children:[r,Object(b.jsx)("span",{className:"whitespace-nowrap select-none",children:t})]})}var j=n(6);function f(e){var t=e.onSelection,n=Object(a.useState)(!1),c=Object(o.a)(n,2),r=c[0],i=c[1],u=Object(a.useState)("file-upload-".concat(Math.random().toString())),h=Object(o.a)(u,1)[0];function d(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 p(e){return f.apply(this,arguments)}function f(){return(f=Object(l.a)(s.a.mark((function e(t){return s.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 v(e){return m.apply(this,arguments)}function m(){return(m=Object(l.a)(s.a.mark((function e(t){var n,a,c,r,i;return s.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:for(n=[],a=[],c=0;c0)){e.next=23;break}if(!(null===(r=a.shift())||void 0===r?void 0:r.isFile)){e.next=12;break}return e.next=8,p(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=j.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 O.apply(this,arguments)}function O(){return(O=Object(l.a)(s.a.mark((function e(t){var n,a;return s.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(j.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 w.apply(this,arguments)}function w(){return(w=Object(l.a)(s.a.mark((function e(t){return s.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(l.a)(s.a.mark((function e(t){var n;return s.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return t.preventDefault(),e.next=3,v(t.dataTransfer.items);case 3:n=e.sent,i(!1),d(n[0]);case 6:case"end":return e.stop()}}),e)})))).apply(this,arguments)}return Object(b.jsx)("label",{htmlFor:h,className:"block w-full h-full group relative cursor-pointer rounded-md font-medium focus-within:outline-none",children:Object(b.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",r?"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(),i(!0)},onDragLeave:function(){return i(!1)},children:[Object(b.jsx)("input",{id:h,name:h,type:"file",className:"sr-only",onChange:function(e){var t,n=null===(t=e.currentTarget.files)||void 0===t?void 0:t[0];n&&d(n)},accept:"image/png, image/jpeg"}),Object(b.jsx)("p",{className:"hidden sm:block",children:"Click here or drag an image file"}),Object(b.jsx)("p",{className:"sm:hidden",children:"Tap here to load your picture"})]})})}var v=n(25),m=n(12);function x(e){var t=e.children,n=e.onClose,c=e.className,r=Object(a.useRef)(null);return Object(v.a)(r,(function(){null===n||void 0===n||n()})),Object(m.a)("Escape",n,{event:"keydown"}),Object(b.jsx)("div",{className:["absolute w-full h-full flex justify-center items-center","z-20","bg-gray-300 bg-opacity-40 backdrop-filter backdrop-blur-md"].join(" "),children:Object(b.jsxs)("div",{ref:r,className:"bg-white max-w-4xl relative rounded-md shadow-md ".concat(c||"p-8 sm:p-12"),children:[Object(b.jsx)(p,{icon:Object(b.jsx)(u.e,{className:"w-6 h-6"}),className:["absolute right-4 top-4 rounded-full bg-gray-100 w-10 h-10","flex justify-center items-center py-0 px-0 sm:px-0"].join(" "),onClick:n}),t]})})}function O(e){var t=e.children,n=e.content;return Object(b.jsxs)("div",{className:"h-full flex flex-row space-x-6 justify-between",children:[Object(b.jsx)("div",{className:"mr-12 border-2 rounded-xl px-2 py-1",children:t}),Object(b.jsx)("div",{className:"flex flex-col justify-center",children:n})]})}function g(e){var t=e.onClose;return Object(b.jsx)(x,{onClose:t,className:"h-full sm:h-auto p-0 sm:p-0",children:Object(b.jsx)("div",{className:"h-full sm:h-auto flex flex-col sm:flex-row",children:Object(b.jsxs)("div",{className:"flex sm:p-14 flex flex-col justify-center space-y-6",children:[Object(b.jsx)(O,{content:"Enable multi-stroke mask drawing",children:Object(b.jsx)("p",{children:"Hold Cmd/Ctrl"})}),Object(b.jsx)(O,{content:"Undo inpainting",children:Object(b.jsx)("p",{children:"Cmd/Ctrl + z"})}),Object(b.jsx)(O,{content:"Pan",children:Object(b.jsx)("p",{children:"Space & Drag"})}),Object(b.jsx)(O,{content:"View original image",children:Object(b.jsx)("p",{children:"Hold Tab"})}),Object(b.jsx)(O,{content:"Reset zoom/pan & Cancel mask drawing",children:Object(b.jsx)("p",{children:"Esc"})}),Object(b.jsx)(O,{content:"Decrease Brush Size",children:Object(b.jsx)("p",{children:"["})}),Object(b.jsx)(O,{content:"Increase Brush Size",children:Object(b.jsx)("p",{children:"]"})})]})})})}var w=n(11),y=n(26),k=n(30);function N(e){for(var t=e.split(",")[0].split(":")[1].split(";")[0],n=atob(e.split(",")[1]),a=[],c=0;cn?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)},s=Object(a.useCallback)((function(){for(var e=c>n?c:n,t=[],a=0;a2&&void 0!==arguments[2]?arguments[2]:T;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 I(e){var t=e.file,n=Object(a.useState)(40),c=Object(o.a)(n,2),r=c[0],i=c[1],h=function(e){var t=Object(a.useState)(new Image),n=Object(o.a)(t,1)[0],c=Object(a.useState)(!1),r=Object(o.a)(c,2),i=r[0],s=r[1];return Object(a.useEffect)((function(){return n.onload=function(){s(!0)},s(!1),n.src=URL.createObjectURL(e),function(){n.onload=null}}),[e,n]),[n,i]}(t),f=Object(o.a)(h,2),v=f[0],x=f[1],O=Object(a.useState)([]),g=Object(o.a)(O,2),N=g[0],S=g[1],M=Object(a.useState)(),E=Object(o.a)(M,2),L=E[0],A=E[1],T=Object(a.useState)((function(){return document.createElement("canvas")})),I=Object(o.a)(T,1)[0],F=Object(a.useState)([{pts:[]}]),W=Object(o.a)(F,2),Z=W[0],R=W[1],U=Object(a.useState)([{pts:[]}]),V=Object(o.a)(U,2),B=V[0],K=V[1],Y=Object(a.useState)([]),J=Object(o.a)(Y,2),X=J[0],G=J[1],$=Object(a.useState)({x:-1,y:-1}),_=Object(o.a)($,2),Q=_[0],q=Q.x,ee=Q.y,te=_[1],ne=Object(a.useState)(!1),ae=Object(o.a)(ne,2),ce=ae[0],re=ae[1],ie=Object(a.useState)(!1),se=Object(o.a)(ie,2),oe=se[0],le=se[1],ue=Object(a.useState)(!1),he=Object(o.a)(ue,2),de=he[0],be=he[1],pe=Object(a.useState)(!1),je=Object(o.a)(pe,2),fe=je[0],ve=je[1],me=Object(a.useState)(!1),xe=Object(o.a)(me,2),Oe=xe[0],ge=xe[1],we=Object(a.useState)(1),ye=Object(o.a)(we,2),ke=ye[0],Ne=ye[1],Ce=Object(a.useState)(),Se=Object(o.a)(Ce,2),ze=Se[0],Me=Se[1],De=Object(y.a)("sizeLimit","1080"),Ee=Object(o.a)(De,2),Le=Ee[0],Ae=Ee[1],He=Object(d.a)(),Te=Object(a.useRef)(),Pe=Object(a.useState)(!1),Ie=Object(o.a)(Pe,2),Fe=Ie[0],We=Ie[1],Ze=Object(a.useState)(!1),Re=Object(o.a)(Ze,2),Ue=Re[0],Ve=Re[1],Be=Object(a.useCallback)((function(){if(L){L.clearRect(0,0,L.canvas.width,L.canvas.height);var e=N[N.length-1];(null===e||void 0===e?void 0:e.src)?L.drawImage(e,0,0,v.naturalWidth,v.naturalHeight):L.drawImage(v,0,0),P(L,B)}}),[L,B,v,N]),Ke=Object(a.useCallback)((function(){if(!(null===L||void 0===L?void 0:L.canvas.width)||!(null===L||void 0===L?void 0:L.canvas.height))throw new Error("canvas has invalid size");I.width=null===L||void 0===L?void 0:L.canvas.width,I.height=null===L||void 0===L?void 0:L.canvas.height;var e=I.getContext("2d");if(!e)throw new Error("could not retrieve mask canvas");P(e,Z,"white")}),[null===L||void 0===L?void 0:L.canvas.height,null===L||void 0===L?void 0:L.canvas.width,Z,I]),Ye=Object(a.useCallback)(Object(l.a)(s.a.mark((function e(){var n,a;return s.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return ve(!0),Ke(),e.prev=2,e.next=5,z(t,I.toDataURL(),Le);case 5:if(n=e.sent){e.next=8;break}throw new Error("empty response");case 8:return a=new Image,e.next=11,C(a,n);case 11:N.push(a),Z.push({pts:[]}),S(Object(j.a)(N)),R(Object(j.a)(Z)),X.push(B.length),G(X),B.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:ve(!1),Be();case 26:case"end":return e.stop()}}),e,null,[[2,21]])}))),[Be,t,Z,B,I,Ke,N,Le,X]),Je=function(){return 0!==B.length&&0!==B[0].pts.length},Xe=function(){return 0!==N.length},Ge=function(){We(!1),B.length=0,K([{pts:[]}])},$e=function(e){return"Control"===e.key||"Meta"===e.key};Object(m.a)($e,(function(){Ue&&(fe||(Ve(!1),Je()&&Ye()))}),{event:"keyup"},[fe,Ue,Je]),Object(m.a)($e,(function(){fe||Ve(!0)}),{event:"keydown"},[fe]),Object(a.useEffect)((function(){if(v&&x){var e=He.width/v.naturalWidth,t=(He.height-200)/v.naturalHeight;if(e<1||t<1){var n=Math.min(e,t);Me(n),Ne(n)}else Me(1);(null===L||void 0===L?void 0:L.canvas)&&(L.canvas.width=v.naturalWidth,L.canvas.height=v.naturalHeight),Be()}}),[null===L||void 0===L?void 0:L.canvas,Be,v,x,He]);var _e=Object(a.useCallback)((function(){if(ze&&v&&He){var e=Te.current;if(!e)throw new Error("no viewport");var t=(He.width-v.width*ze)/2,n=(He.height-v.height*ze)/2;e.setTransform(t,n,ze,200,"easeOutQuad"),e.state.scale=ze,Ne(ze)}}),[Te,ze,v,He]);Object(m.a)("Escape",(function(){fe||(Fe||Ue?Ge():_e())}),{event:"keydown"},[Fe,fe,Ue,_e,Ge]);var Qe=function(e,t){B[B.length-1].pts.push({x:e,y:t}),Z[Z.length-1].pts.push({x:e,y:t}),Be()},qe=function(){if(N.length&&X.length){for(var e=Z,t=X[X.length-1],n=0;n<=t;n+=1)e.pop();R([].concat(Object(j.a)(e),[{pts:[]}])),X.pop(),G(X);var a=N;a.pop(),S(Object(j.a)(a))}};Object(m.a)((function(e){var t=(e.metaKey||e.ctrlKey)&&"z"===e.key;return"Tab"===e.key&&e.preventDefault(),!!t&&(e.preventDefault(),!0)}),qe),Object(k.a)("Tab",(function(e){null===e||void 0===e||e.preventDefault(),null===e||void 0===e||e.stopPropagation(),Xe()&&(ge(!0),be(!0))}),(function(e){null===e||void 0===e||e.preventDefault(),null===e||void 0===e||e.stopPropagation(),Xe()&&(be(!1),setTimeout((function(){return ge(!1)}),300))}));var et=function(e){e===ce||oe||re(e)},tt=Object(a.useCallback)((function(){return oe?"grab":ce?"none":void 0}),[ce,oe]);Object(k.a)("[",(function(){i((function(e){return e>10?e-10:e<=10&&e>0?e-5:e}))})),Object(k.a)("]",(function(){i((function(e){return e+10}))})),Object(k.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 v&&ke&&ze?Object(b.jsxs)("div",{className:"flex flex-col items-center",style:{height:"100%",width:"100%"},"aria-hidden":"true",onMouseMove:function(e){var t=e.nativeEvent;te({x:t.pageX,y:t.pageY})},onMouseUp:function(){if(!oe&&(v.src&&(null===L||void 0===L?void 0:L.canvas)&&!fe&&Fe)){if(We(!1),Ue)return Z.push({pts:[]}),R(Object(j.a)(Z)),B.push({pts:[]}),void K(Object(j.a)(B));0!==B.length&&0!==B[0].pts.length&&Ye()}},children:[Object(b.jsx)(w.b,{ref:function(e){e&&(Te.current=e)},panning:{disabled:!oe,velocityDisabled:!0},wheel:{step:.05},centerZoomedOut:!0,alignmentAnimation:{disabled:!0},centerOnInit:!0,limitToBounds:!1,doubleClick:{disabled:!0},initialScale:ze,minScale:ze,onZoom:function(e){Ne(e.state.scale)},children:Object(b.jsx)(w.a,{wrapperStyle:{width:"100%",height:"100%"},contentClass:fe?"animate-pulse-fast pointer-events-none transition-opacity":"",children:Object(b.jsxs)(b.Fragment,{children:[Object(b.jsx)("canvas",{className:"rounded-sm",style:{cursor:tt()},onContextMenu:function(e){e.preventDefault()},onMouseOver:function(){return et(!0)},onFocus:function(){return et(!0)},onMouseLeave:function(){return et(!1)},onMouseDown:function(e){if(!oe&&(v.src&&(null===L||void 0===L?void 0:L.canvas)&&!fe)){We(!0),B[B.length-1].size=r,Z[Z.length-1].size=r;var t=e.nativeEvent;Qe(t.offsetX,t.offsetY)}},onMouseMove:function(e){if(!oe&&Fe){var t=e.nativeEvent,n=t.offsetX,a=t.offsetY;Qe(n,a)}},ref:function(e){if(e&&!L){var t=e.getContext("2d");t&&A(t)}}}),Object(b.jsx)("div",{className:["absolute top-0 right-0 pointer-events-none","overflow-hidden","border-primary",Oe?"border-l-4":""].join(" "),style:{width:de?"".concat(Math.round(v.naturalWidth),"px"):"0px",height:v.naturalHeight,transitionProperty:"width, height",transitionTimingFunction:"cubic-bezier(0.4, 0, 0.2, 1)",transitionDuration:"300ms"},children:Object(b.jsx)("img",{className:"absolute right-0",src:v.src,alt:"original",width:"".concat(v.naturalWidth,"px"),height:"".concat(v.naturalHeight,"px"),style:{width:"".concat(v.naturalWidth,"px"),height:"".concat(v.naturalHeight,"px"),maxWidth:"none"}})})]})})}),ce&&!fe&&!oe&&Object(b.jsx)("div",{className:"hidden sm:block absolute rounded-full border border-primary bg-primary bg-opacity-80 pointer-events-none",style:function(){var e=function(){var e,t,n=ze;return void 0!==(null===(e=Te.current)||void 0===e?void 0:e.state.scale)&&(n=null===(t=Te.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(b.jsx)("div",{className:"fixed w-full bottom-0 flex items-center justify-center",style:{height:"90px"},children:Object(b.jsxs)("div",{className:["flex items-center justify-center space-x-6",""].join(" "),children:[Object(b.jsx)(H,{value:Le||"1080",onChange:function(e){Ae(e)},originalWidth:v.naturalWidth,originalHeight:v.naturalHeight}),Object(b.jsx)(D,{label:Object(b.jsx)("span",{children:Object(b.jsx)("span",{className:"hidden md:inline",children:"Brush"})}),min:10,max:150,value:r,onChange:i}),Object(b.jsxs)("div",{children:[Object(b.jsx)(p,{className:"mr-2",icon:Object(b.jsx)(u.b,{className:"w-6 h-6"}),disabled:ke===ze,onClick:_e}),Object(b.jsx)(p,{className:"mr-2",icon:Object(b.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(b.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:qe,disabled:0===N.length}),Object(b.jsx)(p,{className:"mr-2",icon:Object(b.jsx)(u.d,{className:"w-6 h-6"}),onDown:function(e){e.preventDefault(),ge(!0),be(!0)},onUp:function(){be(!1),setTimeout((function(){return ge(!1)}),300)},disabled:0===N.length,children:void 0}),Object(b.jsx)(p,{icon:Object(b.jsx)(u.c,{className:"w-6 h-6"}),disabled:!N.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)}(N[N.length-1].currentSrc,e)},children:void 0})]}),Object(b.jsx)("div",{className:"absolute bg-black backdrop-blur backdrop-filter bg-opacity-10 rounded-xl",style:{height:"58px",width:"600px",zIndex:-1,marginLeft:"-1px"},children:void 0})]})})]}):Object(b.jsx)(b.Fragment,{})}function F(){return F=Object(l.a)(s.a.mark((function e(){var t,n,a=arguments;return s.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)}))),F.apply(this,arguments)}document.addEventListener("DOMContentLoaded",(function(){var e=document.location;setInterval((function(){(function(){return F.apply(this,arguments)})(e+"/flaskwebgui-keep-server-alive").then((function(e){return console.log(e)}))}),3e3)}));var W=function(){var e=Object(a.useState)(),t=Object(o.a)(e,2),n=t[0],c=t[1],r=Object(h.a)(!1),i=Object(o.a)(r,2),j=i[0],v=i[1],m=Object(d.a)();return Object(b.jsxs)("div",{className:"h-full full-visible-h-safari flex flex-col",children:[Object(b.jsxs)("header",{className:"absolute z-10 flex w-full p-1 justify-center sm:justify-between items-center sm:items-start bg-white backdrop-blur backdrop-filter bg-opacity-30",children:[n?Object(b.jsx)(p,{icon:Object(b.jsx)(u.a,{className:"w-6 h-6"}),onClick:function(){c(void 0)},children:m.width>640?"Start new":void 0}):Object(b.jsx)(b.Fragment,{}),n?Object(b.jsx)(p,{onClick:v,icon:Object(b.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(b.jsx)("rect",{x:"0",y:"0",width:"16",height:"16",fill:"none",stroke:"none"}),Object(b.jsxs)("g",{fill:"currentColor",children:[Object(b.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(b.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"})]})]})}):Object(b.jsx)(b.Fragment,{})]}),j&&Object(b.jsx)(g,{onClose:v}),Object(b.jsx)("main",{className:["h-full flex flex-1 flex-col sm:items-center sm:justify-center overflow-hidden","items-center justify-center"].join(" "),children:n?Object(b.jsx)(I,{file:n}):Object(b.jsxs)(b.Fragment,{children:[Object(b.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(b.jsx)("div",{className:"max-w-xl flex flex-col items-center sm:items-start p-0 m-0 space-y-5",children:Object(b.jsxs)("h1",{className:"text-center sm:text-left text-xl sm:text-3xl",children:["Image inpainting powered by \ud83e\udd99",Object(b.jsx)("u",{children:Object(b.jsx)("a",{href:"https://github.com/saic-mdal/lama",children:"LaMa"})})]})})}),Object(b.jsx)("div",{className:"h-20 sm:h-52 px-4 w-full",style:{maxWidth:"800px"},children:Object(b.jsx)(f,{onSelection:function(){var e=Object(l.a)(s.a.mark((function e(t){return s.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:c(t);case 1:case"end":return e.stop()}}),e)})));return function(t){return e.apply(this,arguments)}}()})})]})})]})};r.a.render(Object(b.jsx)(W,{}),document.getElementById("root"))}},[[23,1,2]]]); \ No newline at end of file +(this["webpackJsonplama-cleaner"]=this["webpackJsonplama-cleaner"]||[]).push([[0],{20:function(e,t,n){},23:function(e,t,n){"use strict";n.r(t);var a=n(0),c=n(14),r=n.n(c),i=(n(20),n(3)),s=n.n(i),o=n(2),l=n(5),u=n(7),h=n(27),d=n(29),b=n(1);function p(e){var t=e.children,n=e.className,c=e.disabled,r=e.icon,i=e.primary,s=e.onKeyDown,l=e.onClick,u=e.onDown,h=e.onUp,d=Object(a.useState)(!1),p=Object(o.a)(d,2),f=p[0],j=p[1],v="";i&&!c&&(v="bg-primary hover:bg-black hover:text-white"),f&&(v="bg-black text-white"),i||f||(v="hover:bg-primary");return Object(b.jsxs)("div",{role:"button",onKeyDown:s,onClick:function(e){e.currentTarget.blur(),null===l||void 0===l||l()},onPointerDown:function(e){j(!0),null===u||void 0===u||u(e.nativeEvent)},onPointerUp:function(e){j(!1),null===h||void 0===h||h(e.nativeEvent)},tabIndex:-1,className:["inline-flex py-3 px-3 rounded-md cursor-pointer",t?"space-x-3":"",v,c?"pointer-events-none opacity-50":"",n].join(" "),children:[r,Object(b.jsx)("span",{className:"whitespace-nowrap select-none",children:t})]})}var f=n(6);function j(e){var t=e.onSelection,n=Object(a.useState)(!1),c=Object(o.a)(n,2),r=c[0],i=c[1],u=Object(a.useState)("file-upload-".concat(Math.random().toString())),h=Object(o.a)(u,1)[0];function d(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 p(e){return j.apply(this,arguments)}function j(){return(j=Object(l.a)(s.a.mark((function e(t){return s.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 v(e){return m.apply(this,arguments)}function m(){return(m=Object(l.a)(s.a.mark((function e(t){var n,a,c,r,i;return s.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:for(n=[],a=[],c=0;c0)){e.next=23;break}if(!(null===(r=a.shift())||void 0===r?void 0:r.isFile)){e.next=12;break}return e.next=8,p(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=f.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 O.apply(this,arguments)}function O(){return(O=Object(l.a)(s.a.mark((function e(t){var n,a;return s.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 w.apply(this,arguments)}function w(){return(w=Object(l.a)(s.a.mark((function e(t){return s.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(l.a)(s.a.mark((function e(t){var n;return s.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return t.preventDefault(),e.next=3,v(t.dataTransfer.items);case 3:n=e.sent,i(!1),d(n[0]);case 6:case"end":return e.stop()}}),e)})))).apply(this,arguments)}return Object(b.jsx)("label",{htmlFor:h,className:"block w-full h-full group relative cursor-pointer rounded-md font-medium focus-within:outline-none",children:Object(b.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",r?"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(),i(!0)},onDragLeave:function(){return i(!1)},children:[Object(b.jsx)("input",{id:h,name:h,type:"file",className:"sr-only",onChange:function(e){var t,n=null===(t=e.currentTarget.files)||void 0===t?void 0:t[0];n&&d(n)},accept:"image/png, image/jpeg"}),Object(b.jsx)("p",{className:"hidden sm:block",children:"Click here or drag an image file"}),Object(b.jsx)("p",{className:"sm:hidden",children:"Tap here to load your picture"})]})})}var v=n(25),m=n(12);function x(e){var t=e.children,n=e.onClose,c=e.className,r=Object(a.useRef)(null);return Object(v.a)(r,(function(){null===n||void 0===n||n()})),Object(m.a)("Escape",n,{event:"keydown"}),Object(b.jsx)("div",{className:["absolute w-full h-full flex justify-center items-center","z-20","bg-gray-300 bg-opacity-40 backdrop-filter backdrop-blur-md"].join(" "),children:Object(b.jsxs)("div",{ref:r,className:"bg-white max-w-4xl relative rounded-md shadow-md ".concat(c||"p-8 sm:p-12"),children:[Object(b.jsx)(p,{icon:Object(b.jsx)(u.e,{className:"w-6 h-6"}),className:["absolute right-4 top-4 rounded-full bg-gray-100 w-10 h-10","flex justify-center items-center py-0 px-0 sm:px-0"].join(" "),onClick:n}),t]})})}function O(e){var t=e.children,n=e.content;return Object(b.jsxs)("div",{className:"h-full flex flex-row space-x-6 justify-between",children:[Object(b.jsx)("div",{className:"mr-12 border-2 rounded-xl px-2 py-1",children:t}),Object(b.jsx)("div",{className:"flex flex-col justify-center",children:n})]})}function g(e){var t=e.onClose;return Object(b.jsx)(x,{onClose:t,className:"h-full sm:h-auto p-0 sm:p-0",children:Object(b.jsx)("div",{className:"h-full sm:h-auto flex flex-col sm:flex-row",children:Object(b.jsxs)("div",{className:"flex sm:p-14 flex flex-col justify-center space-y-6",children:[Object(b.jsx)(O,{content:"Enable multi-stroke mask drawing",children:Object(b.jsx)("p",{children:"Hold Cmd/Ctrl"})}),Object(b.jsx)(O,{content:"Undo inpainting",children:Object(b.jsx)("p",{children:"Cmd/Ctrl + z"})}),Object(b.jsx)(O,{content:"Pan",children:Object(b.jsx)("p",{children:"Space & Drag"})}),Object(b.jsx)(O,{content:"View original image",children:Object(b.jsx)("p",{children:"Hold Tab"})}),Object(b.jsx)(O,{content:"Reset zoom/pan & Cancel mask drawing",children:Object(b.jsx)("p",{children:"Esc"})}),Object(b.jsx)(O,{content:"Decrease Brush Size",children:Object(b.jsx)("p",{children:"["})}),Object(b.jsx)(O,{content:"Increase Brush Size",children:Object(b.jsx)("p",{children:"]"})})]})})})}var w=n(11),y=n(26),k=n(30);function N(e){for(var t=e.split(",")[0].split(":")[1].split(";")[0],n=atob(e.split(",")[1]),a=[],c=0;cn?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)},s=Object(a.useCallback)((function(){for(var e=c>n?c:n,t=[],a=0;a2&&void 0!==arguments[2]?arguments[2]:T;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 P(e){var t=e.file,n=Object(a.useState)(40),c=Object(o.a)(n,2),r=c[0],i=c[1],h=function(e){var t=Object(a.useState)(new Image),n=Object(o.a)(t,1)[0],c=Object(a.useState)(!1),r=Object(o.a)(c,2),i=r[0],s=r[1];return Object(a.useEffect)((function(){return n.onload=function(){s(!0)},s(!1),n.src=URL.createObjectURL(e),function(){n.onload=null}}),[e,n]),[n,i]}(t),j=Object(o.a)(h,2),v=j[0],x=j[1],O=Object(a.useState)([]),g=Object(o.a)(O,2),N=g[0],S=g[1],M=Object(a.useState)(),D=Object(o.a)(M,2),L=D[0],A=D[1],T=Object(a.useState)((function(){return document.createElement("canvas")})),P=Object(o.a)(T,1)[0],F=Object(a.useState)([{pts:[]}]),W=Object(o.a)(F,2),Z=W[0],R=W[1],U=Object(a.useState)([{pts:[]}]),V=Object(o.a)(U,2),B=V[0],K=V[1],Y=Object(a.useState)([]),J=Object(o.a)(Y,2),X=J[0],G=J[1],$=Object(a.useState)({x:-1,y:-1}),_=Object(o.a)($,2),Q=_[0],q=Q.x,ee=Q.y,te=_[1],ne=Object(a.useState)(!1),ae=Object(o.a)(ne,2),ce=ae[0],re=ae[1],ie=Object(a.useState)(!1),se=Object(o.a)(ie,2),oe=se[0],le=se[1],ue=Object(a.useState)(!1),he=Object(o.a)(ue,2),de=he[0],be=he[1],pe=Object(a.useState)(!1),fe=Object(o.a)(pe,2),je=fe[0],ve=fe[1],me=Object(a.useState)(!1),xe=Object(o.a)(me,2),Oe=xe[0],ge=xe[1],we=Object(a.useState)(1),ye=Object(o.a)(we,2),ke=ye[0],Ne=ye[1],Ce=Object(a.useState)(),Se=Object(o.a)(Ce,2),ze=Se[0],Me=Se[1],Ee=Object(y.a)("sizeLimit","1080"),De=Object(o.a)(Ee,2),Le=De[0],Ae=De[1],He=Object(d.a)(),Te=Object(a.useRef)(),Ie=Object(a.useState)(!1),Pe=Object(o.a)(Ie,2),Fe=Pe[0],We=Pe[1],Ze=Object(a.useState)(!1),Re=Object(o.a)(Ze,2),Ue=Re[0],Ve=Re[1],Be=Object(a.useCallback)((function(){if(L){L.clearRect(0,0,L.canvas.width,L.canvas.height);var e=N[N.length-1];(null===e||void 0===e?void 0:e.src)?L.drawImage(e,0,0,v.naturalWidth,v.naturalHeight):L.drawImage(v,0,0),I(L,B)}}),[L,B,v,N]),Ke=Object(a.useCallback)((function(){if(!(null===L||void 0===L?void 0:L.canvas.width)||!(null===L||void 0===L?void 0:L.canvas.height))throw new Error("canvas has invalid size");P.width=null===L||void 0===L?void 0:L.canvas.width,P.height=null===L||void 0===L?void 0:L.canvas.height;var e=P.getContext("2d");if(!e)throw new Error("could not retrieve mask canvas");I(e,Z,"white")}),[null===L||void 0===L?void 0:L.canvas.height,null===L||void 0===L?void 0:L.canvas.width,Z,P]),Ye=Object(a.useCallback)(Object(l.a)(s.a.mark((function e(){var n,a;return s.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return ve(!0),Ke(),e.prev=2,e.next=5,z(t,P.toDataURL(),Le);case 5:if(n=e.sent){e.next=8;break}throw new Error("empty response");case 8:return a=new Image,e.next=11,C(a,n);case 11:N.push(a),Z.push({pts:[]}),S(Object(f.a)(N)),R(Object(f.a)(Z)),X.push(B.length),G(X),B.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:ve(!1),Be();case 26:case"end":return e.stop()}}),e,null,[[2,21]])}))),[Be,t,Z,B,P,Ke,N,Le,X]),Je=function(){return 0!==B.length&&0!==B[0].pts.length},Xe=function(){return 0!==N.length},Ge=function(){We(!1),B.length=0,K([{pts:[]}])},$e=function(e){return"Control"===e.key||"Meta"===e.key};Object(m.a)($e,(function(){Ue&&(je||(Ve(!1),Je()&&Ye()))}),{event:"keyup"},[je,Ue,Je]),Object(m.a)($e,(function(){je||Ve(!0)}),{event:"keydown"},[je]),Object(a.useEffect)((function(){if(v&&x){var e=He.width/v.naturalWidth,t=(He.height-200)/v.naturalHeight;if(e<1||t<1){var n=Math.min(e,t);Me(n),Ne(n)}else Me(1);(null===L||void 0===L?void 0:L.canvas)&&(L.canvas.width=v.naturalWidth,L.canvas.height=v.naturalHeight),Be()}}),[null===L||void 0===L?void 0:L.canvas,Be,v,x,He]);var _e=Object(a.useCallback)((function(){if(ze&&v&&He){var e=Te.current;if(!e)throw new Error("no viewport");var t=(He.width-v.width*ze)/2,n=(He.height-v.height*ze)/2;e.setTransform(t,n,ze,200,"easeOutQuad"),e.state.scale=ze,Ne(ze)}}),[Te,ze,v,He]);Object(m.a)("Escape",(function(){je||(Fe||Ue?Ge():_e())}),{event:"keydown"},[Fe,je,Ue,_e,Ge]);var Qe=function(e,t){B[B.length-1].pts.push({x:e,y:t}),Z[Z.length-1].pts.push({x:e,y:t}),Be()},qe=function(){if(N.length&&X.length){for(var e=Z,t=X[X.length-1],n=0;n<=t;n+=1)e.pop();R([].concat(Object(f.a)(e),[{pts:[]}])),X.pop(),G(X);var a=N;a.pop(),S(Object(f.a)(a))}};Object(m.a)((function(e){var t=(e.metaKey||e.ctrlKey)&&"z"===e.key;return"Tab"===e.key&&e.preventDefault(),!!t&&(e.preventDefault(),!0)}),qe),Object(k.a)("Tab",(function(e){null===e||void 0===e||e.preventDefault(),null===e||void 0===e||e.stopPropagation(),Xe()&&(ge(!0),be(!0))}),(function(e){null===e||void 0===e||e.preventDefault(),null===e||void 0===e||e.stopPropagation(),Xe()&&(be(!1),setTimeout((function(){return ge(!1)}),300))}));var et=function(e){e===ce||oe||re(e)},tt=Object(a.useCallback)((function(){return oe?"grab":ce?"none":void 0}),[ce,oe]);Object(k.a)("[",(function(){i((function(e){return e>10?e-10:e<=10&&e>0?e-5:e}))})),Object(k.a)("]",(function(){i((function(e){return e+10}))})),Object(k.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 v&&ke&&ze?Object(b.jsxs)("div",{className:"flex flex-col items-center",style:{height:"100%",width:"100%"},"aria-hidden":"true",onMouseMove:function(e){var t=e.nativeEvent;te({x:t.pageX,y:t.pageY})},onMouseUp:function(){if(!oe&&(v.src&&(null===L||void 0===L?void 0:L.canvas)&&!je&&Fe)){if(We(!1),Ue)return Z.push({pts:[]}),R(Object(f.a)(Z)),B.push({pts:[]}),void K(Object(f.a)(B));0!==B.length&&0!==B[0].pts.length&&Ye()}},children:[Object(b.jsx)(w.b,{ref:function(e){e&&(Te.current=e)},panning:{disabled:!oe,velocityDisabled:!0},wheel:{step:.05},centerZoomedOut:!0,alignmentAnimation:{disabled:!0},centerOnInit:!0,limitToBounds:!1,doubleClick:{disabled:!0},initialScale:ze,minScale:ze,onZoom:function(e){Ne(e.state.scale)},children:Object(b.jsx)(w.a,{wrapperStyle:{width:"100%",height:"100%"},contentClass:je?"animate-pulse-fast pointer-events-none transition-opacity":"",children:Object(b.jsxs)(b.Fragment,{children:[Object(b.jsx)("canvas",{className:"rounded-sm",style:{cursor:tt()},onContextMenu:function(e){e.preventDefault()},onMouseOver:function(){return et(!0)},onFocus:function(){return et(!0)},onMouseLeave:function(){return et(!1)},onMouseDown:function(e){if(!oe&&(v.src&&(null===L||void 0===L?void 0:L.canvas)&&!je)){We(!0),B[B.length-1].size=r,Z[Z.length-1].size=r;var t=e.nativeEvent;Qe(t.offsetX,t.offsetY)}},onMouseMove:function(e){if(!oe&&Fe){var t=e.nativeEvent,n=t.offsetX,a=t.offsetY;Qe(n,a)}},ref:function(e){if(e&&!L){var t=e.getContext("2d");t&&A(t)}}}),Object(b.jsx)("div",{className:["absolute top-0 right-0 pointer-events-none","overflow-hidden","border-primary",Oe?"border-l-4":""].join(" "),style:{width:de?"".concat(Math.round(v.naturalWidth),"px"):"0px",height:v.naturalHeight,transitionProperty:"width, height",transitionTimingFunction:"cubic-bezier(0.4, 0, 0.2, 1)",transitionDuration:"300ms"},children:Object(b.jsx)("img",{className:"absolute right-0",src:v.src,alt:"original",width:"".concat(v.naturalWidth,"px"),height:"".concat(v.naturalHeight,"px"),style:{width:"".concat(v.naturalWidth,"px"),height:"".concat(v.naturalHeight,"px"),maxWidth:"none"}})})]})})}),ce&&!je&&!oe&&Object(b.jsx)("div",{className:"hidden sm:block absolute rounded-full border border-primary bg-primary bg-opacity-80 pointer-events-none",style:function(){var e=function(){var e,t,n=ze;return void 0!==(null===(e=Te.current)||void 0===e?void 0:e.state.scale)&&(n=null===(t=Te.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(b.jsx)("div",{className:"fixed w-full bottom-0 flex items-center justify-center",style:{height:"90px"},children:Object(b.jsxs)("div",{className:["flex items-center justify-center space-x-6",""].join(" "),children:[Object(b.jsx)(H,{value:Le||"1080",onChange:function(e){Ae(e)},originalWidth:v.naturalWidth,originalHeight:v.naturalHeight}),Object(b.jsx)(E,{label:Object(b.jsx)("span",{children:Object(b.jsx)("span",{className:"hidden md:inline",children:"Brush"})}),min:10,max:150,value:r,onChange:i}),Object(b.jsxs)("div",{children:[Object(b.jsx)(p,{className:"mr-2",icon:Object(b.jsx)(u.b,{className:"w-6 h-6"}),disabled:ke===ze,onClick:_e}),Object(b.jsx)(p,{className:"mr-2",icon:Object(b.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(b.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:qe,disabled:0===N.length}),Object(b.jsx)(p,{className:"mr-2",icon:Object(b.jsx)(u.d,{className:"w-6 h-6"}),onDown:function(e){e.preventDefault(),ge(!0),be(!0)},onUp:function(){be(!1),setTimeout((function(){return ge(!1)}),300)},disabled:0===N.length,children:void 0}),Object(b.jsx)(p,{icon:Object(b.jsx)(u.c,{className:"w-6 h-6"}),disabled:!N.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)}(N[N.length-1].currentSrc,e)},children:void 0})]}),Object(b.jsx)("div",{className:"absolute bg-black backdrop-blur backdrop-filter bg-opacity-10 rounded-xl",style:{height:"58px",width:"600px",zIndex:-1,marginLeft:"-1px"},children:void 0})]})})]}):Object(b.jsx)(b.Fragment,{})}function F(){return F=Object(l.a)(s.a.mark((function e(){var t,n,a=arguments;return s.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)}))),F.apply(this,arguments)}document.addEventListener("DOMContentLoaded",(function(){var e=document.location;setInterval((function(){(function(){return F.apply(this,arguments)})(e+"/flaskwebgui-keep-server-alive").then((function(e){return console.log(e)}))}),3e3)}));var W=function(){var e=Object(a.useState)(),t=Object(o.a)(e,2),n=t[0],c=t[1],r=Object(h.a)(!1),i=Object(o.a)(r,2),f=i[0],v=i[1],m=Object(d.a)(),x=function(){var e=Object(a.useState)(),t=Object(o.a)(e,2),n=t[0],c=t[1],r=Object(a.useCallback)((function(){fetch("/inputimage").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()}),[]),n}();return Object(a.useEffect)((function(){c(x)}),[x]),Object(b.jsxs)("div",{className:"h-full full-visible-h-safari flex flex-col",children:[Object(b.jsxs)("header",{className:"absolute z-10 flex w-full p-1 justify-center sm:justify-between items-center sm:items-start bg-white backdrop-blur backdrop-filter bg-opacity-30",children:[n?Object(b.jsx)(p,{icon:Object(b.jsx)(u.a,{className:"w-6 h-6"}),onClick:function(){c(void 0)},children:m.width>640?"Start new":void 0}):Object(b.jsx)(b.Fragment,{}),n?Object(b.jsx)(p,{onClick:v,icon:Object(b.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(b.jsx)("rect",{x:"0",y:"0",width:"16",height:"16",fill:"none",stroke:"none"}),Object(b.jsxs)("g",{fill:"currentColor",children:[Object(b.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(b.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"})]})]})}):Object(b.jsx)(b.Fragment,{})]}),f&&Object(b.jsx)(g,{onClose:v}),Object(b.jsx)("main",{className:["h-full flex flex-1 flex-col sm:items-center sm:justify-center overflow-hidden","items-center justify-center"].join(" "),children:n?Object(b.jsx)(P,{file:n}):Object(b.jsxs)(b.Fragment,{children:[Object(b.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(b.jsx)("div",{className:"max-w-xl flex flex-col items-center sm:items-start p-0 m-0 space-y-5",children:Object(b.jsxs)("h1",{className:"text-center sm:text-left text-xl sm:text-3xl",children:["Image inpainting powered by \ud83e\udd99",Object(b.jsx)("u",{children:Object(b.jsx)("a",{href:"https://github.com/saic-mdal/lama",children:"LaMa"})})]})})}),Object(b.jsx)("div",{className:"h-20 sm:h-52 px-4 w-full",style:{maxWidth:"800px"},children:Object(b.jsx)(j,{onSelection:function(){var e=Object(l.a)(s.a.mark((function e(t){return s.a.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:c(t);case 1:case"end":return e.stop()}}),e)})));return function(t){return e.apply(this,arguments)}}()})})]})})]})};r.a.render(Object(b.jsx)(W,{}),document.getElementById("root"))}},[[23,1,2]]]); \ No newline at end of file diff --git a/lama_cleaner/app/src/App.tsx b/lama_cleaner/app/src/App.tsx index 86255fd..f2ecb5f 100644 --- a/lama_cleaner/app/src/App.tsx +++ b/lama_cleaner/app/src/App.tsx @@ -1,8 +1,9 @@ import { ArrowLeftIcon } from '@heroicons/react/outline' -import React, { useState } from 'react' +import React, { useEffect, useState } from 'react' import { useToggle, useWindowSize } from 'react-use' import Button from './components/Button' import FileSelect from './components/FileSelect' +import useInputImage from './components/hooks/useInputImage' import ShortcutsModal from './components/ShortcutsModal' import Editor from './Editor' @@ -31,6 +32,11 @@ function App() { const [file, setFile] = useState() const [showShortcuts, toggleShowShortcuts] = useToggle(false) const windowSize = useWindowSize() + const userInputImage = useInputImage() + + useEffect(() => { + setFile(userInputImage) + }, [userInputImage]) return (
diff --git a/lama_cleaner/app/src/components/hooks/useInputImage.js b/lama_cleaner/app/src/components/hooks/useInputImage.js new file mode 100644 index 0000000..0c566f1 --- /dev/null +++ b/lama_cleaner/app/src/components/hooks/useInputImage.js @@ -0,0 +1,22 @@ +import { useCallback, useEffect, useState } from 'react' + +export default function useInputImage() { + const [inputImage, setInputImage] = useState() + + const fetchInputImage = useCallback(() => { + fetch('/inputimage') + .then(res => res.blob()) + .then(data => { + if (data && data.type.startsWith('image')) { + const userInput = new File([data], 'inputImage') + setInputImage(userInput) + } + }) + }, [setInputImage]) + + useEffect(() => { + fetchInputImage() + }, []) + + return inputImage +} diff --git a/main.py b/main.py index 7424b02..fc79eff 100644 --- a/main.py +++ b/main.py @@ -5,6 +5,7 @@ import io import multiprocessing import os import time +import imghdr from typing import Union import cv2 @@ -98,8 +99,24 @@ def index(): return send_file(os.path.join(BUILD_DIR, "index.html")) +@app.route('/inputimage') +def set_input_photo(): + filename = os.path.join(os.path.dirname(__file__), input_image) + if (os.path.exists(filename)): + if (imghdr.what(filename) is not None): + with open(filename, 'rb') as f: + byte_im = f.read() + return send_file(io.BytesIO(byte_im), mimetype='image/jpeg') + else: + return 'Invalid Input' + else: + return 'Invalid Input' + + def get_args_parser(): parser = argparse.ArgumentParser() + parser.add_argument( + "--input", default='', type=str, help="Path to image you want to load by default") parser.add_argument("--port", default=8080, type=int) parser.add_argument("--model", default="lama", choices=["lama", "ldm"]) parser.add_argument("--crop-trigger-size", nargs=2, type=int, @@ -128,11 +145,16 @@ def get_args_parser(): def main(): global model global device + global input_image + args = get_args_parser() device = torch.device(args.device) + input_image = args.input + if args.model == "lama": - model = LaMa(crop_trigger_size=args.crop_trigger_size, crop_margin=args.crop_margin, device=device) + model = LaMa(crop_trigger_size=args.crop_trigger_size, + crop_margin=args.crop_margin, device=device) elif args.model == "ldm": model = LDM(device, steps=args.ldm_steps) else: