Layer visualization zoom

digits/model/tasks/caffe_train.py

@@ -1057,6 +1057,7 @@ def get_layer_visualizations(self, net, layers='all'):
     def get_layer_vis_square(self, data,
             allow_heatmap = True,
             normalize = True,
+            min_img_dim = 100,
             max_width = 1200,
             ):
         """
@@ -1123,11 +1124,19 @@ def get_layer_vis_square(self, data,
         if not allow_heatmap and data.ndim == 3:
             data = data[...,np.newaxis]
 
-        return utils.image.vis_square(data,
+        vis = utils.image.vis_square(data,
                 padsize     = padsize,
                 normalize   = normalize,
                 )
 
+        # find minimum dimension and upscale if necessary
+        _min = sorted(vis.shape[:2])[0]
+        if _min < min_img_dim:
+            # upscale image
+            ratio = min_img_dim/float(_min)
+            vis = utils.image.upscale(vis, ratio)
+        return vis
+
     def get_layer_statistics(self, data):
         """
         Returns statistics for the given layer data:

digits/templates/models/images/classification/classify_one.html

@@ -8,6 +8,8 @@
 
 {% block content %}
 
+<script src="{{ url_for('static', filename='js/jquery.elevateZoom.min.js') }}"></script>
+
 <div class="page-header">
     <h1>
         {{job.name()}}
@@ -111,7 +113,12 @@ <h3>"{{vis['name']}}"</h3>
         </td>
         <td>
             {% if vis['image_html'] %}
-            <img style="max-width:100%" src="{{vis['image_html']}}" />
+            <img style="max-width:100%" src="{{vis['image_html']}}" id="vis_{{ loop.index }}" />
+             <script>
+                $('#vis_{{ loop.index }}').elevateZoom({zoomType: "inner", cursor: "crosshair",
+                        zoomWindowFadeIn: 500, zoomWindowFadeOut: 750,
+                        scrollZoom: true, scrollZoomIncrement: 0.025});
+            </script>
             {% else %}
             <i>Not shown</i>
             {% endif %}

digits/templates/models/images/generic/infer_one.html

@@ -8,6 +8,8 @@
 
 {% block content %}
 
+<script src="{{ url_for('static', filename='js/jquery.elevateZoom.min.js') }}"></script>
+
 <div class="page-header">
     <h1>
         {{job.name()}}
@@ -107,7 +109,12 @@ <h3>"{{vis['name']}}"</h3>
         </td>
         <td>
             {% if vis['image_html'] %}
-            <img style="max-width:100%" src="{{vis['image_html']}}" />
+            <img style="max-width:100%" src="{{vis['image_html']}}" id="vis_{{ loop.index }}"/>
+            <script>
+                $('#vis_{{ loop.index }}').elevateZoom({zoomType: "inner", cursor: "crosshair",
+                        zoomWindowFadeIn: 500, zoomWindowFadeOut: 750,
+                        scrollZoom: true, scrollZoomIncrement: 0.025});
+            </script>
             {% else %}
             <i>Not shown</i>
             {% endif %}

digits/utils/image.py

@@ -7,6 +7,7 @@
 import PIL.Image
 import numpy as np
 import scipy.misc
+import math
 
 from . import is_url, HTTP_TIMEOUT, errors
 
@@ -81,6 +82,26 @@ def load_image(path):
     else:
         raise errors.LoadImageError, 'Image mode "%s" not supported' % image.mode
 
+def upscale(image, ratio):
+    """
+    return upscaled image array
+
+    Arguments:
+    image -- a (H,W,C) numpy.ndarray
+    ratio -- scaling factor (>1)
+    """
+    if not isinstance(image, np.ndarray):
+        raise ValueError('Expected ndarray')
+    if ratio<1:
+        raise ValueError('Ratio must be greater than 1 (ratio=%f)' % ratio)
+    width = int(math.ceil(image.shape[1] * ratio))
+    height = int(math.ceil(image.shape[0] * ratio))
+    channels = image.shape[2]
+    out = np.ndarray((height, width, channels),dtype=np.uint8)
+    for x, y in np.ndindex((width,height)):
+        out[y,x] = image[math.floor(y/ratio), math.floor(x/ratio)]
+    return out
+
 def resize_image(image, height, width,
         channels=None,
         resize_mode=None,