thekevinscott · thekevinscott · Mar 5, 2022 · Mar 3, 2022 · Mar 3, 2022 · Mar 5, 2022
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/cancel/flower.png b/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/yarn.lock b/yarn.lock
@@ -4365,14 +4365,6 @@
   resolved "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.0.0.tgz"
   integrity sha512-NZwaaynfs1oIoLAV1vg18e7QMVDvw+6SQrdJc8w3BwUaoroVSf6EBj/Sk4PBWGxsq0dzhA2drbsuMC1/6C6KgQ==
 
-"@types/inquirer@^8.2.0":
-  version "8.2.0"
-  resolved "https://registry.yarnpkg.com/@types/inquirer/-/inquirer-8.2.0.tgz#b9566d048f5ff65159f2ed97aff45fe0f00b35ec"
-  integrity sha512-BNoMetRf3gmkpAlV5we+kxyZTle7YibdOntIZbU5pyIfMdcwy784KfeZDAcuyMznkh5OLa17RVXZOGA5LTlkgQ==
-  dependencies:
-    "@types/through" "*"
-    rxjs "^7.2.0"
-
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
   version "2.0.3"
   resolved "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz"
@@ -4560,13 +4552,6 @@
   resolved "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.8.tgz"
   integrity sha512-ipixuVrh2OdNmauvtT51o3d8z12p6LtFW9in7U79der/kwejjdNchQC5UMn5u/KxNoM7VHHOs/l8KS8uHxhODQ==
 
-"@types/through@*":
-  version "0.0.30"
-  resolved "https://registry.yarnpkg.com/@types/through/-/through-0.0.30.tgz#e0e42ce77e897bd6aead6f6ea62aeb135b8a3895"
-  integrity sha512-FvnCJljyxhPM3gkRgWmxmDZyAQSiBQQWLI0A0VFL0K7W1oRUrPJSqNO0NvTnLkBcotdlp3lKvaT0JrnyRDkzOg==
-  dependencies:
-    "@types/node" "*"
-
 "@types/tough-cookie@*":
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/@types/tough-cookie/-/tough-cookie-4.0.1.tgz#8f80dd965ad81f3e1bc26d6f5c727e132721ff40"