UpscalerJS test

by Arjan Haverkamp

HTML

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/upscaler@latest/dist/browser/umd/upscaler.min.js"></script>

<h1>UpscalerJS test</h1>

<div style="display:flex">
   <img id="inImg" src="https://i.postimg.cc/X7DTP1yD/flower.png" crossorigin="anonymous">
   <img id="outImg">
</div>

CSS

img {
   width: 512px;
   height: 512px;
}

JavaScript

const upscaler = new Upscaler({
   model: {// OK
      path: 'https://cdn.jsdelivr.net/npm/@upscalerjs/[email protected]/models/x4/model.json',
      scale: 4
   }
});

/*
upscaler.warmup({ patchSize: 64, padding: 5 }).then(() => {
  console.log('All warmed up')
})
*/

const upscaleImage = async img => {
   const upscaledImgSrc = await upscaler.upscale(img, {
      patchSize: 64,
      padding: 5,
   });

   document.getElementById('outImg').src = upscaledImgSrc;
}

document.addEventListener('DOMContentLoaded', () => {
   const img = document.getElementById('inImg');
   upscaleImage(img);
})