https://cdn.hifer.ai/static/1791160896898/_next/static/chunks/8451.510e07dd04110151.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[8451],{88451:(e,t,n)=>{n.d(t,{Af:()=>I,B0:()=>y,Ly:()=>A,ns:()=>w,qx:()=>v});var r=n(95155),l=n(12115),i=n(47650),a=n(42196),o=n(18955),s=n(93282),u=n(71677),d=n(51165),c=n(94179),f=n(99159),g=n(93548);let v="creationImage";function m(e){return e instanceof Element&&!!e.closest('[data-image-card-hover-preview-ignore="true"]')}function h(e){var t;return Array.isArray(null==e||null==(t=e.data)?void 0:t.imageInfoList)?e.data.imageInfoList:[]}function p(e){var t;let n="string"==typeof(null==e?void 0:e.generationStatus)?e.generationStatus.trim():"";if(n)return n;let r=(t=e.nodeSnapshot,(0,f.Bp)(t));return r.some(e=>(null==e?void 0:e.type)==="image"&&(null==e?void 0:e.status)==="running")?"running":r.some(e=>(null==e?void 0:e.type)==="image"&&(null==e?void 0:e.status)==="failed")?"failed":"completed"}function b(e){var t,n;let r=(null==e||null==(t=e.data)?void 0:t.generationError)||(null==e||null==(n=e.data)?void 0:n.generationErrorMessage);return"string"==typeof r&&r.trim()?r.trim():null}function E(e){return(Array.isArray(null==e?void 0:e.list)?e.list:Array.isArray(e)?e:[]).filter(e=>"string"==typeof(null==e?void 0:e.id)&&e.id&&(null==e?void 0:e.nodeSnapshot))}async function w(e){return(0,f.Od)({token:e,endpoint:"/web/save/NodeFavoritePendingCreationImageList",pageSize:100,errorCode:"CREATION_IMAGE_FAVORITE_RECOVERY_FAILED",normalize:E})}function y(e){return(null==e?void 0:e.originType)===v}function I(e){return!!e&&!!y(e)&&"running"===p(e)}function x(e){let{runtime:t,className:n="",showError:o=!0,cardFrame:s,renderCardActions:d,showHoverPreview:f=!1,onImageDragStart:g}=e,[v,h]=(0,l.useState)([]),[p,b]=(0,l.useState)(!1),[E,w]=(0,l.useState)(null),y=(0,l.useRef)(null),I=(0,l.useRef)(null),x=(0,l.useRef)({x:0,y:0}),A=(0,l.useRef)(null),S=(0,l.useMemo)(()=>t.imageInfoList.map(e=>"string"==typeof(null==e?void 0:e.key)?e.key.trim():"").filter(Boolean).filter((e,t,n)=>n.indexOf(e)===t),[t.imageInfoList]),k=(0,l.useMemo)(()=>{var e,n;if(S.length>0)return S;let r=null==(n=t.favorite.nodeSnapshot)||null==(e=n.data)?void 0:e.inputImageInfoList,l=Array.isArray(r)?r.find(e=>"string"==typeof(null==e?void 0:e.key)&&e.key.trim()):null,i="string"==typeof(null==l?void 0:l.key)?l.key.trim():"";return i?[i]:[]},[S,t.favorite.nodeSnapshot]),_="completed"===t.generationStatus&&S.length>0&&v[0]||"",N=(0,l.useCallback)((e,t)=>{let n=Math.max(96,Math.min(480,window.innerWidth-32,window.innerHeight-32));return{left:Math.max(16,Math.min(e+14,window.innerWidth-n-16)),top:Math.max(16,Math.min(t+14,window.innerHeight-n-16)),size:n}},[]),M=(0,l.useCallback)(()=>{null!==I.current&&(window.clearTimeout(I.current),I.current=null),A.current=null,w(null)},[]),R=(0,l.useCallback)((e,t)=>{f&&_&&!(window.innerWidth<640)&&(x.current={x:e,y:t},null===I.current&&(A.current=_,I.current=window.setTimeout(()=>{let e=A.current;if(!e)return;let{x:t,y:n}=x.current;w({src:e,...N(t,n)}),I.current=null},500)))},[N,_,f]),L=(0,l.useCallback)(e=>{if(m(e.target))return void M();M(),R(e.clientX,e.clientY)},[M,R]),O=(0,l.useCallback)(e=>{if(f&&_){if(window.innerWidth<640||m(e.target))return void M();x.current={x:e.clientX,y:e.clientY},E||R(e.clientX,e.clientY),w(t=>t?{...t,...N(e.clientX,e.clientY)}:t)}},[M,N,E,_,R,f]);(0,l.useEffect)(()=>{f||M()},[M,f]),(0,l.useEffect)(()=>()=>{null!==I.current&&window.clearTimeout(I.current),A.current=null},[]),(0,l.useEffect)(()=>{let e=y.current;if(!e||"undefined"==typeof IntersectionObserver)return void b(!0);let t=new IntersectionObserver(e=>{e.some(e=>e.isIntersecting)&&(b(!0),t.disconnect())},{rootMargin:"240px"});return t.observe(e),()=>t.disconnect()},[]),(0,l.useEffect)(()=>{let e=!1,t=[];if(h([]),p&&0!==k.length)return Promise.all(k.map(e=>u.hC.getImage(e).catch(()=>null))).then(n=>{let r=n.filter(e=>"string"==typeof e&&e.length>0);if(e)return void r.forEach(e=>{e.startsWith("blob:")&&URL.revokeObjectURL(e)});t=r,h(r)}),()=>{e=!0,t.forEach(e=>{e.startsWith("blob:")&&URL.revokeObjectURL(e)})}},[k,p]);let j=(0,r.jsxs)("div",{ref:y,className:"relative h-full w-full overflow-hidden ".concat(n),children:[v.length>0?(0,r.jsx)("div",{className:"grid h-full w-full gap-px bg-black ".concat(1===v.length?"grid-cols-1":"grid-cols-2"),style:v.length>1?{gridTemplateRows:"repeat(".concat(Math.ceil(v.length/2),", minmax(0, 1fr))")}:void 0,children:v.map((e,t)=>{let n=!!(_&&g);return(0,r.jsx)("img",{src:e,alt:"",className:"h-full w-full min-h-0 min-w-0 object-cover ".concat(n?"cursor-grab active:cursor-grabbing":""),draggable:n,onDragStart:n?t=>{M(),null==g||g(t,e)}:void 0},"".concat(e,"-").concat(t))})}):(0,r.jsx)("div",{className:"absolute inset-0 flex items-center justify-center bg-black/20 text-white/30",children:(0,r.jsx)(a.A,{className:"h-8 w-8","aria-hidden":"true"})}),t.isProcessing&&(0,r.jsx)(c.Xf,{msg:t.progressMessage,wrap:!0}),o&&t.errorMessage&&(0,r.jsx)("div",{className:v.length>0?"absolute inset-x-0 bottom-0 z-[111] flex max-h-[50%] items-center justify-center overflow-y-auto bg-black/90 p-2":"absolute inset-0 z-[111] flex items-center justify-center bg-black/80 p-4",children:(0,r.jsx)("p",{className:"w-full break-words text-center text-xs text-red-300",children:t.errorMessage})})]});if(!s)return j;let{width:C,height:T,containerClassName:F="",buttonClassName:D="",buttonAriaLabel:G,buttonDisabled:U=!1,selected:P=!1,onClick:z,onMouseEnter:W,onMouseMove:H,onMouseLeave:X,timeText:Y,timeClassName:B="",controls:V,overlay:J}=s,Q=void 0===C&&void 0===T?void 0:{...void 0===C?{}:{width:C},...void 0===T?{}:{height:T}},q=_?null==d?void 0:d({primaryImageUrl:_,imageUrls:v,favorite:t.favorite}):null;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)("div",{className:"group relative ".concat(q?"overflow-visible":"overflow-hidden"," border ").concat(P?"rounded-lg border-white":"rounded-md border-white/10"," ").concat(F),style:Q,onMouseEnter:e=>{null==W||W(e),L(e)},onMouseMove:e=>{null==H||H(e),O(e)},onMouseLeave:e=>{null==X||X(e),M()},children:[(0,r.jsxs)("button",{type:"button",disabled:U,"aria-label":G,onClick:z,className:"relative block h-full w-full overflow-hidden bg-transparent p-0 text-left ".concat(P?"rounded-lg":"rounded-md"," ").concat(D),children:[j,Y&&(0,r.jsx)("span",{className:"pointer-events-none absolute bottom-0 left-0 right-0 z-[110] bg-black/60 px-1 py-0.5 text-center text-[10px] text-zinc-300 ".concat(P?"rounded-b-lg":"rounded-b-md"," ").concat(B),children:Y})]}),V,q,J]}),E&&"undefined"!=typeof document&&(0,i.createPortal)((0,r.jsx)("div",{"aria-hidden":"true",className:"pointer-events-none fixed z-[99] hidden items-center justify-center overflow-hidden rounded-lg border border-white/20 bg-[#1e1e1e] p-2 shadow-2xl sm:flex",

