https://vectr.com/design/static/js/29.73332114.chunk.js

1(this["webpackJsonpvectr-next"]=this["webpackJsonpvectr-next"]||[]).push([[29],{454:function(e,t,n){"use strict";n.d(t,"a",(function(){return o}));var a,i=n(0);const r=["title","titleId"];function s(){return(s=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)({}).hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e}).apply(null,arguments)}function c(e,t){let{title:n,titleId:c}=e,o=function(e,t){if(null==e)return{};var n,a,i=function(e,t){if(null==e)return{};var n={};for(var a in e)if({}.hasOwnProperty.call(e,a)){if(-1!==t.indexOf(a))continue;n[a]=e[a]}return n}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a<r.length;a++)n=r[a],-1===t.indexOf(n)&&{}.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}(e,r);return i.createElement("svg",s({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",ref:t,"aria-labelledby":c},o),n?i.createElement("title",{id:c},n):null,a||(a=i.createElement("path",{fill:"currentColor",d:"M4,4H11V2H4A2,2 0 0,0 2,4V11H4V4M10,13L6,18H18L15,14L12.97,16.71L10,13M17,8.5A1.5,1.5 0 0,0 15.5,7A1.5,1.5 0 0,0 14,8.5A1.5,1.5 0 0,0 15.5,10A1.5,1.5 0 0,0 17,8.5M20,2H13V4H20V11H22V4A2,2 0 0,0 20,2M20,20H13V22H20A2,2 0 0,0 22,20V13H20V20M4,13H2V20A2,2 0 0,0 4,22H11V20H4V13Z"})))}const o=i.forwardRef(c);n.p},463:function(e,t,n){"use strict";n.d(t,"a",(function(){return o}));var a,i=n(0);const r=["title","titleId"];function s(){return(s=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)({}).hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e}).apply(null,arguments)}function c(e,t){let{title:n,titleId:c}=e,o=function(e,t){if(null==e)return{};var n,a,i=function(e,t){if(null==e)return{};var n={};for(var a in e)if({}.hasOwnProperty.call(e,a)){if(-1!==t.indexOf(a))continue;n[a]=e[a]}return n}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a<r.length;a++)n=r[a],-1===t.indexOf(n)&&{}.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}(e,r);return i.createElement("svg",s({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",ref:t,"aria-labelledby":c},o),n?i.createElement("title",{id:c},n):null,a||(a=i.createElement("path",{fill:"currentColor",d:"M9,2A7,7 0 0,1 16,9C16,10.57 15.5,12 14.61,13.19L15.41,14H16L22,20L20,22L14,16V15.41L13.19,14.61C12,15.5 10.57,16 9,16A7,7 0 0,1 2,9A7,7 0 0,1 9,2M8,5V8H5V10H8V13H10V10H13V8H10V5H8Z"})))}const o=i.forwardRef(c);n.p},464:function(e,t,n){"use strict";n.d(t,"a",(function(){return o}));var a,i=n(0);const r=["title","titleId"];function s(){return(s=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)({}).hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e}).apply(null,arguments)}function c(e,t){let{title:n,titleId:c}=e,o=function(e,t){if(null==e)return{};var n,a,i=function(e,t){if(null==e)return{};var n={};for(var a in e)if({}.hasOwnProperty.call(e,a)){if(-1!==t.indexOf(a))continue;n[a]=e[a]}return n}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a<r.length;a++)n=r[a],-1===t.indexOf(n)&&{}.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}(e,r);return i.createElement("svg",s({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",ref:t,"aria-labelledby":c},o),n?i.createElement("title",{id:c},n):null,a||(a=i.createElement("path",{fill:"currentColor",d:"M9,2A7,7 0 0,1 16,9C16,10.57 15.5,12 14.61,13.19L15.41,14H16L22,20L20,22L14,16V15.41L13.19,14.61C12,15.5 10.57,16 9,16A7,7 0 0,1 2,9A7,7 0 0,1 9,2M5,8V10H13V8H5Z"})))}const o=i.forwardRef(c);n.p},481:function(e,t,n){"use strict";var a=n(55),i=n(39),r=n(40),s=n(0),c=n(3),o=1.1,l=function(){function e(t,n){var a=this;Object(i.a)(this,e),this.canvas=t,this.ctx=void 0,this.image=void 0,this.matrix=[1,0,0,1,0,0],this.isDragging=!1,this.start={x:0,y:0},this.handleKeyboardEvent=function(e){"keydown"===e.type&&(222===e.keyCode?a.zoom(o):186===e.keyCode&&a.zoom(1/o))},this.handleMouseDown=function(e){a.isDragging=!0,a.start={x:e.offsetX-a.matrix[4],y:e.offsetY-a.matrix[5]},a.canvas.style.cursor="grabbing"},this.handleMouseMove=function(e){if(a.isDragging){var t=e.offsetX-a.start.x,n=e.offsetY-a.start.y;a.matrix[4]=t,a.matrix[5]=n,a.drawImage()}},this.handleMouseUp=function(){a.isDragging=!1,a.canvas.style.cursor="grab"};var r=t.getContext("2d");if(!r)throw new Error("Failed to get canvas context");this.ctx=r,this.image=new Image,this.image.src=n,this.image.onload=function(){return a.initializeImage()},this.setupEventListeners()}return Object(r.a)(e,[{key:"initializeImage",value:function(){var e=this.canvas.width/this.canvas.height,t=1;t=this.image.width/this.image.height>e?this.canvas.width/this.image.width:this.canvas.height/this.image.height,this.matrix=[t,0,0,t,(this.canvas.width-this.image.width*t)/2,(this.canvas.height-this.image.height*t)/2],this.drawImage()}},{key:"drawImage",value:function(){var e=Object(a.a)(this.matrix,6),t=e[0],n=e[1],i=e[2],r=e[3],s=e[4],c=e[5];this.ctx.setTransform(t,n,i,r,s,c),this.ctx.clearRect(-s/t,-c/r,this.canvas.width/t,this.canvas.height/r),this.ctx.drawImage(this.image,0,0,this.image.width,this.image.height)}},{key:"setupEventListeners",value:function(){this.canvas.addEventListener("mousedown",this.handleMouseDown),this.canvas.addEventListener("mousemove",this.handleMouseMove),this.canvas.addEventListener("mouseup",this.handleMouseUp),this.canvas.addEventListener("mouseleave",this.handleMouseUp),document.addEventListener("keydown",this.handleKeyboardEvent),document.addEventListener("keyup",this.handleKeyboardEvent)}},{key:"destroy",value:function(){this.canvas.removeEventListener("mousedown",this.handleMouseDown),this.canvas.removeEventListener("mousemove",this.handleMouseMove),this.canvas.removeEventListener("mouseup",this.handleMouseUp),this.canvas.removeEventListener("mouseleave",this.handleMouseUp),document.removeEventListener("keydown",this.handleKeyboardEvent),document.removeEventListener("keyup",this.handleKeyboardEvent)}},{key:"zoom",value:function(e){var t=this.canvas.width/2,n=this.canvas.height/2;this.matrix[4]-=t,this.matrix[5]-=n,this.matrix[0]*=e,this.matrix[3]*=e,this.matrix[4]=t+this.matrix[4]*e,this.matrix[5]=n+this.matrix[5]*e,this.drawImage()}}]),e}(),u=Object(s.forwardRef)((function(e,t){var n=e.imageUrl,a=e.canvasWidth,i=e.canvasHeight,r=Object(s.useRef)(null),u=Object(s.useRef)(null);

1return Object(s.useEffect)((function(){r.current&&(u.current=new l(r.current,n))}),[n]),Object(s.useImperativeHandle)(t,(function(){return{zoomIn:function(){var e;return null===(e=u.current)||void 0===e?void 0:e.zoom(o)},zoomOut:function(){var e;return null===(e=u.current)||void 0===e?void 0:e.zoom(1/o)}}})),Object(s.useEffect)((function(){return function(){var e;null===(e=u.current)||void 0===e||e.destroy()}}),[]),Object(c.jsx)("div",{style:{width:"100%",height:"100%"},children:Object(c.jsx)("canvas",{style:{width:"100%",height:"100%"},ref:r,width:a,height:i})})}));t.a=u},605:function(e,t,n){},649:function(e,t,n){"use strict";var a,i=n(0),r=n(41),s=n(438),c=n(180),o=n(19),l=n(23);n(605);const u=["title","titleId"];function d(){return(d=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)({}).hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e}).apply(null,arguments)}function h(e,t){let{title:n,titleId:r}=e,s=function(e,t){if(null==e)return{};var n,a,i=function(e,t){if(null==e)return{};var n={};for(var a in e)if({}.hasOwnProperty.call(e,a)){if(-1!==t.indexOf(a))continue;n[a]=e[a]}return n}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a<r.length;a++)n=r[a],-1===t.indexOf(n)&&{}.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}(e,u);return i.createElement("svg",d({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",ref:t,"aria-labelledby":r},s),n?i.createElement("title",{id:r},n):null,a||(a=i.createElement("path",{fill:"currentColor",d:"M9,11.75A1.25,1.25 0 0,0 7.75,13A1.25,1.25 0 0,0 9,14.25A1.25,1.25 0 0,0 10.25,13A1.25,1.25 0 0,0 9,11.75M15,11.75A1.25,1.25 0 0,0 13.75,13A1.25,1.25 0 0,0 15,14.25A1.25,1.25 0 0,0 16.25,13A1.25,1.25 0 0,0 15,11.75M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20C7.59,20 4,16.41 4,12C4,11.71 4,11.42 4.05,11.14C6.41,10.09 8.28,8.16 9.26,5.77C11.07,8.33 14.05,10 17.42,10C18.2,10 18.95,9.91 19.67,9.74C19.88,10.45 20,11.21 20,12C20,16.41 16.41,20 12,20Z"})))}const v=i.forwardRef(h);n.p;var f=n(454),g=n(453),m=n(451),b=n(30),j=n(48),p=n(102),O=n(183),w=n(131),x=n.n(w),y=n(481),E=n(463),_=n(464),A=n(70),I=n(103),L=n(455),M=n(452),C=n(3);t.a=()=>{Object(o.d)(l.a);const{t:e}=Object(A.b)(),t=Object(r.a)(),n=(Object(o.d)(b.a),Object(o.d)(p.a)),{enqueueSnackbar:a}=Object(O.b)(),u=Object(i.useRef)(null),d=Object(M.f)(),[h,w]=Object(i.useState)(!1),[H,P]=Object(i.useState)(!1),[D,k]=Object(i.useState)(!1),[V,S]=Object(i.useState)(void 0),[N,z]=Object(i.useState)(void 0),[R,F]=Object(i.useState)(void 0),[B,U]=Object(i.useState)(void 0),[T,K]=Object(i.useState)(void 0),[Z,W]=Object(i.useState)({width:0,height:0}),J=Object(i.useRef)(null);Object(i.useEffect)((()=>{let e;return J.current&&(e=new ResizeObserver((t=>{const n=t[0].target.getBoundingClientRect();W({width:Math.floor(n.width),height:Math.floor(n.height)}),e.disconnect()})),e.observe(J.current)),()=>{e.disconnect()}}),[]);const X=Object(M.g)((async()=>{var t;if(!Object(I.a)("AI_FACE_SWAP"))return;if(D)return;if(!V||!R)return;k(!0);const i={version:j.a,config:{weight:.5,cache_days:10,det_thresh:.1,local_source:V,local_target:R}},r=null===(t=n.value)||void 0===t?void 0:t.id;r&&await Object(m.c)(i).then((async t=>{let{data:i}=t;const s=i.urls.get,c=s.lastIndexOf("/"),o=s.substring(c+1,s.length);await Object(m.d)(o,r).then((t=>{let{image:i}=t;var r;i?null===(r=n.ornull)||void 0===r||r.merge((e=>({credits:e.credits-4}))):a(e("ai_face_swap.error"),{variant:"error"});K(i),k(!1)})).catch((e=>{a(e.response.data.message,{variant:"error"}),k(!1)})).finally((()=>{var e;null===(e=n.ornull)||void 0===e||e.merge((()=>({isFirstTimeProdia:!1})))}))}))}),1e4);return Object(C.jsxs)(C.Fragment,{children:[Object(C.jsxs)("div",{className:"face-swap-main",style:{height:"100%",overflow:"hidden"},children:[Object(C.jsxs)("div",{className:"left",children:[Object(C.jsxs)("div",{className:"source ".concat(h?"dragover":""),onDragEnter:e=>{e.preventDefault(),e.stopPropagation(),w(!0)},onDragOver:e=>{e.preventDefault(),e.stopPropagation(),w(!0)},onDragLeave:e=>{e.preventDefault(),e.stopPropagation(),w(!1)},onDrop:e=>{w(!1),(async e=>{var t;e.preventDefault(),e.stopPropagation();const n=null===e||void 0===e||null===(t=e.dataTransfer)||void 0===t?void 0:t.files[0];if(n){const e=await Object(m.v)(n),t=await Object(m.I)(n);z(e),S(t)}})(e)},onClick:async()=>{const e=await Object(g.a)({mimeTypes:["image/jpg","image/png"],extensions:[".jpg",".jpeg",".png"]}),t=await Object(m.v)(e),n=await Object(m.I)(e);z(t),S(n)},children:[!N&&Object(C.jsxs)("div",{className:"content",children:[Object(C.jsx)(v,{style:{width:"36px",height:"36px"}}),Object(C.jsx)("div",{children:e("ai_face_swap.face")}),Object(C.jsx)("div",{style:{textAlign:"center"},children:e("ai_face_swap.upload_or_drag_image")})]}),N&&Object(C.jsx)("img",{className:"image",src:N})]}),Object(C.jsxs)("div",{className:"target ".concat(H?"dragover":""),onDragEnter:e=>{e.preventDefault(),e.stopPropagation(),P(!0)},onDragOver:e=>{e.preventDefault(),e.stopPropagation(),P(!0)},onDragLeave:e=>{e.preventDefault(),e.stopPropagation(),P(!1)},onDrop:e=>{P(!1),(async e=>{var t;e.preventDefault(),e.stopPropagation();const n=null===e||void 0===e||null===(t=e.dataTransfer)||void 0===t?void 0:t.files[0];if(n){const e=await Object(m.v)(n),t=await Object(m.I)(n);U(e),F(t)}})(e)},onClick:async()=>{const e=await Object(g.a)({mimeTypes:["image/jpg","image/png"],extensions:[".jpg",".jpeg",".png"]}),t=await Object(m.v)(e),n=await Object(m.I)(e);U(t),F(n)},children:[!B&&Object(C.jsxs)("div",{className:"content",children:[Object(C.jsx)(f.a,{style:{width:"32px",height:"32px"}}),Object(C.jsx)("div",{children:e("ai_face_swap.target")}),Object(C.jsx)("div",{style:{textAlign:"center"},children:e("ai_face_swap.upload_or_drag_image")})]}),B&&Object(C.jsx)("img",{className:"image",src:B})]})]}),Object(C.jsx)("div",{className:"right",ref:J,children:T?Object(C.jsxs)(C.Fragment,{children:[Object(C.jsx)(y.a,{ref:u,imageUrl:T,canvasWidth:Z.width,canvasHeight:Z.height}),Object(C.jsxs)("div",{className:"footer-buttons",children:[Object(C.jsx)("div",{className:"button",children:Object(C.jsx)(s.a,{title:e("ai_face_swap.zoom_in"),children:Object(C.jsx)(E.a,{className:"icon",onClick:()=>{var e;return null===(e=u.current)||void 0===e?void 0:e.zoomIn()},style:{color:"#45B017",width:"20px",height:"20px"}})})}),Object(C.jsx)("div",{className:"button",children:Object(C.jsx)(s.a,{title:e("ai_face_swap.zoom_out"),children:Object(C.jsx)(_.a,{className:"icon",onClick:()=>{var e;return null===(e=u.current)||void 0===e?void 0:e.zoomOut()},style:{color:"#45B017",width:"20px",height:"20px"}})})})]})]}):Object(C.jsx)(C.Fragment,{})})]}),Object(C.jsxs)("div",{className:"action-footer",children:[Object(C.jsx)("div",{className:"left",children:e("ai_face_swap.ensure_clear_faces")}),Object(C.jsxs)("div",{className:"right",style:{justifyContent:"flex-end"},children:[T&&Object(C.jsxs)(C.Fragment,{children:[Object(C.jsx)(c.a,{style:{marginRight:"12px"},variant:"outlined",onClick:()=>(async t=>{try{const e=await Object(m.b)(t);x.a.saveAs(e,"image.png"),"dialog"===d&&await Object(M.a)(e)}catch(n){a(e("ai_face_swap.save_failed"),{variant:"error"})}})(T),children:e("editor.download")}),"page"===d&&Object(C.jsx)(c.a,{style:{marginRight:"12px"},variant:"outlined",onClick:async()=>{Object(M.d)(T,"Face Swap")},children:e("editor.edit-image")})]}),Object(C.jsxs)(c.a,{variant:"outlined",color:"primary",disabled:D||!V||!

1R,onClick:X,children:[e("ai_face_swap.face_swap"),Object(C.jsx)(L.a,{style:{width:t.spacing(2.5),height:t.spacing(2.5),margin:"0 8px"}}),4]})]})]})]})}},890:function(e,t,n){"use strict";n.r(t);var a=n(36),i=n(452),r=n(649),s=n(3);t.default=()=>{const e=Object(a.g)();return Object(s.jsx)(i.c,{mode:"page",onClose:()=>{localStorage.removeItem("open-ai-face-swap"),e.push("/design")},children:Object(s.jsx)(r.a,{})})}}}]);