[GCI] Added Lightning Bolt for WASM accelerated modules (#1365)

* wasmSuccess * modules use wasmSuccess * modules use wasmSuccess * add the tooltip
2025-12-11 19:00:00 +01:00 · 2019-12-19 23:45:42 +00:00
parent b7d5a98cdb
commit 6476b8d698
41 changed files with 119 additions and 173 deletions
--- a/examples/demo.css
+++ b/examples/demo.css
@@ -296,19 +296,19 @@ a.name-header{
  cursor: default;
 }

-.dimension-tooltip:hover{
+.general-tooltip:hover{
  text-decoration: none;
 }

-.dimension-tooltip:focus{
+.general-tooltip:focus{
  outline: none;
 }

-.dimension-tooltip:focus-within{
+.general-tooltip:focus-within{
  outline: none;
 }

-.dimension-tooltip{
+.general-tooltip{
  position: relative;
  bottom: 7px;
  font-size: 16px;
--- a/examples/lib/defaultHtmlStepUi.js
+++ b/examples/lib/defaultHtmlStepUi.js
@@ -28,7 +28,14 @@ function DefaultHtmlStepUi(_sequencer, options) {
      <div class="container-fluid step-container">\
          <div class="panel panel-default">\
            <div class="panel-heading">\
-              <div class="trash-container pull-right"><button type="button" class="btn btn-link ' + step.name + ' dimension-tooltip" data-toggle="tooltip" data-html="true" title="" data-original-title=""><i class="fa fa-info-circle"></i></button></div>\
+              <div class="trash-container pull-right">\
+                <a type="button" target="_blank" href="https://developer.mozilla.org/en-US/docs/WebAssembly" style="display: none;" class="btn btn-link general-tooltip wasm-tooltip" data-toggle="tooltip" data-html="true" data-original-title="<div style=\'text-align: center\'><p>This step is Web Assembly accelerated. Click to Read More</div>">\
+                  <i class="fa fa-bolt"></i>\
+                </a>\
+                <button type="button" class="btn btn-link ' + step.name + ' general-tooltip dimension-tooltip" data-toggle="tooltip" data-html="true" data-original-title="">\
+                  <i class="fa fa-info-circle"></i>\
+                </button>\
+              </div>\
              <h3 class="panel-title">' +
                '<span class="toggle mouse">' + step.name + ' <span class="caret toggleIcon rotated"></span>\
                 <span class="load-spin pull-right" style="display:none;padding:1px 8px;"><i class="fa fa-circle-o-notch fa-spin"></i></span>\
@@ -335,7 +342,15 @@ function DefaultHtmlStepUi(_sequencer, options) {
      _sequencer.getImageDimensions(step.imgElement.src, function (dim) {
        step.ui.querySelector('.' + step.name).attributes['data-original-title'].value = `<div style="text-align: center"><p>Image Width: ${dim.width}<br>Image Height: ${dim.height}</br></div>`;
      });
-    });
+    })
+
+    // Handle the wasm bolt display
+
+    if (step.useWasm) {
+      if (step.wasmSuccess) $step('.wasm-tooltip').fadeIn();
+      else $step('.wasm-tooltip').fadeOut();
+    }
+    else $step('.wasm-tooltip').fadeOut();
  }

  function imageHover(step){
--- a/src/Run.js
+++ b/src/Run.js
@@ -45,6 +45,8 @@ function Run(ref, json_q, callback, ind, progressObj) {

          // This output is accessible by UI
          ref.steps[i].options.step.output = ref.steps[i].output.src;
+          ref.steps[i].options.step.wasmSuccess = ref.steps[i].output.wasmSuccess || false;
+          ref.steps[i].options.step.useWasm = ref.steps[i].output.useWasm || false;

          // Tell UI that step has been drawn.
          ref.steps[i].UI.onComplete(ref.steps[i].options.step);
--- a/src/modules/AddQR/Module.js
+++ b/src/modules/AddQR/Module.js
@@ -25,9 +25,11 @@ module.exports = function AddQR(options, UI) {
        }
        require('./QR')(options, pixels, oldPixels, generateOutput);
      }
-      function output(image, datauri, mimetype) {
-        step.output = { src: datauri, format: mimetype };
+
+      function output(image, datauri, mimetype, wasmSuccess) {
+        step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
      }
+
      return require('../_nomodule/PixelManipulation.js')(input, {
        output: output,
        ui: options.step.ui,
@@ -40,7 +42,6 @@ module.exports = function AddQR(options, UI) {
        useWasm:options.useWasm
      });
    });
-
  }

  return {
--- a/src/modules/Average/Module.js
+++ b/src/modules/Average/Module.js
@@ -47,13 +47,8 @@ module.exports = function Average(options, UI) {
      return pixels;
    }

-    function output(image, datauri, mimetype) {
-
-      // This output is accessible by Image Sequencer
-      step.output = {
-        src: datauri,
-        format: mimetype
-      };
+    function output(image, datauri, mimetype, wasmSuccess) {
+      step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
    }

    return require('../_nomodule/PixelManipulation.js')(input, {
--- a/src/modules/Blend/Module.js
+++ b/src/modules/Blend/Module.js
@@ -47,11 +47,8 @@ module.exports = function Dynamic(options, UI, util) {
        );
      }

-      function output(image, datauri, mimetype) {
-
-        // This output is accessible by Image Sequencer
-        step.output = { src: datauri, format: mimetype };
-
+      function output(image, datauri, mimetype, wasmSuccess) {
+        step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
      }

      // run PixelManipulatin on second image's pixels
--- a/src/modules/BlobAnalysis/Module.js
+++ b/src/modules/BlobAnalysis/Module.js
@@ -18,9 +18,8 @@ module.exports = function BlobAnalysis(options, UI){
      return pixels;
    }
  
-    function output(image, datauri, mimetype){
-  
-      step.output = { src: datauri, format: mimetype};
+    function output(image, datauri, mimetype, wasmSuccess) {
+      step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
    }
  
    return require('../_nomodule/PixelManipulation.js')(input, {
--- a/src/modules/Blur/Module.js
+++ b/src/modules/Blur/Module.js
@@ -20,11 +20,8 @@ module.exports = function Blur(options, UI) {
      return pixels;
    }

-    function output(image, datauri, mimetype) {
-
-      // This output is accessible by Image Sequencer
-      step.output = { src: datauri, format: mimetype };
-
+    function output(image, datauri, mimetype, wasmSuccess) {
+      step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
    }

    return require('../_nomodule/PixelManipulation.js')(input, {
--- a/src/modules/Brightness/Module.js
+++ b/src/modules/Brightness/Module.js
@@ -31,11 +31,8 @@ module.exports = function Brightness(options, UI) {
      return [r, g, b, a];
    }

-    function output(image, datauri, mimetype) {
-
-      // This output is accessible by Image Sequencer
-      step.output = { src: datauri, format: mimetype };
-
+    function output(image, datauri, mimetype, wasmSuccess) {
+      step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
    }

    return require('../_nomodule/PixelManipulation.js')(input, {
--- a/src/modules/CanvasResize/Module.js
+++ b/src/modules/CanvasResize/Module.js
@@ -35,11 +35,8 @@ module.exports = function canvasResize(options, UI) {
      return newPixels;
    }

-    function output(image, datauri, mimetype) {
-
-      // This output is accessible by Image Sequencer
-      step.output = { src: datauri, format: mimetype };
-
+    function output(image, datauri, mimetype, wasmSuccess) {
+      step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
    }

    return require('../_nomodule/PixelManipulation.js')(input, {
--- a/src/modules/Channel/Module.js
+++ b/src/modules/Channel/Module.js
@@ -22,11 +22,8 @@ module.exports = function Channel(options, UI) {
      if (options.channel === 'blue') return [0, 0, b, a];
    }

-    function output(image, datauri, mimetype) {
-
-      // This output is accesible by Image Sequencer
-      step.output = { src: datauri, format: mimetype };
-
+    function output(image, datauri, mimetype, wasmSuccess) {
+      step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
    }

    return require('../_nomodule/PixelManipulation.js')(input, {
--- a/src/modules/ColorTemperature/Module.js
+++ b/src/modules/ColorTemperature/Module.js
@@ -52,10 +52,8 @@ module.exports = function ColorTemperature(options, UI) {
      return pixels;
    }

-    function output(image, datauri, mimetype) {
-
-      step.output = { src: datauri, format: mimetype };
-
+    function output(image, datauri, mimetype, wasmSuccess) {
+      step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
    }

    return require('../_nomodule/PixelManipulation.js')(input, {
--- a/src/modules/Colormap/Module.js
+++ b/src/modules/Colormap/Module.js
@@ -16,12 +16,10 @@ module.exports = function Colormap(options, UI) {
      return [res[0], res[1], res[2], 255];
    }

-    function output(image, datauri, mimetype) {
-
-      // This output is accessible by Image Sequencer
-      step.output = { src: datauri, format: mimetype };
-
+    function output(image, datauri, mimetype, wasmSuccess) {
+      step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
    }
+    
    return require('../_nomodule/PixelManipulation.js')(input, {
      output: output,
      ui: options.step.ui,
--- a/src/modules/Contrast/Module.js
+++ b/src/modules/Contrast/Module.js
@@ -20,11 +20,8 @@ module.exports = function Contrast(options, UI) {
      return pixels;
    }

-    function output(image, datauri, mimetype) {
-
-      // This output is accessible by Image Sequencer
-      step.output = { src: datauri, format: mimetype };
-
+    function output(image, datauri, mimetype, wasmSuccess) {
+      step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
    }

    return require('../_nomodule/PixelManipulation.js')(input, {
--- a/src/modules/Convolution/Module.js
+++ b/src/modules/Convolution/Module.js
@@ -19,10 +19,8 @@ module.exports = function Convolution(options, UI) {
      return pixels;
    }

-    function output(image, datauri, mimetype) {
-
-      step.output = { src: datauri, format: mimetype };
-
+    function output(image, datauri, mimetype, wasmSuccess) {
+      step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
    }

    return require('../_nomodule/PixelManipulation.js')(input, {
--- a/src/modules/DecodeQr/Module.js
+++ b/src/modules/DecodeQr/Module.js
@@ -28,13 +28,10 @@ module.exports = function DoNothing(options, UI) {
      options.step.qrval = (decoded) ? decoded.data : 'undefined';
    });

-    function output(image, datauri, mimetype) {
-      // This output is accessible by Image Sequencer
-      step.output = {
-        src: datauri,
-        format: mimetype
-      };
+    function output(image, datauri, mimetype, wasmSuccess) {
+      step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
    }
+    
    return require('../_nomodule/PixelManipulation.js')(input, {
      output: output,
      ui: options.step.ui,
--- a/src/modules/Dither/Module.js
+++ b/src/modules/Dither/Module.js
@@ -15,10 +15,8 @@ module.exports = function Dither(options, UI) {
      return pixels;
    }

-    function output(image, datauri, mimetype) {
-      // This output is accessible by Image Sequencer
-      step.output = { src: datauri, format: mimetype };
-
+    function output(image, datauri, mimetype, wasmSuccess) {
+      step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
    }

    return require('../_nomodule/PixelManipulation.js')(input, {
--- a/src/modules/DrawRectangle/Module.js
+++ b/src/modules/DrawRectangle/Module.js
@@ -19,10 +19,8 @@ module.exports = function DrawRectangle(options, UI) {
      return pixels;
    }

-    function output(image, datauri, mimetype) {
-
-      step.output = { src: datauri, format: mimetype };
-
+    function output(image, datauri, mimetype, wasmSuccess) {
+      step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
    }

    return require('../_nomodule/PixelManipulation.js')(input, {
--- a/src/modules/Dynamic/Module.js
+++ b/src/modules/Dynamic/Module.js
@@ -71,12 +71,10 @@ module.exports = function Dynamic(options, UI) {
      }
    }

-    function output(image, datauri, mimetype) {
-
-      // This output is accessible by Image Sequencer
-      step.output = { src: datauri, format: mimetype };
-
+    function output(image, datauri, mimetype, wasmSuccess) {
+      step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
    }
+    
    return require('../_nomodule/PixelManipulation.js')(input, {
      output: output,
      ui: options.step.ui,
--- a/src/modules/EdgeDetect/Module.js
+++ b/src/modules/EdgeDetect/Module.js
@@ -38,8 +38,8 @@ module.exports = function edgeDetect(options, UI) {
            return require('./EdgeUtils')(blurPixels, options.highThresholdRatio, options.lowThresholdRatio, options.hysteresis);
          }

-          function output(image, datauri, mimetype) {
-            step.output = { src: datauri, format: mimetype };
+          function output(image, datauri, mimetype, wasmSuccess) {
+            step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
          }

          return require('../_nomodule/PixelManipulation.js')(input, {
--- a/src/modules/Exposure/Module.js
+++ b/src/modules/Exposure/Module.js
@@ -24,11 +24,8 @@ module.exports = function Exposure(options, UI) {
      return [r, g, b, a];
    }

-    function output(image, datauri, mimetype) {
-
-      // This output is accessible by Image Sequencer
-      step.output = { src: datauri, format: mimetype };
-
+    function output(image, datauri, mimetype, wasmSuccess) {
+      step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
    }

    return require('../_nomodule/PixelManipulation.js')(input, {
--- a/src/modules/FlipImage/Module.js
+++ b/src/modules/FlipImage/Module.js
@@ -25,8 +25,9 @@ module.exports = function FlipImage(options, UI) {
        }
        return require('./flipImage')(oldPixels, pixels, options.Axis);
      }
-      function output(image, datauri, mimetype) {
-        step.output = { src: datauri, format: mimetype };
+      
+      function output(image, datauri, mimetype, wasmSuccess) {
+        step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
      }

      return require('../_nomodule/PixelManipulation.js')(input, {
--- a/src/modules/GammaCorrection/Module.js
+++ b/src/modules/GammaCorrection/Module.js
@@ -21,10 +21,8 @@ module.exports = function Gamma(options, UI) {
      return [r, g, b, a];
    }

-    function output(image, datauri, mimetype) {
-
-      step.output = { src: datauri, format: mimetype };
-
+    function output(image, datauri, mimetype, wasmSuccess) {
+      step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
    }

    return require('../_nomodule/PixelManipulation.js')(input, {
--- a/src/modules/Gradient/Module.js
+++ b/src/modules/Gradient/Module.js
@@ -44,11 +44,8 @@ module.exports = function Invert(options, UI) {
      });
    });

-    function output(image, datauri, mimetype) {
-
-      // This output is accessible by Image Sequencer
-      step.output = { src: datauri, format: mimetype };
-
+    function output(image, datauri, mimetype, wasmSuccess) {
+      step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
    }
  }

--- a/src/modules/GridOverlay/Module.js
+++ b/src/modules/GridOverlay/Module.js
@@ -15,11 +15,8 @@ module.exports = function GridOverlay(options, UI) {
      return pixels;
    }

-    function output(image, datauri, mimetype) {
-
-      // This output is accesible by Image Sequencer
-      step.output = { src: datauri, format: mimetype };
-
+    function output(image, datauri, mimetype, wasmSuccess) {
+      step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
    }

    return require('../_nomodule/PixelManipulation.js')(input, {
--- a/src/modules/Histogram/Module.js
+++ b/src/modules/Histogram/Module.js
@@ -63,11 +63,8 @@ module.exports = function Channel(options, UI) {
      return pixels;
    }

-    function output(image, datauri, mimetype) {
-
-      // This output is accesible by Image Sequencer
-      step.output = { src: datauri, format: mimetype };
-
+    function output(image, datauri, mimetype, wasmSuccess) {
+      step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
    }

    return require('../_nomodule/PixelManipulation.js')(input, {
--- a/src/modules/Invert/Module.js
+++ b/src/modules/Invert/Module.js
@@ -17,11 +17,8 @@ function Invert(options, UI) {
      return [255 - r, 255 - g, 255 - b, a];
    }

-    function output(image, datauri, mimetype) {
-
-      // This output is accessible by Image Sequencer
-      step.output = { src: datauri, format: mimetype };
-
+    function output(image, datauri, mimetype, wasmSuccess) {
+      step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
    }

    return input.pixelManipulation({
--- a/src/modules/MinifyImage/Module.js
+++ b/src/modules/MinifyImage/Module.js
@@ -82,13 +82,8 @@ module.exports = function MinifyImage(options, UI) {
    }


-    function output(datauri, mimetype) {
-
-      // This output is accessible by Image Sequencer
-      step.output = {
-        src: datauri,
-        format: mimetype
-      };
+    function output(image, datauri, mimetype, wasmSuccess) {
+      step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
    }
  }
  return {
--- a/src/modules/Ndvi/Module.js
+++ b/src/modules/Ndvi/Module.js
@@ -25,11 +25,8 @@ module.exports = function Ndvi(options, UI) {
      return [x, x, x, a];
    }

-    function output(image, datauri, mimetype) {
-
-      // This output is accessible by Image Sequencer
-      step.output = { src: datauri, format: mimetype };
-
+    function output(image, datauri, mimetype, wasmSuccess) {
+      step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
    }

    function modifiedCallback() {
--- a/src/modules/NoiseReduction/Module.js
+++ b/src/modules/NoiseReduction/Module.js
@@ -15,10 +15,8 @@ module.exports = function NoiseReduction(options, UI) {
      return pixels;
    }

-    function output(image, datauri, mimetype) {
-      // This output is accessible by Image Sequencer
-      step.output = { src: datauri, format: mimetype };
-
+    function output(image, datauri, mimetype, wasmSuccess) {
+      step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
    }

    return require('../_nomodule/PixelManipulation.js')(input, {
--- a/src/modules/Overlay/Module.js
+++ b/src/modules/Overlay/Module.js
@@ -55,11 +55,8 @@ module.exports = function Dynamic(options, UI, util) {
          return [r1, g1, b1, a1];
      }

-      function output(image, datauri, mimetype) {
-
-        // This output is accessible by Image Sequencer
-        step.output = { src: datauri, format: mimetype };
-
+      function output(image, datauri, mimetype, wasmSuccess) {
+        step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
      }

      // run PixelManipulation on first Image pixels
--- a/src/modules/PaintBucket/Module.js
+++ b/src/modules/PaintBucket/Module.js
@@ -16,9 +16,8 @@ module.exports = function PaintBucket(options, UI) {

    }

-    function output(image, datauri, mimetype) {
-      // This output is accesible by Image Sequencer
-      step.output = { src: datauri, format: mimetype };
+    function output(image, datauri, mimetype, wasmSuccess) {
+      step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
    }

    return require('../_nomodule/PixelManipulation.js')(input, {
--- a/src/modules/ReplaceColor/Module.js
+++ b/src/modules/ReplaceColor/Module.js
@@ -18,11 +18,8 @@ module.exports = function ReplaceColor(options, UI) {
      return pixels;
    }

-    function output(image, datauri, mimetype) {
-
-      // This output is accessible by Image Sequencer
-      step.output = { src: datauri, format: mimetype };
-
+    function output(image, datauri, mimetype, wasmSuccess) {
+      step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
    }

    return require('../_nomodule/PixelManipulation.js')(input, {
--- a/src/modules/Resize/Module.js
+++ b/src/modules/Resize/Module.js
@@ -47,11 +47,9 @@ module.exports = function Resize(options, UI) {
      return pixels;
    }

-    function output(image, datauri, mimetype) {
-      // This output is accesible by Image Sequencer
-      step.output = { src: datauri, format: mimetype };
+    function output(image, datauri, mimetype, wasmSuccess) {
+      step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
    }
-
    return require('../_nomodule/PixelManipulation.js')(input, {
      output: output,
      ui: options.step.ui,
--- a/src/modules/Rotate/Module.js
+++ b/src/modules/Rotate/Module.js
@@ -35,9 +35,8 @@ module.exports = function Rotate(options, UI) {
    }
      

-    function output(image, datauri, mimetype) {
-      // This output is accesible by Image Sequencer
-      step.output = { src: datauri, format: mimetype };
+    function output(image, datauri, mimetype, wasmSuccess) {
+      step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
    }

    return require('../_nomodule/PixelManipulation.js')(input, {
--- a/src/modules/Saturation/Module.js
+++ b/src/modules/Saturation/Module.js
@@ -31,11 +31,8 @@ module.exports = function Saturation(options, UI) {
      return [Math.round(r), Math.round(g), Math.round(b), a];
    }

-    function output(image, datauri, mimetype) {
-
-      // This output is accesible by Image Sequencer
-      step.output = { src: datauri, format: mimetype };
-
+    function output(image, datauri, mimetype, wasmSuccess) {
+      step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
    }

    return require('../_nomodule/PixelManipulation.js')(input, {
--- a/src/modules/TextOverlay/Module.js
+++ b/src/modules/TextOverlay/Module.js
@@ -15,11 +15,8 @@ module.exports = function TextOverlay(options, UI) {
      return pixels;
    }

-    function output(image, datauri, mimetype) {
-
-      // This output is accesible by Image Sequencer
-      step.output = { src: datauri, format: mimetype };
-
+    function output(image, datauri, mimetype, wasmSuccess) {
+      step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
    }

    return require('../_nomodule/PixelManipulation.js')(input, {
--- a/src/modules/Threshold/Module.js
+++ b/src/modules/Threshold/Module.js
@@ -22,10 +22,11 @@ module.exports = function ImageThreshold(options, UI) {
      pixels = require('./Threshold')(pixels, options, hist);
      return pixels;
    }
-    function output(image, datauri, mimetype) {
-      // This output is accessible by Image Sequencer
-      step.output = { src: datauri, format: mimetype };
+
+    function output(image, datauri, mimetype, wasmSuccess) {
+      step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
    }
+    
    return require('../_nomodule/PixelManipulation.js')(input, {
      output: output,
      ui: options.step.ui,
--- a/src/modules/Tint/Module.js
+++ b/src/modules/Tint/Module.js
@@ -25,11 +25,8 @@ module.exports = function Tint(options, UI) {
      return [r, g, b, a];
    }

-    function output(image, datauri, mimetype) {
-
-      // This output is accessible by Image Sequencer
-      step.output = { src: datauri, format: mimetype };
-
+    function output(image, datauri, mimetype, wasmSuccess) {
+      step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
    }

    return require('../_nomodule/PixelManipulation.js')(input, {
--- a/src/modules/WhiteBalance/Module.js
+++ b/src/modules/WhiteBalance/Module.js
@@ -32,10 +32,8 @@ module.exports = function Balance(options, UI) {
      return pixels;
    }

-    function output(image, datauri, mimetype) {
-
-      step.output = { src: datauri, format: mimetype };
-
+    function output(image, datauri, mimetype, wasmSuccess) {
+      step.output = { src: datauri, format: mimetype, wasmSuccess, useWasm: options.useWasm };
    }

    return require('../_nomodule/PixelManipulation.js')(input, {
--- a/src/modules/_nomodule/PixelManipulation.js
+++ b/src/modules/_nomodule/PixelManipulation.js
@@ -15,6 +15,7 @@ module.exports = function PixelManipulation(image, options) {
  // like input.pixelManipulation(options)
  
  const pixelSetter = require('../../util/pixelSetter.js');
+  let wasmSuccess; // Whether wasm succeded or failed

  if (arguments.length <= 1) {
    options = image;
@@ -67,10 +68,11 @@ module.exports = function PixelManipulation(image, options) {
          var data = Buffer.concat(chunks, totalLength).toString('base64');
          var datauri = 'data:image/' + options.format + ';base64,' + data;
          if (options.output)
-            options.output(options.image, datauri, options.format);
+            options.output(options.image, datauri, options.format, wasmSuccess);
          if (options.callback) options.callback();
        });
      }
+
      if (res) {
        pixels = res;
        generateOutput();
@@ -113,6 +115,7 @@ module.exports = function PixelManipulation(image, options) {

      const inBrowser = (options.inBrowser) ? 1 : 0;
      const test = (process.env.TEST) ? 1 : 0;
+
      if (options.useWasm) {
        if (options.inBrowser) {

@@ -122,10 +125,14 @@ module.exports = function PixelManipulation(image, options) {
            WebAssembly.instantiate(bytes, imports)
          ).then(results => {
            results.instance.exports.manipulatePixel(pixels.shape[0], pixels.shape[1], inBrowser, test);
+            wasmSuccess = true;
+
            extraOperation();
          }).catch(err => {
            console.log(err);
            console.log('WebAssembly acceleration errored; falling back to JavaScript in PixelManipulation');
+            wasmSuccess = false;
+
            perPixelManipulation();
            extraOperation();
          });
@@ -137,17 +144,23 @@ module.exports = function PixelManipulation(image, options) {
            const buf = fs.readFileSync(wasmPath);
            WebAssembly.instantiate(buf, imports).then(results => {
              results.instance.exports.manipulatePixel(pixels.shape[0], pixels.shape[1], inBrowser, test);
+              wasmSuccess = true;
+
              extraOperation();
            });
          }
          catch(err){
            console.log(err);
            console.log('WebAssembly acceleration errored; falling back to JavaScript in PixelManipulation');
+            wasmSuccess = false;
+
            perPixelManipulation();
            extraOperation();
          }
        }
      } else {
+        wasmSuccess = false;
+
        perPixelManipulation();
        extraOperation();
      }