JavaScript SDK

Use the SuperStyle API from JavaScript in both Node.js and browser environments.

Node.js

Quick example

const API_KEY = "ss_your_key_here";
const BASE_URL = "https://mcll3bnfubyazfg6wekv3xc6fi0dgpyk.lambda-url.us-east-1.on.aws";

async function identifyClothing(imageUrl) {
  const response = await fetch(`${BASE_URL}/identify_clothing`, {
    method: "POST",
    headers: {
      "X-API-Key": API_KEY,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ image_url: imageUrl }),
  });

  const data = await response.json();
  return data.items;
}

// Usage
const items = await identifyClothing("https://example.com/outfit.jpg");
items.forEach((item) => {
  console.log(`${item.item}: ${item.color}`);
});

Generate try-on image (Node.js)

const fs = require("fs");

async function generateTryOn(selfiePath, clothingDescription) {
  const selfieBase64 = fs.readFileSync(selfiePath).toString("base64");

  const response = await fetch(`${BASE_URL}/generate_image`, {
    method: "POST",
    headers: {
      "X-API-Key": API_KEY,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      selfie_base64: selfieBase64,
      clothing_description: clothingDescription,
      mode: "studio",
    }),
  });

  const data = await response.json();
  const imageBuffer = Buffer.from(data.image_base64, "base64");
  fs.writeFileSync("tryon.jpg", imageBuffer);
  console.log("Saved tryon.jpg");
}

await generateTryOn("selfie.jpg", "Black leather jacket");

Browser

Identify clothing from a URL

async function analyzeOutfit(imageUrl) {
  const response = await fetch("https://mcll3bnfubyazfg6wekv3xc6fi0dgpyk.lambda-url.us-east-1.on.aws/identify_clothing", {
    method: "POST",
    headers: {
      "X-API-Key": "ss_your_key_here", // Use a backend proxy in production!
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ image_url: imageUrl }),
  });

  return response.json();
}

Caution

Never expose API keys in client-side browser code for production applications. Use a backend proxy to keep your key secure.

Generate try-on from file input

async function handleFileUpload(file, clothingDescription) {
  // Convert file to base64
  const base64 = await new Promise((resolve) => {
    const reader = new FileReader();
    reader.onloadend = () => {
      const base64String = reader.result.split(",")[1];
      resolve(base64String);
    };
    reader.readAsDataURL(file);
  });

  const response = await fetch("https://mcll3bnfubyazfg6wekv3xc6fi0dgpyk.lambda-url.us-east-1.on.aws/generate_image", {
    method: "POST",
    headers: {
      "X-API-Key": "ss_your_key_here",
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      selfie_base64: base64,
      clothing_description: clothingDescription,
      mode: "studio",
    }),
  });

  const data = await response.json();

  // Display the result
  const img = document.createElement("img");
  img.src = `data:${data.mime_type};base64,${data.image_base64}`;
  document.body.appendChild(img);
}

// Usage with a file input
document.querySelector("#fileInput").addEventListener("change", (e) => {
  const file = e.target.files[0];
  handleFileUpload(file, "Black leather jacket");
});

Check usage

async function getUsage() {
  const response = await fetch("https://mcll3bnfubyazfg6wekv3xc6fi0dgpyk.lambda-url.us-east-1.on.aws/usage", {
    headers: { "X-API-Key": "ss_your_key_here" },
  });
  return response.json();
}

const stats = await getUsage();
console.log(`Total requests: ${stats.total_requests}`);
console.log(`Today: ${stats.requests_today}`);

Error handling

async function safeApiCall(url, options) {
  const response = await fetch(url, options);

  if (!response.ok) {
    const error = await response.json();
    throw new Error(`API Error (${response.status}): ${error.error}`);
  }

  return response.json();
}