Masonry image studio

import { ImageStudio } from '@/components/blocks/image-gen-01'


<ImageStudio />


// Fill a parent that has a height instead of the viewport
<ImageStudio height="100%" />


// Your own images, models and generator
<ImageStudio
  images={gallery}
  models={[
    { id: 'fast', name: 'Kestrel Fast', description: 'Quick drafts' },
    { id: 'fine', name: 'Kestrel Fine', description: 'Sharper detail' },
  ]}
  defaultAspectRatioId="3:4"
  onGenerate={async ({ prompt, aspectRatio, count, model, style, signal }) => {
    const response = await fetch('/api/images', {
      method: 'POST',
      body: JSON.stringify({ prompt, count, model: model.id, style: style?.id, ratio: aspectRatio.id }),
      signal,
    })
    return response.json()
  }}
/>