Web (Beta)

The Web SDK provides the same pre-built components used in our Web app to power your application.

Last updated 1 month ago

Web (Beta)

The Web SDK provides the same pre-built components used in our Web app to power your application.

This is still in beta and you may encounter limitations. We encourage you to provide feedback via our support channels.

Integrating SDK

To install the SDK into your application is as simple as adding a script tag and providing your API key as an attribute in the HTML.

<script src="https://unpkg.com/@autoenhance.ai/web" api-key="YOUR_API_KEY_GOES_HERE"></script>

To add the Autoenhance uploader into your application, you simply add our image-uploader Web component

<image-uploader name="order_id" required></image-uploader>

Now when the page has loaded you should see automatically the Autoenhance uploader. Your code should now look something like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Application</title>
  <script src="https://unpkg.com/@autoenhance.ai/web" api-key="YOUR_API_KEY_GOES_HERE"></script>
</head>
<body>
  <h2>Upload a photo to enhance</h2>
<form>
  <image-uploader name="order_id" required></image-uploader>
 <!-- This sends the order ID as "order_id" to your server where you can carry on communicating with Autoenhnace-->
  <input type="submit|/>
</form>
</body>
</html>

Attributes

Name

To specify that of the form filed sent to your server containing the order_id, then just provide a name attribute just like you would with any input field

<image-uploader name="order_id"></image-uploader>

Required

To specify that it's required to upload images to Autoenhance then just provide a required attribute just like you would with any input field

<image-uploader required></image-uploader>

Preferences

You can control the default enhancement settings sent to Autoenhance by providing a preferencesattrbiute containing JSON in the same format documented in our Reprocessing documentation

For example to specify the API version

<image-uploader preferences='{"ai_version": "4.0"}'></image-uploader>

Handling Uploaded Orders

There are two ways for your application to react to the user uploading an order with the image uploader.

Form Fields

If your image uploader is contained within a form, the Order ID for the Autoenhance Order will be submitted along side the rest of your form's data. Your server can then use this ID to communicate with the Autoenhance API to retrieve it's status and download the images.

Events

You can use event listeners to listen to the files-added, completedand errorevents, in order to updae your applications UI state in response to a user's interaction with the uploader.

Here is an example

imageUploader.addEventListener("files-added", (e) => {
  console.log("files-added");
});

imageUploader.addEventListener("complete", (e) => {
   console.log("complete");
   console.log(e.detail.orderId);
});

imageUploader.addEventListener("error", (e) => {
 console.log("error");
});

Example Projects

PreviousSDKs NextChangelog

Last updated 1 month ago

This is still in beta and you may encounter limitations. We encourage you to provide feedback via our support channels.

Integrating SDK

To install the SDK into your application is as simple as adding a script tag and providing your API key as an attribute in the HTML.

<script src="https://unpkg.com/@autoenhance.ai/web" api-key="YOUR_API_KEY_GOES_HERE"></script>

You can specify a specific version of the SDK according to the rules documented here

To add the Autoenhance uploader into your application, you simply add our image-uploader Web component

<image-uploader name="order_id" required></image-uploader>

Now when the page has loaded you should see automatically the Autoenhance uploader. Your code should now look something like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Application</title>
  <script src="https://unpkg.com/@autoenhance.ai/web" api-key="YOUR_API_KEY_GOES_HERE"></script>
</head>
<body>
  <h2>Upload a photo to enhance</h2>
<form>
  <image-uploader name="order_id" required></image-uploader>
 <!-- This sends the order ID as "order_id" to your server where you can carry on communicating with Autoenhnace-->
  <input type="submit|/>
</form>
</body>
</html>

Attributes

Name

To specify that of the form filed sent to your server containing the order_id, then just provide a name attribute just like you would with any input field

<image-uploader name="order_id"></image-uploader>

Required

To specify that it's required to upload images to Autoenhance then just provide a required attribute just like you would with any input field

<image-uploader required></image-uploader>

Preferences

You can control the default enhancement settings sent to Autoenhance by providing a preferencesattrbiute containing JSON in the same format documented in our Reprocessing documentation

For example to specify the API version

<image-uploader preferences='{"ai_version": "4.0"}'></image-uploader>

Handling Uploaded Orders

There are two ways for your application to react to the user uploading an order with the image uploader.

Form Fields

Events

You can use event listeners to listen to the files-added, completedand errorevents, in order to updae your applications UI state in response to a user's interaction with the uploader.

Here is an example

imageUploader.addEventListener("files-added", (e) => {
  console.log("files-added");
});

imageUploader.addEventListener("complete", (e) => {
   console.log("complete");
   console.log(e.detail.orderId);
});

imageUploader.addEventListener("error", (e) => {
 console.log("error");
});

Example Projects

You can see some example projects which demonstrate how to use the Web SDK