Virtual Try-On API sample

Reliable solution for detection of sensitive areas in an image and their automatic blurring

by api4ai

HTML

<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">

  <main class="container">
    <article style="margin-top: 0px; text-align: center;">
      <h3>Virtual Try-On API sample</h3>
      <p>Visualize how clothing looks on a person without physical fitting.</p>
    </article>
    <label for="file-person">Select person image
      <input type="file" id="file-person" name="file-person">
    </label>
    <label for="file-apparel">Select apparel image
      <input type="file" id="file-apparel" name="file-apparel">
    </label>
    <button id="submit-btn" disabled>Process</button>
    <h4 id="spinner" style="text-align: center;" aria-busy="true" hidden>Processing</h4>
    <section id="sectionParsedImage" hidden>
      <label for="result-image">💬 Result image:
        <img id="result-image">
      </label>
    </section>
  </main>

JavaScript

// Example of using API4AI Virtual Try-On API.

// Use 'normal' mode if you have an API Key from the API4AI Developer Portal. This is the method that users should normally prefer.
// Use 'rapidapi' if you want to try api4ai via RapidAPI marketplace.
// For more details visit:
//   https://rapidapi.com/api4ai-api4ai-default/api/virtual-try-on7/details
const MODE = 'normal'

// Your API4AI key. Fill this variable with the proper value if you have one.
const API4AI_KEY = ''

// Your RapidAPI key. Fill this variable with the proper value if you want
// to try api4ai via RapidAPI marketplace.
const RAPIDAPI_KEY = ''

const OPTIONS = {
  normal: {
    url: 'https://api4ai.cloud/virtual-try-on/v1/results',
    headers: { 'X-API-KEY': API4AI_KEY }
  },
  rapidapi: {
    url: 'https://virtual-try-on7.p.rapidapi.com/v1/results',
    headers: { 'X-RapidAPI-Key': RAPIDAPI_KEY }
  }
}

document.addEventListener('DOMContentLoaded', function (event) {
  const inputPerson = document.getElementById('file-person')
  const inputApparel = document.getElementById('file-apparel')
  const submitBtn = document.getElementById('submit-btn')
  const resultImage = document.getElementById('result-image')
  const sectionParsedImage = document.getElementById('sectionParsedImage')
  const spinner = document.getElementById('spinner')

  // Enable submit button only when both files are selected.
  function updateSubmitButton () {
    submitBtn.disabled = !(inputPerson.files[0] && inputApparel.files[0])
  }
  inputPerson.addEventListener('change', updateSubmitButton)
  inputApparel.addEventListener('change', updateSubmitButton)

  submitBtn.addEventListener('click', (event) => {
    const filePerson = inputPerson.files[0]
    const fileApparel = inputApparel.files[0]
    if (!filePerson || !fileApparel) {
      return false
    }

    sectionParsedImage.hidden = true
    spinner.hidden = false

    // Preapare request: form.
    const form = new...