Generate AI images in custom dimensions

🤖/image/generate allows you to generate images in custom dimensions by specifying width and height parameters. This demo uses the recraft-v3 model to generate a 2048×1152 SVG image, perfect for scalable graphics and banner images.

Step 1:

Generate images from text prompts

We offer Artificial Intelligence as a service, so you don't have to run your own AI models or install complicated software.Learn more

result.svg

Image – 178 KB

2048 × 1152

"generated_image": {
  "robot": "/image/generate",
  "result": true,
  "format": "svg",
  "height": 1152,
  "model": "recraft-v3",
  "prompt": "${fields.prompt || 'a futuristic cityscape at sunset with flying cars'}",
  "width": 2048
}

/image/generate

This bot generates images from text prompts using AI

Step 2:

Export files to Amazon S3

We export to the storage platform of your choice.Learn more

generated_image

https://demos.transloadit.com/6b/066e36c2ca4f338a5bf23f071179d1/result.svg

"exported": {
  "use": [
    "generated_image"
  ],
  "robot": "/s3/store",
  "credentials": "demo_s3_credentials",
  "url_prefix": "https://demos.transloadit.com/"
}

/s3/store

This bot exports encoding results to Amazon S3

Live Demo. See for yourself

Loading Uppy demo…

Build this in your own language

<!-- This pulls Uppy from our CDN -->
<!-- For smaller self-hosted bundles, install Uppy and plugins manually: -->
<!-- npm i --save @uppy/core @uppy/dashboard @uppy/remote-sources @uppy/transloadit ... -->
<link
  href="https://releases.transloadit.com/uppy/v3.10.0/uppy.min.css"
  rel="stylesheet"
/>
<button id="browse">Select Files</button>
<script type="module">
  import {
    Uppy,
    Dashboard,
    ImageEditor,
    RemoteSources,
    Transloadit,
  } from 'https://releases.transloadit.com/uppy/v3.10.0/uppy.min.mjs'
  const uppy = new Uppy()
    .use(Transloadit, {
      waitForEncoding: true,
      alwaysRunAssembly: true,
      assemblyOptions: {
        params: {
          // It's often better store encoding instructions in your account
          // and use a `template_id` instead of adding these steps inline
          steps: {
            generated_image: {
              robot: '/image/generate',
              result: true,
              format: 'svg',
              height: 1152,
              model: 'recraft-v3',
              prompt: '${fields.prompt || 'a futuristic cityscape at sunset with flying cars'}',
              width: 2048,
            },
            exported: {
              use: ['generated_image'],
              robot: '/s3/store',
              credentials: 'demo_s3_credentials',
              url_prefix: 'https://demos.transloadit.com/',
            },
          },
        },
      },
    })
    .use(Dashboard, { trigger: '#browse' })
    .use(ImageEditor, { target: Dashboard })
    .use(RemoteSources, {
      companionUrl: 'https://api2.transloadit.com/companion',
    })
    .on('complete', ({ transloadit }) => {
      // Due to `waitForEncoding:true` this is fired after encoding is done.
      // Alternatively, set `waitForEncoding` to `false` and provide a `notify_url`
      console.log(transloadit) // Array of Assembly Statuses
      for (const assembly of transloadit) {
        console.log(assembly.results) // Array of all encoding results
      }
    })
    .on('error', (error) => {
      console.error(error)
    })
</script>

Read docs: Browsers

So many ways to integrate

Transloadit is a service for companies with developers. And there are many ways developers can put Transloadit to good use inside your company to automate media processing.