v0.12.0 (#235)

* Refactor to generator (#234) * Refactor predict to be a generator function * Refactor upscale function into a generator (#236) * Move yielding to wrapper upscale function (#237) * Add abort signal to enable cancellation (#238) * Update version script (#239) * Update version script to also update dependencies * Cancel method integration test (#240) * Migrate progress test to upscale * Add integration test for cancel * Refactor upscale method to accept an internal args object (#241) * Refactor predict function (#243) * Refactor predict function * Insist on parameters for sub upscale functions * Refactor upscaling code to have better types around async generator return values (#242) * Rearrange upscale functions to be typed better and add a memory leak test * Set up a generator wrap function (#244) * Set up a generator wrap function * Add test for wrapGenerator function * Strengthen tests around generator wrap * Remove console logs * Add test to cover console warn * Add coverage to isAborted method * Cancel method memory leak test (#245) * Add unit test for memory allocation in predict function * Update docs (#246) * Fix examples (#247) * Bump to latest version and add babelrc * Migrate examples to use esbuild instead of parcel * Remove yarnrc from repo * Ignore yarnrc * Cancel example (#248) * Add abort signal to enable cancellation * Initial commit for cancel example * Merge upstream * Implement cancel example * Initialize value as undefined (#249) * Add top level abort (#250) * Add a top level abort * Add an integration test for cancel * Update documentation * Fix deepsource issue * Add exception for consoles (#251)
thekevinscott · Mar 5, 2022 · 073f991 · 073f991
1 parent abd7a18
commit 073f991
Show file tree

Hide file tree

Showing 51 changed files with 2,580 additions and 1,546 deletions.
diff --git a/.gitignore b/.gitignore
@@ -20,3 +20,5 @@ upscaled.png
 scratch
 packages/upscalerjs/src/tfjs.ts
 *.generated.ts
+.vscode
+.yarnrc
diff --git a/docs/README.md b/docs/README.md
@@ -249,6 +249,7 @@ upscaler.upscale('/path/to/image', {
   * `padding` (`number`) - Extra padding to be applied to the patch size during inference.
   * `progress` (`(amount: number, slice?: src|tensor) => void`) - A progress callback denoting the percentage complete.
   * `progressOutput` (`src|tensor`) - An optional value that sets the return type of the second argument of progress
+  * `signal` (`AbortSignal`) - An optional signal that allows cancellation of an in-flight upscale request
 
 The `progress` callback optionally returns a second argument with the processed slice of the image:
 
@@ -262,6 +263,22 @@ upscaler.upscale('/path/to/image', {
 ```
 
 The `slice` format will be a base64 string or a tensor corresponding to the value of `output`. This can be overridden by providing an additional property, `progressOutput`, of the form `src | tensor` that will override the value set in `output`.
+
+You can cancel an `upscale` request by providing an `AbortSignal`:
+
+javascript```
+const abortController = new AbortController();
+upscaler.upscale('/path/to/image', {
+  signal: abortController.signal,
+}).catch(err => {
+  // I have been cancelled.
+});
+... some time later
+abortController.abort();
+```
+
+It's worth noting that calls to `model.predict()` in Tensorflow.js cannot be aborted; if you wish to enable the ability to cancel an inflight request, specifying patch sizes will periodically allow the `upscale` request to release and potentially abort.
+
 ### `warmup`
 
 If desired, the model can be "warmed up" after instantiation by calling `warmup` directly.
@@ -310,6 +327,16 @@ Disposes the current model. Must be called to free up memory when the Upscaler i
 await upscaler.dispose();
 ```
 
+### `abort`
+
+Aborts all inflight `upscale` calls.
+
+#### Example
+
+```javascript
+await upscaler.abort();
+```
+
 ## Troubleshooting
 
 ### You must provide an explicit scale

diff --git a/examples/basic/package.json b/examples/basic/package.json
@@ -4,17 +4,14 @@
   "description": "Demonstration of basic usage of UpscalerJS",
   "main": "index.js",
   "scripts": {
-    "start": "cross-env NODE_ENV=development parcel index.html --no-hmr --open"
+    "copy": "rm -rf dist && mkdir dist && cp index.html dist && cp flower.png dist",
+    "start": "yarn copy && esbuild index.js --servedir=dist --outdir=dist --bundle --loader:.png=dataurl"
   },
   "author": "Kevin Scott",
   "license": "MIT",
-  "devDependencies": {
-    "cross-env": "^7.0.2",
-    "parcel": "1.12.3"
-  },
   "dependencies": {
     "@tensorflow/tfjs": "^3.13.0",
-    "upscaler": "0.9.0"
+    "upscaler": "0.11.0"
   },
   "browserslist": {
     "production": [

diff --git a/examples/cancel/README.md b/examples/cancel/README.md
@@ -0,0 +1,5 @@
+# Cancel Example
+
+Demonstrates how to cancel an inflight `upscale` request.
+
+[See this live](https://githubbox.com/thekevinscott/upscalerjs/tree/main/examples/cancel).
diff --git a/examples/webworker/flower.png → examples/cancel/flower.png b/examples/webworker/flower.png → examples/cancel/flower.png
diff --git a/examples/cancel/index.html b/examples/cancel/index.html
@@ -0,0 +1,65 @@
+<html>
+<head>
+  <title>Cancel Example | Upscaler.JS</title>
+  <style>
+    body {
+      padding: 40px;
+      font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+    }
+    button {
+      margin-top: 20px;
+      display: block;
+      padding: 10px 40px;
+      float: left;
+    }
+    #info {
+      clear: both;
+      display: block;
+    }
+    #target {
+      background: #EEE;
+      border: 1px solid #DDD;
+      display: inline-block;
+      width: 256px;
+      height: 256px;
+    }
+    #flower {
+      border: 1px solid #DDD;
+    }
+    pre {
+      padding: 10px;
+      background: #EEE;
+      border: 1px solid #DDD;
+      border-radius: 5px;
+    }
+    table td {
+      vertical-align: top;
+    }
+  </style>
+</head>
+<body>
+  <h1>Cancel Example</h1>
+  <p>An example demonstrating how to cancel an inflight request of the upscale method.</p>
+  <p>Click the upscale button (it is purposefully slow) to upscale the photo, and then click cancel to cancel it.</p>
+  <button id="upscale">Upscale</button>
+  <button id="cancel">Cancel</button>
+  <p id="info"></p>
+  <table>
+    <thead>
+      <tr><td>Original</td><td>Upscaled</td></tr>
+    </thead>
+    <tbody>
+      <tr><td>
+      <img src="/flower.png" id="flower" />
+        </td>
+      <td>
+        <div id="target">
+
+        </div>
+      </td>
+    </tr>
+      </tbody>
+    </table>
+    <script src="./index.js"></script>
+  </body>
+</html>
diff --git a/examples/cancel/index.js b/examples/cancel/index.js
@@ -0,0 +1,39 @@
+import Upscaler from 'upscaler';
+import img from './flower.png';
+const target = document.getElementById('target');
+const upscale = document.getElementById('upscale');
+const cancel = document.getElementById('cancel');
+const info = document.getElementById('info');
+
+let abortController = new AbortController();
+const upscaler = new Upscaler();
+upscale.onclick = () => {
+  info.innerText = 'Upscaling...';
+  const start = new Date().getTime();
+  let rate = 0;
+  upscaler.upscale(img, {
+    patchSize: 16,
+    padding: 4,
+    signal: abortController.signal,
+    progress: (inProgressRate) => {
+      rate = inProgressRate.toFixed(2);
+      info.innerText = `Upscaling (${rate}%)...`;
+    },
+  }).then((upscaledImgSrc) => {
+    const img = document.createElement('img');
+    img.src = upscaledImgSrc;
+    target.innerHTML = '';
+    target.appendChild(img);
+    const ms = new Date().getTime() - start;
+    info.innerText = `Upscaled in ${ms} ms`;
+  }).catch(err => {
+    console.log('The AbortError:', err);
+    info.innerText = `Canceled at ${rate}%`;
+  });
+};
+
+cancel.onclick = () => {
+  console.log('canceled');
+  abortController.abort();
+  abortController = new AbortController();
+}
diff --git a/examples/cancel/package.json b/examples/cancel/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "cancel",
+  "version": "0.11.0",
+  "description": "Demonstrates how to cancel an inflight upscale request.",
+  "main": "index.js",
+  "scripts": {
+    "copy": "rm -rf dist && mkdir dist && cp index.html dist && cp flower.png dist",
+    "start": "yarn copy && esbuild index.js --servedir=dist --outdir=dist --bundle --loader:.png=dataurl"
+  },
+  "author": "Kevin Scott",
+  "license": "MIT",
+  "dependencies": {
+    "@tensorflow/tfjs": "^3.13.0",
+    "upscaler": "0.11.0"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/examples/cancel/sandbox.config.json b/examples/cancel/sandbox.config.json
@@ -0,0 +1,5 @@
+{
+  "infiniteLoopProtection": false,
+  "hardReloadOnChange": true,
+  "view": "browser"
+}
diff --git a/examples/comparisons/package.json b/examples/comparisons/package.json
@@ -4,17 +4,14 @@
   "description": "Demonstration of the different models of UpscalerJS",
   "main": "index.js",
   "scripts": {
-    "start": "cross-env NODE_ENV=development parcel index.html --no-hmr --open"
+    "copy": "rm -rf dist && mkdir dist && cp index.html dist && cp flower.png dist",
+    "start": "yarn copy && esbuild index.js --servedir=dist --outdir=dist --bundle --loader:.png=dataurl"
   },
   "author": "Kevin Scott",
   "license": "MIT",
-  "devDependencies": {
-    "cross-env": "^7.0.2",
-    "parcel": "1.12.3"
-  },
   "dependencies": {
     "@tensorflow/tfjs": "^3.13.0",
-    "upscaler": "0.9.0"
+    "upscaler": "0.11.0"
   },
   "browserslist": {
     "production": [

diff --git a/examples/models/package.json b/examples/models/package.json
@@ -8,7 +8,7 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "^4.0.2",
-    "upscaler": "0.9.0"
+    "upscaler": "0.11.0"
   },
   "scripts": {
     "start": "react-scripts start"

diff --git a/examples/nodejs-custom-model/package.json b/examples/nodejs-custom-model/package.json
@@ -11,7 +11,7 @@
   "dependencies": {
     "@upscalerjs/models": "0.9.0",
     "@tensorflow/tfjs-node": "^3.13.0",
-    "upscaler": "0.10.0-canary.1",
+    "upscaler": "0.11.0",
     "express": "4.16.4"
   },
   "devDependencies": {

diff --git a/examples/nodejs/package.json b/examples/nodejs/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@tensorflow/tfjs-node": "^3.13.0",
-    "upscaler": "0.10.0-canary.1",
+    "upscaler": "0.11.0",
     "express": "4.16.4"
   },
   "devDependencies": {

diff --git a/examples/patch-sizes/package.json b/examples/patch-sizes/package.json
@@ -10,7 +10,7 @@
     "react-input-range": "^1.3.0",
     "react-scripts": "^4.0.3",
     "tensor-as-base64": "^0.1.1",
-    "upscaler": "0.9.0"
+    "upscaler": "0.11.0"
   },
   "scripts": {
     "start": "PORT=1234 react-scripts start"

diff --git a/examples/progress/package.json b/examples/progress/package.json
@@ -4,17 +4,14 @@
   "description": "Demonstration of upscale progress with UpscalerJS",
   "main": "index.js",
   "scripts": {
-    "start": "cross-env NODE_ENV=development parcel index.html --no-hmr --open"
+    "copy": "rm -rf dist && mkdir dist && cp index.html dist && cp flower.png dist",
+    "start": "yarn copy && esbuild index.js --servedir=dist --outdir=dist --bundle --loader:.png=dataurl"
   },
   "author": "Kevin Scott",
   "license": "MIT",
-  "devDependencies": {
-    "cross-env": "^7.0.2",
-    "parcel": "1.12.3"
-  },
   "dependencies": {
     "@tensorflow/tfjs": "^3.13.0",
-    "upscaler": "0.9.0"
+    "upscaler": "0.11.0"
   },
   "browserslist": {
     "production": [

diff --git a/examples/react-demo/package.json b/examples/react-demo/package.json
@@ -9,7 +9,7 @@
     "react-dom": "^16.13.1",
     "react-dropzone": "^11.0.2",
     "react-scripts": "^4.0.2",
-    "upscaler": "0.9.0"
+    "upscaler": "0.11.0"
   },
   "scripts": {
     "start": "react-scripts start"

diff --git a/examples/tensor/package.json b/examples/tensor/package.json
@@ -4,17 +4,14 @@
   "description": "Demonstration of basic usage of UpscalerJS",
   "main": "index.js",
   "scripts": {
-    "start": "cross-env NODE_ENV=development parcel index.html --no-hmr --open"
+    "copy": "rm -rf dist && mkdir dist && cp index.html dist && cp flower.png dist",
+    "start": "yarn copy && esbuild index.js --servedir=dist --outdir=dist --bundle --loader:.png=dataurl"
   },
   "author": "Kevin Scott",
   "license": "MIT",
-  "devDependencies": {
-    "cross-env": "^7.0.2",
-    "parcel": "1.12.3"
-  },
   "dependencies": {
     "@tensorflow/tfjs": "^3.13.0",
-    "upscaler": "0.9.0"
+    "upscaler": "0.11.0"
   },
   "browserslist": {
     "production": [

diff --git a/examples/upload/package.json b/examples/upload/package.json
@@ -4,18 +4,14 @@
   "description": "Demonstration of uploading an image to UpscalerJS",
   "main": "index.js",
   "scripts": {
-    "start": "cross-env NODE_ENV=development parcel index.html --no-hmr --open",
-    "build": "cross-env NODE_ENV=production parcel build index.html --no-minify --public-url ./"
+    "copy": "rm -rf dist && mkdir dist && cp index.html dist",
+    "start": "yarn copy && esbuild index.js --servedir=dist --outdir=dist --bundle --loader:.png=dataurl"
   },
   "author": "Kevin Scott",
   "license": "MIT",
-  "devDependencies": {
-    "cross-env": "^7.0.2",
-    "parcel": "1.12.3"
-  },
   "dependencies": {
     "@tensorflow/tfjs": "^3.13.0",
-    "upscaler": "0.9.0"
+    "upscaler": "0.11.0"
   },
   "browserslist": {
     "production": [

diff --git a/examples/warmup/package.json b/examples/warmup/package.json
@@ -4,18 +4,14 @@
   "description": "Demonstration of warming up UpscalerJS",
   "main": "index.js",
   "scripts": {
-    "start": "cross-env NODE_ENV=development parcel index.html --no-hmr --open",
-    "build": "cross-env NODE_ENV=production parcel build index.html --no-minify --public-url ./"
+    "copy": "rm -rf dist && mkdir dist && cp index.html dist && cp flower.png dist",
+    "start": "yarn copy && esbuild index.js --servedir=dist --outdir=dist --bundle --loader:.png=dataurl"
   },
   "author": "Kevin Scott",
   "license": "MIT",
-  "devDependencies": {
-    "cross-env": "^7.0.2",
-    "parcel": "1.12.3"
-  },
   "dependencies": {
     "@tensorflow/tfjs": "^3.13.0",
-    "upscaler": "0.9.0"
+    "upscaler": "0.11.0"
   },
   "browserslist": {
     "production": [

diff --git a/examples/webcam/index.html b/examples/webcam/index.html
@@ -22,7 +22,7 @@ <h1>Webcam Example</h1>
       An example of using a webcam for upscaling with
       <a target="_blank" href="https://github.com/thekevinscott/UpscalerJS">UpscalerJS</a>.
     </p>
-    <video autoplay="true" id="video" width="400" height="300"></video>
+    <video autoplay="true" id="video" width="200" height="150"></video>
     <p>Click the upscale button to upscale a frame of video.</p>
     <button id="button" disabled>Upscale</button>
     <p id="info"></p>

diff --git a/examples/webcam/index.js b/examples/webcam/index.js
@@ -27,7 +27,7 @@ navigator.mediaDevices
       info.innerText = "Upscaling...";
       const start = new Date().getTime();
       upscaler.upscale(data, {
-        patchSize: 64,
+        patchSize: 16,
         padding: 4,
       }).then(upscaledImgSrc => {
         const img = document.createElement("img");