https://bith.ai/_next/static/chunks/pages/ai-studio/text-to-image/FlowContaier-f966037a199ca231.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[90081],{76588:function(e,t,i){(window.__NEXT_P=window.__NEXT_P||[]).push(["/ai-studio/text-to-image/FlowContaier",function(){return i(63845)}])},26572:function(e,t,i){"use strict";i.d(t,{Z:function(){return r}});var l=i(85893);i(67294);var s=i(46321),a=i(10847),n=function(){for(var e,t,i=0,l="",s=arguments.length;i<s;i++)(e=arguments[i])&&(t=function e(t){var i,l,s="";if("string"==typeof t||"number"==typeof t)s+=t;else if("object"==typeof t){if(Array.isArray(t)){var a=t.length;for(i=0;i<a;i++)t[i]&&(l=e(t[i]))&&(s&&(s+=" "),s+=l)}else for(l in t)t[l]&&(s&&(s+=" "),s+=l)}return s}(e))&&(l&&(l+=" "),l+=t);return l},r=e=>{let{label:t,iconSrc:i,svgProps:r,className:o,textClassName:d}=e,c=n("text-white-65 text-[10px]",d||""),u=n("flex items-center gap-1 rounded-lg border border-white-50 px-3 py-[6px]",o||"");return(0,l.jsxs)("div",{className:u,children:[(0,l.jsx)(s.Z,{src:i,width:"12px",height:"12px",fill:a.theme.extend.colors["white-65"],...r}),(0,l.jsx)("span",{className:c,children:t})]})}},45490:function(e,t,i){"use strict";i.d(t,{F:function(){return n.FI}});var l=i(85893);i(67294);var s=i(5405),a=i(38623),n=i(48935),r=i(98388);let o=s.ZP.div.withConfig({componentId:"sc-24aa341b-0"})(["display:flex;width:24px;height:24px;cursor:pointer;align-items:center;justify-content:center;background-color:rgba(255,255,255,0.2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:6px;border:1px solid rgba(255,255,255,0.2);padding:4px;box-shadow:0 4px 8px rgba(0,0,0,0.1);transition:all 0.3s ease;&:hover{background-color:rgba(255,255,255,0.3);}"]);t.Z=e=>{let{className:t}=e;return(0,l.jsx)(o,{className:(0,r.m6)("more-icon",t),title:"More",children:(0,l.jsx)(a.Z,{})})}},48935:function(e,t,i){"use strict";i.d(t,{FI:function(){return d},H1:function(){return r},J6:function(){return u},M7:function(){return p},Pu:function(){return a},ik:function(){return c},su:function(){return s},ww:function(){return o},zI:function(){return n}});var l=i(5405);let s=(0,l.iv)(["border:1px solid rgba(146,146,146,0.25);border-radius:16px;"]),a=(0,l.iv)(['&::before{content:"";position:absolute;inset:0;background:linear-gradient( 180deg,rgba(0,0,0,0) 79.36%,rgba(0,0,0,0.51) 91.46%,rgba(0,0,0,0.7) 100% );pointer-events:none;z-index:3;}']),n=(0,l.iv)(["& .more-icon{opacity:0;}&:hover .more-icon{opacity:1;}@media (max-width:768px){& .more-icon{opacity:1;}}"]),r=l.ZP.div.withConfig({componentId:"sc-fefd5b0b-0"})(['position:absolute;inset:-1px;z-index:0;filter:blur(32px);background:linear-gradient(135.47deg,#272727 42.72%,#000 122.74%);pointer-events:none;[data-theme="light"] &{filter:none;background:transparent;}']),o=l.ZP.p.withConfig({componentId:"sc-fefd5b0b-1"})(["position:relative;z-index:4;min-width:0;width:100%;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:600;line-height:normal;color:var(--white);"]),d=l.ZP.div.withConfig({componentId:"sc-fefd5b0b-2"})(["position:absolute;inset-inline-end:11px;top:11px;z-index:10;"]),c=l.ZP.div.withConfig({componentId:"sc-fefd5b0b-3"})(["position:absolute;inset-inline-start:7px;top:7px;z-index:4;display:flex;width:32px;height:32px;flex-shrink:0;align-items:center;justify-content:center;border-radius:10px;background:#6681d3;padding:8px;"]),u=l.ZP.div.withConfig({componentId:"sc-fefd5b0b-4"})(['position:absolute;inset:0;z-index:1;overflow:hidden;background:#000;[data-theme="light"] &{background:',";}"],e=>{let{$inProgress:t}=e;return t?"transparent":"#ffffff"}),p=l.ZP.div.withConfig({componentId:"sc-fefd5b0b-5"})(["position:relative;display:flex;width:100%;height:100%;cursor:pointer;overflow:hidden;"," background:#000;transition:opacity 300ms;flex-direction:column;justify-content:flex-end;padding:12px 16px;"," "," ",' [data-theme="light"] &{background:',";","}"],s,a,n,e=>{let{$inProgress:t}=e;return t&&(0,l.iv)(["border-color:rgba(29,41,61,0.6);background:var(--shade);"])},e=>{let{$inProgress:t,$audio:i}=e;return t?"var(--shade-2)":i?"linear-gradient(180deg, rgba(0, 0, 0, 0) 73.198%, rgba(0, 0, 0, 0.5) 100%)":"#ffffff"},e=>{let{$inProgress:t}=e;return t&&(0,l.iv)(["border:none;"])})},33438:function(e,t,i){"use strict";var l=i(67294);t.Z=e=>{let t=t=>{t.preventDefault(),t.stopPropagation();let i=document.querySelector(".".concat(e.containerClass," .dropdown-wrapper"));i&&i.click()};return l.Children.map(e.children,e=>l.cloneElement(e,{...e.props,onContextMenu:t}))}},74480:function(e,t,i){"use strict";i.d(t,{l:function(){return a}});var l=i(78551),s=i(89053);let a=e=>(0,l.a)({queryKey:["preset-data",e],queryFn:()=>s.Eh.getQueryData(["preset-data",e])||{},enabled:!!e,staleTime:6e5,gcTime:6e5})},70769:function(e,t,i){"use strict";i.r(t);var l=i(85893);

