Add new Maxim models:

- Deblurring
- Denoising
- Deraining
- Dehazing
  - Indoor
  - Outdoor
- Low Light Enhancement
- Retouching

dev/browser/package.json

@@ -6,10 +6,20 @@
   },
   "devDependencies": {
     "upscaler": "workspace:*",
+    "@upscalerjs/default-model": "workspace:*",
     "@upscalerjs/esrgan-thick": "workspace:*",
     "@upscalerjs/esrgan-slim": "workspace:*",
     "@upscalerjs/esrgan-medium": "workspace:*",
     "@upscalerjs/esrgan-legacy": "workspace:*",
+    "@upscalerjs/esrgan-experiments": "workspace:*",
+    "@upscalerjs/maxim-experiments": "workspace:*",
+    "@upscalerjs/maxim-deblurring": "workspace:*",
+    "@upscalerjs/maxim-deraining": "workspace:*",
+    "@upscalerjs/maxim-denoising": "workspace:*",
+    "@upscalerjs/maxim-dehazing-indoor": "workspace:*",
+    "@upscalerjs/maxim-dehazing-outdoor": "workspace:*",
+    "@upscalerjs/maxim-enhancement": "workspace:*",
+    "@upscalerjs/maxim-retouching": "workspace:*",
     "seedrandom": "3.0.5",
     "@types/stats.js": "^0.17.0",
     "vite": "^3.1.5"

dev/browser/public/.gitignore

@@ -0,0 +1 @@
+models

dev/browser/specific-model/filters.ts

@@ -0,0 +1,20 @@
+import { dependencies, devDependencies } from '../package.json';
+import { loadPackageModels } from './utils';
+
+export const AVAILABLE_PACKAGES = Object.keys({
+  ...dependencies,
+  ...devDependencies,
+}).reduce((set, key) => {
+  if (key.includes('@upscalerjs')) {
+    const packageName = key.split('@upscalerjs/').pop();
+    if (packageName) {
+      set.add(packageName);
+    }
+  }
+  return set;
+}, new Set<string>());
+
+export const loadAvailableModels = async (packageName: string) => {
+  const exports = await loadPackageModels(packageName);
+  return Object.keys(exports);
+}

dev/browser/specific-model/image.ts

@@ -1,21 +1,58 @@
-export const makeImg = (path: string, label: string) => {
+export const getCanvas = (img: HTMLImageElement) => {
+  const canvas = document.createElement('canvas');
+  canvas.width = img.width;
+  canvas.height = img.height;
+  canvas.getContext('2d')?.drawImage(img, 0, 0, canvas.width, canvas.height);
+  return canvas;
+};
+
+const scaleCanvas = (canvas: HTMLCanvasElement, scale: number) => {
+  const scaledCanvas = document.createElement('canvas');
+  scaledCanvas.width = canvas.width * scale;
+  scaledCanvas.height = canvas.height * scale;
+
+  scaledCanvas
+    .getContext('2d')
+    ?.drawImage(canvas, 0, 0, scaledCanvas.width, scaledCanvas.height);
+
+  return scaledCanvas;
+};
+
+export const resizeImage = (img: HTMLImageElement, scale: number) => {
+  const canvas = getCanvas(img);
+  const scaledCanvas = scaleCanvas(canvas, scale);
+  return scaledCanvas;
+};
+
+const loadImage = (path: string) => new Promise<HTMLImageElement>((resolve, reject) => {
   const img = new Image();
   img.src = path;
   img.onload = () => {
-    const divEl = document.createElement('div');
-    const imgEl = document.createElement('img');
-    const labelEl = document.createElement('label');
-    labelEl.innerText = label;
-    imgEl.src = path;
-    imgEl.width = img.width;
-    imgEl.height = img.height;
-    imgEl.appendChild(img);
-
-    divEl.appendChild(labelEl);
-    divEl.appendChild(imgEl);
-    divEl.appendChild(document.createElement('hr'));
-
-    document.body.appendChild(divEl);
-    return imgEl;
+    resolve(img);
+  };
+  img.onerror = reject;
+});
+
+export const makeImg = async (path: string, label: string, scale?: number): Promise<HTMLImageElement | HTMLCanvasElement> => {
+  let img: HTMLImageElement | HTMLCanvasElement = await loadImage(path);
+
+  if (scale) {
+    img = resizeImage(img, scale);
   }
+
+  const divEl = document.createElement('div');
+  const imgEl = document.createElement('img');
+  const labelEl = document.createElement('label');
+  labelEl.innerText = label;
+  imgEl.src = path;
+  imgEl.width = img.width;
+  imgEl.height = img.height;
+  imgEl.appendChild(img);
+
+  divEl.appendChild(labelEl);
+  divEl.appendChild(imgEl);
+  divEl.appendChild(document.createElement('hr'));
+
+  document.body.appendChild(divEl);
+  return imgEl;
 }

dev/browser/specific-model/index.css

@@ -1,3 +1,21 @@
 label {
   display: block;
 }
+
+#description {
+  display: flex;
+  gap: 12px;
+  padding: 20px;
+  padding-bottom: 10px;
+  margin-bottom: 10px;
+  border-bottom: 1px solid rgba(0,0,0,0.2);
+  align-items: flex-end;
+}
+
+#description p {
+  margin: 0;
+}
+
+select {
+  padding: 10px;
+}

