Fix examples (#247)

* Bump to latest version and add babelrc * Migrate examples to use esbuild instead of parcel * Remove yarnrc from repo * Ignore yarnrc
thekevinscott · Mar 5, 2022 · bdf227b · bdf227b
1 parent ccf3a40
commit bdf227b
Show file tree

Hide file tree

Showing 28 changed files with 812 additions and 165 deletions.
diff --git a/.gitignore b/.gitignore
@@ -21,3 +21,4 @@ scratch
 packages/upscalerjs/src/tfjs.ts
 *.generated.ts
 .vscode
+.yarnrc
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/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");

diff --git a/examples/webcam/package.json b/examples/webcam/package.json
@@ -4,18 +4,14 @@
   "description": "Demonstration of webcam usage of 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/webworker/flower-256.png b/examples/webworker/flower-256.png
diff --git a/examples/webworker/flower.png b/examples/webworker/flower.png
diff --git a/examples/webworker/package.json b/examples/webworker/package.json
@@ -4,8 +4,8 @@
   "description": "Demonstration of webworker integration with 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 && cp -r src dist",
+    "start": "yarn copy && esbuild src/*.js --servedir=dist --outdir=dist --bundle --loader:.png=dataurl"
   },
   "browserslist": {
     "production": [
@@ -21,13 +21,9 @@
   },
   "author": "Kevin Scott",
   "license": "MIT",
-  "devDependencies": {
-    "cross-env": "^7.0.2",
-    "parcel": "1.12.3"
-  },
   "dependencies": {
     "@tensorflow/tfjs": "^3.13.0",
     "tensor-as-base64": "^0.1.1",
-    "upscaler": "0.9.0"
+    "upscaler": "0.11.0"
   }
 }
diff --git a/examples/webworker/animate.js → examples/webworker/src/animate.js b/examples/webworker/animate.js → examples/webworker/src/animate.js
diff --git a/examples/basic/flower-256.png → examples/webworker/src/flower.png b/examples/basic/flower-256.png → examples/webworker/src/flower.png
diff --git a/examples/webworker/index.html → examples/webworker/src/index.html b/examples/webworker/index.html → examples/webworker/src/index.html
@@ -46,7 +46,7 @@ <h1>WebWorker Example</h1>
     <tbody>
       <tr>
         <td>
-          <img src="/flower-256.png" id="flower" />
+          <img src="/flower.png" id="flower" />
         </td>
         <td>
           <div id="target"></div>

diff --git a/examples/webworker/index.js → examples/webworker/src/index.js b/examples/webworker/index.js → examples/webworker/src/index.js
@@ -1,6 +1,6 @@
 import * as tf from '@tensorflow/tfjs';
 import Upscaler from 'upscaler';
-import img from './flower-256.png';
+import img from './flower.png';
 import { writeOutput, disable } from './ui';
 import tensorAsBase64 from 'tensor-as-base64';
 

diff --git a/examples/webworker/ui.js → examples/webworker/src/ui.js b/examples/webworker/ui.js → examples/webworker/src/ui.js
diff --git a/examples/webworker/worker.js → examples/webworker/src/worker.js b/examples/webworker/worker.js → examples/webworker/src/worker.js
diff --git a/package.json b/package.json
@@ -34,7 +34,7 @@
     "update:version:old": "node ./scripts/version.js",
     "pin-cdn": "node scripts/pin-cdn.js",
     "find-all-packages": "ts-node scripts/package-scripts/find-all-packages.ts",
-    "example": "node ./scripts/start-example.js",
+    "example": "ts-node ./scripts/start-example.ts",
     "format": "yarn lerna run format",
     "lint": "yarn lerna run lint",
     "push": "yarn lerna publish from-package",

diff --git a/scripts/start-example.js b/scripts/start-example.js