Example of sending image file to YOLOv4 model in RunwayML 

​

Generate an text from an image with im2txt using RunwayML, https://runwayml.com/

Make sure the model is running in RunwayML before submitting data!

​

Note: RunwayML automatically stops running models after 10 minutes of inactivity.

If this happens you might see "TypeError" in the console.

​

p5.js reference for HTTP POST request: https://p5js.org/reference/#/p5/httpPost

*/

​

//complete conversion to YOLOv4 

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;

​

function setup() {

  createCanvas(720, 360);

  //img = loadImage("test.jpg")

  img = loadImage("birds.jpeg")

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

}

​

​

function sendPic() {

​

  // 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');

​

  // the path to send data to RunwayML, see Network tab > Routes > POST ->

  const path = "http://localhost:8000/query";

​

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

  const data = {

    image: imageString

  };

​

  // make a HTTP POST request to model in RunwayML

  httpPost(path, 'json', data, gotData, gotError);

}

​

​

// callback for when RunwayML returns the data

function gotData(data) {

  const {

    results

  } = data;

  status = true;

  //console.log(data);

  // console.log(data.bounding_boxes);

  // console.log(data.categories);

  // console.log(data.scores);

​

  totalBoxes = data.bounding_boxes;

  //console.log(totalBoxes);

​

  boxCategory = data.categories;

  score = data.scores;

  // console.log(boxCategory);

  // console.log(score);

​

}

​

​

// callback if there is an error

function gotError(error) {

  console.error(error)

}

​

​

function draw() {

  background(220);

​

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

  drawBoxes();

}

​

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

​

    }

  }

}