https://app.aieasypic.com/_next/static/chunks/pages/guide/parameters/aspect-ratio-6937a4f6bd6cd5bd.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[7196],{16353:(e,t,i)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/guide/parameters/aspect-ratio",function(){return i(26476)}])},26476:(e,t,i)=>{"use strict";i.r(t),i.d(t,{default:()=>f});var s=i(6029),a=i(75947),l=i(34494),r=i(92505),n=i(47724),o=i(26758),d=i(56266),c=i(27835),h=i(92907),m=i(78138),p=i(55729);let x={"1:1":{title:"Square",description:"Perfect for social media posts, profile pictures",use:"Instagram Posts, Profile Pictures, Product Photos",prompt:"a professional headshot portrait photo, centered composition"},"4:5":{title:"Tall Portrait",description:"Optimal for Instagram timeline photos",use:"Instagram Feed, Fashion Photography",prompt:"a fashion model in a studio setting, three quarter view"},"2:3":{title:"Classic Portrait",description:"Traditional portrait photography ratio",use:"Portrait Photography, Book Covers",prompt:"an elegant portrait photo with dramatic lighting"},"3:2":{title:"Classic Landscape",description:"Traditional landscape photography ratio",use:"Landscape Photography, General Photography",prompt:"a serene landscape with mountains and a lake at sunset"},"9:16":{title:"Mobile Portrait",description:"Perfect for mobile-first content",use:"Instagram Stories, TikTok, Phone Wallpapers",prompt:"a vertical cityscape view with tall skyscrapers"},"4:7":{title:"Extended Portrait",description:"Extended vertical format",use:"Mobile Banners, Vertical Posters",prompt:"a tall architectural photo of a modern building"},"5:4":{title:"Large Format",description:"Traditional large format photography ratio",use:"Fine Art Photography, Prints",prompt:"a still life composition with flowers and fruits"},"16:9":{title:"Widescreen",description:"Standard widescreen format",use:"YouTube Thumbnails, Desktop Wallpapers",prompt:"a cinematic panorama of a city skyline at night"},"7:4":{title:"Wide Landscape",description:"Extended landscape format",use:"Panoramic Photography, Web Banners",prompt:"a wide panoramic view of a beach at sunset"}},u=e=>{let{ratio:t,imageUrl:i,loading:a}=e,l=x[t.label];return(0,s.jsx)("div",{className:"border rounded-lg overflow-hidden",children:(0,s.jsxs)("div",{className:"p-4",children:[(0,s.jsxs)("h3",{className:"font-semibold text-lg mb-2",children:[l.title," (",t.label,")"]}),(0,s.jsx)("p",{className:"text-gray-600 text-sm mb-2",children:l.description}),(0,s.jsx)("p",{className:"text-sm text-blue-600 mb-3",children:l.use}),(0,s.jsx)("div",{className:"relative bg-gray-100 rounded-lg overflow-hidden",style:{aspectRatio:"".concat(t.width,"/").concat(t.height)},children:a?(0,s.jsx)("div",{className:"absolute inset-0 flex items-center justify-center bg-gray-50",children:(0,s.jsx)(d.a,{className:"w-8 h-8 animate-spin text-blue-500"})}):i?(0,s.jsx)("img",{src:i,alt:l.title,className:"w-full h-full object-cover"}):(0,s.jsx)("div",{className:"absolute inset-0 flex items-center justify-center bg-gray-50",children:(0,s.jsx)("span",{className:"text-gray-600",children:"No image generated yet"})})}),(0,s.jsxs)("div",{className:"mt-3 p-3 bg-gray-50 rounded-md",children:[(0,s.jsxs)("p",{className:"text-sm font-mono",children:["Dimensions: ",t.width,"x",t.height]}),(0,s.jsx)("p",{className:"text-sm font-mono mt-2",children:l.prompt})]})]})})},g=()=>{let[e,t]=(0,p.useState)(l.$b[0]);(0,o._X)();let i=(0,p.useMemo)(()=>{var t;return(0,o.$Z)({modelName:(null==e||null==(t=e.modelName)?void 0:t.toLowerCase())||"schnell"})},[e.modelName]),d=(0,p.useMemo)(()=>a.C1.map(e=>({...i,parameters:{...i.parameters,prompt:x[e.label].prompt,width:e.width,height:e.height}})),[i]),{fetchingJobs:g,completedJobs:f}=(0,o.J6)({inferenceJobs:d});return(0,s.jsxs)("div",{className:"max-w-4xl mx-auto px-4 py-8",children:[(0,s.jsx)(c.A,{title:"Aspect Ratio Guide - AI Image Generation",description:"Get started with AI image generation. Learn which aspect ratios are the best ones",url:"".concat(h._g.frontendUrl).concat(m.J.aieasypic.guideAspectRatio)}),(0,s.jsx)(r.yt,{slug:"aspect-ratio"}),(0,s.jsx)("h1",{className:"text-2xl font-bold mb-6",children:"Guide to Aspect Ratios"}),(0,s.jsx)("p",{className:"text-lg mb-4",children:"Understanding aspect ratios is crucial for creating images that fit their intended use. Each ratio has specific applications and advantages."}),(0,s.jsx)(n.w,{children:"The aspect ratio determines the shape of your image and should be chosen based on where and how you plan to use the image."}),(0,s.jsx)("h2",{className:"text-xl font-semibold mt-8 mb-4",children:"Available Aspect Ratios"}),(0,s.jsx)("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-6",children:a.C1.map(e=>{var t,a;let l=JSON.stringify({...i,parameters:{...i.parameters,prompt:x[e.label].prompt,width:e.width,height:e.height}}),r=f[l],n=g[l],o=null==r||null==(a=r.prediction_images)||null==(t=a[0])?void 0:t.image;return(0,s.jsx)(u,{ratio:e,loading:n,imageUrl:o},e.label)})}),(0,s.jsxs)("div",{className:"prose max-w-none mt-12",children:[(0,s.jsx)("h2",{className:"text-2xl font-semibold mb-4",children:"Best Practices"}),(0,s.jsxs)(n.w,{type:"tip",children:[(0,s.jsx)("p",{className:"font-semibold",children:"Pro Tip:"}),(0,s.jsx)("p",{children:"Consider your platform's requirements when choosing an aspect ratio. Social media platforms often have specific ratio requirements for optimal display."})]}),(0,s.jsxs)("div",{className:"space-y-6 mt-8",children:[(0,s.jsxs)("div",{className:"border-b border-gray-200 pb-4",children:[(0,s.jsx)("h3",{className:"font-semibold text-lg",children:"Social Media"}),(0,s.jsx)("p",{className:"mt-2",children:"Use 1:1 for feed posts, 9:16 for stories and reels, 4:5 for Instagram timeline photos."})]}),(0,s.jsxs)("div",{className:"border-b border-gray-200 pb-4",children:[(0,s.jsx)("h3",{className:"font-semibold text-lg",children:"Photography"}),(0,s.jsx)("p",{className:"mt-2",children:"3:2 and 4:3 are traditional photography ratios, while 16:9 works well for cinematic shots and landscapes."})]}),(0,s.jsxs)("div",{children:[(0,s.jsx)("h3",{className:"font-semibold text-lg",children:"Web Content"}),(0,s.jsx)("p",{className:"mt-2",children:"Consider 16:9 for website headers, 1:1 for thumbnails, and vertical ratios like 9:16 for mobile-optimized content."})]})]})]})]})},f=()=>(0,s.jsx)(r.dW,{children:(0,s.jsx)(g,{})})},26758:(e,t,i)=>{"use strict";i.d(t,{$Z:()=>o,J6:()=>n,_X:()=>d});var s=i(34494),a=i(1751),l=i(58943),r=i(55729);let n=e=>{let{inferenceJobs:t}=e,[i,s]=(0,r.useState)({}),[l,n]=(0,r.useState)({}),{mutate:o}=(0,a.V82)({request:{baseURL:"https://1aieasypic_go.aieasypic.com/go-api/proxy"}});return(0,r.useEffect)(()=>{let e=!0,a=0;n({});let r=()=>{if(!e||a>=t.length)return;let d=t.slice(a,a+1);a+=1,d.forEach(t=>{var a,d;let c=JSON.stringify(t);(null==(d=l[c])||null==(a=d.prediction_images)?void 0:a.length)||i[c]||(s(e=>({...e,[c]:!0})),o({data:t},{onSuccess:t=>{var i;e&&((null==(i=t.prediction_images)?void 0:i.length)&&n(e=>({...e,[c]:t})),s(e=>({...e,[c]:!1})),r())},onError:e=>{console.error("Error creating or finding inference job",e),s(e=>({...e,[c]:!1})),r()}}))})};return r(),()=>{e=!1}},[t]),{fetchingJobs:i,completedJobs:l}},o=e=>{var t;let{modelName:i,seed:a}=e,r=null===s.Po||void 0===s.Po?void 0:s.Po.find(e=>{var t,s;return null==e||null==(s=e.modelName)||null==(t=s.toLowerCase())?void 0:t.includes(i)});return{model:(null==r?void 0:r.replacementModelId)||(null==r?void 0:r.value),show_public:!0,id:0,created_at:"",prediction_images:[],status:l.e3.P,parameters:{...null==r?void 0:r.parameters,id:0,prompt:"test",width:512,height:512,controlnet_parameters:[],model:null==r||null==(t=r.value)?void 0:t.toString(),seed:null!=a?a:100}}},d=()=>{let e={};return s.$b.forEach(t=>{var i;!e[t.version]&&(null==(i=t.label)?void 0:i.includes("Photo"))&&(e[t.version]={...t,limits:{...t.limits,maxSteps:t.limits.maxSteps>30?30:t.limits.maxSteps}})}),Object.values(e)}},47724:(e,t,i)=>{"use strict";i.d(t,{w:()=>l});var s=i(6029),a=i(50016);let l=e=>{let{children:t,type:i="info"}=e;return(0,s.jsxs)("div",{className:"border rounded-lg p-4 my-4 flex items-start ".concat({info:"bg-blue-50 border-blue-200 text-blue-800",tip:"bg-green-50 border-green-200 text-green-800"}[i]),children:["info"===i?(0,s.jsx)(a._TA,{className:"w-5 h-5 mt-0.5 mr-3 flex-shrink-0"}):(0,s.jsx)(a.xZp,{className:"w-5 h-5 mt-0.5 mr-3 flex-shrink-0"}),(0,s.jsx)("div",{children:t})]})}},75947:(e,t,i)=>{"use strict";i.d(t,{Ay:()=>y,C1:()=>w});var s=i(6029),a=i(74536),l=i(69943),r=i(63887),n=i(99690),o=i(50433),d=i(37948),c=i(52482),h=i(34029),m=i(94338),p=i(66659),x=i(82562),u=i(50016),g=i(26312),f=i(34417),b=i(55729),j=i(34494);let v=e=>16*Math.round(e/16),w=[{label:"1:1",width:640,height:640,xlWidth:1024,xlHeight:1024,fluxWidth:1024,fluxHeight:1024},{label:"4:5",width:640,height:800,xlWidth:768,xlHeight:960,fluxWidth:1024,fluxHeight:1280},{label:"2:3",width:640,height:960,xlWidth:768,xlHeight:1152,fluxWidth:1024,fluxHeight:1536},{label:"3:2",width:960,height:640,xlWidth:1152,xlHeight:768,fluxWidth:1536,fluxHeight:1024},{label:"9:16",width:720,height:1280,xlWidth:720,xlHeight:1280,fluxWidth:576,fluxHeight:1024},{label:"4:7",width:640,height:1120,xlWidth:768,xlHeight:1344,fluxWidth:1024,fluxHeight:1792},{label:"5:4",width:800,height:640,xlWidth:960,xlHeight:768,fluxWidth:1280,fluxHeight:1024},{label:"16:9",width:1280,height:720,xlWidth:1280,xlHeight:720,fluxWidth:1024,fluxHeight:576},{label:"7:4",width:1120,height:640,xlWidth:1344,xlHeight:768,fluxWidth:1792,fluxHeight:1024}],N=e=>{let{currentAspectRatioSelected:t,selected:i,showDropDown:h=!1}=e;return(0,s.jsx)(a.Z,{shadow:"xs",padding:"xs",radius:"md",my:.5,w:"100%",h:"100%",sx:e=>({backgroundColor:h?e.colors.blue[5]:i?e.colors.blue[3]:void 0,color:i||h?"white":void 0}),children:(0,s.jsxs)(l.x,{grow:!0,align:"center",children:[(0,s.jsx)(r.f,{span:3,children:(0,s.jsxs)(n.Y,{children:[(0,s.jsx)(o.a,{style:{width:"".concat((null==t?void 0:t.width)/1024*20,"px"),height:"".concat((null==t?void 0:t.height)/1024*20,"px"),backgroundColor:"black",marginRight:"8px",borderRadius:"2px"}}),(0,s.jsx)(d.E,{size:"md",children:null==t?void 0:t.label})]})}),(0,s.jsx)(r.f,{span:2,children:(0,s.jsx)(o.a,{children:(0,s.jsxs)(c.E,{size:"md",color:"blue",variant:"filled",children:[t.width," x"," ",t.height,"px"]})})}),(0,s.jsx)(r.f,{span:1}),(0,s.jsxs)(r.f,{span:1,children:[i&&(0,s.jsx)(g.A,{width:20,height:20}),h&&(0,s.jsx)(u.s7Q,{width:20,height:20})]})]})})},y=e=>{let{textToImageForm:t,currentModelFeatures:i,loraSelected:a,ratioMultiplier:l}=e,[r,o]=(0,x.j)(!1),[d,c]=(0,b.useState)(w[0].label),{data:u,isPaid:g}=(0,f.P)(),y=t.values.model===j.AU,P=(0,b.useMemo)(()=>{let e=parseFloat(l);return w.map(t=>{let s,l;if(i.includes(j.K7.DEFAULT_HD_IMAGES)||i.includes(j.K7.DEFAULT_FLUX_RESOLUTIONS)&&(null==a?void 0:a.length))s=t.xlWidth*e,l=t.xlHeight*e;else{if(!i.includes(j.K7.DEFAULT_FLUX_RESOLUTIONS))return t;s=t.fluxWidth*e,l=t.fluxHeight*e}return y&&(s=Math.min(v(s),2048),l=Math.min(v(l),2048)),{...t,width:s,height:l}})},[i,a,null==u?void 0:u.is_staff,l,y]);(0,b.useEffect)(()=>{c(P[2].label)},[]),(0,b.useEffect)(()=>{let e=P.find(e=>e.label===d);e&&(t.setFieldValue("parameters.width",null==e?void 0:e.width),t.setFieldValue("parameters.height",null==e?void 0:e.he

