Composing Multiple AI Features

Imagine being able to combine multiple AI features to create a unique image transformation. You could remove unwanted objects, replace the background, fill in missing details, remove the background, and enhance the image resolution—all in one go. imgix provides the unique ability to combine multiple AI features to create a unique image transformation.

This tutorial will demonstrate combining multiple AI features to create unique image transformations on the fly. We’ll use the following features:

The Asynchronous Process

The Rendering API processes multiple AI transformations asynchronously and requires a few seconds to complete. Here’s how the process works:

1. You request an image transformation with multiple AI features
2. The image transformation is processed asynchronously in this order:

• Object Removal
• Background Replacement
• Generative Fill
• Background Removal
• Super Resolution

3. While the image is being transformed, you might receive a temporary 423 status code

• You can poll the image URL to check if the transformation is complete
• On average, the image transformation is completed within 30 seconds

4. After all the transformations are resolved, requesting the image URL will return the transformed image

• Subsequent requests will return the transformed image immediately
• Some transformative parameters (like adding a new AI parameter) can re-trigger the temporary 423 status

Combining Background Replacement and Object Removal

Sometimes, you may want to completely re-imagine an image. By combining multiple AI features, you can re-create the image on demand by removing objects and replacing the background with prompts.

In this example, we’ll combine the Background Replacement and Object Removal features to both replace the background and remove an unwanted object from the image.

What’s happening in this example:

1. We supply two rectangles to the object-removal-rect parameter to remove the unwanted objects from the image
2. We use bg-replace=dirt-texture to replace the background with a dirt texture

Combining Background Removal and Super Resolution

Another use case is for handling user-submitted photos that need to be cleaned up and enhanced. In this example, we’ll combine the Background Removal and Super Resolution features to remove the background and enhance the image resolution.

What’s happening in this example:

1. We use bg-remove=true to remove the background from the image
2. We use upscale=true to enhance the image resolution
3. Additionally, we’re adding a new gradient fill to conform this image to use a gray background

Polling an Image For a Smooth User Experience

If you are experimenting with AI composition in a browser, it’s simple to continue refreshing a page to see the transformation complete. However, in a production environment, you’ll want to poll the image URL to check if the transformation is complete.

Here’s a crude example of how you can poll the image URL to check if the transformation is complete:

const imageUrl =
  "https://assets.imgix.net/unsplash/backpack-unsplash.jpg?fill-gradient-linear=D8D7DD,FDFDFD&fill-gradient-type=linear&fill=gradient&fit=fill&upscale=true&bg-remove=true"
 
// function to poll the image URL
const pollImage = async (url) => {
  const response = await fetch(url)
  // check if the response status is 423
  if (response.status === 423) {
    setTimeout(() => pollImage(url), 1000)
  } else {
    // image transformation is complete if it's not a 423
    console.log("Image transformation complete!")
  }
}
 
// Start polling the image URL
pollImage(imageUrl)

You can also see a more advanced polling example in this CodeSandbox.

Conclusion

The ability to chain multiple AI transformations is a powerful tool that gives you the flexibility to re-imagine any image with ease.

Chained transformations can take a few seconds to complete, so it’s important to understand the asynchronous nature of the process and to implement polling when necessary.

With these techniques, you can harness the full potential of AI-driven transformations to create visually stunning content, improve workflow efficiency, and offer a polished user experience.