HDR

Uploading HDR images into our API is a two step process, and all it requires is a API key, order id, and brackets for your image. Since we've already covered how to upload images in the Single Bracket page, we'll combine the creating and uploading images into the first step.

1. Creating a helper function

In order to be able to enhance HDR images, you need to be able to upload them first. In this code example we have the logic from the Single Bracket page already combined, and ready to accept variables.

Important note You need to pass the same order_id and hdr:true flag into each image uploading logic call in order to be able to trigger the HDR merging.

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');
      }
    }
}

Important note The contentType property that you've used in the body of the request while creating image has to match the header in the PUT request to the s3PutObjectUrl!

2. Uploading your images and triggering HDR merge

Since you have the logic for uploading the images, you can use it in a function that will handle the rest. You will need to upload all of the brackets, and finally trigger the HDR merge.

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)

Merging can take between 10 seconds to 5 minutes, depending on the number of brackets that need grouping. During this time, no images will show up when you try to retrieve your order.

Once a grouping has been completed all groups will show up when you retrieve your order, and the AI will start to merge HDRs and enhance them.

3. Checking the order status

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 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

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 Basic Enhancements or Fine Tuning Enhancements 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.

Last updated