https://app.mahojin.ai/_next/static/chunks/2630.fc32393307d5c4bc.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[2630],{2630:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return y}});var o=n(6393),s=n(65455),i=n(54707),r=n.n(i),l=n(64945);let a=e=>{let{size:t,scale:n=1}=e;return(0,o.jsxs)("div",{style:{position:"relative",width:"".concat(t,"px"),height:"".concat(t,"px")},children:[(0,o.jsx)("div",{style:{width:"".concat(t,"px"),height:"".concat(t,"px"),border:"2px dashed white",borderRadius:"50%",position:"absolute",top:0,left:0}}),(0,o.jsx)("div",{className:"absolute bottom-0 left-0 right-0 top-0 flex items-center justify-center",children:(0,o.jsx)(l.Z,{name:"white_brush",width:Math.min(24/n,24),height:Math.min(36/n,36),style:{transform:"translate(".concat(Math.min(24/n,24)/2,"px, -").concat((Math.min(36/n,36)+8)*.5,"px)")}})})]})};var c=e=>{let{enable:t,scale:n,firstComponent:i,secondComponent:r,onScroll:a,onScrollEnd:c}=e,[d,h]=(0,s.useState)(50),u=(0,s.useRef)(null),m=(0,s.useRef)(null),f=(0,s.useRef)(!1),[p,x]=(0,s.useState)(0),[g,v]=(0,s.useState)(0),w=e=>{if(f.current&&u.current){e.preventDefault();let t=u.current.offsetWidth,o=(e.pageX-u.current.getBoundingClientRect().left+window.scrollX)/n/t*100;h(Math.min(Math.max(o,0),100)),a&&a(Math.min(Math.max(o,0),100))}},b=()=>{f.current=!1,window.removeEventListener("mousemove",w),window.removeEventListener("mouseup",b),c&&c(d)};(0,s.useEffect)(()=>()=>{window.removeEventListener("mousemove",w),window.removeEventListener("mouseup",b)},[]);let j=()=>{u.current&&(x(u.current.offsetWidth),v(u.current.offsetHeight))};return((0,s.useEffect)(()=>{let e=setInterval(j,1e3);return()=>clearInterval(e)},[]),t)?(0,o.jsxs)("div",{className:"relative w-full",style:{userSelect:"none"},children:[(0,o.jsxs)("div",{className:"relative h-full w-full overflow-hidden",ref:u,style:{userSelect:"none"},children:[(0,o.jsx)("div",{className:"z-0 h-full w-auto overflow-hidden",style:{userSelect:"none",pointerEvents:"none"},onLoad:()=>{u.current&&x(u.current.offsetWidth)},children:i}),(0,o.jsx)("div",{className:"z-1 absolute bottom-0 left-0 right-0 top-0 h-full overflow-hidden",style:{width:"".concat(d,"%"),userSelect:"none",pointerEvents:"none"},children:(0,o.jsx)("div",{style:{width:p},children:"function"==typeof r?r({width:p,height:g}):r})}),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)("div",{className:"absolute left-2 top-2 z-10 rounded-[3px] bg-black px-2 text-[10px] font-semibold leading-[1.3] text-white",style:{transform:"scale(".concat(1/n,") translate(0, ").concat((1-n)*8,"px)"),transformOrigin:"top left"},children:"Input"}),(0,o.jsx)("div",{className:"absolute right-2 top-2 z-10 rounded-[3px] bg-white px-2 text-[10px] font-semibold leading-[1.3] text-black",style:{transform:"scale(".concat(1/n,") translate(").concat((n-1)*100,"%, ").concat((1-n)*8,"px)"),transformOrigin:"top left"},children:"Output"})]})]}),(0,o.jsx)("div",{ref:m,className:"absolute top-0 h-full cursor-ew-resize bg-white",style:{left:"calc(".concat(d,"% - 3px)"),width:"2px",zIndex:10},onMouseDown:e=>{f.current=!0,window.addEventListener("mousemove",w),window.addEventListener("mouseup",b),e.preventDefault()},children:(0,o.jsx)("div",{className:"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform cursor-pointer rounded-full bg-white p-2 shadow-lg",style:{zIndex:20,display:"flex",justifyContent:"center",alignItems:"center",width:"36px",height:"36px",transform:"scale(".concat(1/n,")"),left:"calc(".concat(d,"% - 18px)")},children:(0,o.jsx)(l.Z,{width:32,height:32,name:"compare_button"})})})]}):(0,o.jsx)("div",{className:"relative w-full",children:(0,o.jsx)("div",{className:"h-full w-full",children:i})})},d=n(77716),h=e=>{let{cursorRenders:t=[],scale:n=1}=e,[i,r]=(0,d.q_)(()=>({x:0,y:0,config:{tension:300,friction:30}}

