https://product-photography.vercel.app/_next/static/chunks/pages/design-0bbc51e7451f0924.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[71],{384:function(e,t,s){(window.__NEXT_P=window.__NEXT_P||[]).push(["/design",function(){return s(3977)}])},3977:function(e,t,s){"use strict";s.r(t),s.d(t,{default:function(){return j}});var a=s(5893),l=s(7294);let i=()=>(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)("svg",{className:"main-wand",id:"Layer_1","data-name":"Layer 1",xmlns:"http://www.w3.org/2000/svg",width:"80",height:"80",viewBox:"0 0 103.84 103.6",children:[(0,a.jsx)("path",{className:"stars1",d:"M57.31,33.38a6.11,6.11,0,0,1-6.1-6.1,1.41,1.41,0,0,0-2.82,0,6.11,6.11,0,0,1-6.1,6.1,1.41,1.41,0,0,0,0,2.82,6.11,6.11,0,0,1,6.1,6.1,1.41,1.41,0,1,0,2.82,0,6.11,6.11,0,0,1,6.1-6.1,1.41,1.41,0,0,0,0-2.82Zm-7.51,4.13a9,9,0,0,0-2.72-2.72,9,9,0,0,0,2.72-2.72,9,9,0,0,0,2.72,2.72A9,9,0,0,0,49.79,37.51Z",transform:"translate(-5.74 -5.74)"}),(0,a.jsx)("path",{className:"stars2",d:"M87.82,50.75a2.35,2.35,0,0,1-2.35-2.35,1.41,1.41,0,1,0-2.82,0,2.35,2.35,0,0,1-2.35,2.35,1.41,1.41,0,1,0,0,2.82,2.35,2.35,0,0,1,2.35,2.35,1.41,1.41,0,1,0,2.82,0,2.35,2.35,0,0,1,2.35-2.35,1.41,1.41,0,1,0,0-2.82Zm-3.76,2.44-.92-.92.92-.92.92.92Z",transform:"translate(-5.74 -5.74)"}),(0,a.jsx)("path",{className:"stars3",d:"M82.66,69.38a6.11,6.11,0,0,1-6.1-6.1,1.41,1.41,0,0,0-2.82,0,6.11,6.11,0,0,1-6.1,6.1,1.41,1.41,0,1,0,0,2.82,6.11,6.11,0,0,1,6.1,6.1,1.41,1.41,0,1,0,2.82,0,6.11,6.11,0,0,1,6.1-6.1,1.41,1.41,0,0,0,0-2.82Zm-7.51,4.13a9,9,0,0,0-2.72-2.72,9,9,0,0,0,2.72-2.72,9,9,0,0,0,2.72,2.72A9,9,0,0,0,75.15,73.51Z",transform:"translate(-5.74 -5.74)"}),(0,a.jsx)("path",{className:"stars4",d:"M79,27.15A2.35,2.35,0,0,1,76.6,24.8a1.41,1.41,0,1,0-2.82,0,2.35,2.35,0,0,1-2.35,2.35,1.41,1.41,0,1,0,0,2.82,2.35,2.35,0,0,1,2.35,2.35,1.41,1.41,0,0,0,2.82,0A2.35,2.35,0,0,1,79,30a1.41,1.41,0,0,0,0-2.82ZM75.2,29.58l-.92-.92.92-.92.92.92Z",transform:"translate(-5.74 -5.74)"}),(0,a.jsx)("path",{className:"wandfill",d:"M33,83.24,60.91,55.36,58.25,52.7,30.37,80.59A1.88,1.88,0,1,0,33,83.24Z",transform:"translate(-5.74 -5.74)"}),(0,a.jsx)("path",{className:"wand",d:"M72.86,40.74a5.63,5.63,0,0,0-8,0L53.48,52.16,27.72,77.93a5.63,5.63,0,0,0,8,8L64.35,57.23l8.52-8.52A5.63,5.63,0,0,0,72.86,40.74ZM33,83.24a1.88,1.88,0,0,1-2.66-2.66L58.25,52.7l2.66,2.66ZM70.2,46.06,63.56,52.7,60.9,50l6.65-6.63a1.88,1.88,0,0,1,2.65,2.65Z",transform:"translate(-5.74 -5.74)"})]}),(0,a.jsx)("div",{className:"spinner"})]}),n=e=>(0,a.jsx)("div",{className:"flex flex-col w-full justify-center my-4",children:(0,a.jsxs)("div",{className:"flex justify-center items-center w-full ",children:[e.preview&&(0,a.jsx)("div",{className:"w-2/3",children:(0,a.jsxs)("div",{className:"border-2 border-gray-100 bg-black",children:[e.showProgess&&e.preloaderCondition&&(0,a.jsx)("div",{className:"flex flex-col items-center h-full",children:(0,a.jsxs)("div",{className:"absolute z-50 h-96 w-2/5 flex items-center justify-center flex-col",children:[(0,a.jsx)("p",{className:"text-white absolute bottom-48 font-inter text-xl animate-pulse font-semibold",children:"Generating your image ... It can take upto 30 seconds "}),(0,a.jsx)("span",{className:"bg-black"})]})}),e.showProgess&&!e.preloaderCondition&&(0,a.jsx)("div",{className:"flex flex-col items-center",children:(0,a.jsxs)("div",{className:"absolute z-50 h-80 w-2/5 flex items-center justify-center",children:[(0,a.jsx)(i,{}),(0,a.jsx)("p",{className:"text-white text-lg mt-32 font-semibold",children:"Segmenting your image"})]})}),(0,a.jsx)("img",{src:e.preview,className:"mx-auto w-auto max-w-full max-h-[24rem] min-h-96 object-contain"})]})}),!e.preview&&(0,a.jsxs)("div",{htmlFor:"drop file",...e.getRootProps(),className:" flex flex-col w-2/3 border border-white border-dashed bg-black h-96 items-center justify-center",children:[(0,a.jsx)("svg",{"aria-hidden":"true",className:"mb-3 w-10 h-10 text-gray-400",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:(0,a.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",d:"M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"})}),(0,a.jsxs)("p",{className:"mb-2 text-lg text-gray-400 ",children:[(0,a.jsx)("span",{className:"font-semibold",children:"Click to upload"})," or drag and drop an Image"]}),(0,a.jsx)("p",{className:"text-sm text-gray-400 ",children:"Upload an Image file (size limit 2 mb)"}),(0,a.jsxs)("div",{className:"mt-4",children:[(0,a.jsx)("p",{className:"text-sm ml-12 text-gray-400 text-left ",children:"For best results, please make sure "}),(0,a.jsxs)("ul",{className:"list-disc ml-16 text-gray-400 text-left",children:[(0,a.jsx)("li",{children:(0,a.jsx)("p",{className:"text-xs ",children:"The product is placed in your image, where you want it in final image. "})}),(0,a.jsx)("li",{children:(0,a.jsx)("p",{className:"text-xs ",children:"The picture is 

