let img, button, caption;

​

let bounding_boxes, categories, scores;

let boxX = 0;

let boxY = 0;

let boxW = 0;

let boxH = 0;

let boxCategory;

let score;

let totalBoxes = [];

let status;

let label;

​

const model = new rw.HostedModel({

  url: "https://yolov4-cf1b013e.hosted-models.runwayml.cloud/v1/",

  token: "VuJvDNbu3EyY/QsAHNah0g==",

});

​

if (typeof(model) == 'undefined') {

  console.log('model inactive')

} else {

  console.log('model active')

  document.querySelectorAll('#inactive')[0].classList.add('hidden')

}

​

async function checkModel() {

  document.querySelector('body').classList.add('loading')

  if (typeof(model) != 'undefined') {

    await model.waitUntilAwake();

    document.querySelector('body').classList.remove('loading')

  }

}

​

function setup() {

  // create canvas

  createCanvas(720, 360);

  img = loadImage("birds.jpeg")

  button = createButton("send image").mousePressed(sendInput);

  checkModel();

}

​

function draw() {

  background(220);

​

  image(img, 0, 0, 720, 360);

  drawBoxes();

​

  //this is how to check if a label is detected

  //change "bird" to whatever label you want to detect

  if (label === "bird") {

    //prompt an output

    //draw a shape/show some text 

    console.log("show output");

    fill(0);

    noStroke();

    text("this is my sentence if its a bird", 10, 50);

​

  }

}

​

function drawBoxes() {

  let x, y, w, h;

  if (status != undefined) {

    for (var i = 0; i < totalBoxes.length; i++) {

      let boxes = [];

      boxes = totalBoxes[i];

      boxX = boxes[0];

      boxY = boxes[1];

      boxW = boxes[2];

      boxH = boxes[3];

      x = boxX * width;

      y = boxY * height;

      w = (boxW * width) - x;

      h = (boxH * height) - y;

​

​

      noFill();

      stroke(0, 255, 0);

      rect(x, y, w, h);

      text(boxCategory[i] + "\n" + nfc(score[i], 3), x, y + 20);

      label = boxCategory[i];//read each category label

    }

  }

}

​

​

async function sendInput() {

​

  // load pixels of image file onto a canvas

  img.loadPixels();

​

  // create a base64-encoded version of the image

  let imageString = img.canvas.toDataURL('image/jpeg');

​

​

  // format the data to send to RunwayML, see Network tab > Input Specification

  const data = {

    image: imageString

  };

​

  // make a request to model in RunwayML

  if (typeof(model) != 'undefined') {

    const result = await model.query(data)

    gotData(result)

  }

}

​

function gotData(result) {

  const {

    results

  } = result;

  status = true;

  console.log(result);

​

  //the output results for a YOLO model. 

  totalBoxes = result.bounding_boxes;

  boxCategory = result.categories;

  score = result.scores;

​

​

}