1)),[l,a]=(0,s.useState)(null),c=(0,s.useRef)({});(0,s.useEffect)(()=>{c.current=t.reduce((e,t)=>(e[t.targetId]=t.cursor,e),{});let e=e=>{requestAnimationFrame(()=>{let t=e.clientX,n=e.clientY;r.start({x:t,y:n,immediate:!0})})},n=e=>{let t=e.target.closest("[id]");t&&c.current[t.id]&&a(c.current[t.id]({scale:1}))},o=()=>{a(null)};return document.addEventListener("mousemove",e),document.addEventListener("mouseover",n),document.addEventListener("mouseout",o),()=>{document.removeEventListener("mousemove",e),document.removeEventListener("mouseover",n),document.removeEventListener("mouseout",o)}},[r,t]);let h=s.useMemo(()=>l?s.cloneElement(l,{scale:n}):null,[l,n]);return(0,o.jsx)(d.q.div,{style:{position:"fixed",left:i.x,top:i.y,transform:i.x.to(e=>"translate(-50%, -50%) scale(".concat(n,")")),pointerEvents:"none",zIndex:1e3},children:h})};let u=e=>{let{scale:t,children:n,onResizeStart:i,onResizeEnd:r,onDimensionsChange:l}=e,[a,c]=(0,s.useState)({width:0,height:0,top:0,left:0}),d=(0,s.useRef)(null);(0,s.useEffect)(()=>{let e=setInterval(()=>{if(d.current){let{offsetWidth:e,offsetHeight:t}=d.current;c(n=>0==n.width&&0==n.height?{...n,width:e,height:t}:n)}},500);return()=>clearInterval(e)},[]);let h=(e,n)=>{e.preventDefault(),null==i||i();let o=e.clientX,s=e.clientY,{width:h,height:u,top:m,left:f}=a,p=e=>{let i=(e.clientX-o)/(null!=t?t:1),r=(e.clientY-s)/(null!=t?t:1);c(e=>{var t,o;let s={...e},a=(null===(t=d.current)||void 0===t?void 0:t.offsetWidth)||0,c=(null===(o=d.current)||void 0===o?void 0:o.offsetHeight)||0;switch(n){case"top":u-r<c?(s.height=c,s.top=m+u-c):(s.height=Math.max(100,u-r),s.top=m+r);break;case"right":h+i<a?s.width=a:s.width=Math.max(100,h+i);break;case"bottom":u+r<c?s.height=c:s.height=Math.max(100,u+r);break;case"left":h-i<a?(s.width=a,s.left=f+h-a):(s.width=Math.max(100,h-i),s.left=f+i);break;case"top-left":u-r<c?(s.height=c,s.top=m+u-c):(s.height=Math.max(100,u-r),s.top=m+r),h-i<a?(s.width=a,s.left=f+h-a):(s.width=Math.max(100,h-i),s.left=f+i);break;case"top-right":u-r<c?(s.height=c,s.top=m+u-c):(s.height=Math.max(100,u-r),s.top=m+r),h+i<a?s.width=a:s.width=Math.max(100,h+i);break;case"bottom-left":u+r<c?s.height=c:s.height=Math.max(100,u+r),h-i<a?(s.width=a,s.left=f+h-a):(s.width=Math.max(100,h-i),s.left=f+i);break;case"bottom-right":u+r<c?s.height=c:s.height=Math.max(100,u+r),h+i<a?s.width=a:s.width=Math.max(100,h+i)}return null==l||l({width:Math.floor(s.width),height:Math.floor(s.height),top:s.top,left:s.left}),s})},x=()=>{window.removeEventListener("mousemove",p),window.removeEventListener("mouseup",x),null==r||r()};window.addEventListener("mousemove",p),window.addEventListener("mouseup",x)},{width:u,height:m,top:f,left:p}=a;return(0,o.jsxs)("div",{className:"relative",children:[(0,o.jsx)("div",{ref:d,style:{display:"inline-block"},children:n}),u>0&&m>0&&(0,o.jsx)("div",{style:{top:"".concat(f,"px"),left:"".concat(p,"px"),width:"".concat(u,"px"),height:"".concat(m,"px"),borderWidth:"".concat(t?1/t:1,"px")},className:"absolute z-0 border border-blue-500 bg-transparent",children:[{direction:"top-left",style:{top:0,left:0,cursor:"nw-resize"}},{direction:"top-right",style:{top:0,right:0,cursor:"ne-resize"}},{direction:"bottom-left",style:{bottom:0,left:0,cursor:"sw-resize"}},{direction:"bottom-right",style:{bottom:0,right:0,cursor:"se-resize"}},{direction:"top",style:{top:0,left:"50%",transform:"translateX(-50%)",cursor:"n-resize"}},{direction:"right",style:{top:"50%",right:0,transform:"translateY(-50%)",cursor:"e-resize"}},{direction:"bottom",style:{bottom:0,left:"50%",transform:"translateX(-50%)",cursor:"s-resize"}},{direction:"left",style:{top:"50%",left:0,transform:"translateY(-50%)",cursor:"w-resize"}}].map(e=>{let{direction:n,style:s}=e;return(0,o.jsx)("div",{onMouseDown:e=>h(e,n),className:"absolute z-10 h-2 w-2 border border-blue-500 bg-white",style:{...s,width:"".concat(t?6/t:6,"px"),height:"".concat(t?6/t:6,"px")}},n)})})]})};var m=e=>e.disabled?(0,o.jsx)(o.Fragment,{children:e.children}):(0,o.jsx)(u,{...e}),f=n(64747),p=n(48702),x=n(13887),g=n(2532);let v=e=>