1well lit and details are properly visible."})})]})]}),(0,a.jsx)("input",{...e.getInputProps(),id:"drop file",type:"file",className:"hidden"})]})]})});var r=s(1664),o=s.n(r);let c=e=>(0,a.jsx)("div",{children:(0,a.jsxs)("div",{className:"fixed top-0 left-0 right-0 bg-black z-50",children:[(0,a.jsxs)("div",{className:"flex justify-between bg-black text-xl h-10 py-2 ",children:[(0,a.jsx)("div",{className:"flex justify-left items-center w-1/3",children:(0,a.jsx)(o(),{href:"/",children:(0,a.jsx)("div",{className:"ml-4 text-lg company_heading font-inter uppercase cursor-pointer font-bold",children:"Photostudio"})})}),(0,a.jsx)("div",{className:"flex justify-center items-center w-1/3 text-base px-2",children:(0,a.jsx)("div",{className:"ml-4 text-lg font-semibold font-be-vietnam uppercase text-gray-300 cursor-pointer flex items-center gap-2",children:"Design Product Images"})}),(0,a.jsx)("div",{className:"flex justify-end items-center w-1/3 mx-auto text-lg ",children:(0,a.jsx)("button",{onClick:e.handleReset,type:"button",className:" mx-4 text-base font-extralight font-inter py-1 px-4 bg-[#292A2F] text-gray-400 hover:text-white rounded-sm",children:"Reset"})})]}),(0,a.jsx)("div",{className:"relative flex items-center",children:(0,a.jsx)("div",{className:"flex-grow border-t border-1/2 border-gray-400 opacity-50"})})]})});var d=s(8523),m=s(6455),u=s.n(m),h=s(9303),x=s.n(h),g=s(5155),f=s(1120),p=s.n(f);let b=e=>{let t=(0,l.useRef)(null),[s,i]=(0,l.useState)(null);(0,l.useEffect)(()=>{if(e.selectedImage){let t=new Image;t.src=e.selectedImage,t.onload=()=>i(t)}},[e.selectedImage]),(0,l.useEffect)(()=>{if(s&&t){let a=t.current.getContext("2d");a.fillRect(0,0,e.selectedImageDimensions.width,e.selectedImageDimensions.height),a.drawImage(s,0,0,e.selectedImageDimensions.width,e.selectedImageDimensions.height),console.log("Drawing")}},[s,t]);let n=(e,t)=>{if("undefined"!=typeof window){let s=window.document.createElement("a");s.style="display:none;",s.download=t,s.href=e,document.body.appendChild(s),s.click(),document.body.removeChild(s),s.remove()}},r=async(e,t)=>{let s=await p()(e),a=s.toDataURL("image/png",1);n(a,t)};return(0,a.jsxs)("div",{className:"w-full flex flex-col gap-4 justify-center items-center",children:[(0,a.jsx)("canvas",{ref:t,width:e.selectedImageDimensions.width,height:e.selectedImageDimensions.height,className:"border-white border",crossOrigin:"anonymous"}),(0,a.jsxs)("div",{className:"flex w-1/2 mx-auto items-center justify-center gap-4",children:[(0,a.jsx)("button",{onClick:e.handleBackClick2,type:"button",className:" mx-4 text-base font-extralight font-inter py-2 px-4 bg-[#292A2F] text-gray-400 hover:text-white rounded-sm",children:"Back"}),(0,a.jsx)("button",{onClick:()=>r(t.current,"test"),type:"button",className:" mx-4 text-base font-extralight font-inter py-2 px-4 bg-purple-800 hover:bg-purple-600 text-gray-200 hover:text-white rounded-sm",children:"Download"})]})]})},w=e=>{let{resultSrc:t}=e;return(0,a.jsx)("div",{className:"flex flex-col w-full justify-center my-4",children:(0,a.jsx)("div",{className:"flex justify-center items-center w-full ",children:(0,a.jsx)("div",{className:" w-2/3 ",children:(0,a.jsx)("img",{src:t,alt:"Output image",className:"mx-auto w-auto max-w-full max-h-[36rem] object-contain"})})})})};function j(){let[e,t]=(0,l.useState)(null),[s,i]=(0,l.useState)(null),[r,o]=(0,l.useState)({init_image_base64:"",withoutbg_image_base64:"",prompt_string:"",regenerate:!1}),[m,h]=(0,l.useState)(!1),[f,p]=(0,l.useState)(!1),[j,v]=(0,l.useState)(!1),[y,N]=(0,l.useState)([]),[_,k]=(0,l.useState)(0),[C,I]=(0,l.useState)(null),[P,D]=(0,l.useState)({width:500,height:500}),S=e=>{e.preventDefault(),console.log("Generate button clicked"),console.log("inputs : ",r),h(!0),v(!0),console.log("progress set to true!");let t={init_image_base64:r.init_image_base64,withoutbg_image_base64:r.withoutbg_image_base64,prompt:r.prompt_string+" 8k, studio photography, realistic , studio lighting "};if(console.log(t),t.init_image_base64&&t.init_image_base64.length>0&&t.withoutbg_image_base64&&t.withoutbg_image_base64.length>0&&t.prompt&&t.prompt.length>0)for(var s=0;s<4;s++)R(t)};async function R(e){console.log("Data to send ",e);let t=await fetch("/api/fetchImage",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(e)});if(200==t.status){let s=await t.json();console.log("Data from API ",s),N(e=>[...e,s.imageUrl]),v(!1),p(!0),h(!1)}

1else u().fire("Error","Something went wrong! Please try again.Error in fetching image","error"),v(!1),h(!1)}function L(e){if(e)return new Promise((t,s)=>{let a=new FileReader;a.onloadend=()=>t(a.result),a.readAsDataURL(e)})}async function A(e){v(!0);let s=await x()(e,{maxWidth:1500,maxHeight:1500,canvas:!0});s.image.toBlob(async function(s){let a=null,l=new FormData;l.append("image_file",s);let i=await fetch("https://sdk.photoroom.com/v1/segment",{method:"POST",headers:{"X-Api-Key":"f696e3b4020531d322f18fccbc681b5ef2075859"},body:l});if(200==i.status){let n=await i.blob(),c=e.type;var d="";c.includes("png")?(console.log("init_image_base64 in png : ",(d=await L(e)).substring(22)),d=d.substring(22)):d=(d=await new Promise((t,s)=>{let a=new FileReader;a.readAsDataURL(e),a.onload=()=>t(a.result),a.onerror=e=>s(e)})).substring(23);let m=await L(n);o({...r,init_image_base64:d,withoutbg_image_base64:m.substring(22)}),a=URL.createObjectURL(n),v(!1),t(a)}else v(!1),u().fire("Error!","There was an error while segmenting the image.","error")})}let{getRootProps:F,getInputProps:Z}=(0,d.uI)({accept:"image/*",onDrop(e){console.log("Uploaded file : ",e[0]),i(e[0]),t(URL.createObjectURL(e[0])),A(e[0])}}),E=()=>{0!=_&&k(_-1)},M=()=>{_!=y.length-1&&k(_+1)},U=()=>{I("data:image/png;base64,".concat(y[_])),o({...r,prompt_string:""})},O=()=>{i(null),t(null),I(null),N([]),p(!1),k(0),o({prompt_string:""})},T=()=>{p(!1),k(0),N([])},z=()=>{I(null)};return(0,a.jsxs)("div",{className:"bg-[#101110] h-auto min-h-screen overflow-hidden scrollbar-hide",children:[(0,a.jsx)(c,{handleReset:O}),(0,a.jsx)("div",{className:" h-full pt-20 flex justify-center items-center ",children:f?(0,a.jsx)(a.Fragment,{children:(0,a.jsx)("div",{className:"flex flex-col gap-2 ",children:C?(0,a.jsx)(b,{selectedImageDimensions:P,selectedImage:C,inputs:r,setInputs:o,preloaderCondition:m,setshowProgress:v,showProgess:j,handleBackClick2:z}):(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(w,{resultSrc:"data:image/png;base64,"+y[_]}),(0,a.jsx)("div",{className:"flex items-center justify-center w-full mx-auto ",children:(0,a.jsxs)("div",{className:"bg-indigo-600 flex rounded-md gap-2",children:[(0,a.jsx)("button",{type:"button",className:"p-2 hover:bg-indigo-400 hover:rounded-md cursor-pointer text-white",onClick:U,children:"Accept"}),(0,a.jsx)("button",{type:"button",className:"p-2 hover:bg-indigo-400 rounded-lg cursor-pointer ",onClick:E,children:(0,a.jsx)(g.o8k,{size:24,color:"white"})}),(0,a.jsx)("div",{className:"p-2 rounded-md bg-indigo-600 text-white font-semibold",children:"".concat(_+1,"/").concat(y.length)}),(0,a.jsx)("button",{type:"button",className:"p-2 hover:bg-indigo-400 rounded-lg cursor-pointer ",onClick:M,children:(0,a.jsx)(g.zSJ,{size:24,color:"white"})}),(0,a.jsxs)("button",{type:"button",className:"p-2 hover:bg-indigo-400 hover:rounded-md cursor-pointer text-white",onClick:T,children:[" ","Back"]})]})})]})})}):(0,a.jsx)(a.Fragment,{children:(0,a.jsxs)("div",{className:"flex flex-col w-full justify-center items-center ",children:[(0,a.jsx)(n,{preloaderCondition:m,getRootProps:F,getInputProps:Z,file:s,preview:e,setFile:i,showProgess:j,setshowProgress:v}),(0,a.jsx)("div",{className:"flex flex-col gap-2 mt-2 items-center w-2/3 mx-auto justify-center ",children:(0,a.jsx)("div",{className:"flex gap-4 w-full",children:(0,a.jsx)("div",{className:" border-white w-full mx-1 ",children:(0,a.jsx)("textarea",{className:" text-lg border border-white pl-1 w-full h-full bg-black text-white",type:"text",placeholder:" Describe what you want...",value:r.prompt_string,onChange:e=>o({...r,prompt_string:e.target.value}),required:!0})})})}),(0,a.jsx)("div",{className:"mt-12 w-full mx-auto flex items-center justify-center",children:(0,a.jsx)("button",{onClick:S,type:"submit",className:"w-2/3 mx-auto text-white text-2xl bg-gradient-to-l active:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-300   from-purple-500 to-blue-500  hover:from-purple-900 hover:to-blue-900 rounded-md py-3  font-semibold",children:"Generate"})})]})})})]})}}},function(e){e.O(0,[158,443,664,669,774,888,179],function(){return e(e.s=384)}),_N_E=e.O()}]);