thekevinscott · thekevinscott · Nov 18, 2023 · Nov 18, 2023 · Nov 18, 2023 · Nov 18, 2023
diff --git a/.github/actions/setup-pnpm/action.yml b/.github/actions/setup-pnpm/action.yml
@@ -19,6 +19,9 @@ runs:
         version: 8
         run_install: false
 
+    - run: pnpm install -g node-gyp @mapbox/node-pre-gyp
+      shell: bash
+
     # - name: Get pnpm store directory
     #   shell: bash
     #   run: |

diff --git a/dev/browser/basic/umd/index.html b/dev/browser/basic/umd/index.html
@@ -6,8 +6,9 @@
 </head>
 <body>
   <script type="module" src="./index.ts"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest/dist/tf.min.js"></script>
   <script src="/node_modules/upscaler/node_modules/@upscalerjs/default-model/dist/umd/index.min.js"></script>
-  <script src="/node_modules/upscaler/dist/browser/umd/upscaler.min.js"></script>
+  <script src="/node_modules/upscaler/dist/browser/umd/upscaler.js"></script>
 </body>
 </html>
 
diff --git a/dev/browser/basic/umd/index.ts b/dev/browser/basic/umd/index.ts
@@ -1,3 +1,9 @@
 const upscaler = new window['Upscaler']({
-  model: window['DefaultUpscalerJSModel'],
+  model: {
+    ...window['DefaultUpscalerJSModel'],
+    path: '/node_modules/upscaler/node_modules/@upscalerjs/default-model/models/model.json',
+  },
 });
+
+import flower from '../flower-small.png';
+upscaler.upscale(flower).then(console.log);
diff --git a/dev/browser/deployed/flower-small.png b/dev/browser/deployed/flower-small.png
diff --git a/dev/browser/deployed/index.html b/dev/browser/deployed/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>UpscalerJS Development: Deployed model</title>
+  <link rel="stylesheet" href="../global.css" />
+</head>
+<body>
+  <script type="module" src="./index.ts"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest/dist/tf.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@upscalerjs/default-model@latest/dist/umd/index.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/upscaler@latest/dist/browser/umd/upscaler.min.js"></script>
+</body>
+</html>
+
diff --git a/dev/browser/deployed/index.ts b/dev/browser/deployed/index.ts
@@ -0,0 +1,7 @@
+const upscaler = new window['Upscaler']({
+  model: window['DefaultUpscalerJSModel'],
+})
+
+import flower from './flower-small.png';
+upscaler.upscale(flower).then(console.log);
+
diff --git a/dev/browser/index.html b/dev/browser/index.html
@@ -6,6 +6,7 @@
 <body>
   <ul>
     <li><a href="/basic/">Basic</a></li>
+    <li><a href="/deployed/">Deployed</a></li>
     <li><a href="/speed-tests/">Speed Tests</a></li>
     <li><a href="/specific-model/">Specific Model</a></li>
     <li><a href="/generate-homepage-gif/">Generate Homepage GIF</a></li>

