ui.html

<style>
</style>
<button id="process" class="controls" disabled>Process</button>
<button id="undo" class="controls" disabled>Undo</button>
<button id="clear" class="controls" disabled>Clear</button>
<img id="image" style="display: none;" />
<canvas id="canvas" />
<script>

let points = [];
let img = document.getElementById("image");
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
let controls = document.getElementsByClassName("controls");
let enabled = false;

const url = 'http://127.0.0.1:5000/v1.0/removebg'
const api_key = 'this_is_api_key'
const hdrs =  {
                //'X-Api-Key': api_key,
                //'Accept': 'application/json'
              }

function enableControls() {
  for(let i = 0; i < controls.length; ++i) {
    controls[i].disabled = false;
  }
  enabled = true;
}

function disableControls() {
  for(let i = 0; i < controls.length; ++i) {
    controls[i].disabled = true;
  }
  enabled = false;
}

function sendPoints() {
  if (!enabled) {
    return;
  }
  
  fetch(url, { method: 'POST', headers: hdrs, body: JSON.stringify({'points': points}) }).then(response => {
      if(!response.ok) {
          throw response
      }
      // TODO: apply mask from response
      return response;
  });
}

function _drawPoint(x, y, color) {
  if (!enabled) {
    return;
  }
  var circle = new Path2D();
  circle.arc(x, y, 3, 0, 2 * Math.PI);
  ctx.fillStyle = color;
  ctx.fill(circle);
}

let typeToColor = (type) => type === 0 ? "red" : "blue";

function _addPoint(x_, y_, type_) {
  if (!enabled) {
    return;
  }
  points.push({x: x_, y: y_, type: type_});
  _drawPoint(x_, y_, typeToColor(type_));
  sendPoints();
}

function _removePoint() {
  if (!enabled) {
    return;
  }
  points.pop();
  ctx.drawImage(img, 0, 0);
  for (const i in points) {
    let p = points[i];
    _drawPoint(p.x, p.y, typeToColor(p.type));
  }
  sendPoints();
}

function _clearPoints() {
  if (!enabled) {
    return;
  }
  points = [];
  ctx.drawImage(img, 0, 0);
  // TODO: clear mask
}

document.getElementById('process').onclick = () => {
  if (!enabled) {
    return;
  }
  parent.postMessage({ pluginMessage: { type: 'process' } }, '*')
}

document.getElementById('undo').onclick = _removePoint;

document.getElementById('clear').onclick = _clearPoints;

canvas.onclick = (event) => {
  _addPoint(event.offsetX, event.offsetY, 0);
}

canvas.oncontextmenu = (event) => {
  _addPoint(event.offsetX, event.offsetY, 1);
}

// Create an event handler to receive messages from the main thread
window.onmessage = async (event) => {
  img.onload = () => {
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);
    parent.postMessage({ pluginMessage: { type: 'resize', width: img.width, height: img.height } }, '*');
  }
  // Just get the bytes directly from the pluginMessage since that's
  // the only type of message we'll receive in this plugin. In more
  // complex plugins, you'll want to check the type of the message.
  const bytes = event.data.pluginMessage;
  //let data = new FormData();
  let base64 = btoa(new Uint8Array(bytes).reduce((data, byte) => {
      return data + String.fromCharCode(byte)
  }, ''));

  fetch(url, { method: 'POST', headers: hdrs, body: JSON.stringify({'image': base64}) }).then(response => {
      if(!response.ok) {
          throw response
      }
      //img.src = "data:image/png;base64," + base64;
      //enableControls();
      return response;
  });
  // TODO: enable controls only after response
  img.src = "data:image/png;base64," + base64;
  enableControls();
}

</script>