dev/browser/specific-model/index.html

@@ -9,10 +9,19 @@
   <div id="body">
     <div id="description">
       <p>This page runs specific models.</p>
-      <hr />
+      <div class="option">
+        <label>Packages</label>
+        <select id="packages">
+        </select>
+      </div>
+      <div class="option" id="">
+        <label>Models</label>
+        <select id="models">
+        </select>
+      </div>
     </div>
     <div>
-      <p id="status"></p>
+      <p id="status">Waiting for status...</p>
     </div>
   </div>
   <script type="module" src="./index.ts"></script>

dev/browser/specific-model/index.ts

@@ -1,37 +1,80 @@
-import Upscaler from '../../../packages/upscalerjs/src/index';
-import model from '../../../models/esrgan-legacy/src/gans';
-import flower from '../../../models/esrgan-legacy/test/__fixtures__/fixture.png';
 import * as tf from '@tensorflow/tfjs';
+// import { ModelDefinitionFn, } from '../../../packages/core/src/index';
 import { makeImg } from './image';
-const MODEL = '/node_modules/@upscalerjs/esrgan-legacy/models/gans/model.json';
+import { AVAILABLE_PACKAGES, loadAvailableModels } from './filters';
+// import Upscaler, { ModelDefinition } from 'upscaler';
+import Upscaler, { ModelDefinition } from '../../../packages/upscalerjs/src/index';
+import { getFixture, getModelPath, getRoot, importModel, loadPackageJSON } from './utils';
 
-const status = document.getElementById('status')!;
+const packages = document.getElementById('packages') as HTMLSelectElement;
+const models = document.getElementById('models') as HTMLSelectElement;
+const status = document.getElementById('status') as HTMLDivElement;
 
