UpscalerJS extended demo

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>
<script src="https://cdn.jsdelivr.net/npm/@upscalerjs/esrgan-thick@latest/dist/umd/2x.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@upscalerjs/esrgan-thick@latest/dist/umd/3x.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@upscalerjs/esrgan-thick@latest/dist/umd/4x.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@upscalerjs/esrgan-thick@latest/dist/umd/8x.min.js"></script>

<h1>UpscalerJS: Esrgan Thick</h1>

Scale: <select id="scales">
   <option value="2x">2x</option>
   <option value="3x">3x</option>
   <option value="4x">4x</option>
   <option value="8x">8x</option>
</select>
<button id="upscaleBtn" type="button">Upscale</button>

<hr>

   <div class="compare">
      <div class="in">
         <img src="https://i.postimg.cc/X7DTP1yD/flower.png" crossorigin="anonymous">
         <div class="status">&nbsp;</div>
      </div>
      <div class="out">
         <img src="">
         <div class="status">&nbsp;</div>
      </div>
   </div>

   <div class="compare">
      <div class="in">
         <img src="https://i.postimg.cc/0QWrBBHq/face1.png" crossorigin="anonymous">
         <div class="status">&nbsp;</div>
      </div>
      <div class="out">
         <img src="">
         <div class="status">&nbsp;</div>
      </div>
   </div>
   
   <div class="compare">
      <div class="in">
         <img src="https://i.postimg.cc/9z3X35ds/face2.png" crossorigin="anonymous">
         <div class="status">&nbsp;</div>
      </div>
      <div class="out">
         <img src="">
         <div class="status">&nbsp;</div>
      </div>
   </div>


   <div class="compare">
      <div class="in">
         <img src="https://i.postimg.cc/3R4WzBM4/face3.png" crossorigin="anonymous">
         <div class="status">&nbsp;</div>
      </div>
      <div...

CSS

body {
  font-family: Sans-serif;
}

.compare {
  display: flex;
  margin: 5px 0;
}

.compare .status {
  background: #ddd;
  text-align: center;
}

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

JavaScript

const esrganMap = {
   '2x': ESRGANThick2x,
   '3x': ESRGANThick3x,
   '4x': ESRGANThick4x,
   '8x': ESRGANThick8x
}
const patchSize = 32, padding = 2;

document.addEventListener('DOMContentLoaded', () => {
   const scales = document.getElementById('scales')
   const compares = document.querySelectorAll('.compare')

   document.getElementById('upscaleBtn').addEventListener('click', () => {
   
      const scale = scales.value;
      const upscaler = new Upscaler({
         model: esrganMap[''+scale]
      });

      upscaler.warmup({ patchSize, padding }).then(async () => {
         for (let compare of compares) {
            let inImg = compare.querySelector('.in > img')
            let outImg = compare.querySelector('.out > img')
            let inStatus = compare.querySelector('.in > .status')
            let outStatus = compare.querySelector('.out > .status')
            outImg.src = ''
            outStatus.innerText = '...'
            inStatus.innerText = inImg.naturalWidth + '×' + inImg.naturalHeight
      
            const upscaledImgSrc = await upscaler.upscale(inImg.src, {
               patchSize,
               padding
            });

            outImg.onload = () => {
               outStatus.innerText = outImg.naturalWidth + '×' + outImg.naturalHeight
            }
            outImg.src = upscaledImgSrc
         }
      })
   })
})