Help with P5.js and ML5.js

p5.js Libraries
1

Hello Community :slight_smile:

I’ve been playing with p5.js and the new ml5.js machine learning library. I’m having an issue using a p5 image as an input for the ml5 style transfer function. Maybe someone can help me figure out how to get my code working.

I have modified some code that was in the ml5 examples.

HTML file:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/ml5@0.1.1/dist/ml5.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.sound.min.js"></script>
    <meta charset="utf-8" />
    <style>
    img {
      width: 200px;
      height: 200px;
      display: inline;
    }
    </style>
  </head>
  <body>
    <h1>Style Transfer Image Example</h1>
    <p id="statusMsg">Loading Models...</p>
    <p>Input Image:</p>
    <img src="img/animal-chihuahua-cute-39317.jpg" alt="input img" id="inputImg">

    <div id="styleB">
      <!-- <img src="img/udnie.jpg" alt="style two"> -->
    </div>

    <script src="sketch.js"></script>
  </body>

  </html>

Javascript:

let iwidth = 200;
let iheight = 200;
let cwidth = 2000;
let cheight = 2000;

let inputImg2;
let isPressed = false;
let nI;

const newImage2 = new Image(iwidth, iheight);


 // The image we want to transfer
let inputImg = document.getElementById('inputImg');
const statusMsg = document.getElementById('statusMsg'); // The status message
const styleB = document.getElementById('styleB'); // The div contrianer that holds new style image B


function preload() {

  inputImg2 = loadImage("img/animal-chihuahua-cute-39317.jpg");

}

function setup() {

  createCanvas(cwidth, cheight);
  background(125);

  transferImages();

}


function draw() {
  background(125)
  if (isPressed) {
    image(nI,mouseX,mouseY,iwidth,iheight);


  }
  //noLoop();
}


function transferImages() {

   ml5.styleTransfer('models/udnie')
     .then(style2 => style2.transfer(inputImg2))
     .then(result => {
       newImage2.src = result.src;
       statusMsg.innerHTML = 'Done!';
       nI = loadImage(newImage2.src);
     });

  //  ml5.styleTransfer('models/udnie')
  //    .then(style2 => style2.transfer(inputImg))
  //    .then(result => {
  //      newImage2.src = result.src;
  //     statusMsg.innerHTML = 'Done!';
  //      nI = loadImage(newImage2.src);
  //    });

}

function mousePressed() {
  if (!isPressed) {

    isPressed = true;
  } else {

  }
}

Thanks in advance! Let me know if I need to rephrase or clarify my post.

1 Like
2

If any one is checking. I was able to get a solution that worked for me:

inputImage3 = createImg(inputImg2.canvas.toDataURL());
1 Like