HDR

In this guide we will be walking you through how to enhance your first HDR image, you will:

  1. Learn how to register the fact you want to upload 2 or more brackets for a HDR image with Autoenhance

  2. Upload your image file for each bracket to Autoenhance using the provided endpoint received after registering your image

  3. Tell Autoenhance you have finished uploading your brackets and you are ready for it to start merging them.

  4. Checking the status of the order

  5. Downloading the final enhanced HDR image

This guide assumes the following:

  • You have already have an API key, if you don't have one please see our guide here.

  • That you have already uploaded a single bracket, if you haven't we reccomend you follow our guide here

1. Uploading the brackets

Before Autoenhance can enhance your HDR image it needs each bracket to be uploaded, the process works the same as for a single bracket except we need to indicate that we are uploading brackets for a HDR image. To do this we need to do two things:

  • Set the hdr field to true, this indicates that we want Autoenhance to operate in HDR mode and to not enhance our images until we have indicated all of our brackets have been uploaded.

  • Provide an order_id, this is so that Autoenhance knows that these brackets belong together and are eligible to be merged together

In order to be able to enhance HDR images, you need to be able to upload them first. In this example we have the steps from the Single Bracket page

Before you continue You don't need to specify the enhancement preferences while uploading brackets. All of the preferences must be present in the body of the post request to /orders/{id}/merge.

const uploadBracket = async (orderId, apiKey, file) => {
    const createImageResponse = await fetch(
      "https://api.autoenhance.ai/v3/images/",
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "x-api-key": apiKey,
        },
        body: JSON.stringify({
          order_id: orderId, // order_id needs to be specified
          image_name: file.name, 
          contentType: file.type,
          hdr:true // hdr flag needs to be present and set to true
        }),
      }
    );

    const { s3PutObjectUrl } = await createImageResponse.json();
    
    if(s3PutObjectUrl){
      const uploadImageResponse = await fetch(s3PutObjectUrl, {
        method: "PUT",
        headers: {
          "Content-Type": file.type,
          "x-api-key": apiKey,
        },
        body: file,
      });
      
      if(uploadImageResponse.ok){
        console.log('Image successfully uploaded')
      } else {
        console.log('Error uploading image');
      }
    }
}

2. Uploading your images and triggering HDR merge

Once you have uploaded all of your brackets, you are now ready to request Autoenhance start merging them.

There are two options depending on your use case.

Automatic Merging

By default when you call the /orders/<order_id>/merge endpoint, Autoenhance will analyse the metadata and visual similarity of your brackets. They will be automatically grouped together and returned as a single HDR image.

Fixed Merging

In cases where you already know each time how many brackets you shot you can provide the /orders/<order_id>/merge endpoint the number_of_brackets_per_image field with a number - in this case Autoenhance willsort your brackets by the time they were shot using their metadata and group your brackets based on this i.e if you set this to 3 then every 3 brackets will be grouped into one image

Make sure you have successfully uploaded all of your brackets including their metadata before calling the merge endpoint. Failure to do so may result in HDR images with brackets that are missing or incorrectly grouped.

const uploadAllBrackets = async (apiKey, files, orderId) => {  
  const promises = files.map(file => uploadBracket(orderId, apiKey, file));
  
  await Promise.all(promises);
  
  const mergeResponse = await fetch(
    `https://api.autoenhance.ai/v3/orders/${orderId}/merge`,
    {
      method: "POST",
      headers: {
        "x-api-key": apiKey,
      }
    }
  );
  
  // This is an URL to our web application where you can
  // take a look at your order, you don't need to return it.
  return `https://app.autoenhance.ai/orders/${orderId}`
};

const apiKey = YOUR_API_KEY;
const files = [File, File, File] // Array of Files or Blobs
const orderId = "YOUR_UNIQUE_ORDER_ID" // Ideally generated with uuidv4

uploadAllBrackets(apiKey, files, orderId)

3. Checking the order status

Grouping brackets for each HDR image can take between 10 seconds to 5 minutes to complete depending on the number of brackets that need grouping.

We can check when this has finished by calling the GET /order/<order_id> endpoint and reading the is_merging and is_processing fields. Whilst the AI is still grouping the orders is_merging will be true, however if you want to display the progress of this grouping to customers then the images field will gradually be populated with images.

As each image is grouped the AI will automatically start enhancing them, you can check the status of each image individually using their status fields. Once all images have been enhanced the is_processing field for the order will change to false which can be used to stop showing any processing indicators to your end user.

You should always check your order status before downloading your images. In this case, we need to check whether the order has falsy values for is_merging and is_processing or not. You can start downloading all of your images once both of them are false.

const orderId = "ID_OF_YOUR_ORDER";

const checkOrderStatus = async (orderId) => {
    const response = await fetch(`https://api.autoenhance.ai/orders/${orderId}`,{
        method: "GET"
    })
    
    const { is_merging, is_processing } = await response.json();
}

4. Downloading image

Once our order has finished grouping and enhancing we can download the images as usual.

const apiKey = "YOUR_API_KEY";
const imageId = "ID_OF_YOUR_IMAGE";

const checkImageStatus = async (imageId) => {
    const response = await fetch(`https://api.autoenhance.ai/v3/images/${imageId}`,{
         method: "GET"   
    })
    
    const {enhanced, error} = await response.json();
    
    return {
         enhanced:enhanced,
         error:error
    }
}

const downloadImage = async (imageId, apiKey) => {
     const imageStatus = await checkImageStatus(imageId);
     if(!imageStatus.error && imageStatus.enhanced){
        const response = await fetch(
        `https://api.autoenhance.ai/v3/images/${imageId}/enhanced`,
        { 
            method: "GET",
            headers: {
                "x-api-key": apiKey,
            },
        });
        const imageSource = await response.json()
    
        return imageSource
     }
}

This example uses the least possible amount of properties in order to create an image. If you want to apply any kind of preferences to it, visit our Image Settings page to find out more about them. Once you are familiar with them, simply add them in the body of the POST request to our API.

PreviousSingle BracketsNext360

Last updated