1{let{imageBase64:t,strokeWidth:n=10,strokeColor:i="red",strokeOpacity:r=.5,onMaskChange:l,onPaintingStart:a,onPaintingEnd:c,className:d}=e,[h,u]=(0,s.useState)(!0),[m,f]=(0,s.useState)(null),[v,w]=(0,s.useState)([]),[b,j]=(0,s.useState)(!1),[y]=(0,s.useState)("paint"),[E,M]=(0,s.useState)({width:0,height:0}),N=(0,s.useRef)(null),S=async()=>{try{u(!0);let e=new window.Image;if(null==t?void 0:t.includes("output_format=stream")){let n=await (0,x.Nw)(t);e.src="data:image/png;base64,".concat(n)}else e.src=t;e.onload=()=>{f(e),u(!1),M({width:e.width,height:e.height})}}catch(e){console.error("Failed to load image",e),u(!1)}};(0,s.useEffect)(()=>{S()},[t]),(0,s.useEffect)(()=>{w(v.map(e=>({...e,color:i,opacity:r})))},[i,r]);let z=e=>{w(v.filter(t=>!t.points.some(t=>Math.sqrt(Math.pow(t.x-e.x,2)+Math.pow(t.y-e.y,2))<n)))},k=()=>{let e=document.createElement("canvas");e.width=E.width,e.height=E.height;let t=e.getContext("2d");if(t)return t.fillStyle="rgba(0, 0, 0, 0)",t.fillRect(0,0,e.width,e.height),v.forEach(e=>{t.beginPath(),t.moveTo(e.points[0].x,e.points[0].y),e.points.forEach(e=>{t.lineTo(e.x,e.y)}),t.strokeStyle="black",t.lineWidth=n,t.lineCap="round",t.lineJoin="round",t.globalAlpha=1,t.stroke()}),e.toDataURL()},C=()=>{let e=k();null==l||l(e||"")};return((0,s.useEffect)(()=>{C()},[v]),h)?(0,o.jsx)("div",{children:(0,o.jsx)(g.a,{})}):(0,o.jsxs)("div",{id:"inpainting",className:"relative",children:[(0,o.jsx)(p.Hf,{width:E.width,height:E.height,ref:N,onMouseDown:e=>{var t;j(!0),null==a||a();let n=null===(t=e.target.getStage())||void 0===t?void 0:t.getPointerPosition();n&&("erase"===y?z(n):w([...v,{points:[n],color:i,opacity:r}]))},onMouseMove:e=>{if(!b)return;let t=e.target.getStage(),n=null==t?void 0:t.getPointerPosition();if(n){let e=[...v],t=e[e.length-1];"erase"===y?z(n):(t.points.push(n),w(e))}},onMouseUp:()=>{j(!1),null==c||c()},onMouseEnter:()=>{N.current&&(N.current.container().style.cursor="crosshair")},onMouseLeave:()=>{N.current&&(N.current.container().style.cursor="default")},children:(0,o.jsxs)(p.mh,{children:[m&&(0,o.jsx)(p.Ee,{image:m,className:d}),v.map((e,t)=>(0,o.jsx)(p.x1,{points:e.points.flatMap(e=>[e.x,e.y]),stroke:e.color,strokeWidth:n,opacity:e.opacity,lineCap:"round",lineJoin:"round"},t))]})}),(0,o.jsx)("div",{className:"absolute right-0 top-0 p-4"})]})};var w=e=>e.disabled?e.imageBase64.includes("output_format=stream")?(0,o.jsx)(x.ef,{className:null==e?void 0:e.className,streamURL:e.imageBase64}):(0,o.jsx)("img",{src:e.imageBase64,className:null==e?void 0:e.className}):(0,o.jsx)(v,{...e}),b=n(22002);let j=e=>{let{zoomPercentage:t,position:n}=e,i=(0,b.T)("ZoomComponent"),{zoomIn:a,zoomOut:c,resetTransform:d,centerView:h}=(0,f.M4)();return(0,s.useEffect)(()=>{let e=setTimeout(()=>{h()},1e3);return()=>clearTimeout(e)},[t,n,h]),(0,o.jsx)("div",{className:r().bottomrightdiv,style:{right:0},children:(0,o.jsxs)("div",{className:"flex h-14 w-[230px] items-center justify-center gap-4 roun

1ded-[34px] border border-white-alpha-15 bg-[#2B2B2B] px-6 text-[13px] font-normal leading-[16.9px] text-white",children:[(0,o.jsx)("span",{className:"flex h-10 w-10 ".concat(t>20?"cursor-pointer":"cursor-not-allowed"," items-center justify-center"),onClick:()=>c(),children:(0,o.jsx)(l.Z,{disabled:20===t,width:24,height:24,name:"zoom_out"})}),(0,o.jsxs)("span",{className:"text-[16px]",children:[t,"%"]}),(0,o.jsx)("span",{className:"flex h-10 w-10 ".concat(t<200?"cursor-pointer":"cursor-not-allowed"," items-center justify-center"),onClick:()=>a(),children:(0,o.jsx)(l.Z,{disabled:200===t,width:24,height:24,name:"zoom_in"})}),(0,o.jsx)("span",{onClick:()=>d(),className:"cursor-pointer text-[16px]",children:i("reset")})]})})};function y(e){var t,n,i;let{src:r,inputImageUrl:l,compareEnabled:d,onOutpaintingParamsChange:u,selectedTool:p,onMaskBase64Change:x,inpaintingControlParams:g}=e,[,v]=(0,s.useState)(!1),[b,y]=(0,s.useState)(100),[E,M]=(0,s.useState)(1),[N,S]=(0,s.useState)({x:0,y:0}),[z,k]=(0,s.useState)(!0);return console.log("inputImageUrl",l),(0,o.jsxs)(f.d$,{onTransformed:e=>{y(Math.round(100*e.state.scale)),M(e.state.scale)},onZoomStart:()=>v(!0),onZoomStop:()=>v(!1),minScale:.2,maxScale:2,panning:{disabled:!z},onPanning:e=>{e&&S({x:e.state.positionX,y:e.state.positionY})},children:[(0,o.jsx)(f.Uv,{wrapperStyle:{display:"flex",width:"100%",height:"100%",justifyContent:"center ",cursor:d?"default":"grab"},contentStyle:{width:"100%",height:"100%",display:"flex",justifyContent:"center"},children:(0,o.jsx)("div",{className:"relative flex h-full w-full items-center justify-center bg-[#161616]",children:(0,o.jsx)("div",{children:(0,o.jsx)(c,{scale:E,enable:d,onScroll:()=>{k(!1)},onScrollEnd:()=>{k(!0)},firstComponent:(0,o.jsx)(o.Fragment,{children:(0,o.jsx)(m,{scale:E,onResizeStart:()=>k(!1),onResizeEnd:()=>k(!0),disabled:"OUTPAINTING"!==p,onDimensionsChange:e=>{null==u||u({size:e})},children:(0,o.jsx)(w,{imageBase64:r,disabled:"INPAINTING"!==p,strokeColor:null!==(t=null==g?void 0:g.color)&&void 0!==t?t:"#000000",strokeWidth:null!==(n=null==g?void 0:g.brush_size)&&void 0!==n?n:10,strokeOpacity:null!==(i=null==g?void 0:g.opacity)&&void 0!==i?i:.5,className:"z-0 object-contain",onPaintingStart:()=>k(!1),onPaintingEnd:()=>k(!0),onMaskChange:e=>{null==x||x(e)}})})}),secondComponent:e=>{let{width:t,height:n}=e;return(0,o.jsx)(o.Fragment,{children:(0,o.jsx)("img",{alt:"",src:l,className:"object-contain",style:{width:"".concat(t,"px"),height:"".concat(n,"px")}})})}})})})}),(0,o.jsx)(j,{zoomPercentage:b,position:N}),(0,o.jsx)(h,{scale:E,cursorRenders:[{targetId:"inpainting",cursor:e=>{let{scale:t}=e;return(0,o.jsx)(a,{size:g.brush_size/t,scale:t})}}]})]})}},54707:function(e){e.exports={container:"ZoomComponent_container__W8cmu",bottomrightdiv:"ZoomComponent_bottomrightdiv__4VVzx"}}}]);