Machine Learning Test 3

by codingdude

HTML

<script src="https://unpkg.com/[email protected]/dist/ml5.min.js"></script>
<img src="https://ml5js.org/docs/assets/img/patagonia.jpg" crossorigin="anonymous" alt="" class="input">
<img src="" alt="" class="output">
<p>
<button class="transform" disabled>Transform</button>
</p>

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

function transform(){
	console.log("transforming...");
	var imgInput = document.querySelector(".input");
  var imgOutput = document.querySelector(".output");
	style1.transfer(imgInput, function(err, result) {
  	if (err){console.log(err); return;}
    imgOutput.src = result.src;
  });
}
style1 = ml5.styleTransfer('https://raw.githubusercontent.com/ml5js/ml5-data-and-models/master/models/style-transfer/wave/', modelLoaded);
document.querySelector(".transform").onclick = transform;