diff --git a/dev/browser/package.json b/dev/browser/package.json
@@ -6,6 +6,7 @@
   },
   "devDependencies": {
     "@types/stats.js": "^0.17.0",
+    "@upscalerjs/default-model": "workspace:*",
     "@upscalerjs/esrgan-legacy": "workspace:*",
     "@upscalerjs/esrgan-medium": "workspace:*",
     "@upscalerjs/esrgan-slim": "workspace:*",

diff --git a/internals/http-server/src/HttpServer.ts b/internals/http-server/src/HttpServer.ts
@@ -73,9 +73,9 @@ export class HttpServer {
     this.port = getServerPort(httpServer);
     if (this.useTunnel) {
       this.tunnel = new Tunnel(this.port);
-      info('Starting server with tunnel');
+      info('Starting server with tunnel', this.name);
       await this.tunnel.start();
-      info('Tunnel started', this.url);
+      info('Tunnel started', this.url, this.name);
     }
     const url = this.url;
     if (!url) {

diff --git a/internals/http-server/src/Tunnel.ts b/internals/http-server/src/Tunnel.ts
@@ -1,95 +1,33 @@
 import { tunnelmole } from 'tunnelmole';
-// import localtunnel from 'localtunnel';
-// import ngrok from 'ngrok';
-// import { info, warn } from '@internals/common/logger';
-// import { service, tunnel } from "cloudflared";
-// import { warn } from '@internals/common/logger';
-// import path from 'path';
-// import * as url from 'url';
-
-// const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
 process.env.TUNNELMOLE_TELEMETRY = '0';
-
-const regexp = new RegExp(/^http(.*) is forwarding to(.*)/);
-const silenceTunnelmoleOutput = () => {
-  const origInfo = console.info;
-  console.info = (msg: string) => {
-    if (!regexp.test(msg)) {
-      origInfo.call(console, msg);
-    }
-  };
-};
+process.env.TUNNELMOLE_QUIET_MODE = '1';
+
+// const regexp = new RegExp(/^http(.*) is forwarding to(.*)/);
+// const silenceTunnelmoleOutput = () => {
+//   const origInfo = console.info;
+//   console.info = (msg: string) => {
+//     if (!regexp.test(msg)) {
+//       origInfo.call(console, msg);
+//     }
+//   };
+// };
 
 export class Tunnel {
   port: number;
-  // private localtunnel?: ReturnType<typeof localtunnel>;
   url?: string;
-  // private _stop: any;
-
+
   constructor(port: number) {
     this.port = port;
   }
 
-  // get url() {
-  //   // if (!this.localtunnel) {
-  //   //   throw new Error('Tunnel was never started, ensure you call start');
-  //   // }
-  //   // return this.localtunnel?.url;
-  // }
-
   async start() {
-    // ngrok
-    // this.url = await ngrok.connect({
-    //   addr: this.port,
-    // });
-
-    // local tunnel
-    // console.log(this.port)
-    // this.localtunnel = await localtunnel({ port: this.port });
-    // return this.localtunnel.url;
-
-
-    // tunnelmole
-    silenceTunnelmoleOutput();
+    // // silenceTunnelmoleOutput();
     this.url = await tunnelmole({
       port: this.port,
     });
     return this.url;
-
-    // // cloudflared
-    // const { url, stop, child, ...rest } = tunnel({ "--url": `localhost:${this.port}`, '--config': path.resolve(__dirname, './config.yaml')});
-
-    // child?.stdout?.on('data', data => console.log(data.toString()));
-    // child?.stderr?.on('data', data => console.log(data.toString()));
-    // console.log(rest, url)
-    // this._stop = stop;
-    // const timers = [
-    //   setTimeout(() => {
-    //     warn('Still awaiting cloudflare tunnel to start')
-    //   }, 3000),
-    //   setTimeout(() => {
-    //     throw new Error('Cloudflare tunnel failed to start in 10 seconds')
-    //   }, 5000),
-    // ];
-    // this.url = await url;
-    // timers.forEach(clearTimeout);
-    // return url;
   }
 
   async close() { // skipcq: JS-0105
-    // if (!this._stop) {
-    //   throw new Error('No stop command was set')
-    // }
-    // return this._stop();
-    // localtunnel
-    // return new Promise(resolve => {
-    //   if (this.localtunnel) {
-    //     this.localtunnel.on('close', () => {
-    //       info('tunnel has been closed');
-    //     });
-    //   } else {
-    //     warn('Tunnel was never started, so it cannot be closed');
-    //   }
-    // });
   }
 }
diff --git a/internals/test-runner/src/ClientsideTestRunner.ts b/internals/test-runner/src/ClientsideTestRunner.ts
@@ -192,8 +192,14 @@ export class ClientsideTestRunner {
     });
 
     // Note: these must be done sequentially; there's a race condition bug in tunnelmole
+    const timer = setTimeout(() => {
+      throw new Error('Could not start servers within 3 seconds');
+    }, 3000);
+
     await this.fixturesServer.start();
     await this.server.start();
+
+    clearTimeout(timer);
   }
 
   async stopServers(): Promise<void> {

diff --git a/models/default-model/package.json b/models/default-model/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@upscalerjs/default-model",
-  "version": "1.0.0-beta.16",
+  "version": "1.0.0-beta.17",
   "description": "ESRGAN Default Model for UpscalerJS. Upscale images and increase image resolution with AI using Javascript",
   "keywords": [
     "image enhancement",

diff --git a/models/esrgan-legacy/package.json b/models/esrgan-legacy/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@upscalerjs/esrgan-legacy",
-  "version": "1.0.0-beta.13",
+  "version": "1.0.0-beta.14",
   "description": "ESRGAN Legacy Models for UpscalerJS. Upscale images and increase image resolution with AI using Javascript",
   "keywords": [
     "image enhancement",

diff --git a/models/esrgan-medium/package.json b/models/esrgan-medium/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@upscalerjs/esrgan-medium",
-  "version": "1.0.0-beta.12",
+  "version": "1.0.0-beta.13",
   "description": "ESRGAN Medium Model for UpscalerJS. Upscale images and increase image resolution with AI using Javascript",
   "keywords": [
     "image enhancement",

diff --git a/models/esrgan-slim/package.json b/models/esrgan-slim/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@upscalerjs/esrgan-slim",
-  "version": "1.0.0-beta.11",
+  "version": "1.0.0-beta.12",
   "description": "ESRGAN Slim Model for UpscalerJS. Upscale images and increase image resolution with AI using Javascript",
   "keywords": [
     "image enhancement",

diff --git a/models/esrgan-thick/package.json b/models/esrgan-thick/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@upscalerjs/esrgan-thick",
-  "version": "1.0.0-beta.15",
+  "version": "1.0.0-beta.16",
   "description": "ESRGAN Thick Model for UpscalerJS. Upscale images and increase image resolution with AI using Javascript",
   "keywords": [
     "image enhancement",

diff --git a/packages/upscalerjs/package.json b/packages/upscalerjs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "upscaler",
-  "version": "1.0.0-beta.18",
+  "version": "1.0.0-beta.19",
   "description": "Enhance Images with Javascript and AI. Increase resolution, retouch, denoise, and more. Open Source, Browser and Node Compatible, MIT License.",
   "exports": {
     "./node": {