deeplearn.js playground 1509994912630

html

<h1 align=center>SqueezeNet Cat Demo</h1>
Trying to dynamically load an image but running into corssorigin issues.
Have had some suuccess with <br>
//https://crossorigin.me/your-URL<br><br>

https://www.what-dog.net/Images/faces2/scroll001.jpg <br>

but then how to re-activate the script. It does not seem to have a way to call it<br>


<script src='https://unpkg.com/deeplearn-squeezenet'></script>

<img id='cat' src='https://storage.googleapis.com/learnjs-data/images/cat.jpeg' width=227 height=227 crossorigin ><br><br>

<input id="myFile" type=file size=100   onchange="{
   document.getElementById('cat').onload = function() {
     context.drawImage(document.getElementById('cat'), 400, 400);
   };
   document.getElementById('cat').crossOrigin = 'Use-Credentials';
   document.getElementById('myFile01').value = this.value
   document.getElementById('cat').src = this.value

}">






<input id="myFile01" type=text size=100 value='https://storage.googleapis.com/learnjs-data/images/cat.jpeg' onChange="{
// document.getElementById('cat').onload = function() {
//    context.drawImage(this, 40, 40);
//};
 // document.getElementById('cat').crossOrigin = 'Anonymous';
 
 document.getElementById('cat').crossOrigin = 'Use-Credentials';
 
 
  document.getElementById('cat').src = this.value
  document.getElementById('myDivOut').innerHTML = ''   // clear the div
}"><br><br>


<div id="myDivOut">...</div>

js

const catImage = document.getElementById('cat');
const math = new dl.NDArrayMathGPU();
const squeezeNet = new squeezenet.SqueezeNet(math);

await squeezeNet.load();
const image = dl.Array3D.fromPixels(catImage);
const inferenceResult = await squeezeNet.predict(image);

const topClassesToProbs = await squeezeNet.getTopKClasses(inferenceResult.logits, 10);
document.getElementById('myDivOut').innerHTML = ''   // clear the div
for (const className in topClassesToProbs) { 
   document.getElementById('myDivOut').innerHTML += topClassesToProbs[className].toFixed(5) + ' : '+ className + '<br>'
}