1ight))},[i,d,P]);let W=(null==P?void 0:P.find(e=>e.label===d))||P[0];return(0,s.jsx)(s.Fragment,{children:(0,s.jsx)(n.Y,{noWrap:!0,children:(0,s.jsxs)(h.W,{...o,width:"target",shadow:"md",withinPortal:!0,children:[(0,s.jsx)(h.W.Target,{children:(0,s.jsx)(m.N,{w:"100%",p:2,children:(0,s.jsx)(N,{currentAspectRatioSelected:W,showDropDown:!0})})}),(0,s.jsx)(h.W.Dropdown,{children:(0,s.jsx)(p.F,{h:220,offsetScrollbars:!0,children:null==P?void 0:P.map(e=>(0,s.jsx)(h.W.Item,{p:2,m:0,onClick:()=>{c(e.label)},children:(0,s.jsx)(N,{currentAspectRatioSelected:e,selected:e.label===d})},e.label))})})]})})})}},92505:(e,t,i)=>{"use strict";i.d(t,{Ay:()=>p,dW:()=>h,dw:()=>d,yt:()=>m});var s=i(6029),a=i(50016),l=i(78138),r=i(82203),n=i.n(r),o=i(55729);let d=[{title:"Basic Parameters",icon:a.toq,slug:"parameters",subLinks:[{title:"Prompt",slug:"prompt",icon:a.c11,description:"Learn how to write effective prompts that generate your desired images accurately."},{title:"Aspect Ratio",slug:"aspect-ratio",icon:a.Bak,description:"Understand how to set and work with different image dimensions and ratios."}]}],c=e=>{let{isOpen:t,onClose:i}=e;return(0,s.jsx)("div",{className:"\n    fixed inset-y-0 left-0 transform \n    md:sticky md:top-14 md:translate-x-0 \n    transition duration-200 ease-in-out\n    py-20 md:py-4 bg-white \n    ".concat(t?"translate-x-0":"-translate-x-full","\n    z-30 w-64 max-h-screen\n  "),children:(0,s.jsxs)("nav",{className:"h-screenborder-r border-gray-200 p-4",children:[(0,s.jsxs)("div",{className:"flex justify-between items-center mb-6 md:hidden",children:[(0,s.jsx)("h2",{className:"text-xl font-bold",children:"Guide"}),(0,s.jsx)("button",{onClick:i,className:"p-1 hover:bg-gray-100 rounded-md",children:(0,s.jsx)(a.raE,{className:"w-5 h-5"})})]}),(0,s.jsx)("div",{className:"h-full overflow-y-auto py-2",children:d.map(e=>(0,s.jsxs)("div",{className:"mb-6",children:[(0,s.jsx)("h3",{className:"text-lg font-semibold mb-2",children:e.title}),(0,s.jsx)("div",{className:"space-y-2",children:e.subLinks.map(t=>(0,s.jsx)(n(),{href:"/guide/".concat(e.slug,"/").concat(t.slug),children:(0,s.jsxs)("div",{className:"flex items-center space-x-2 px-2 py-1 rounded-md hover:bg-gray-100 cursor-pointer",children:[(0,s.jsx)(t.icon,{className:"w-4 h-4 text-gray-500"}),(0,s.jsx)("span",{className:"text-sm text-gray-700",children:t.title})]},t.slug)},e.slug))})]}))})]})})},h=e=>{let{children:t}=e,[i,l]=(0,o.useState)(!1);return(0,s.jsxs)("div",{className:"relative min-h-screen",children:[i&&(0,s.jsx)("div",{className:"fixed inset-0 bg-black bg-opacity-50 z-20 md:hidden",onClick:()=>l(!1)}),(0,s.jsxs)("div",{className:"flex",children:[(0,s.jsx)(c,{isOpen:i,onClose:()=>l(!1)}),(0,s.jsxs)("div",{className:"flex-1",children:[(0,s.jsx)("div",{className:"md:hidden p-4 border-b border-gray-200 sticky top-0 bg-white z-10",children:(0,s.jsx)("button",{onClick:()=>l(!0),className:"p-1 hover:bg-gray-100 rounded-md",children:(0,s.jsx)(a.sKQ,{className:"w-6 h-6"})})}),(0,s.jsx)("div",{className:"p-4",children:t})]})]})]})},m=e=>{let{slug:t}=e,i=d.find(e=>e.subLinks.some(e=>e.slug===t)),r=null==i?void 0:i.subLinks.find(e=>e.slug===t);return(0,s.jsxs)("div",{className:"flex items-center text-sm text-gray-600 mb-8",children:[(0,s.jsx)(n(),{href:l.J.aieasypic.guide,children:(0,s.jsx)("span",{children:"Guide"})}),(0,s.jsx)(a.vKP,{className:"w-4 h-4 mx-1"}),(0,s.jsx)("span",{children:null==i?void 0:i.title}),(0,s.jsx)(a.vKP,{className:"w-4 h-4 mx-1"}),(0,s.jsx)("span",{children:null==r?void 0:r.title})]})},p=h}},e=>{e.O(0,[4494,636,6593,8792],()=>e(e.s=16353)),_N_E=e.O()}]);