Web SDK (Beta)

In this guide we will be walking you through how to enhance your first image via the /SDK, you will:

Learn how to register the fact you want to enhance an image with Autoenhance
Upload your image file to Autoenhance using the SDK
Downloading the final enhanced image

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

1. Creating our frontend

We first need to create a HTML form which will display the Autoenhance Image Uploader. Firstly we install the SDK using the script tag and provide the 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

All we need to is add the image-uploader tag to the page and give it a name that will be used to populate the form with it's data once the user has uploaded their image.s

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

2. Downloading image

Once successfully uploaded and the user submits the form, your image will start being processed with our AI. To check it's current status we can use a GET request to the /orders/:order_id:/ using the order_id passed to your backend in the form data. Once the status field returned is "processed"we can download the image using the /images/:image_id:/enhanced endpoint. If you only wish to allow your users to see a preview of the image before downloading without consuming any of your credits then you can use the /images/:image_id:/preview endpoint

const express = require('express');
const fetch = require('node-fetch');

const app = express();
app.use(express.urlencoded({ extended: true }));
app.use(express.json());

const API_KEY = "YOUR_API_KEY";
const BASE_URL = "https://api.autoenhance.ai/v3";

async function getOrder(orderId) {
  const res = await fetch(`${BASE_URL}/orders/${orderId}`, {
    method: 'GET',
    headers: { 'x-api-key': API_KEY }
  });
  if (!res.ok) throw new Error(`Failed to get order: ${res.statusText}`);
  return res.json();
}

async function downloadImage(imageId) {
  const res = await fetch(`${BASE_URL}/images/${imageId}/enhanced`, {
    method: 'GET',
    headers: { 'x-api-key': API_KEY }
  });
  if (!res.ok) throw new Error(`Failed to download image: ${res.statusText}`);
  return res.json();
}

app.post('/', async (req, res) => {
  const { order_id: orderId } = req.body;
  if (!orderId) return res.status(400).json({ error: 'Missing order_id' });

  try {
    const order = await getOrder(orderId);
    const enhancedImages = [];

    for (const img of order.images || []) {
      if (img.enhance) {
        const downloaded = await downloadImage(img.image_id);
        enhancedImages.push(downloaded);
      }
    }

    res.json({ order, enhancedImages });
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

app.listen(3000, () => console.log('Server running on port 3000'));

from flask import Flask, request, jsonify
import requests

app = Flask(__name__)
API_KEY = "YOUR_API_KEY"
BASE_URL = "https://api.autoenhance.ai/v3"

def get_order(order_id):
    url = f"{BASE_URL}/orders/{order_id}"
    response = requests.get(url, headers={"x-api-key": API_KEY})
    if response.status_code != 200:
        return None, {"error": f"Failed to retrieve order: {response.text}"}
    return response.json(), None

def download_image(image_id):
    url = f"{BASE_URL}/images/{image_id}/enhanced"
    response = requests.get(url, headers={"x-api-key": API_KEY})
    if response.status_code != 200:
        return None, {"error": f"Failed to download image: {response.text}"}
    return response.json(), None

@app.route('/', methods=['POST'])
def check_order():
    order_id = request.form.get('order_id')
    if not order_id:
        return jsonify({"error": "Missing order_id"}), 400

    order_data, err = get_order(order_id)
    if err:
        return jsonify(err), 500

    images = order_data.get('images', [])
    if not images:
        return jsonify({"error": "No images found in order"}), 404

    enhanced_images = []
    for img in images:
        if img.get('enhance', False):
            image_id = img.get('image_id')
            img_json, err = download_image(image_id)
            if err:
                continue
            enhanced_images.append(img_json)

    return jsonify({"order": order_data, "enhanced_images": enhanced_images})

if __name__ == '__main__':
    app.run(debug=True)

<?php
$apiKey = 'YOUR_API_KEY';
$baseUrl = 'https://api.autoenhance.ai/v3';

function get_order($orderId, $apiKey, $baseUrl) {
    $url = "$baseUrl/orders/$orderId";
    $opts = [
        'http' => [
            'header' => "Content-Type: application/json\r\nx-api-key: $apiKey\r\n",
            'method' => 'GET'
        ]
    ];
    $ctx = stream_context_create($opts);
    $result = file_get_contents($url, false, $ctx);
    return $result === FALSE ? [null, 'Error retrieving order'] : [json_decode($result, true), null];
}

function download_image($imageId, $apiKey, $baseUrl) {
    $url = "$baseUrl/images/$imageId/enhanced";
    $opts = [
        'http' => [
            'header' => "Content-Type: application/json\r\nx-api-key: $apiKey\r\n",
            'method' => 'GET'
        ]
    ];
    $ctx = stream_context_create($opts);
    $result = file_get_contents($url, false, $ctx);
    return $result === FALSE ? [null, 'Error downloading image'] : [json_decode($result, true), null];
}

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $orderId = $_POST['order_id'] ?? null;
    if (!$orderId) {
        http_response_code(400);
        echo json_encode(['error' => 'Missing order_id']);
        exit;
    }

    list($order, $err) = get_order($orderId, $apiKey, $baseUrl);
    if ($err) {
        http_response_code(500);
        echo json_encode(['error' => $err]);
        exit;
    }

    $enhancedImages = [];
    foreach ($order['images'] ?? [] as $img) {
        if (!empty($img['enhance'])) {
            list($downloaded, $dErr) = download_image($img['image_id'], $apiKey, $baseUrl);
            if (!$dErr) {
                $enhancedImages[] = $downloaded;
            }
        }
    }

    echo json_encode(['order' => $order, 'enhanced_images' => $enhancedImages]);
} else {
    // Render a basic HTML form to submit order_id
    echo '<form method="post"><input name="order_id" placeholder="Order ID"><button type="submit">Check</button></form>';
}
?>

If you want to read more about the options and settings for the Web SDK, follow this link

PreviousQuickstart NextSingle Image

Last updated 4 days ago