-
Notifications
You must be signed in to change notification settings - Fork 75
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Add abort signal to enable cancellation * Initial commit for cancel example * Merge upstream * Implement cancel example
- Loading branch information
1 parent
bdf227b
commit 3bc6239
Showing
7 changed files
with
142 additions
and
15 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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). |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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(); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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" | ||
| ] | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| { | ||
| "infiniteLoopProtection": false, | ||
| "hardReloadOnChange": true, | ||
| "view": "browser" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters