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>
You can specify a specific version of the SDK according to the rules documented here https://unpkg.com
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 preferences
attrbiute 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
, completed
and error
events, 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 https://github.com/Autoenhance-ai/API-Code-Examples
Last updated