HDR Brackets

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 an 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 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. Creating an Order

Before we can upload some brackets we need to create an order for them live so that Autoenhance understands that they are related to each other. To do this we issue a POST request to the /orders endpoint.

const createOrder = async (apiKey) => {
    const createOrderResponse = await fetch(
      "https://api.autoenhance.ai/v3/orders/",
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "x-api-key": apiKey,
        }
      }
    );

    return { order_id } = await createOrderResponse.json();
}

2. Uploading the brackets

Now we need to register and upload the file for each bracket, to do this we create a POST request to the dedicated /brackets endpoint and provide the order_id we got from the orders endpoint. This is so that Autoenhance knows that these brackets belong together and are eligible to be merged together.

You can provide the name of each bracket in the name property, the final image takes the name from the first bracket and this can be a useful way to cross-reference which brackets you have uploaded

const uploadBracket = async (orderId, apiKey, file) => {
    const createBracketResponse = await fetch(
      "https://api.autoenhance.ai/v3/brackets/",
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "x-api-key": apiKey,
        },
        body: JSON.stringify({
          order_id: orderId, // order_id needs to be specified
          name: file.name
        }),
      }
    );

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

2. Grouping and enhancing your brackets

Once you have uploaded all of your brackets, you are now ready to request Autoenhance start grouping them into images and then enhancing them.

There are three options depending on your use case.

By default when you call the /orders/<order_id>/process 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.

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}/process`,
    {
      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 ImageNextCode Examples

Last updated