asynchronous - createImage() vs createImg() vs loadImage() in p5. which to use to load in an array of images for use in ml5?

Question

I am attempting to piece together an example from ml5 on image style transfer (https://ml5js.org/docs/style-transfer-image-example) with p5.js examples parsing a JSON of image URLs, and adding them to an array to display as images. I am hitting a dead end as I do not think I fully understand the ways that p5 stores images in an array, nor do I fully understand the difference between createImg() createImage() or loadImage() (which one to use!!)

The goal is to use Bing image API to return a list of URLS from a search (this part is working fine) and run those images through a pretrained model (this part is working fine when just used on a local image). It is the bringing the two together that I am unable to figure out. Any suggestions or advice (is this even possible??!) greatly appreciated.

I have already tried loading images into an array and iterating through the array in the draw() function. The problem happens when I need to address an image in order to actually apply the style transfer model. It seems like my array is empty when I attempt to refer to it anywhere except draw(). I am sure I am thinking about this incorrectly.

var imageData;
let imgArray = [];

var w = (window.innerWidth)/3;
var h = (window.innerHeight)/4;
var index = 0;
var xPos = 0;
var yPos = 0;
var indexMax = 3;

let style;
let resultImg;

function preload() {
  loadData();
}

function loadData(){
  var url = api + search + subscriptionKey;
  loadJSON(url, gotData);
}

function gotData(data) {
  imageData = data;

  for (var i=0; i < indexMax; i++){
      _url = imageData.value[i].contentUrl;
      imgArray.push(loadImage(_url));

  }

function displayImages(){
  if (index < 3){
      index++;
    } else {
      index = 0;
    };

function setup() {
  createCanvas(1200, 800).parent('canvasContainer');

  var button = select('#display');
  button.mousePressed(displayImages);

  var transferBtn = select('#transferBtn');
  transferBtn.mousePressed(transferImages);

  //create style method
  style = ml5.styleTransfer('/model', modelLoaded);

}

function draw() {
  image(imgArray[index], xPos, yPos, w, h);

}

//ml5 stuff 
function modelLoaded() {
  if (style.ready){
   select('#status').html('Model Loaded');
    //style.transfer(gotResult);
  }
}

function transferImages(){
  select('#status').html('applying style transfer');

  style.transfer(tempImg, function(err, result){
    createImg(result.src);
  });

 select('#status').html('done');
}

I am attempting to (unsuccessfully) create a "tempImg" from imgArray[0] to try to figure out where this createImage needs to go, but have not gotten this to work. I have CORS enabled, so I didnt think this was the problem, but am getting the following error. Please help me understand how to think about this differently.

标签： asynchronousprocessingp5.jstensorflow.js

Answer 1

您应该使用loadImage而不是createImg.

style.transfer(tempImg, function(err, result){
    p5CompatibleImage = loadImage(result.src);
});