Add new Maxim models:

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

.dockerignore

@@ -0,0 +1,16 @@
+.dvc
+.pnpm-store
+assets
+coverage
+#dev
+dist
+docs
+examples
+#models
+node_modules
+#packages
+scratch
+#scripts
+test
+tmp
+volumes

.npmrc

@@ -1,2 +1 @@
 strict-peer-dependencies=false
-link-workspace-packages=false

Dockerfile

@@ -0,0 +1,20 @@
+FROM tensorflow/tensorflow:latest-devel-gpu
+RUN apt install -y curl
+RUN curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
+ENV NVM_DIR=/root/.nvm
+ENV NODE_VERSION=18.14.2
+RUN . "$NVM_DIR/nvm.sh" && nvm install ${NODE_VERSION}
+RUN . "$NVM_DIR/nvm.sh" && nvm use v${NODE_VERSION}
+RUN . "$NVM_DIR/nvm.sh" && nvm alias default v${NODE_VERSION}
+ENV PATH="/root/.nvm/versions/node/v${NODE_VERSION}/bin/:${PATH}"
+RUN node --version
+RUN npm --version
+RUN corepack enable
+RUN corepack prepare pnpm@latest --activate
+RUN pnpm --version
+RUN mkdir -p /node_modules
+RUN pnpm config set global-dir /node_modules
+WORKDIR /code
+COPY . /code
+RUN pnpm install
+CMD /bin/bash

dev/browser/package.json

