added ability to "upload" and test with own image in mnist and cifar1…

…0 demos

demo/cifar10.html

@@ -13,6 +13,9 @@
 <script src="../build/util.js"></script>
 <script src="../build/convnet.js"></script>
 
+<script src="image-helpers.js"></script>
+<script src="pica.js"></script>
+
 <script src="cifar10/cifar10_labels.js"></script>
 <script type="text/javascript">
   // ------------------------
@@ -103,6 +106,17 @@ <h1>Training Stats</h1>
         <input id="buttoncg" type="submit" value="clear graph" onclick="clear_graph();"/>
       </div>
     </div>
+    <div class="secpart"> 
+      <div id="upload_box">
+        Test an image from your computer:
+        <div id="img_div">
+            <img id="preview_img"/>
+        </div>
+        <input name="image" type="file" accept="image/*" onchange="loadFile(event)">
+
+        <input type="submit" value="Test Image" onclick="testImage(document.getElementById('preview_img'))">
+      </div>
+    </div>
     <div style="clear:both;"></div>
   </div>
 

demo/image-helpers.js

@@ -0,0 +1,54 @@
+
+var loadFile = function(event) {
+var reader = new FileReader();
+reader.onload = function(){
+  var preview = document.getElementById('preview_img');
+  preview.src = centerCrop(reader.result);
+  preview.src = resize(preview.src);
+};
+reader.readAsDataURL(event.target.files[0]);
+};
+
+function centerCrop(src){
+    var image = new Image();
+    image.src = src;
+
+    var max_width = Math.min(image.width, image.height);
+    var max_height = Math.min(image.width, image.height);
+
+    var canvas = document.createElement('canvas');
+    var ctx = canvas.getContext("2d");
+
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    canvas.width = max_width;
+    canvas.height = max_height;
+    ctx.drawImage(image, (max_width - image.width)/2, (max_height - image.height)/2, image.width, image.height);
+    return canvas.toDataURL("image/png");
+}
+
+function resize(src){
+    var image = new Image();
+    image.src = src;
+
+    var canvas = document.createElement('canvas');
+    canvas.width = image.width;
+    canvas.height = image.height;
+    var ctx = canvas.getContext("2d");
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.drawImage(image, 0, 0, image.width, image.height);
+
+    var dst = document.createElement('canvas');
+    dst.width = image_dimension;
+    dst.height = image_dimension;
+
+    window.pica.WW = false;
+    window.pica.resizeCanvas(canvas, dst, {
+    quality: 2,
+    unsharpAmount: 500,
+    unsharpThreshold: 100,
+    transferable: false
+  }, function (err) {  });
+    window.pica.WW = true;
+    return dst.toDataURL("image/png");
+}
+

demo/images-demo.js

@@ -437,13 +437,14 @@ var test_predict = function() {
 
     // add predictions
     var probsdiv = document.createElement('div');
-    div.className = 'probsdiv';
+
     var t = '';
     for(var k=0;k<3;k++) {
       var col = preds[k].k===y ? 'rgb(85,187,85)' : 'rgb(187,85,85)';
-      t += '<div class=\"pp\" style=\"width:' + Math.floor(preds[k].p/n*100) + 'px; margin-left: 70px; background-color:' + col + ';\">' + classes_txt[preds[k].k] + '</div>'
+      t += '<div class=\"pp\" style=\"width:' + Math.floor(preds[k].p/n*100) + 'px; background-color:' + col + ';\">' + classes_txt[preds[k].k] + '</div>'
     }
     probsdiv.innerHTML = t;
+    probsdiv.className = 'probsdiv';
     div.appendChild(probsdiv);
 
     // add it into DOM
@@ -455,7 +456,44 @@ var test_predict = function() {
   testAccWindow.add(num_correct/num_total);
   $("#testset_acc").text('test accuracy based on last 200 test images: ' + testAccWindow.get_average());  
 }
+var testImage = function(img) {
+  var x = convnetjs.img_to_vol(img);
+  var out_p = net.forward(x);
+
+
+  var vis_elt = document.getElementById("visnet");
+  visualize_activations(net, vis_elt);
+
+  var preds =[]
+  for(var k=0;k<out_p.w.length;k++) { preds.push({k:k,p:out_p.w[k]}); }
+  preds.sort(function(a,b){return a.p<b.p ? 1:-1;});
+
+  // add predictions
+  var div = document.createElement('div');
+  div.className = 'testdiv';
+
+  // draw the image into a canvas
+  draw_activations_COLOR(div, x, 2);
 
+  var probsdiv = document.createElement('div');
+
+
+  var t = '';
+  for(var k=0;k<3;k++) {
+    var col = k===0 ? 'rgb(85,187,85)' : 'rgb(187,85,85)';
+    t += '<div class=\"pp\" style=\"width:' + Math.floor(preds[k].p/1*100) + 'px; background-color:' + col + ';\">' + classes_txt[preds[k].k] + '</div>'
+  }
+
+  probsdiv.innerHTML = t;
+  probsdiv.className = 'probsdiv';
+  div.appendChild(probsdiv);
+
+  // add it into DOM
+  $(div).prependTo($("#testset_vis")).hide().fadeIn('slow').slideDown('slow');
+  if($(".probsdiv").length>200) {
+    $("#testset_vis > .probsdiv").last().remove(); // pop to keep upper bound of shown items
+  }
+}
 
 var lossGraph = new cnnvis.Graph();
 var xLossWindow = new cnnutil.Window(100);

demo/mnist.html

@@ -13,6 +13,9 @@
 <script src="../build/util.js"></script>
 <script src="../build/convnet.js"></script>
 
+<script src="image-helpers.js"></script>
+<script src="pica.js"></script>
+
 <script src="mnist/mnist_labels.js"></script>
 <script type="text/javascript">
   // ------------------------
@@ -100,6 +103,17 @@ <h1>Training Stats</h1>
         <input id="buttoncg" type="submit" value="clear graph" onclick="clear_graph();"/>
       </div>
     </div>
+    <div class="secpart"> 
+      <div id="upload_box">
+        Test an image from your computer:
+        <div id="img_div">
+            <img id="preview_img"/>
+        </div>
+        <input name="image" type="file" accept="image/*" onchange="loadFile(event)">
+
+        <input type="submit" value="Test Image" onclick="testImage(document.getElementById('preview_img'))">
+      </div>
+    </div>
     <div style="clear:both;"></div>
   </div>