Implement cancel example

thekevinscott · Mar 5, 2022 · 9853bc8 · 9853bc8
1 parent 07470a9
commit 9853bc8
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 11 deletions.
diff --git a/examples/cancel/flower-256.png b/examples/cancel/flower-256.png
diff --git a/examples/cancel/index.html b/examples/cancel/index.html
@@ -40,7 +40,7 @@
 <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 to upscale the photo, and then click cancel to cancel it.</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>
@@ -50,7 +50,7 @@ <h1>Cancel Example</h1>
     </thead>
     <tbody>
       <tr><td>
-      <img src="/flower-256.png" id="flower" />
+      <img src="/flower.png" id="flower" />
         </td>
       <td>
         <div id="target">

diff --git a/examples/cancel/index.js b/examples/cancel/index.js
@@ -10,9 +10,9 @@ const upscaler = new Upscaler();
 upscale.onclick = () => {
   info.innerText = 'Upscaling...';
   const start = new Date().getTime();
-  let rate;
+  let rate = 0;
   upscaler.upscale(img, {
-    patchSize: 4,
+    patchSize: 16,
     padding: 4,
     signal: abortController.signal,
     progress: (inProgressRate) => {
@@ -27,13 +27,13 @@ upscale.onclick = () => {
     const ms = new Date().getTime() - start;
     info.innerText = `Upscaled in ${ms} ms`;
   }).catch(err => {
-    console.log(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
@@ -4,14 +4,11 @@
   "description": "Demonstrates how to cancel an inflight upscale request.",
   "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.11.0"