-const getModel = (path: string) => {
-  const { packageInformation, ...rest } = model(tf);
-  return {
-    ...rest,
-    path: path,
-  };
+const addOptions = (target: Element, arr: Set<string> | string[], includeFirstBlank = true) => {
+  if (includeFirstBlank) {
+    const option = document.createElement('option');
+    target.appendChild(option);
+  }
+
+  arr.forEach(value => {
+    const option = document.createElement('option');
+    option.innerHTML = value;
+    target.appendChild(option);
+  });
 }
 
-(async () => {
-  makeImg(flower, 'Original');
-  const model = getModel(MODEL);
+addOptions(packages, AVAILABLE_PACKAGES);
+
+packages.addEventListener('change', async (e) => {
+  models.innerHTML = '';
+  const target = e.target as HTMLSelectElement;
+  const packageName = target.value;
+  const availableModels = await loadAvailableModels(packageName);
+
+  addOptions(models, availableModels, availableModels.length !== 1);
+  if (availableModels.length === 1) {
+    const modelName = availableModels[0];
+    await loadModel(packages.value, modelName);
+  }
+});
+
+models.addEventListener('change', async (e) => {
+  const target = e.target as HTMLSelectElement;
+  const modelName = target.value;
+  await loadModel(packages.value, modelName);
+});
+
+const loadModel = async (packageName: string, modelName: string) => {
+  console.log(packageName, modelName);
+  const importedModel = await importModel(packageName, modelName);
+  const modelDefinition = (importedModel).default;
+  const { packageInformation, ...modelJSON }= typeof modelDefinition === 'function' ? modelDefinition(tf) : modelDefinition;
+
+  const fixture = await getFixture(packageName, modelName);
+
+  const img = await makeImg(fixture, `Original: ${packageName}/${modelName}`, .25);
+  const modelPath = getModelPath(packageName, modelJSON.path);
+  const upscaledImg = await upscaleImage({
+    ...modelJSON,
+    path: modelPath,
+  }, img);
+  await makeImg(upscaledImg, `Upscaled: ${packageName}/${modelName}`);
+};
+
+
+const upscaleImage = async (model: ModelDefinition, img: HTMLImageElement | HTMLCanvasElement, patchSize: undefined | number = 64) => {
   status.innerHTML = 'Starting';
   const upscaler = new Upscaler({
     model,
   });
   status.innerHTML = 'Upscaling...';
-  const upscaledImg = await upscaler.upscale(flower, {
-    patchSize: 8,
-    padding: 1,
-    progressOutput: 'tensor',
-    progress: (rate, slice, row, col) => {
-      console.log(rate, slice.shape.slice(0, 2), row, col);
-    },
+  const start = performance.now();
+  const upscaledImg = await upscaler.upscale(img, {
+    patchSize,
+    progress: console.log,
   });
+  console.log(`Duration: ${((performance.now() - start) / 1000).toFixed(2)}s`);
   status.innerHTML = 'Image upscaled';
-  makeImg(upscaledImg, 'Upscaled');
   status.innerHTML = 'Image printed';
-})();
+  return upscaledImg;
+}

dev/browser/specific-model/utils.ts

@@ -0,0 +1,38 @@
+export const getRoot = (packageName: string) => `/node_modules/@upscalerjs/${packageName}`;
+export const loadPackageJSON = async (packageName: string) => {
+  const r = await fetch(`${getRoot(packageName)}/package.json?ts=${new Date().getTime()}`);
+  return r.json();
+};
+
+export const loadPackageModels = async (packageName: string) => {
+  const { exports } = await loadPackageJSON(packageName);
+  return exports;
+}
+
+const loadPackageModel = async (packageName: string, modelName: string) => {
+  const exports = await loadPackageModels(packageName);
+  const modelSourceFiles = exports[modelName];
+  return modelSourceFiles;
+}
+
+export const importModel = async (packageName: string, modelName = '.') => {
+  const modelSourceFiles = await loadPackageModel(packageName, modelName);
+  const importPath = `${getRoot(packageName)}/${modelSourceFiles.import}?ts=${new Date().getTime()}`;
+  return import(importPath);
+};
+
+export const getModelPath = (packageName: string, modelPath: string) => {
+  return `${getRoot(packageName)}/${modelPath}`;
+}
+
+export const getFixture = async (packageName: string, modelName = '.') => {
+  const packageJSON = await loadPackageJSON(packageName);
+  if (packageJSON['@upscalerjs']?.assets) {
+    const fixture = packageJSON['@upscalerjs'].assets[modelName];
+    if (!fixture) {
+      throw new Error(`NO fixture found for ${packageName}/${modelName}`)
+    }
+    return `${getRoot(packageName)}/${fixture}?ts=${new Date().getTime()}`;
+  }
+  return `${getRoot(packageName)}/assets/fixture.png?ts=${new Date().getTime()}`;
+}

dev/browser/speed-tests/index.ts

@@ -4,7 +4,6 @@ import PixelUpsampler from '../../../models/pixel-upsampler/src/4x';
 import GANs from '../../../models/esrgan-legacy/src/gans';
 import './stats';
 import { FPS } from './fps';
-import { UpscaleArgs } from 'upscaler';
 
 const startButton = document.querySelector('#start')!;
 const status = document.querySelector('#status')!;

dev/browser/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "resolveJsonModule": true
+  }
+}

dev/browser/vite.config.ts

@@ -1,8 +1,5 @@
 import { defineConfig, } from 'vite';
 import path from 'path';
 
-// const ROOT = path.resolve(__dirname, '../');
-
 export default defineConfig({
-  // root: path.resolve(ROOT, './dev'),
 });

docs/.npmrc

@@ -0,0 +1 @@
+link-workspace-packages=false

docs/docs/documentation/troubleshooting.md

@@ -82,28 +82,6 @@ const upscaler = new Upscaler({
 
 Ensure you pass a valid `path` argument in the `model` payload. [See the guide on models for more information](/documentation/guides/browser/models).
 
-## Missing Model Scale
-
-If you see an error like:
-
-```
-Error: You must provide a "scale" when providing a model definition
-```
-
-You've passed a `null` or `undefined` scale argument in the `model` argument to UpscalerJS:
-
-```javascript
-const upscaler = new Upscaler({
-  model: {
-    scale: null,
-  },
-})
-```
-
-Every model must have an explicit `scale` defined.
-
-Ensure you pass a valid `scale` argument in the `model` payload. [See the guide on models for more information](/documentation/guides/browser/models).
-
 ## Invalid Warmup Value
 
 If you see an error like:

models/maxim-deblurring/.gitignore

@@ -0,0 +1,4 @@
+dist
+node_modules
+*.generated.ts
+/models

models/maxim-deblurring/.npmignore

@@ -0,0 +1,4 @@
+src
+yarn-error.log
+node_modules
+test