1style:{left:E.left,top:E.top,width:E.size,height:E.size},children:(0,r.jsx)("img",{src:E.src,alt:"",className:"block h-full w-full object-contain",draggable:!1})}),document.body)]})}function A(e){let{className:t,showError:n,cardFrame:i,renderCardActions:a,showHoverPreview:u,onImageDragStart:v,...m}=e,E=function(e){var t,n,r,i;let{token:a,favorite:u,onFavoriteUpdated:v,onBalanceUpdated:m,resolveErrorMessage:E}=e,w=(0,o.c)(),[I,x]=(0,l.useState)(u),[A,S]=(0,l.useState)(""),[k,_]=(0,l.useState)(null),N=(0,l.useRef)(I),M=(0,l.useRef)(!0),R=(0,l.useRef)(!1);(0,l.useEffect)(()=>(M.current=!0,()=>{M.current=!1}),[]),(0,l.useEffect)(()=>{N.current=I},[I]),(0,l.useEffect)(()=>{x(e=>e.id===u.id?{...e,...u}:u)},[u]);let L=(0,l.useCallback)(e=>{N.current=e,M.current&&x(e),Promise.resolve(null==v?void 0:v(e)).catch(()=>void 0)},[v]),O=(0,l.useCallback)(async(e,t)=>{var n;let r=N.current;if(!a||!r.id)throw Error("CREATION_IMAGE_FAVORITE_AUTH_REQUIRED");let l=await (0,s.N)("/web/save/UpdateCreationImageFavorite",{token:a,favoriteId:r.id,nodeSnapshot:e,generationStatus:t});if(!l.isOk)throw Error(l.msg||"CREATION_IMAGE_FAVORITE_UPDATE_FAILED");L(function(e,t,n,r){let l=(null==t?void 0:t.favorite)||t||{};return{...e,...l,id:"string"==typeof(null==l?void 0:l.id)&&l.id?l.id:e.id,nodeSnapshot:(null==l?void 0:l.nodeSnapshot)&&"object"==typeof l.nodeSnapshot?l.nodeSnapshot:n,generationStatus:"string"==typeof(null==l?void 0:l.generationStatus)?l.generationStatus:r}}(r,null==(n=l.data)?void 0:n.result,e,t))},[L,a]),j=p(I),C=y(I)&&"running"===j,T=(0,c.j0)(C,500,0,null!=(i=null!=(r=null==(n=I.nodeSnapshot)||null==(t=n.data)?void 0:t.generationCreatedAt)?r:I.createdAt)?i:null),F=(0,c.FQ)(C),D=C?(0,g.wM)(w,T,F):A;return(0,l.useEffect)(()=>{if(!a||!C)return;let e=!1,t=async()=>{var t,n,r,l;if(e||R.current)return;let i=N.current,o=(t=i.nodeSnapshot,(0,f.Bp)(t)),s=o.filter(e=>(null==e?void 0:e.type)==="image"&&(null==e?void 0:e.status)==="running"&&(null==e?void 0:e.taskId));if(0!==s.length){R.current=!0;try{let e=await (0,g.Nn)(s,a),t=null==(n=e.data)?void 0:n.result;if(!e.isOk||!t)throw Error(e.msg||"IMAGE_GENERATION_PROCESS_FAILED");(null==t?void 0:t.balance)!==void 0&&(null==m||m(t.balance));let u=(0,g.Hs)(s,t.tasks),c=o,f=h(i.nodeSnapshot),v=!1,p="",E="";for(let e of u){let{row:t,taskId:n,code:i}=e,a=c.find(e=>String((null==e?void 0:e.taskId)||"")===n);if(a&&(null==a?void 0:a.type)==="image"&&(null==a?void 0:a.status)==="running"){if("running"===e.status){E="string"==typeof(null==t||null==(r=t.result)?void 0:r.info)&&t.result.info?t.result.info:w("CanvasProcessingText");continue}if(200===i)try{let e=await (0,g.F0)(a,t,null,{missingOutputMessage:"IMAGE_GENERATION_FILE_LOAD_FAILED",missingCachedImageMessage:"IMAGE_GENERATION_FILE_LOAD_FAILED"});(null==(l=e.data)?void 0:l.startsWith("blob:"))&&URL.revokeObjectURL(e.data);let{data:r,...i}=e;f=(0,g.Rr)(f,i),c=c.map(e=>String((null==e?void 0:e.taskId)||"")===n?{...e,status:"completed",result:null==t?void 0:t.result}:e)}catch(e){p=e instanceof Error?e.message:"IMAGE_GENERATION_FILE_LOAD_FAILED",c=c.map(e=>String((null==e?void 0:e.taskId)||"")===n?{...e,status:"failed",result:null==t?void 0:t.result}:e)}else p=(0,d.C)(String((null==t?void 0:t.message)||"Task failed"),null==t?void 0:t.result,i),c=c.map(e=>String((null==e?void 0:e.taskId)||"")===n?{...e,status:"failed",result:null==t?void 0:t.result}:e);v=!0}}if(M.current&&(S(E),_(p||null)),!v)return;let y=function(e){let t=e&&"object"==typeof e?JSON.parse(JSON.stringify(e)):{};return t.data&&"object"==typeof t.data||(t.data={}),t}(i.nodeSnapshot);y.data.tasks=c,y.data.imageInfoList=f;let I=c.some(e=>(null==e?void 0:e.type)==="image"&&(null==e?void 0:e.status)==="running"),x=c.some(e=>(null==e?void 0:e.type)==="image"&&(null==e?void 0:e.status)==="failed"),A=p||x&&b(i.nodeSnapshot)||"";A?y.data.generationError=A:(delete y.data.generationError,delete y.data.generationErrorMessage);let k=I?"running":f.length>0?"completed":x?"failed":"completed";await O(y,k)}catch(e){M.current&&_(e instanceof Error?e.message:"IMAGE_GENERATION_PROCESS_FAILED")}finally{R.current=!1}}};t();let n=window.setInterval(()=>void t(),3e3);return()=>{e=!0,window.clearInterval(n)}},[C,m,O,E,w,a]),{favorite:I,imageInfoList:h(I.nodeSnapshot),generationStatus:j,isProcessing:C,progressMessage:D,errorMessage:(0,d._)(k||b(I.nodeSnapshot),w)}}(m);return(0,r.jsx)(x,{runtime:E,className:t,showError:n,cardFrame:i,renderCardActions:a,showHoverPreview:u,onImageDragStart:v})}}}]);