Machine Learning Test 3

by codingdude

HTML

<script src="https://unpkg.com/[email protected]/dist/ml5.min.js"></script>
<img...

JavaScript

//https://github.com/ml5js/ml5-data-and-models/tree/master/models/style-transfer

function modelLoaded() {
  // Check if both models are loaded
  if(style1.ready){
    console.log('Style ready');
    document.querySelector(".transform").disabled = false;
    document.querySelector(".transform").innerText = "Transform";
  }
}

function transform(){
	console.log("transforming...");
  document.querySelector(".transform").disabled = true;
  document.querySelector(".transform").innerText = "Transforming...";
	var imgInput = document.querySelector(".input");
  var imgOutput = document.querySelector(".output");
  resizeImage(imgInput,100,function(resizedImg){
  	var img = new Image();
    img.onload = function(){
      
      style1.transfer(this, function(err, result) {
        if (err){console.log(err); return;}
        imgOutput.src = result.src;
        document.querySelector(".transform").disabled = false;
        document.querySelector(".transform").innerText = "Transform";    
      });
    }
  	img.src = resizedImg;
  	
  });

}
function resizeImage(img,maxSize,cb){
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext("2d");
  canvas.width = maxSize;
  canvas.height = maxSize;//canvas.width * (img.height / img.width);
  ctx.drawImage(img,0,0,maxSize,maxSize);
  cb(canvas.toDataURL());
}
document.querySelector(".transform").innerText = "Loading Style";
//style1 = ml5.styleTransfer('https://raw.githubusercontent.com/ml5js/ml5-data-and-models/master/models/style-transfer/wave/', modelLoaded);
style1 = ml5.styleTransfer('https://raw.githubusercontent.com/ml5js/ml5-data-and-models/master/models/style-transfer/udnie/', modelLoaded);
document.querySelector(".transform").onclick = transform;