1i(67294);var s=i(46321),a=i(41614),n=i(87251),r=i(10847),o=i(5405),d=i(87536);let c=o.ZP.div.withConfig({componentId:"sc-65f6a1db-0"})(["padding:12px 16px;border:1px dashed rgba(135,143,151,1);border-radius:8px;"]);t.default=e=>{let{control:t}=e,i=(0,d.qo)({control:t}),o=(0,n.Z)();return(0,l.jsxs)("div",{className:"flex items-center justify-between flex-wrap gap-4",children:[(0,l.jsx)("h5",{className:"text-xl text-custom-white",children:o.textToImage.title}),(0,l.jsxs)(c,{className:"flex items-center justify-center gap-2 w-full sm:w-auto",children:[(0,l.jsxs)("div",{className:"flex items-center gap-[6px]",children:[(0,l.jsx)(s.Z,{src:"/icons/coins-02.svg",width:"16px",height:"16px",fill:"#ABB1B6"}),(0,l.jsxs)("span",{className:"text-white-65 text-xs",children:[o.textToImage.usage," ",(0,l.jsx)(a.M,{children:o.textToImage.credits((null==i?void 0:i.is_super_prompt_used)?30:20)})]})]}),(0,l.jsx)(s.Z,{src:"/icons/info-circle.svg",width:"16px",height:"16px",stroke:r.theme.extend.colors["white-50"]})]})]})}},5456:function(e,t,i){"use strict";i.r(t);var l=i(85893),s=i(46321),a=i(87251),n=i(41664),r=i.n(n),o=i(11163),d=i(67294);let c=i(5405).ZP.div.withConfig({componentId:"sc-f5ddbd28-0"})(["position:fixed;bottom:0;left:0;right:0;height:60px;width:100%;background:var(--shade);display:none;@media (max-width:768px){display:block;}"]);t.default=()=>{var e;let t=(0,a.Z)(),i=(0,o.useRouter)(),[n,u]=d.useState((null==i?void 0:null===(e=i.query)||void 0===e?void 0:e.tab)||"settings");return d.useEffect(()=>{i.query.tab&&i.query.tab!==n&&u(i.query.tab)},[i.query.tab]),(0,l.jsx)(c,{className:"sticky bottom-0",children:(0,l.jsxs)("div",{className:"flex items-center h-full",children:[(0,l.jsx)(r(),{href:"?tab=settings",className:"flex-1 h-full",children:(0,l.jsxs)("div",{className:"flex h-full border-t-2 items-center justify-center flex-col gap gap-[5px] flex-1 ".concat("settings"===n?"border-secondary":"border-shade"),children:[(0,l.jsx)(s.Z,{src:"/icons/setting-2.svg",width:"20px",height:"20px",fill:"var(--text-shade-2)"}),(0,l.jsx)("span",{className:"text-t-shade-2 text-[10px]",children:t.textToImage.bottomNav.settings})]})}),(0,l.jsx)(r(),{href:"?tab=history",className:"flex-1 h-full",children:(0,l.jsxs)("div",{className:"flex h-full border-t-2 items-center justify-center flex-col gap gap-[5px] flex-1 ".concat("history"===n?"border-secondary":"border-shade"),children:[(0,l.jsx)(s.Z,{src:"/icons/gallery.svg",width:"20px",height:"20px",fill:"var(--text-shade-2)"}),(0,l.jsx)("span",{className:"text-t-shade-2 text-[10px]",children:t.textToImage.bottomNav.history})]})})]})})}},57882:function(e,t,i){"use strict";i.r(t);var l=i(85893),s=i(27361),a=i.n(s),n=i(11163),r=i(67294),o=i(85518);t.default=e=>{let{children:t}=e,i=(0,n.useRouter)();return o.tq?r.Children.map(t,e=>(i.query.tab||"settings")===a()(e,"props.data-tab",null)?r.cloneElement(e,{...e.props}):null):(0,l.jsx)(l.Fragment,{children:r.Children.map(t,e=>r.cloneElement(e,{...e.props}))})}},63845:function(e,t,i){"use strict";i.r(t),i.d(t,{default:function(){return L}});var l=i(85893),s=i(67294),a=i(61411),n=i(91167),r=i(82821),o=i(46321),d=i(68419),c=i(20931),u=i(31155),p=i(90374),x=i(87251),m=i(87536),g=i(25617),h=i(10847),f=i(5405),v=i(2772),b=i(82029);let y=f.ZP.div.withConfig({componentId:"sc-5ffa947d-0"})(["height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:24px;padding-inline:32px;"]),j=f.ZP.div.withConfig({componentId:"sc-5ffa947d-1"})(["max-height:200px;"]);var w=()=>{let e=(0,x.Z)();return(0,l.jsxs)(y,{children:[(0,l.jsxs)("div",{className:"hidden gap-2 sm:grid",children:[(0,l.jsxs)(j,{className:"grid grid-cols-2 items-center gap-2",children:[(0,l.jsx)("div",{className:"rounded-lg overflow-hidden h-full",children:(0,l.jsx)(b.Z,{src:"https://storage.googleapis.com/bith-prod-assets/assets/ai-studio/image-gen/1.webp",className:"h-full w-full object-cover",alt:"GG",fallbackElement:(0,l.jsx)("div",{})})}),(0,l.jsx)("div",{className:"rounded-lg overflow-hidden h-full",children:(0,l.jsx)(b.Z,{src:"https://storage.googleapis.com/bith-prod-assets/assets/ai-studio/image-gen/2.webp",className:"h-full w-full object-cover",alt:"GG",fallbackElement:(0,l.jsx)("div",{})})})]}),(0,l.jsxs)(j,{className:"grid grid-cols-3 items-center gap-2",children:[(0,l.jsx)("div",{className:"rounded-lg overflow-hidden col-span-2 h-full",children:(0,l.jsx)(b.Z,{src:"https://storage.googleapis.com/bith-prod-assets/assets/ai-studio/image-gen/3.webp",className:"h-full w-full object-cover",alt:"GG",fallbackElement:(0,l.jsx)("div",{})})}),(0,l.jsx)("div",{className:"rounded-lg overflow-hidden col-span-1 h-full",children:(0,l.jsx)(b.Z,{src:"https://storage.googleapis.com/bith-prod-assets/assets/ai-studio/image-gen/4.webp",className:"h-full w-full object-cover",alt:"GG",fallbackElement:(0,l.jsx)("div",{})})})]}),(0,l.jsx)(j,{className:"grid grid-cols-1",children:(0,l.jsx)("div",{className:"rounded-lg overflow-hidden h-full",children:(0,l.jsx)(b.Z,{src:"https://storage.googleapis.com/bith-prod-assets/assets/ai-studio/image-gen/5.webp",className:"h-full w-full object-cover",alt:"GG",fallbackElement:(0,l.jsx)("div",{})})})})]}),(0,l.jsx)("span",{className:"italic text-xs text-white-65 hidden sm:inline-block",children:e.global.ex}),(0,l.jsxs)("div",{className:"flex sm:hidden flex-col gap-3 items-center justify-center",children:[(0,l.jsx)(o.Z,{src:"/icons/gallery.svg",width:"32px",height:"32px",fill:h.theme.extend.colors["t-sh

1ade-2"]}),(0,l.jsx)("span",{className:"text-t-shade-2",children:e.textToImage.historyList.empty})]})]})},_=i(85518),N=i(63727),Z=i(30035),k=()=>{let e=(0,x.Z)(),{data:t,fetchNextPage:i,hasNextPage:a,isFetchingNextPage:n,isLoading:o}=(0,N.Y)({sort_by:"created_at",sort_direction:"desc",per_page:16},{getNextPageParam:e=>e.meta.next_cursor}),d=s.useMemo(()=>{var e;return(null!==(e=null==t?void 0:t.pages)&&void 0!==e?e:[]).flatMap(e=>{var t;return null!==(t=null==e?void 0:e.data)&&void 0!==t?t:[]})},[t]);return!o||(null==d?void 0:d.length)?(null==d?void 0:d.length)?(0,l.jsxs)("div",{className:"flex flex-col pb-[65px] px-0 pt-0 sm:pb-0 sm:px-8 sm:pt-8 gap-6 h-full",children:[(0,l.jsx)("span",{className:"text-base text-white-80 hidden sm:inline-block",children:e.textToImage.historyList.title}),(0,l.jsxs)("div",{className:"flex-1 overflow-auto hiddenScrollBar",children:[(0,l.jsx)("div",{className:"grid grid-cols-2 gap-4 pb-3",children:null==d?void 0:d.map(e=>(0,l.jsx)(v.Z,{image:e,style:{height:_.tq?163:200}},null==e?void 0:e.id))}),!o&&a&&(0,l.jsx)(Z.Z,{onTrigger:i,loading:n,hasMore:a,threshold:.1,rootMargin:"50px"})]})]}):(0,l.jsx)(w,{}):(0,l.jsx)("div",{className:"flex items-center justify-center flex-col px-8 pt-8 gap-6 h-full",children:(0,l.jsx)(r.Z,{})})};let C=f.ZP.div.withConfig({componentId:"sc-7235d8b8-0"})(["max-width:504px;width:100%;height:calc(100vh - 72px - 46px - 24px);margin-top:46px;background-color:var(--shade);border-radius:12px;overflow:hidden;@media (max-width:768px){background-color:transparent;height:calc(100vh - 165px);margin-top:16px;border-radius:0;}"]);var I=e=>(0,l.jsx)(C,{className:"sm:mr-8",children:(0,l.jsx)(k,{})}),P=i(5456),E=i(57882),T=i(70769),S=i(43079),q=i(22864),A=i(58446),G=i(90238),D=i(85537),M=i(46684),O=i(74480),R=i(8715),z=i(6627);let B=f.ZP.div.withConfig({componentId:"sc-933a4aaf-0"})(['background:var(--primary-color);[data-theme="light"] &{background:transparent;}']);var L=e=>{let{children:t}=e,i=(0,x.Z)(),f=(0,S.useRouter)(),{trackGeneration:v}=(0,z.G)("image generator"),b=(0,g.v9)(e=>{var t,i;return null==e?void 0:null===(i=e.Auth)||void 0===i?void 0:null===(t=i.user)||void 0===t?void 0:t.credits}),{data:y}=(0,O.l)(Number(f.query.pid)),{register:j,handleSubmit:w,setFocus:N,formState:{isSubmitting:Z,errors:k},control:C,setValue:L,setError:F,reset:H}=(0,m.cI)({defaultValues:{prompt:"",style:A.ZP.imagesStyles[0],aspect_ratio:A.ZP.imagesAspectRatios[0]}});s.useEffect(()=>{let e=Object.keys(k).reduce((e,t)=>k[e]?e:t,null);e&&N(e)},[k,N]),s.useEffect(()=>{if(y){let e=A.ZP.imagesAspectRatios.find(e=>e.value===y.preset_data.aspect_ratio),t=A.ZP.imagesStyles.find(e=>e.value===y.preset_data.style);H({prompt:y.preset_data.prompt,style:t||A.ZP.imagesStyles[0],aspect_ratio:e})}},[y,L]);let{createImage:Q,shapeExportValues:U,checkImageGenerationStatus:V,shapeImageObject:X}=(0,p.Z)(),$=(0,g.I0)(),[,J]=s.useContext(u.kn),K=(e,t,i)=>{let s={legacyImageGeneratorCredits:(null==i?void 0:i.is_super_prompt_used)?30:20};J({type:u.BT.MODAL_STATE_CHANGED,payload:{closable:!0,isOpen:!0,children:(0,l.jsx)(a.Z,{flow:"images",tool_name:"image generator",required_credits:(0,R.P)(e,t,{tool_name:"image generator",context:s}),requiredCreditsContext:s,creditLimitError:e})}})},W=async e=>{var t,i,s,a,n,r,o,p,x,m,g,h,y,j,w,N,k;if(Z)return;let C=!1;try{let l=(0,D.bq)(b),c=(null==e?void 0:null===(t=e.style)||void 0===t?void 0:t.value)!=="default"&&(null==e?void 0:null===(i=e.style)||void 0===i?void 0:i.value)?30:20,{data:u}=await Q(U(e)),h=String(null!==(r=null==u?void 0:u.id)&&void 0!==r?r:"");G.ZP.snapshotGenerationCredits(h,b,{prevBalance:l,explicitCredits:c}),v("started",{generation_type:"image",generation_id:h,prompt_text:null==e?void 0:e.prompt,resolution:null==e?void 0:null===(s=e.aspect_ratio)||void 0===s?void 0:s.dimensions,image_style:null==e?void 0:null===(a=e.style)||void 0===a?void 0:a.value}),C=!0,$((0,d.bG)(e=>{$((0,d.Qm)(e))}));let y=await V({imageId:null==u?void 0:u.id});Y({image:X(null==y?void 0:y.imageData)}),H({prompt:"",style:A.ZP.imagesStyles[0],aspect_ratio:A.ZP.imagesAspectRatios[0]}

1),_.tq&&f.push("?tab=history");let j=null!==(o=null==y?void 0:null===(n=y.imageData)||void 0===n?void 0:n.status)&&void 0!==o?o:null==y?void 0:y.status;"failed"===j?v("failed",{generation_type:"image",generation_id:null==u?void 0:u.id,error_type:"generation_failed",prompt_text:null==e?void 0:e.prompt,resolution:null==e?void 0:null===(p=e.aspect_ratio)||void 0===p?void 0:p.dimensions,image_style:null==e?void 0:null===(x=e.style)||void 0===x?void 0:x.value}):(v("completed",{generation_type:"image",generation_id:null==u?void 0:u.id,prompt_text:null==e?void 0:e.prompt,resolution:null==e?void 0:null===(m=e.aspect_ratio)||void 0===m?void 0:m.dimensions,image_style:null==e?void 0:null===(g=e.style)||void 0===g?void 0:g.value}),G.ZP.incrementUserProperty("total_generations"),$((0,d.bG)(e=>{var t;$((0,d.Qm)(e)),G.ZP.trackCreditsConsumedAfterRefresh({tool_name:"image generator",generation_id:String(null!==(t=null==u?void 0:u.id)&&void 0!==t?t:""),userCredits:null==e?void 0:e.credits,fallback_prev_balance:l,explicit_credits_used:c,generation_type:"image"})})))}catch(t){C||v("started",{generation_type:"image",prompt_text:null==e?void 0:e.prompt,resolution:null==e?void 0:null===(j=e.aspect_ratio)||void 0===j?void 0:j.dimensions,image_style:null==e?void 0:null===(w=e.style)||void 0===w?void 0:w.value}),v("failed",{generation_type:"image",error_type:(null==t?void 0:t.status)!=null?String(t.status):"unknown",prompt_text:null==e?void 0:e.prompt,resolution:null==e?void 0:null===(h=e.aspect_ratio)||void 0===h?void 0:h.dimensions,image_style:null==e?void 0:null===(y=e.style)||void 0===y?void 0:y.value}),(null==t?void 0:t.status)===c.$q.CREDITS_LIMIT_ERROR_STATUS_CODE?K(t,void 0,e):(null==t?void 0:t.status)===c.$q.SERVICE_DOWN?J({type:u.BT.MODAL_STATE_CHANGED,payload:{closable:!0,isOpen:!0,children:(0,l.jsx)(M.Z,{tool:null==t?void 0:null===(N=t.data)||void 0===N?void 0:N.feature_key,failure:null==t?void 0:t.data})}}):F("prompt",{message:null==t?void 0:null===(k=t.data)||void 0===k?void 0:k.message})}},Y=e=>{let{image:t}=e;J({type:u.BT.MODAL_STATE_CHANGED,payload:{closable:!0,isOpen:!0,children:(0,l.jsx)(q.Z,{image:t})}})};return(0,l.jsxs)(B,{className:"flex flex-col sm:flex-row h-full max-w-[1440px] mx-auto pt-6 sm:pt-0",children:[(0,l.jsx)("div",{className:"block sm:hidden",children:(0,l.jsx)(T.default,{control:C})}),(0,l.jsxs)(E.default,{children:[(0,l.jsxs)("div",{"data-tab":"settings",className:"flex-auto pb-16 sm:pb-8 sm:p-8 sm:pr-[72px] overflow-auto hiddenScrollBar sm:overflow-y-scroll flex flex-col gap-10",children:[(0,l.jsx)("div",{className:"hidden sm:block",children:(0,l.jsx)(T.default,{control:C})}),(0,l.jsx)("div",{className:"flex gap-10 flex-1 py-6 sm:py-0",children:(0,l.jsxs)("form",{className:"flex flex-col gap-12 flex-1 w-full",onSubmit:w(W),children:[s.Children.map(t,e=>s.cloneElement(e,{...e.props,control:C,setValue:L,register:j})),(0,l.jsxs)(n.Z,{disabled:Z,type:"secondary",size:"medium",className:"w-full md:w-fit ml-auto","data-name":"submit","data-testid":"generate_script",children:[(0,l.jsxs)("div",{className:"flex gap-3 items-center",children:[Z?(0,l.jsx)(r.Z,{size:"xSmall"}):(0,l.jsx)(o.Z,{src:"/icons/magic-pen.svg",fill:h.theme.extend.colors.white,width:"24px",height:"24px"}),(0,l.jsx)("span",{className:"text-base",children:i.textToImage.generate})]})," "]})]})})]}),(0,l.jsx)(I,{"data-tab":"history"})]}),(0,l.jsx)(P.default,{})]})}}},function(e){e.O(0,[2772,92888,49774,40179],function(){return e(e.s=76588)}),_N_E=e.O()}]);