@@ -1,11 +1,13 @@
 {
-  "name": "@upscalerjs/dev",
+  "name": "@upscalerjs/dev-browser",
   "private": true,
   "scripts": {
-    "dev": "vite --config ./vite.config.ts"
+    "dev": "pnpm run dev:only",
+    "dev:only": "vite --config ./vite.config.ts"
   },
   "devDependencies": {
     "upscaler": "workspace:*",
+    "@upscalerjs/default-model": "workspace:*",
     "@upscalerjs/esrgan-thick": "workspace:*",
     "@upscalerjs/esrgan-slim": "workspace:*",
     "@upscalerjs/esrgan-medium": "workspace:*",

dev/browser/public/.gitignore

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

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.html

@@ -12,7 +12,7 @@
       <hr />
     </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,30 +1,145 @@
-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 Upscaler from '../../../packages/upscalerjs/src/index';
+import { ModelDefinitionFn, } from '../../../packages/core/src/index';
+import maximDenoisingFixture from '../../../models/maxim-denoising/assets/fixture.png';
+import maximDenoisingSmall from '../../../models/maxim-denoising/src/small';
+import maximDenoisingMedium from '../../../models/maxim-denoising/src/medium';
+import maximDeblurringFixture from '../../../models/maxim-deblurring/assets/fixture.png';
+import maximDeblurringSmall from '../../../models/maxim-deblurring/src/small';
+import maximDeblurringMedium from '../../../models/maxim-deblurring/src/medium';
+import maximDerainingFixture from '../../../models/maxim-deraining/assets/fixture.png';
+import maximDerainingSmall from '../../../models/maxim-deraining/src/small';
+import maximDerainingMedium from '../../../models/maxim-deraining/src/medium';
+import maximDehazingIndoorFixture from '../../../models/maxim-dehazing-indoor/assets/fixture.png';
+import maximDehazingIndoorSmall from '../../../models/maxim-dehazing-indoor/src/small';
+import maximDehazingIndoorMedium from '../../../models/maxim-dehazing-indoor/src/medium';
+import maximDehazingOutdoorFixture from '../../../models/maxim-dehazing-outdoor/assets/fixture.png';
+import maximDehazingOutdoorSmall from '../../../models/maxim-dehazing-outdoor/src/small';
+import maximDehazingOutdoorMedium from '../../../models/maxim-dehazing-outdoor/src/medium';
+import maximEnhancementFixture from '../../../models/maxim-enhancement/assets/fixture.png';
+import maximEnhancementSmall from '../../../models/maxim-enhancement/src/small';
+import maximEnhancementMedium from '../../../models/maxim-enhancement/src/medium';
+import maximRetouchingFixture from '../../../models/maxim-retouching/assets/fixture.png';
+import maximRetouchingSmall from '../../../models/maxim-retouching/src/small';
+import maximRetouchingMedium from '../../../models/maxim-retouching/src/medium';
 import * as tf from '@tensorflow/tfjs';
 import { makeImg } from './image';
-const MODEL = '/models/esrgan-legacy/models/gans/model.json';
 
 const status = document.getElementById('status')!;
 
-const getModel = (path: string) => {
-  const { packageInformation, ...rest } = model(tf);
+const getModel = async (path: string, modelConfig: ModelDefinitionFn) => {
+  const { packageInformation, ...rest } = modelConfig(tf);
   return {
     ...rest,
     path: path,
   };
 }
 
-(async () => {
-  makeImg(flower, 'Original');
-  const model = getModel(MODEL);
+const upscaleImage = async (modelJSON: string, modelConfig: ModelDefinitionFn, img: HTMLImageElement | HTMLCanvasElement) => {
+  const model = await getModel(`/models/${modelJSON}`, modelConfig);
   status.innerHTML = 'Starting';
   const upscaler = new Upscaler({
     model,
   });
+  const { model: _model } = await upscaler.getModel();
+  console.log(_model);
+  debugger;
   status.innerHTML = 'Upscaling...';
-  const upscaledImg = await upscaler.upscale(flower);
+  const start = performance.now();
+  const upscaledImg = await upscaler.upscale(img, {
+    patchSize: 64,
+    progress: (...args) => console.log(modelJSON, ...args),
+  });
+  console.log(`Duration: ${((performance.now() - start) / 1000).toFixed(2)}s`);
   status.innerHTML = 'Image upscaled';
-  makeImg(upscaledImg, 'Upscaled');
   status.innerHTML = 'Image printed';
+  return upscaledImg;
+}
+
+(async () => {
+  for (const [fixture, modelJSON, modelConfig] of [
+
+    [
+      maximDenoisingFixture,
+      'maxim-denoising/models/small/model.json', 
+      maximDenoisingSmall,
+    ],
+    [
+      maximDenoisingFixture,
+      'maxim-denoising/models/medium/model.json', 
+      maximDenoisingMedium,
+    ],
+
+
+    [
+      maximDeblurringFixture,
+      'maxim-deblurring/models/small/model.json', 
+      maximDeblurringSmall,
+    ],
+    [
+      maximDeblurringFixture,
+      'maxim-deblurring/models/medium/model.json', 
+      maximDeblurringMedium,
+    ],
+
+
+    [
+      maximDerainingFixture,
+      'maxim-deraining/models/small/model.json', 
+      maximDerainingSmall,
+    ],
+    [
+      maximDerainingFixture,
+      'maxim-deraining/models/medium/model.json', 
+      maximDerainingMedium,
+    ],
+
+    [
+      maximRetouchingFixture,
+      'maxim-retouching/models/small/model.json', 
+      maximRetouchingSmall,
+    ],
+    [
+      maximRetouchingFixture,
+      'maxim-retouching/models/medium/model.json', 
+      maximRetouchingMedium,
+    ],
+
+    [
+      maximEnhancementFixture,
+      'maxim-enhancement/models/small/model.json', 
+      maximEnhancementSmall,
+    ],
+    [
+      maximEnhancementFixture,
+      'maxim-enhancement/models/medium/model.json', 
+      maximEnhancementMedium,
+    ],
+
+
+    [
+      maximDehazingIndoorFixture,
+      'maxim-dehazing-indoor/models/small/model.json', 
+      maximDehazingIndoorSmall,
+    ],
+    [
+      maximDehazingIndoorFixture,
+      'maxim-dehazing-indoor/models/medium/model.json', 
+      maximDehazingIndoorMedium,
+    ],
+    [
+      maximDehazingOutdoorFixture,
+      'maxim-dehazing-outdoor/models/small/model.json', 
+      maximDehazingOutdoorSmall,
+    ],
+    [
+      maximDehazingOutdoorFixture,
+      'maxim-dehazing-outdoor/models/medium/model.json', 
+      maximDehazingOutdoorMedium,
+    ],
+
+  ]) {
+    const img = await makeImg(fixture, `Original: ${modelJSON}`, 1.5);
+    const upscaledImg = await upscaleImage(modelJSON, modelConfig, img);
+    await makeImg(upscaledImg, `Upscaled: ${modelJSON}`);
+  }
 })();

dev/browser/vite.config.ts

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

dev/node/README.md

@@ -0,0 +1,17 @@
+# Node dev
+
+It's easiest for GPU support to run in Docker.
+
+Build the Dockerfile from the root with:
+
+```
+docker build -t upscaler-dev .
+```
+
+Then, run it with:
+
+```
+docker run -v $PWD:/code \
+    --runtime=nvidia --init --rm upscaler-dev \
+    pnpm install && pnpm dev:node
+```